/* Studby design system — minimal iOS 26 / Telegram Liquid Glass. Rules: DESIGN.md.
   Loaded last: the single source of truth for materials. Component files keep layout only.
   No glow anywhere: no coloured shadows, no halos, no gradients behind content, no pulsing rings. */

:root, :root[data-theme="light"] {
 --lg-ambient:#f2f2f7;                              /* iOS systemGroupedBackground */
 --lg-surface:rgb(255 255 255 / 78%);               /* glass cell: reads as white on the grey background */
 --lg-border:rgb(60 60 67 / 9%);                    /* hairline instead of a shadow */
 --lg-specular:inset 0 .5px 0 rgb(255 255 255 / 70%);/* thin top edge of the glass, not a glow */
 --lg-blur:blur(20px) saturate(180%);
 --lg-sheet:rgb(242 242 247 / 72%);
 --lg-fill:rgb(118 118 128 / 12%);                  /* iOS tertiarySystemFill: buttons, fields, pills */
 --lg-fill-pressed:rgb(118 118 128 / 20%);
 --lg-accent:#0062cc;                              /* iOS blue, increased-contrast shade: AA on grey glass */
 --ios-blue:var(--lg-accent);
 --lg-disabled:#58585d;
 --lg-danger:#d70015;                              /* iOS red, increased-contrast shade */
 --lg-bar:rgb(255 255 255 / 72%);
 --lg-bar-shadow:0 1px 10px rgb(0 0 0 / 6%);
}
:root[data-theme="dark"] {
 --lg-ambient:#000;
 --lg-surface:rgb(44 44 46 / 62%);                  /* ≈ iOS secondarySystemGroupedBackground on black */
 --lg-border:rgb(84 84 88 / 36%);
 --lg-specular:inset 0 .5px 0 rgb(255 255 255 / 6%);
 --lg-sheet:rgb(28 28 30 / 72%);
 --lg-fill:rgb(118 118 128 / 24%);
 --lg-fill-pressed:rgb(118 118 128 / 34%);
 --lg-accent:#5eadff;
 --ios-blue:var(--lg-accent);
 --lg-disabled:#b3b3b8;
 --lg-danger:#ff6961;
 --lg-bar:rgb(30 30 32 / 70%);
 --lg-bar-shadow:none;
}

/* A fixed background layer: html.ios is forced white in layout.css and GlassKit hides body::before. */
/* iOS 26 tints the status bar from the page's own background, so the root must carry the theme colour
   (layout.css forces html.ios white, which showed as a white glow above the dark theme). */
html,html.ios {background-color:var(--lg-ambient)}
html body.glass-bg,html body {background:transparent}
html body.glass-bg::before,html body::before {content:"";display:block;position:fixed;inset:0;z-index:-1;background:var(--lg-ambient);pointer-events:none}

/* 1. Surfaces: cards, rows, strips — glass with a hairline, never a shadow. */
.glass-card,#profile .glass-card,.home-orders,.install-card,.news-card,.tt-lesson.glass-card,.coin-card--home,
.coin-profile-row,#profile > .profile-password-row,#profile > .profile-logout,.tt-dates,.tt-no-lessons,.tt-week-center:focus-within,
.order-request-files li,.combo-list {
 background:var(--lg-surface);border:.5px solid var(--lg-border);box-shadow:var(--lg-specular);
 -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
}
#profile-form.list ul {background:transparent}
.coin-card--home {background:var(--lg-surface)}
.tt-lesson.glass-card {border-left:3px solid var(--lg-accent)}
#profile > .profile-logout {color:var(--lg-danger)}
#profile > .profile-password-row {border-radius:18px;color:var(--ios-text)}
/* Row links and the full-card edit hit area stay transparent inside their glass card. */
#profile-form .profile-edit,.install-card #install-app,.news-read.glass-btn,#auth .auth-navigation > .glass-btn {background:transparent;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#profile-form .profile-edit {border-radius:26px}

/* 2. Buttons — ONE style for every button (owner, 25.09): a grey glass capsule with the accent label,
   like Telegram and iOS 26 bordered buttons. 50 px, 17 px semibold. Disabled is the same button, faded. */
