/* ============================ ADMIN PANEL ============================ Modern "graphite / ember" scheme — deep neutral charcoal with a warm ember-glow at the corners so the coral accent still owns the surface, but the base reads clean & premium instead of muddy wine. graphite base → clearly-lifted cards → coral orange accent → amber highlights per-kind tags: jade · amber · rose · violet */ :root{ --adm-bg: #0d0e13; /* deep graphite (near-black, slight cool undertone) */ --adm-bg-glow: radial-gradient(ellipse 55% 45% at 100% 0%, rgba(255,133,88,.10), transparent 62%), radial-gradient(ellipse 60% 45% at 0% 100%, rgba(251,191,36,.055), transparent 65%), radial-gradient(ellipse 90% 60% at 50% -10%, rgba(255,255,255,.025), transparent 70%); --adm-panel: #14161e; /* topbar + sidebar — one step above bg */ --adm-card: #1a1d27; /* cards — cleanly lifted (~+8 luminance) */ --adm-card-hi: #232735; /* card hover / active state */ --adm-border: rgba(255,255,255,.06); /* neutral, low-noise separator */ --adm-border-hi: rgba(255,140,90,.30); /* warm ember on hover/focus */ --adm-text: #f2f4f8; /* crisp near-white primary text */ --adm-muted: #8b93a4; /* neutral cool-gray, no wine muddiness */ --adm-accent: #ff8a5b; /* coral ember (slightly brighter than before) */ --adm-accent-2: #fbbf24; /* amber gold — kept as brand highlight */ --adm-success: #34d399; --adm-warning: #fbbf24; --adm-danger: #f87186; --k-writing: #34d399; --k-reading: #f59e0b; --k-listening: #f87186; --k-articles: #c084fc; } /* ---- "admin mode": hide every trace of the public site ---- */ body.admin-mode > header, body.admin-mode > footer, body.admin-mode > .aurora, body.admin-mode > .wrap, body.admin-mode > section, body.admin-mode > .overlay:not(#adminOverlay){ display:none !important; } /* also kill the body's grain texture and any decorative pseudo-elements so the admin background stays clean even if you scroll. */ body.admin-mode::after, body.admin-mode::before{ display:none !important; } /* Pause the homepage's auto-running animations while we're in the dashboard (the band-checker demo loops every ~5 s in the background) */ body.admin-mode .checker, body.admin-mode .topic-list, body.admin-mode #toast{ visibility:visible; } /* NEVER give a scrollable `overflow` here (it used to be `overflow:auto`). Any ancestor whose overflow is scroll/auto/hidden becomes the scrollport for every `position:sticky` descendant — so the pinned topbar and the sidebar rail "stuck" to a box that itself never scrolls, i.e. they scrolled away with the page. That is the exact trap already documented on in 00-base.css. `clip` contains stray horizontal overflow WITHOUT creating a scroll container. */ body.admin-mode{ overflow-x:clip; overflow-y:visible; background:var(--adm-bg); } body.admin-mode #adminOverlay{ position:static; background:transparent; backdrop-filter:none; display:block; padding:0; place-items:initial; /* THE DASHBOARD WOULD NOT SCROLL WITHOUT THESE TWO. 42-responsive-system.css gives EVERY `.overlay` `overflow-y:auto` + `overscroll-behavior:contain`, so a tall modal scrolls inside its own scrim instead of dragging the page behind it. Correct for a modal — but in admin-mode this element is not a modal, it IS the page, and the reset above only undid position/display/padding. So it stayed a scroll container (`overflow-y:auto`) whose content exactly fits it (scrollHeight === clientHeight, i.e. nothing to scroll), and `contain` then refused to chain the wheel up to the document. Every trackpad swipe landed on a box that could not move and would not pass the gesture on: the panel was scrollable by layout and frozen in the hand. Measured: 2279px of content, 900px viewport, zero scroll. `visible` also keeps this from becoming the scrollport for the sticky topbar and rail — the same trap documented on just above. */ overflow:visible; overscroll-behavior:auto; } /* HARD GUARANTEE: the admin panel's container may never paint outside admin mode. `#adminOverlay` carries `.open` for as long as the panel is mounted, and at least one path drops `body.admin-mode` WITHOUT clearing it — a non-admin logging in on a tab that was showing the panel (05-auth-otp.js toggles the class directly instead of calling closeAdmin()). The moment admin-mode goes, the base `.overlay` rules take over and this becomes what they describe: `position:fixed; inset:0`, a 70%-black scrim with a 6px backdrop blur at z-index 100, `overflow-y:auto` + `overscroll-behavior: contain`. The student then gets the whole site dimmed, blurred, unscrollable AND unclickable (elementFromPoint at screen centre returns the overlay), with no way back but a reload. Declarative on purpose: the JS cleanup is fixed too, but this is the rule that makes a future missed path impossible rather than merely unlikely. */ body:not(.admin-mode) #adminOverlay{ display:none !important; } body.admin-mode #adminOverlay .admin-modal{ width:100%; height:auto; min-height:100vh; max-width:none; max-height:none; border-radius:0; border:none; animation:none; background:var(--adm-bg-glow), var(--adm-bg); /* full-bleed and square-cornered — there is nothing left to clip, and the modal's `overflow:hidden` would break the sticky chrome (see above). */ overflow-x:clip; overflow-y:visible; } .admin-link{ cursor:pointer; opacity:.5; transition:opacity .2s; } .admin-link:hover{ opacity:1; color:var(--lime); } .admin-modal{ width:min(960px, 96vw); height:min(720px, 92vh); max-height:none; display:flex; flex-direction:column; padding:0; background:var(--adm-bg-glow), var(--adm-bg); border:1px solid var(--adm-border); border-radius:18px; overflow:hidden; animation:rise .35s forwards; } .admin-modal *{ font-family:'Hanken Grotesk', 'Native Emoji', sans-serif; } /* ---- topbar ---- */ .adm-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; background:var(--adm-panel); border-bottom:1px solid var(--adm-border); position:sticky; top:0; z-index:5; } body.admin-mode .adm-top{ backdrop-filter:blur(14px); background:var(--adm-panel); } .adm-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--adm-text); } .adm-brand-mark{ width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg, #ff7849, #fbbf24); display:grid; place-items:center; color:#fff; font-size:16px; font-weight:800; box-shadow:0 0 18px rgba(255,120,73,.45); } .adm-brand-sub{ font-size:13px; color:var(--adm-accent-2); font-weight:700; letter-spacing:.8px; text-transform:uppercase; } .adm-top-right{ display:flex; align-items:center; gap:12px; } /* "Back to site" button — only shown when admin is the active page */ .adm-back{ display:none; align-items:center; gap:6px; background:transparent; border:1px solid var(--adm-border); color:var(--adm-text); font-weight:600; font-size:15px; padding:7px 13px; border-radius:9px; cursor:pointer; transition:border-color .15s, background .15s; } .adm-back:hover{ border-color:var(--adm-border-hi); background:rgba(255,120,73,.08); } body.admin-mode .adm-back{ display:inline-flex; } .adm-user-info{ text-align:right; line-height:1.2; } .adm-user-name{ font-size:15px; font-weight:700; color:var(--adm-text); } .adm-user-id{ font-size:13px; color:var(--adm-muted); } .adm-logout{ background:transparent; border:1px solid var(--adm-border); color:var(--adm-muted); padding:6px 12px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:600; transition:color .2s, border-color .2s; } .adm-logout:hover{ color:var(--adm-danger); border-color:rgba(248,113,113,.4); } /* Phones: the topbar is four blocks of text fighting over ~340px, and at the larger type they all wrapped — "Bandly / Admin", "Abdulloh / Tutor", "Sign / out" — turning a 70px bar into 190px of pinned chrome (the rail parks under it, so that height is stolen from every page). Drop what is repeated elsewhere: the wordmark is already the page you are on, and the Telegram id is on the Admins page. */ @media (max-width:760px){ .adm-top{ padding:10px 14px; gap:10px; } .adm-brand{ font-size:15px; gap:8px; min-width:0; } .adm-brand > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .adm-brand-sub{ display:none; } .adm-user-id{ display:none; } .adm-user-name{ font-size:14px; max-width:34vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .adm-logout{ white-space:nowrap; padding:6px 10px; font-size:13px; } .adm-top-right{ gap:8px; } } /* ---- two-column shell: sidebar + main ---- */ .adm-shell{ display:grid; grid-template-columns:230px 1fr; flex:1; overflow:hidden; align-items:start; } body.admin-mode .adm-shell{ /* same reason as .admin-modal above: a scrollable overflow here would become the sticky scrollport and unpin the rail. */ overflow-x:clip; overflow-y:visible; } .adm-side{ background:var(--adm-panel); border-right:1px solid var(--adm-border); padding:14px 10px 20px; display:flex; flex-direction:column; gap:2px; /* In admin-mode the body scrolls, so the sidebar would scroll away with the page. Pin it to the viewport so it stays visible. */ position:sticky; top:0; height:100vh; overflow-y:auto; } /* Full-page admin: the document is the scroller and .adm-top is pinned at the very top, so the rail parks flush underneath it — not at top:0, where it would slide under the topbar (z-index 5) and lose its first tab, and not at a full 100vh, which would push its last tab below the fold. --adm-top-h is measured off .adm-top by 04-admin.js; 71px is the desktop height and only matters for the frame before that runs. */ body.admin-mode .adm-side{ top:var(--adm-top-h, 71px); height:calc(100vh - var(--adm-top-h, 71px)); height:calc(100dvh - var(--adm-top-h, 71px)); z-index:3; /* below the topbar, above scrolled content */ } /* sidebar section labels — group related tabs together */ .adm-side-section{ font-size:12.5px; color:var(--adm-muted); font-weight:800; text-transform:uppercase; letter-spacing:1px; padding:14px 14px 8px; } .adm-side-section:first-child{ padding-top:6px; } .adm-side hr{ border:none; height:1px; background:var(--adm-border); margin:10px 4px; } .adm-tab{ display:flex; align-items:center; gap:11px; background:transparent; border:none; cursor:pointer; padding:11px 13px; border-radius:11px; color:var(--adm-muted); font-size:16.5px; font-weight:600; text-align:left; transition:background .2s, color .2s, transform .15s; position:relative; overflow:hidden; text-decoration:none; /* anchors don't get the default underline */ } .adm-tab:hover, .adm-tab:focus{ text-decoration:none; } .adm-tab::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; background:linear-gradient(180deg, #ff7849, #fbbf24); border-radius:3px; opacity:0; transform:translateX(-3px); transition:opacity .2s, transform .2s; } .adm-tab:hover{ background:rgba(255,120,73,.07); color:var(--adm-text); transform:translateX(2px); } .adm-tab.active{ background:linear-gradient(90deg, rgba(255,120,73,.16), rgba(251,191,36,.04)); color:var(--adm-text); } .adm-tab.active::before{ opacity:1; transform:translateX(0); } /* gradient-tinted icon square inside the sidebar tab */ .adm-tab-ico{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; background:rgba(255,255,255,.04); color:var(--adm-muted); transition:background .2s, color .2s; } .adm-tab-ico svg{ width:16px; height:16px; stroke-width:1.8; } .adm-tab:hover .adm-tab-ico, .adm-tab.active .adm-tab-ico{ color:var(--adm-text); } .adm-tab.active .adm-tab-ico{ background:linear-gradient(135deg, #ff7849, #fbbf24); color:#14080d; box-shadow:0 4px 12px -4px rgba(255,120,73,.5); } .adm-tab .adm-tab-badge{ margin-left:auto; background:rgba(255,255,255,.06); color:var(--adm-muted); font-size:13px; font-weight:800; padding:2px 8px; border-radius:99px; min-width:22px; text-align:center; } .adm-tab.active .adm-tab-badge{ background:rgba(20,8,13,.18); color:var(--adm-text); } /* Mobile: the rail becomes a slide-in DRAWER — see 41-admin-mobile.css, which owns every ≤760px rule for the shell and is loaded last. This used to collapse the rail into a horizontal scrolling strip. With 12 tabs that showed about two at a time, gave no sense of what else existed, and had to drop the group labels and badges to fit — so the one thing a phone admin needs most, knowing where they are and what they can reach, was the thing it removed. Only the shell's single-column switch stays here; the drawer's own positioning lives with the rest of the phone pass. */ @media (max-width:760px){ .admin-modal{ height:96vh; } .adm-shell{ grid-template-columns:1fr; } } /* phones: stack the fixed label|field editor grids (a 160–200px label column leaves almost nothing for the input at ~360px) and tighten content padding. */ @media (max-width:600px){ .adm-main{ padding:16px 14px; } .adm-grid-2, .rd-imp-step2-grid{ grid-template-columns:1fr !important; } } .adm-main{ background:var(--adm-bg); overflow-y:auto; padding:22px 26px; } .adm-section{ display:none; } .adm-section.active{ display:block; animation:fadeIn .25s ease; } @keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } /* ============================ READING ADMIN (rebuild) ============================ One reading "mock resource" per visit. Empty state → builder with collapsible passage cards, rich-text passage content, and a question type dropdown. Distinct teal palette so the section feels its own. */ :root{ --rd-primary: #11A37F; --rd-primary-hi: #0E8A6C; --rd-primary-soft: rgba(17,163,127,.10); --rd-primary-ring: rgba(17,163,127,.22); --rd-text: #15202B; --rd-muted: #5B6B78; --rd-line: #E4E8EC; --rd-line-hi: #C9D2DA; --rd-card: #FFFFFF; --rd-card-tint: #F8FAFB; --rd-danger: #E0533D; --rd-danger-soft: rgba(224,83,61,.10); /* The danger twin of --rd-primary-ring. 21-admin-listening.css hangs the Remove button's hover ring on this; it was never declared, so that box-shadow was invalid at computed-value time and the ring simply never appeared. */ --rd-danger-ring: rgba(224,83,61,.22); --rd-focus-ring: rgba(17,163,127,.30); } [data-theme="dark"]{ --rd-text: #E6EEF5; --rd-muted: #94A3B0; --rd-line: #29333E; --rd-line-hi: #3A4754; --rd-card: #1A2129; --rd-card-tint: #141A21; --rd-primary-soft: rgba(17,163,127,.18); --rd-focus-ring: rgba(17,163,127,.45); } .rd-root{ color:var(--rd-text); } /* ---- AI Content Import modal ---- */ .rd-imp-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; animation:fadeIn .15s ease; } .rd-imp-modal{ width:min(720px, 100%); max-height:88vh; background:var(--rd-card); border:1px solid var(--rd-line); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; overflow:hidden; color:var(--rd-text); animation:rise .25s ease; } @keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .rd-imp-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rd-line); } .rd-imp-title{ font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif; font-weight:800; font-size:22px; color:var(--rd-text); } .rd-imp-body{ padding:22px; overflow-y:auto; flex:1; } .rd-imp-foot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--rd-line); background:var(--rd-card-tint); } /* Step indicator */ .rd-imp-steps{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .rd-imp-step{ display:inline-flex; align-items:center; gap:8px; opacity:.55; } .rd-imp-step.active{ opacity:1; } .rd-imp-step.done{ opacity:1; } .rd-imp-step-n{ width:30px; height:30px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--rd-card-tint); border:1px solid var(--rd-line); color:var(--rd-muted); font-weight:700; font-size:15px; } .rd-imp-step.active .rd-imp-step-n{ background:var(--rd-primary); color:#fff; border-color:var(--rd-primary); } .rd-imp-step.done .rd-imp-step-n{ background:var(--rd-primary-soft); color:var(--rd-primary); border-color:var(--rd-primary-ring); } .rd-imp-step-l{ font-weight:700; font-size:16px; color:var(--rd-text); } .rd-imp-step:not(.active):not(.done) .rd-imp-step-l{ color:var(--rd-muted); } .rd-imp-step-sep{ color:var(--rd-muted); } .rd-imp-intro{ color:var(--rd-muted); font-size:16.5px; margin:0 0 16px 0; line-height:1.55; } /* Drop zone */ .rd-imp-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:46px 20px; min-height:180px; border:1.5px dashed var(--rd-line-hi); border-radius:14px; background:var(--rd-card-tint); cursor:pointer; transition:border-color .12s, background .12s; } .rd-imp-drop:hover, .rd-imp-drop.drag{ border-color:var(--rd-primary); background:var(--rd-primary-soft); } /* Visual children of the drop zone — keep them out of drag-event routing so the