.glass-btn:not(:where(.app-icon-button,.lg-plain,#install-app,.news-read,.profile-edit,.profile-password-row,.auth-navigation > *)),
#auth [type="submit"],.order-request-files-pick {
 min-height:50px;height:auto;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
 font-size:17px;font-weight:600;letter-spacing:-.2px;line-height:1.2;border-radius:999px;
 background:var(--lg-fill);color:var(--lg-accent);border:0;box-shadow:var(--lg-specular);text-shadow:none;
 -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
}
.glass-btn:not(:where(.app-icon-button,.lg-plain,#install-app,.news-read,.profile-edit,.profile-password-row,.auth-navigation > *)):hover {background:var(--lg-fill);color:var(--lg-accent)}
.glass-btn:not(:where(.app-icon-button,.lg-plain,#install-app,.news-read,.profile-edit,.profile-password-row,.auth-navigation > *)):active,#auth [type="submit"]:active {background:var(--lg-fill-pressed);transform:scale(.98)}
.glass-btn:not(:where(.app-icon-button,.lg-plain,#install-app,.news-read,.profile-edit,.profile-password-row,.auth-navigation > *)) .app-icon {color:currentColor}
/* Disabled: same capsule, label in the secondary text colour at full opacity — readable in both themes (WCAG AA). */
.glass-btn:not(:where(.app-icon-button,.lg-plain)):disabled,.coin-claim:disabled,#auth [type="submit"]:disabled {background:var(--lg-fill);color:var(--lg-disabled);opacity:1;box-shadow:none}
.glass-btn.is-destructive {color:var(--lg-danger)}
/* Inside cards and forms a button spans the full width; in a heading it keeps its natural width. */
:is(.glass-card,.password-dialog-content,#auth,.coin-card-bottom,.order-file) .glass-btn:not(:where(.app-icon-button,.lg-plain,#install-app,.news-read,.profile-edit,.profile-password-row,.auth-navigation > *)),.order-request-files-pick {width:100%;align-self:stretch}
/* «Забрать 1 Studby Coin» is long: the balance on its own line, the button full width under it (DESIGN.md: buttons in cards span the width). */
.coin-card-bottom {flex-wrap:wrap;align-items:center;row-gap:14px}
.coin-card-bottom .coin-balance span {white-space:nowrap}
.coin-card-bottom .coin-claim {flex:1 1 100%;width:100%;max-width:none;min-width:0;height:50px}
/* Round icon buttons (close, theme): the same grey glass, as a circle. */
.glass-btn.app-icon-button:not(:where(.lg-plain,.profile-edit,.profile-password-row)),.order-request-files button {
 background:var(--lg-fill);border:0;color:var(--lg-accent);border-radius:50%;box-shadow:var(--lg-specular);
 -webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);
}
.coin-profile-row:active,.profile-password-row:active {background:var(--lg-fill-pressed)}

/* 3. Pills and counters: grey glass, label in accent (or secondary when closed). */
#active-orders-count,.order-status-pill {background:var(--lg-fill);color:var(--lg-accent);border:0;box-shadow:none}
.order-request-card[data-state="rejected"] .order-status-pill {color:var(--ios-secondary)}
.request-facts>div {background:var(--lg-fill);border:0;box-shadow:none}
/* Secondary text that sits on a grey fill needs the deeper secondary shade to stay AA. */
.request-facts dt,.order-request-card[data-state="rejected"] .order-status-pill {color:var(--lg-disabled)}

/* 4. Fields: iOS filled text fields. */
.glass-input,#auth .glass-input,.glass-select,#profile .glass-select {
 background:var(--lg-fill);border:1px solid transparent;border-radius:12px;box-shadow:none;color:var(--ios-text);
}
.glass-input:focus,.glass-select:focus {background:var(--lg-fill);border-color:var(--lg-accent);box-shadow:none}
.glass-input::placeholder {color:var(--ios-secondary);opacity:.8}

/* 5. Sheets and dialogs: see-through glass; the page stays faintly visible. No dimming, no shadow. */
.password-dialog,.file-dialog,.install-dialog,.sheet-dialog {
 background:var(--lg-sheet);color:var(--ios-text);border:.5px solid var(--lg-border);box-shadow:none;
 -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
}
.password-dialog::backdrop,.file-dialog::backdrop,.install-dialog::backdrop,.sheet-dialog::backdrop {background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.sheet-list {background:var(--lg-surface);border:.5px solid var(--lg-border)}
@media(max-width:767px){.password-dialog,.file-dialog,.install-dialog {border:0;border-radius:0}}
/* Sheet header like iOS 26: no bar and no band. Title and close button float over the form; the form scrolls
   underneath and softly dissolves at the header edge (scroll edge effect), so nothing reads as a plate. */
.password-dialog {--sheet-header:calc(max(16px,env(safe-area-inset-top)) + 64px)}
.password-dialog > .password-dialog-header {position:absolute;top:0;left:0;right:0;z-index:2;background:transparent;border:0;box-shadow:none}
.password-dialog > .password-dialog-content {flex:1 1 auto;padding-top:var(--sheet-header);
 -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--sheet-header) - 30px),#000 calc(var(--sheet-header) + 6px));
 mask-image:linear-gradient(to bottom,transparent calc(var(--sheet-header) - 30px),#000 calc(var(--sheet-header) + 6px))}
@media(min-width:768px){.password-dialog {--sheet-header:72px}}

/* 6. Navigation: the floating dock and the desktop sidebar are glass bars. */
#cabinet-tabs .glass-tab-bar {background:var(--lg-bar);border:.5px solid var(--lg-border);box-shadow:var(--lg-bar-shadow),var(--lg-specular);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
#cabinet-tabs .glass-tab-bar__item.is-active::before {background:var(--lg-fill);box-shadow:none}
@media(min-width:900px) and (min-height:600px){
 #cabinet-tabs .glass-tab-bar {background:var(--lg-surface);box-shadow:var(--lg-specular)}
}

/* Eyebrow over the coin card: sentence case, quiet secondary text (no tracked capitals). */
.coin-eyebrow {text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--ios-secondary)}
#active-orders-count {color:var(--lg-accent)}
.request-type {text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--ios-secondary)}

/* Profile, like iOS Settings: a large title, a quiet avatar, and one grouped inset list with hairline separators
   and small rounded-square icon tiles. */
#profile > h1 {font-size:30px;font-weight:700;letter-spacing:-.8px;color:var(--ios-text);padding-left:2px;margin-bottom:0}
#profile-form .app-avatar {background:var(--lg-fill);color:var(--lg-accent);border:0;box-shadow:none}
.profile-group {display:grid;overflow:hidden;border-radius:18px;background:var(--lg-surface);border:.5px solid var(--lg-border);box-shadow:var(--lg-specular);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.profile-group .coin-card--profile {margin:0}
.profile-group .coin-profile-row,.profile-group .profile-password-row {position:relative;inset:auto;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;height:auto;margin:0;padding:10px 16px;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ios-text);font:inherit;font-size:17px;text-align:left}
.profile-group .profile-password-row {font-weight:400;letter-spacing:0}
.profile-group .profile-password-row::before {content:"";position:absolute;top:0;left:60px;right:0;border-top:.5px solid var(--lg-border)}
.profile-group .coin-profile-row:active,.profile-group .profile-password-row:active {background:var(--lg-fill);transform:none;opacity:1}
.profile-group .coin-profile-icon,.profile-group .profile-password-row > .app-icon:first-child {flex:none;width:30px;height:30px;border-radius:8px}
.profile-group .coin-profile-icon {padding:0;background:none;object-fit:contain}
.profile-group .profile-password-row > .app-icon:first-child {padding:6px;box-sizing:border-box;background:#8e8e93;color:#fff;fill:#fff}
.profile-group .profile-password-row span,.profile-group .coin-profile-title {flex:1;color:var(--ios-text);font-size:17px;font-weight:400;text-align:left}
.profile-group .coin-profile-balance {color:var(--ios-secondary);font-weight:400}
.profile-group .row-chevron {flex:none;width:14px;height:14px;color:var(--ios-secondary);opacity:.6}
.profile-group .coin-status {margin:0;padding:0 16px 12px}
#profile > .profile-logout {min-height:52px;border-radius:18px;font-size:17px}

/* 7. No glow: halos, coloured drop shadows and pulses from older component styles are switched off here. */
.coin-stage::before {display:none}
.request-steps li.is-current .request-step-dot {animation:none;box-shadow:none;background:var(--lg-ambient)}
.tt-date.is-selected {box-shadow:none}
.news-card.glass-card,.glass-btn--tertiary,.glass-btn.app-icon-button:hover {box-shadow:var(--lg-specular)}

/* Accessibility and old engines: solid materials, same geometry. */
@media(prefers-reduced-transparency:reduce){
 .glass-card,#profile .glass-card,.home-orders,.install-card,.news-card,.tt-lesson.glass-card,.coin-card--home,.coin-profile-row,#profile > .profile-password-row,#profile > .profile-logout,.tt-dates,.tt-no-lessons,.order-request-files li,
 .password-dialog,.file-dialog,.install-dialog,.sheet-dialog,#cabinet-tabs .glass-tab-bar {background:var(--ios-panel);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .password-dialog,.file-dialog,.install-dialog,.sheet-dialog {background:var(--ios-bg)}
}

/* University and group suggestions (docs/university-onboarding/PLAN.md): a glass list under the field, the chosen row on grey fill. */
.combo-list [role="option"][aria-selected="true"],.combo-list [role="option"]:active {background:var(--lg-fill-pressed)}
.combo-list [role="option"] + [role="option"] {border-top:.5px solid var(--lg-border)}
.combo-note,.combo-empty {color:var(--lg-disabled)}
.classmates-count strong {color:var(--lg-accent)}

/* First-login walkthrough: the same system surfaces, fields and blue-accent capsules. */
#onboarding {color:var(--ios-text);background:var(--lg-ambient)}
.onb-wordmark,.onb-preview h3,.onb-preview strong {color:var(--ios-text)}
.onb-wordmark::after {content:'✦';font-size:12px;color:var(--lg-accent);vertical-align:top;margin-left:3px}
.onb-description,.onb-preview small,.onb-order-result p,.onb-finish p {color:var(--ios-secondary)}
.onb-mini-brand span,.onb-chevron {color:var(--lg-accent)}
.onb-preview {background:var(--lg-surface);border:.5px solid var(--lg-border);box-shadow:var(--lg-specular);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
.onb-hero-card,.onb-preview-row,.onb-order-result {background:var(--lg-fill);border:.5px solid var(--lg-border)}
.onb-row-icon,.onb-finish-mark {background:var(--lg-fill);color:var(--lg-accent)}
.onb-demo-field {background:var(--lg-fill);border:1px solid var(--lg-border);color:var(--ios-text)}
.onb-demo-save,.onb-coin-claim,.onb-state {background:var(--lg-fill);color:var(--lg-accent)}
.onb-calendar span {color:var(--ios-secondary)}
.onb-calendar span.is-selected {background:var(--lg-fill);color:var(--lg-accent)}
.onb-lesson {background:var(--lg-fill);border:0;border-left:3px solid var(--lg-accent)!important;color:var(--ios-text)}
.onb-coin-bottom strong {color:var(--ios-text)}
.onb-dots span {background:var(--lg-fill-pressed)}
.onb-dots span.is-active {background:var(--lg-accent)}
.onb-status {color:var(--lg-danger)}
@media(prefers-reduced-transparency:reduce){.onb-preview{background:var(--ios-panel);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Registration page: gender choice is a pair of grey fields; the chosen one gets the accent label and edge, no glow. */
.gender-choice span { background: var(--lg-fill); border: .5px solid var(--lg-border); color: var(--lg-disabled); }
.gender-choice input:checked + span { background: var(--lg-fill-pressed); border-color: var(--lg-accent); color: var(--lg-accent); }
.gender-choice input:focus-visible + span { border-color: var(--lg-accent); }
.optional-mark { color: var(--lg-disabled); }