/* =========================================================================
   Assignment Autopsy — design tokens
   A calmer "HUD" look: dark, glassy panels with a single accent color,
   restrained glow instead of bright neon, Discord-style icon rail +
   Teams-style labelled sidebar. Light mode stays close to the original but
   picks up the same rounded, soft-shadow language so both themes feel like
   one product.
   ========================================================================= */
:root{
    --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

    --ink:#1b2233;
    --muted:#667085;
    --faint:#98a2b3;
    --line:#e3e7ee;
    --panel:#ffffff;
    --panel-2:#f6f8fb;
    --bg:#eef1f6;

    --accent:#4169e1;
    --accent-2:#7c5cff;
    --accent-soft:#eef1ff;
    --accent-ring:rgba(65,105,225,.22);

    --ok:#0f9d58;
    --ok-soft:#e3f8ec;
    --warn:#b7791f;
    --warn-soft:#fff6e0;
    --danger:#d1373f;
    --danger-soft:#fdeceb;

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:18px;
    --shadow:0 12px 30px rgba(27,34,51,.06);
    --shadow-lift:0 16px 34px rgba(27,34,51,.12);

    --grid-line:rgba(65,105,225,.05);
    --rail:#dde2ec;
    --sidebar:#f0f2f8;

    color-scheme:light;
    font-family:var(--font-sans);
    color:var(--ink);
    background:var(--bg);
}

@font-face{
    font-family:"Inter";
    src:local("Inter");
    font-display:swap;
}

*{ box-sizing:border-box }
body{ margin:0; min-height:100vh; color:var(--ink); background:transparent }
html{ background:var(--bg) }
[hidden]{ display:none!important }
::selection{ background:var(--accent-ring); color:var(--ink) }

/* ---------- Dark / HUD theme -------------------------------------------- */
html.dark-mode{
    color-scheme:dark;
    --ink:#eef1fb;
    --muted:#9aa6c4;
    --faint:#6b7699;
    --line:rgba(140,155,210,.16);
    --panel:#141a2c;
    --panel-2:#101526;
    --bg:#0b0f1c;

    --accent:#6c8bff;
    --accent-2:#9c7bff;
    --accent-soft:rgba(108,139,255,.12);
    --accent-ring:rgba(108,139,255,.32);

    --ok:#3ddc97;
    --ok-soft:rgba(61,220,151,.12);
    --warn:#f6b73c;
    --warn-soft:rgba(246,183,60,.12);
    --danger:#ff6b6b;
    --danger-soft:rgba(255,107,107,.12);

    --shadow:0 18px 40px rgba(0,0,0,.35);
    --shadow-lift:0 24px 50px rgba(0,0,0,.45);
    --grid-line:rgba(108,139,255,.06);
    --rail:#080b16;
    --sidebar:#0e1322;

    background:
        radial-gradient(1200px 600px at 8% -10%, rgba(108,139,255,.10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(156,123,255,.08), transparent 55%),
        var(--bg);
    background-attachment:fixed;
}
/* Very faint HUD grid — a texture, not a pattern you consciously notice */
html.dark-mode::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse 80% 60% at 20% 0%, #000 0%, transparent 70%);
    mask-image:radial-gradient(ellipse 80% 60% at 20% 0%, #000 0%, transparent 70%);
}

/* ---------- Shell: Discord-style team rail + channel sidebar --------------- */
.app-shell{
    position:relative; z-index:1; display:grid;
    grid-template-columns:72px 248px minmax(0,1fr);
    height:100vh; height:100dvh; overflow:hidden
}
.brand-symbol{
    display:grid; place-items:center; width:40px; height:40px;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
    border-radius:12px; font-size:1.3rem; font-weight:800;
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 22px -8px var(--accent-ring)
}
.server-rail{
    background:var(--rail); display:flex; flex-direction:column; align-items:center;
    gap:8px; padding:12px 0; overflow-y:auto; scrollbar-width:none
}
.server-rail::-webkit-scrollbar{ display:none }
.server-item{
    position:relative; display:grid; place-items:center; width:72px; height:48px; flex:none;
    background:none; border:0; padding:0; box-shadow:none; color:var(--ink);
    text-decoration:none; cursor:pointer
}
.server-item:hover{ background:none; filter:none; transform:none }
.server-icon{
    display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
    background:var(--panel); color:var(--ink); font-weight:800; font-size:.92rem;
    overflow:hidden; transition:border-radius .2s ease, background-color .2s ease, color .2s ease
}
.server-icon img{ width:100%; height:100%; object-fit:cover }
.server-item:hover .server-icon,.server-item.is-active .server-icon{
    border-radius:16px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff
}
.server-item.brand .server-icon{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-size:1.3rem }
.server-item.add .server-icon{ color:var(--ok); font-size:1.5rem; font-weight:500 }
.server-item.add:hover .server-icon{ background:var(--ok); color:#fff }
.server-item::before{
    content:""; position:absolute; left:0; top:50%; width:4px; height:8px;
    border-radius:0 4px 4px 0; background:var(--ink); opacity:0;
    transform:translateY(-50%); transition:height .2s ease, opacity .2s ease
}
.server-item:hover::before{ opacity:1; height:20px }
.server-item.is-active::before{ opacity:1; height:40px }
.rail-divider{ width:32px; height:2px; border-radius:1px; background:var(--line); flex:none }

.tooltip{
    position:fixed; z-index:300; pointer-events:none; transform:translateY(-50%);
    background:#05070f; color:#fff; padding:7px 11px; border-radius:8px;
    font-size:.8rem; font-weight:700; white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.4)
}

.channel-sidebar{ background:var(--sidebar); display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line) }
.channel-header{
    height:56px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:0 16px; border-bottom:1px solid var(--line)
}
.channel-header strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.role-chip{ font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 8px; border-radius:999px; font-family:var(--font-mono) }
.channel-scroll{ flex:1; overflow-y:auto; padding:10px 8px }
.channel-item{
    display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px;
    color:var(--muted); text-decoration:none; font-weight:600; font-size:.9rem;
    transition:background-color .15s ease, color .15s ease
}
.channel-item:hover{ background:var(--accent-soft); color:var(--ink) }
.channel-item.is-current{ background:var(--accent-soft); color:var(--ink) }
.channel-icon{ width:18px; text-align:center; color:var(--faint); flex:none }
.channel-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.channel-name small{ display:block; font-weight:500; color:var(--faint); font-size:.7rem; overflow:hidden; text-overflow:ellipsis }
.channel-category{
    display:flex; align-items:center; justify-content:space-between; margin:16px 10px 6px;
    color:var(--faint); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-mono)
}
.category-add{ color:var(--muted); text-decoration:none; font-size:1.1rem; line-height:1; padding:2px 6px; border-radius:6px }
.category-add:hover{ color:var(--ink); background:var(--accent-soft) }
.channel-empty{ color:var(--faint); font-size:.8rem; margin:6px 10px }

.user-panel{
    flex:none; display:flex; align-items:center; gap:4px; margin:8px; padding:6px; border-radius:12px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), color-mix(in srgb, var(--accent-2) 14%, var(--panel)));
    border:1px solid var(--line)
}
.user-panel-profile{
    flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left;
    background:none; box-shadow:none; color:var(--ink); padding:4px; border-radius:8px; font-weight:600
}
.user-panel-profile:hover{ background:rgba(255,255,255,.08); filter:none; transform:none }
.user-panel-text{ min-width:0; display:grid }
.user-panel-text strong{ font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.user-panel-text small{ color:var(--muted); font-size:.68rem }
.icon-button{
    display:grid; place-items:center; width:34px; height:34px; padding:0; flex:none;
    background:none; color:var(--muted); box-shadow:none; border-radius:8px; font-size:1.05rem
}
.icon-button:hover{ background:rgba(255,255,255,.1); color:var(--ink); filter:none; transform:none }

/* Avatars (shared by rail, panels, members, settings) */
.avatar{ position:relative; display:inline-grid; width:36px; height:36px; flex:none }
.avatar.sm{ width:32px; height:32px }
.avatar.md{ width:44px; height:44px }
.avatar.xl{ width:84px; height:84px }
.avatar-face{
    display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden;
    background:linear-gradient(135deg,#ffb677,#ff8fab); color:#4a1d0a; font-weight:800; font-size:.85rem
}
.avatar.xl .avatar-face{ font-size:1.8rem }
.avatar-face img{ width:100%; height:100%; object-fit:cover }
.avatar .presence{
    position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%;
    background:var(--ok); border:3px solid var(--sidebar)
}

.main-content{ min-width:0; height:100vh; height:100dvh; overflow-y:auto }
.topbar{
    height:56px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px;
    padding:0 clamp(16px,4vw,44px); position:sticky; top:0; z-index:5
}
.sidebar-toggle{ display:none }
.breadcrumb{ display:flex; align-items:center; gap:9px; color:var(--faint); font-size:.82rem; min-width:0 }
.breadcrumb b{ color:var(--line); font-weight:400 }
.breadcrumb strong{ color:var(--ink); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.breadcrumb a{ color:inherit; text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline; color:var(--accent) }
.content-wrap{ max-width:1200px; margin:0 auto; padding:32px clamp(16px,4vw,44px) 60px; position:relative; z-index:1 }

/* Logged-out layout */
.auth-shell{ position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px }
.auth-stack{ width:min(460px,100%) }
.auth-brand{ display:flex; align-items:center; justify-content:center; gap:12px; font-weight:800; color:var(--ink); text-decoration:none; margin-bottom:18px }
.auth-stack .auth{ margin:0; max-width:none }
.lang-switch{ display:flex; justify-content:center; gap:8px; margin-bottom:18px }
.lang-option{
    background:transparent; color:var(--faint); border:1px solid var(--line); box-shadow:none;
    padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:700
}
.lang-option:hover{ background:var(--accent-soft); color:var(--ink); transform:none; filter:none }
.lang-option.is-active{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft) }

h1,h2,h3,p{ margin-top:0 }
h1{ color:var(--ink); font-size:clamp(1.6rem,3vw,2.25rem); letter-spacing:-.02em; margin-bottom:9px; font-weight:800 }
h2{ font-size:1.05rem; margin-top:26px; font-weight:800 }
h3{ font-size:.95rem; font-weight:700 }
.page-kicker{
    color:var(--accent); font-weight:800; font-size:.66rem;
    letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; font-family:var(--font-mono)
}
.page-subtitle{ color:var(--muted); margin-bottom:26px }
.muted{ color:var(--muted) }
.link{ color:var(--accent); text-decoration:none; font-weight:600 }
.link:hover{ text-decoration:underline }

/* ---------- Cards / surfaces --------------------------------------------- */
.card{
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    margin:14px 0;
    color:inherit;
    text-decoration:none;
    box-shadow:var(--shadow);
    animation:surface-in .32s ease both;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease
}
html.dark-mode .card{
    background:color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter:blur(8px);
}
a.card:hover{
    border-color:var(--accent-ring);
    box-shadow:var(--shadow-lift);
    transform:translateY(-2px)
}
@keyframes surface-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
}

.grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)) }
.group-card{ min-height:150px; position:relative; overflow:hidden }
.group-card:before{
    content:""; position:absolute; inset:0 0 auto; height:4px;
    background:var(--card-accent, linear-gradient(90deg, var(--accent), var(--accent-2)))
}
.group-card h2{ margin:14px 0 8px; font-size:1.02rem }
.group-card p{ color:var(--muted); font-size:.85rem; line-height:1.5 }
.card-meta,.meta-list{ display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:.75rem }
.meta-list{ margin:16px 0 }
.assignment-card{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.assignment-card h3{ margin-bottom:6px }
.assignment-card p{ color:var(--muted); font-size:.82rem; margin-bottom:0 }
.assignment-arrow{ color:var(--accent); font-size:1.3rem }
.workspace-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px }
.workspace-hero p{ color:var(--muted); margin-bottom:0 }
.workspace-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ---------- Buttons / forms ---------------------------------------------- */
.button,button{
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
    color:#fff; border:0; cursor:pointer;
    padding:10px 16px; border-radius:var(--radius-sm);
    text-decoration:none; font:inherit; font-weight:700;
    display:inline-block;
    box-shadow:0 8px 20px -10px var(--accent-ring);
    transition:filter .15s ease, transform .15s ease, box-shadow .15s ease
}
.button:hover,button:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.button:active,button:active{ transform:translateY(0) }
.button.secondary{ background:var(--panel-2); color:var(--ink); box-shadow:none; border:1px solid var(--line) }
.button.secondary:hover{ background:var(--accent-soft); filter:none }
.button.warn{ background:var(--danger-soft); color:var(--danger); box-shadow:none }
.button.warn:hover{ filter:none; background:var(--danger-soft); opacity:.85 }
.danger-button{ background:linear-gradient(135deg, var(--danger), #b3323b) }

/* ---------- Invitations table (Discord-style) --------------------------- */
.invite-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px }
.invite-toolbar-label{ color:var(--muted); font-weight:700; font-size:.78rem }
.invite-toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap }
.invite-toolbar-actions form{ display:contents }
.invite-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm) }
.invite-table{ width:100%; border-collapse:collapse; font-size:.82rem; white-space:nowrap }
.invite-table th{ text-align:left; padding:10px 14px; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; background:var(--panel-2) }
.invite-table td{ padding:10px 14px; border-top:1px solid var(--line) }
.invite-table tr.is-paused{ opacity:.5 }
.invite-table code{ font-family:var(--font-mono); font-size:.78rem }
.invite-inviter{ display:flex; align-items:center; gap:8px; font-weight:600 }

.is-loading{ cursor:progress!important; filter:none!important; transform:none!important }
.dot-loader{ display:inline-flex; align-items:center; justify-content:center; gap:4px; height:1em; min-width:24px }
.dot-loader span{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; animation:dot-bounce 1s infinite ease-in-out }
.dot-loader span:nth-child(2){ animation-delay:.15s }
.dot-loader span:nth-child(3){ animation-delay:.3s }
@keyframes dot-bounce{ 0%,80%,100%{ opacity:.35; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }

/* ---------- Right-click quick-edit menu (Discord-style) ---------------- */
[data-context-menu]{ -webkit-touch-callout:none }
@media(pointer:coarse){ [data-context-menu]{ -webkit-user-select:none; user-select:none } }
.context-menu{
    position:fixed; z-index:300; min-width:190px; padding:6px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lift);
    display:flex; flex-direction:column; gap:2px; animation:pop-in .12s ease both
}
html.dark-mode .context-menu{ background:color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter:blur(8px) }
.context-menu-item{
    background:none; box-shadow:none; color:var(--ink); text-align:left; font-weight:600; font-size:.85rem;
    padding:9px 10px; border-radius:6px; width:100%
}
.context-menu-item:hover{ background:var(--accent-soft); color:var(--accent); filter:none; transform:none }
.context-menu-item.danger{ color:var(--danger) }
.context-menu-item.danger:hover{ background:var(--danger-soft); color:var(--danger) }

.split-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px }
.side-panel{ align-self:start }
.member-list{ list-style:none; padding:0; margin:0 }
.member-list li{ padding:9px 0; border-bottom:1px solid var(--line); font-size:.84rem }
.member-list li:last-child{ border-bottom:0 }

form{ display:grid; gap:14px }
label{ display:grid; gap:6px; font-weight:700; font-size:.8rem; color:var(--muted) }
input,textarea,select{
    width:100%; font:inherit; padding:11px 12px; color:var(--ink);
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
    outline:none; transition:border-color .15s ease, box-shadow .15s ease
}
html.dark-mode input,html.dark-mode textarea,html.dark-mode select{ background:var(--panel-2) }
input:focus,textarea:focus,select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring) }
textarea{ min-height:96px; resize:vertical }
.two-col,.profile-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }

.badge{
    display:inline-block; padding:5px 10px; background:var(--accent-soft); color:var(--accent);
    border-radius:999px; margin:0 5px 5px 0; font-size:.68rem; font-weight:800;
    letter-spacing:.03em; font-family:var(--font-mono)
}
.flash{ padding:13px 16px; border-radius:var(--radius-sm); margin:0 0 20px; font-size:.85rem }
.flash-error,.error{ background:var(--danger-soft); color:var(--danger); border:1px solid transparent }
.flash-success,.success{ background:var(--ok-soft); color:var(--ok); border:1px solid transparent }

.auth{ max-width:420px; margin:5rem auto }
.auth .card{ padding:30px }

/* ---------- Discord-style login/register card --------------------------- */
.auth-discord{
    background:#313338; color:#f2f3f5; border:0; border-radius:var(--radius-lg);
    padding:32px 32px 20px; box-shadow:0 20px 50px rgba(0,0,0,.45)
}
.auth-discord h1{ text-align:center; color:#f2f3f5; font-size:1.4rem }
.auth-discord .page-subtitle{ text-align:center; color:#b5bac1; margin-bottom:20px; font-size:.9rem }
.auth-discord label{ color:#b5bac1; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; gap:8px; position:relative }
.auth-discord input{
    background:#1e1f22; border:1px solid #1e1f22; color:#f2f3f5; padding:10px 12px;
    border-radius:4px; font-size:.95rem
}
.auth-discord input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-ring) }
.auth-discord .forgot-link{ position:absolute; top:0; right:0; font-size:.78rem; color:#00a8fc; text-transform:none; font-weight:600 }
.auth-discord button[type="submit"],.auth-discord button:not(.secondary){
    background:var(--accent); box-shadow:none; border-radius:4px; padding:12px 16px; font-size:.95rem; margin-top:6px
}
.auth-discord button[type="submit"]:hover,.auth-discord button:not(.secondary):hover{ filter:brightness(1.08) }
.auth-divider{ display:flex; align-items:center; gap:10px; margin:16px 0 4px; color:#80848e; font-size:.72rem; text-transform:uppercase; font-weight:700 }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:#3f4147 }
.auth-oauth{ width:100%; text-align:center; background:#1e1f22; color:#f2f3f5; border:1px solid #3f4147 }
.auth-oauth:hover{ background:#2b2d31; filter:none }
.auth-switch{ text-align:center; color:#b5bac1; font-size:.85rem; margin-top:14px }
.auth-switch .link{ color:#00a8fc; font-weight:700 }
.auth-discord .username-suggestions{ color:#b5bac1 }
pre{ white-space:pre-wrap; background:var(--panel-2); border-radius:var(--radius-sm); padding:14px; overflow:auto }
.inset{ background:var(--panel-2); box-shadow:none }
.profile-panel{ max-width:900px }
.profile-grid{ align-items:start }
.workspace-code{ word-break:break-all; font-size:.75rem; color:var(--muted); font-family:var(--font-mono) }
.empty-state{ text-align:center; padding:42px 20px; color:var(--muted) }
.empty-state strong{ display:block; color:var(--ink); margin-bottom:5px }

.break-code{ max-width:100%; overflow-wrap:anywhere; word-break:break-word }
.break-code code{ font-size:.72rem }

.toggle-input{ position:absolute; opacity:0; width:0; height:0 }
.toggle-input + .toggle-label{
    display:inline-block; padding:10px 18px; background:var(--panel-2); color:var(--muted);
    border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; font-weight:700;
    user-select:none; transition:all .18s ease
}
.toggle-input + .toggle-label:hover{ background:var(--accent-soft) }
.toggle-input:checked + .toggle-label{
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent
}

/* ---------- File manager --------------------------------------------------*/
.file-manager{ display:grid; gap:8px; margin:12px 0 }
.file-manager-row{
    display:flex; align-items:center; gap:12px; padding:10px 12px;
    border:1px solid var(--line); border-radius:var(--radius-sm)
}
.file-manager-row .file-icon{
    display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
    background:var(--accent-soft); color:var(--accent); flex-shrink:0
}
.file-manager-row>span:nth-child(2){ flex:1; min-width:0 }
.file-manager-row>span:nth-child(2) a{ color:inherit; font-weight:700; text-decoration:none }
.file-manager-row>span:nth-child(2) a:hover{ text-decoration:underline }
.file-manager-row small{ display:block; color:var(--muted); margin-top:2px }
.file-trash-button{ background:transparent; color:var(--danger); box-shadow:none; padding:6px 9px; border-radius:var(--radius-sm); flex-shrink:0 }
.file-trash-button:hover{ background:var(--danger-soft); transform:none }
.file-add-control{
    border:2px dashed var(--line); border-radius:var(--radius-sm); padding:10px 12px;
    color:var(--muted); cursor:pointer; text-align:center; font-size:.82rem; display:block
}
.file-add-control:hover{ border-color:var(--accent); color:var(--accent) }
.file-add-control input{ display:none }
.file-list{ display:grid; gap:8px }
.file-row{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); color:inherit; text-decoration:none }
.file-row:hover{ background:var(--accent-soft); border-color:var(--accent-ring) }
.file-row span:nth-child(2){ flex:1 }
.file-row small{ display:block; color:var(--muted); margin-top:3px }
.file-icon{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent) }

/* ---------- Team icons, members ------------------------------------------- */
.group-icon{
    display:grid; place-items:center; width:48px; height:48px; border-radius:16px; overflow:hidden;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800
}
.group-icon img{ width:100%; height:100%; object-fit:cover }
.group-icon.lg{ width:68px; height:68px; border-radius:22px; font-size:1.4rem; flex:none }
.hero-with-icon{ display:flex; align-items:center; gap:18px }
.group-title-row{ display:flex; align-items:center; gap:8px }
.group-title-row h1{ margin-bottom:0 }
.member-row{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.member-info{ display:flex; align-items:center; gap:10px; min-width:0 }
.member-row small{ display:block; color:var(--faint); font-size:.68rem; text-transform:capitalize; margin-top:3px }
.role-form{ display:flex; align-items:center; gap:5px }
.role-form select{ width:auto; padding:6px; font-size:.7rem }
.role-form button{ padding:6px 8px; font-size:.7rem }

/* ---------- Avatar picker (opens the Discord-style cropper) --------------- */
.avatar-picker{ display:inline-block }
.avatar-picker.centered{ display:block; justify-self:center }
.avatar-circle{
    position:relative; width:104px; height:104px; padding:0; border-radius:50%; overflow:hidden;
    background:var(--panel-2); border:3px solid var(--line); box-shadow:none; color:var(--muted); display:block
}
.avatar-circle:hover{ filter:none; transform:none; border-color:var(--accent) }
.avatar-circle .avatar-face{ font-size:2rem; background:var(--accent-soft); color:var(--accent) }
.avatar-hover{
    position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:14px;
    background:rgba(5,7,15,.62); color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; opacity:0; transition:opacity .15s ease
}
.avatar-circle:hover .avatar-hover,.avatar-circle:focus-visible .avatar-hover{ opacity:1 }

/* ---------- Modals -------------------------------------------------------- */
body.modal-open{ overflow:hidden }
.modal-backdrop{
    position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px;
    background:rgba(3,5,12,.72); backdrop-filter:blur(4px); animation:fade-in .15s ease both
}
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pop-in{ from{ opacity:0; transform:scale(.97) translateY(6px) } to{ opacity:1; transform:none } }
.dialog{
    position:relative; width:min(440px,100%); background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:26px; box-shadow:0 30px 70px rgba(0,0,0,.5); animation:pop-in .18s ease both
}
.dialog h2{ margin:0 0 6px }
.modal-close{
    display:grid; place-items:center; gap:0; width:34px; height:34px; padding:0; border-radius:50%;
    background:transparent; color:var(--muted); box-shadow:none; font-size:1.5rem; line-height:1; position:relative
}
.modal-close:hover{ background:var(--panel-2); color:var(--ink); filter:none; transform:none }
.dialog>.modal-close{ position:absolute; top:12px; right:12px }
.modal-close small{ position:absolute; top:100%; margin-top:2px; font-size:.55rem; font-weight:800; color:var(--faint); letter-spacing:.06em }
.segmented{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--panel-2); border-radius:10px; margin-bottom:16px }
.segmented button{ background:transparent; color:var(--muted); box-shadow:none; padding:8px }
.segmented button:hover{ filter:none; transform:none; color:var(--ink) }
.segmented button.is-active{ background:var(--panel); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.2) }

/* ---------- Settings pop-up (Discord-like) -------------------------------- */
.settings-dialog{
    width:min(1040px,100%); height:min(720px,92vh); display:grid; grid-template-columns:270px minmax(0,1fr);
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.55); animation:pop-in .18s ease both
}
.settings-nav{ background:var(--panel-2); padding:18px 14px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; border-right:1px solid var(--line) }
.settings-user{
    display:flex; align-items:center; gap:12px; text-align:left; background:transparent; color:var(--ink);
    box-shadow:none; padding:8px; border-radius:10px
}
.settings-user:hover{ background:var(--accent-soft); filter:none; transform:none }
.settings-user span:last-child{ display:grid; min-width:0 }
.settings-user strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.settings-user small{ color:var(--muted); font-weight:500 }
.settings-search{ padding:9px 12px; background:var(--panel) }
.settings-links{ display:flex; flex-direction:column; gap:2px }
.settings-links form{ display:block }
.settings-link{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent;
    color:var(--muted); box-shadow:none; padding:9px 10px; border-radius:8px; font-weight:600; font-size:.9rem
}
.settings-link:hover{ background:var(--accent-soft); color:var(--ink); filter:none; transform:none }
.settings-link.is-active{ background:var(--accent-soft); color:var(--ink) }
.settings-link.danger{ color:var(--danger) }
.settings-link.danger:hover{ background:var(--danger-soft); color:var(--danger) }
.settings-icon{ width:18px; text-align:center; color:var(--faint) }
.settings-sub{ display:grid; margin:2px 0 6px 18px; border-left:2px solid var(--line) }
.settings-sub a{ padding:7px 12px; color:var(--muted); text-decoration:none; font-size:.86rem; border-radius:0 8px 8px 0 }
.settings-sub a:hover{ color:var(--ink); background:var(--accent-soft) }
.settings-label{ margin:14px 10px 4px; color:var(--faint); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-mono) }
.settings-links hr{ width:100%; border:0; border-top:1px solid var(--line); margin:8px 0 }

.settings-content{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0 }
.settings-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 28px 10px }
.settings-header h2{ margin:0; font-size:1.25rem }
.settings-scroll{ flex:1; overflow-y:auto; padding:8px 28px 90px; scroll-behavior:smooth }
.settings-page{ max-width:640px; margin:0 auto }
.settings-page section{ padding:14px 0 26px; border-bottom:1px solid var(--line) }
.settings-page section:last-child{ border-bottom:0 }
.settings-page h3{ font-size:1.15rem; margin-bottom:12px }
.setting-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--line) }
.setting-row:last-child{ border-bottom:0 }
.setting-label{ font-weight:700; font-size:.9rem }
.setting-value{ color:var(--muted); font-size:.88rem; text-align:right; overflow:hidden; text-overflow:ellipsis }
.setting-row>.button{ padding:8px 16px }
.setting-edit,.totp-panel{ grid-column:1/-1; display:grid; gap:10px; padding:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius) }
.setting-actions{ display:flex; justify-content:flex-end; gap:8px }
.setting-actions.left{ justify-content:flex-start; flex-wrap:wrap; margin-top:12px }
.form-error{ margin:0; padding:9px 12px; border-radius:8px; background:var(--danger-soft); color:var(--danger); font-size:.82rem }
.totp-qr{ width:190px; padding:8px; background:#fff; border-radius:10px }
.totp-qr svg{ display:block; width:100%; height:auto }
.recovery-list{ columns:2; padding-left:18px; margin:0; font-family:var(--font-mono); font-size:.8rem }
.totp-panel code{ word-break:break-all; font-family:var(--font-mono) }

.profile-editor{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:22px; align-items:start }
.preview-label{ display:block; color:var(--faint); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; font-family:var(--font-mono) }
.preview-card{ position:relative; display:grid; justify-items:start; gap:2px; padding:0 14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); overflow:hidden }
.preview-banner{ height:64px; margin:0 -14px 0; background:linear-gradient(135deg, var(--accent), var(--accent-2)) }
.preview-card .avatar.xl{ margin-top:-42px; margin-bottom:8px; border-radius:50%; box-shadow:0 0 0 5px var(--panel-2) }
.preview-card .avatar .presence{ border-color:var(--panel-2); width:18px; height:18px; right:2px; bottom:2px }
.preview-card small{ color:var(--muted) }

.option-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
.option-card{
    display:grid; gap:10px; justify-items:center; padding:14px; background:var(--panel-2); color:var(--ink);
    border:2px solid var(--line); border-radius:var(--radius); box-shadow:none; font-weight:700
}
.option-card:hover{ border-color:var(--accent-ring); filter:none; transform:none }
.option-card.is-active{ border-color:var(--accent); background:var(--accent-soft) }
.swatch{ width:100%; height:54px; border-radius:8px; border:1px solid var(--line) }
.swatch-dark{ background:linear-gradient(135deg,#0b0f1c 60%,#6c8bff) }
.swatch-light{ background:linear-gradient(135deg,#eef1f6 60%,#4169e1) }

.unsaved-bar{
    position:absolute; left:20px; right:20px; bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px 10px 18px; background:var(--panel-2); border:1px solid var(--accent-ring); border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.35); font-weight:600; font-size:.9rem
}
.unsaved-bar>div{ display:flex; gap:8px }
.unsaved-bar.shake{ animation:shake .35s ease }
@keyframes shake{ 20%,60%{ transform:translateX(-6px) } 40%,80%{ transform:translateX(6px) } }

/* ---------- Image cropper -------------------------------------------------- */
.cropper-backdrop{ z-index:200 }
.cropper-dialog{ width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:0 30px 70px rgba(0,0,0,.55); animation:pop-in .18s ease both }
.cropper-dialog h3{ text-align:center; font-size:1.1rem; margin-bottom:14px }
.cropper-stage{ position:relative; width:340px; max-width:100%; aspect-ratio:1; margin:0 auto; border-radius:12px; overflow:hidden; background:#05070f; cursor:grab; touch-action:none; user-select:none }
.cropper-stage.is-dragging{ cursor:grabbing }
.cropper-stage canvas{ display:block; width:100%; height:100% }
.cropper-mask{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at center, transparent 139px, rgba(3,5,12,.7) 140px) }
.cropper-mask::after{ content:""; position:absolute; left:50%; top:50%; width:280px; height:280px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid rgba(255,255,255,.85) }
.cropper-hint{ text-align:center; color:var(--muted); font-size:.75rem; margin:8px 0 0 }
.cropper-controls{ display:flex; align-items:center; gap:12px; margin:14px 4px }
.cropper-controls input[type=range]{ flex:1; padding:0; accent-color:var(--accent); background:transparent; border:0 }
.cropper-controls input[type=range]:focus{ box-shadow:none }
.cropper-zoom-icon{ color:var(--muted); line-height:1 }
.cropper-zoom-icon.small{ font-size:.7rem }
.cropper-zoom-icon.big{ font-size:1.1rem }
.cropper-dialog footer{ display:flex; justify-content:flex-end; gap:8px; margin-top:6px }

/* ---------- Toasts --------------------------------------------------------- */
.toast-stack{ position:fixed; right:20px; bottom:20px; z-index:400; display:grid; gap:8px }
.toast{ padding:11px 16px; border-radius:10px; background:var(--panel); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-lift); font-size:.86rem; font-weight:600; animation:pop-in .18s ease both }
.toast-success{ border-left:4px solid var(--ok) }
.toast-error{ border-left:4px solid var(--danger) }
.toast.is-leaving{ opacity:0; transform:translateY(6px); transition:all .25s ease }
.username-suggestions{ display:flex; flex-wrap:wrap; gap:6px }
.username-suggestion{ padding:4px 9px; font-size:.72rem; background:var(--panel-2); color:var(--accent); box-shadow:none; border:1px solid var(--line) }
.username-suggestion:hover{ background:var(--accent-soft); filter:none; transform:none }

/* ---------- Rubric builder -------------------------------------------------
   Word-table affordance: hovering a row/column boundary reveals a small
   "+" balloon on that exact seam so a row/column can be inserted right
   there, not just appended at the end. See app.js for the hover logic. */
.builder-heading{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px }
.rubric-builder{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--panel-2) }
.rubric-panel{ margin-top:18px }
.rubric-toolbar{ display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:15px }
.rubric-toolbar label{ min-width:150px }
.rubric-grid-wrap{
    position:relative;
    overflow:auto;
    border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel)
}
.rubric-grid{ border-collapse:separate; border-spacing:0; width:100%; min-width:760px }
.rubric-grid th,.rubric-grid td{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px; vertical-align:top; text-align:left }
.rubric-grid th:last-child,.rubric-grid td:last-child{ border-right:0 }
.rubric-grid tr:last-child td{ border-bottom:0 }
.rubric-grid thead th{ background:var(--panel-2); color:var(--muted); font-size:.72rem; letter-spacing:.02em; font-weight:800; text-transform:uppercase }
.rubric-grid input,.rubric-grid textarea{ border:0; border-radius:6px; background:transparent; padding:7px; min-width:130px }
.rubric-grid input:focus,.rubric-grid textarea:focus{ background:var(--accent-soft); box-shadow:none }
.rubric-grid textarea{ min-height:75px }
.rubric-grid th:first-child,.rubric-grid td:first-child{ min-width:170px }
.rubric-grid .points-column{ width:90px }
.rubric-readonly td,.rubric-readonly th{ font-size:.8rem; line-height:1.4 }
.builder-hint{ color:var(--muted); font-size:.75rem; margin:12px 0 0 }
.toggle-label,.switch-row,.check-label{ display:flex; align-items:center; gap:9px; cursor:pointer }
.toggle-label input,.switch-row input,.check-label input{ position:absolute; opacity:0 }
.toggle-switch{ width:38px; height:22px; border-radius:20px; background:var(--line); position:relative; transition:background-color .18s ease }
.toggle-switch:after{ content:""; position:absolute; width:16px; height:16px; top:3px; left:3px; border-radius:50%; background:#fff; transition:.18s }
.toggle-label input:checked+.toggle-switch,.switch-row input:checked+.toggle-switch,.check-label input:checked+.toggle-switch{ background:linear-gradient(135deg, var(--accent), var(--accent-2)) }
.toggle-label input:checked+.toggle-switch:after,.switch-row input:checked+.toggle-switch:after,.check-label input:checked+.toggle-switch:after{ left:19px }
.reference-files{ border:1px solid var(--line); border-radius:var(--radius); padding:18px }
.reference-list{ padding-left:20px }
.reference-list li{ margin:8px 0 }
.assignment-form{ max-width:1000px }

.rubric-level-header{ position:relative }
.rubric-remove{
    position:absolute; top:4px; right:4px; width:20px; height:20px; padding:0;
    border-radius:50%; background:var(--panel); color:var(--muted); font-size:.8rem; line-height:1;
    box-shadow:0 1px 4px rgba(0,0,0,.12)
}
.rubric-remove:hover{ background:var(--danger-soft); color:var(--danger); transform:none }
.rubric-row-remove{ position:static; display:block; margin-left:auto; margin-top:5px }

/* Insert balloons: an invisible "hit zone" strip sits on each seam; the
   visible bit is a thin accent line + circular "+" that fades in only when
   the pointer is near that specific seam. */
.rubric-insert-row{
    position:absolute; left:0; right:0; height:14px;
    display:flex; align-items:center; justify-content:center;
    pointer-events:auto; z-index:3; cursor:pointer;
    opacity:.16; transition:opacity .12s ease
}
.rubric-insert-row.is-visible,.rubric-insert-row:hover{ opacity:1 }
.rubric-insert-row::before{
    content:""; position:absolute; left:8px; right:8px; top:50%; height:2px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    transform:translateY(-50%)
}
.rubric-insert-col{
    position:absolute; top:0; bottom:0; width:14px;
    display:flex; align-items:center; justify-content:center;
    pointer-events:auto; z-index:3; cursor:pointer;
    opacity:.16; transition:opacity .12s ease
}
.rubric-insert-col.is-visible,.rubric-insert-col:hover{ opacity:1 }
.rubric-insert-col::before{
    content:""; position:absolute; top:8px; bottom:8px; left:50%; width:2px;
    background:linear-gradient(180deg, transparent, var(--accent), transparent);
    transform:translateX(-50%)
}
.rubric-insert-bubble{
    position:relative; z-index:1;
    display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
    font-size:.85rem; font-weight:800; line-height:1;
    box-shadow:0 6px 16px -6px var(--accent-ring);
    transform:scale(.7); transition:transform .12s ease
}
.rubric-insert-row.is-visible .rubric-insert-bubble,
.rubric-insert-row:hover .rubric-insert-bubble,
.rubric-insert-col.is-visible .rubric-insert-bubble,
.rubric-insert-col:hover .rubric-insert-bubble{ transform:scale(1) }

/* ---------- Teacher rubric grading table ---------------------------------*/
.teacher-rubric{ display:grid; gap:8px; margin:14px 0 }
.teacher-rubric-head,.teacher-rubric-row{ display:grid; grid-template-columns:minmax(170px,1fr) repeat(3,minmax(90px,1fr)); gap:8px; align-items:center }
.teacher-rubric-head{ color:var(--muted); font-size:.75rem }
.teacher-rubric-row{ padding:8px; border:1px solid var(--line); border-radius:var(--radius-sm) }
.teacher-rubric-row small{ display:block; color:var(--muted); font-size:.7rem; font-weight:400 }
.teacher-rubric-row select{ grid-column:2/-1 }
.grade-preview{ background:var(--accent-soft); color:var(--accent); border-radius:var(--radius-sm); padding:10px 14px; font-size:.85rem }
.grade-preview strong{ font-size:1.1rem }
.sortable-table{ width:100%; border-collapse:collapse; margin-top:10px }
.sortable-table th,.sortable-table td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; font-size:.82rem }
.sortable-table th{ color:var(--muted); font-weight:700; white-space:nowrap }
.sort-button{ background:transparent; color:var(--muted); box-shadow:none; padding:2px 5px; font-size:.75rem }
.sort-button:hover{ color:var(--accent); background:transparent; transform:none }
.teacher-submissions{ margin-top:18px }

/* ---------- Evaluation panel ----------------------------------------------*/
.evaluation-shell{ margin:18px 0 }
.evaluation-heading{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px }
.evaluation-heading h2{ margin:4px 0 0 }
.status-pill,.result-chip,.confidence{ display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; font-size:.7rem; font-weight:800; font-family:var(--font-mono) }
.status-complete{ background:var(--ok-soft); color:var(--ok) }
.status-pending{ background:var(--warn-soft); color:var(--warn) }
.status-failed{ background:var(--danger-soft); color:var(--danger) }
.evaluation-summary{
    background:linear-gradient(135deg, var(--accent-soft), transparent);
    border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px
}
.evaluation-summary h3{ margin-bottom:8px }
.evaluation-summary p{ font-size:1rem; line-height:1.6 }
.evaluation-summary small{ color:var(--muted) }
.evaluation-columns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.evaluation-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px }
.panel-title,.item-line{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.panel-title{ border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:8px }
.panel-title h3{ margin:0 }
.panel-title span{ color:var(--muted); font-size:.75rem }
.evaluation-item{ padding:14px 0; border-bottom:1px solid var(--line) }
.evaluation-item:last-child{ border-bottom:0 }
.evaluation-item p{ font-size:.84rem; line-height:1.5; margin:9px 0 0 }
.result-fulfilled,.result-complete,.result-completed{ background:var(--ok-soft); color:var(--ok) }
.result-partially-f,.result-partially-fulfilled,.result-partial{ background:var(--warn-soft); color:var(--warn) }
.result-missing{ background:var(--danger-soft); color:var(--danger) }
.confidence{ background:var(--panel-2); color:var(--muted) }
.score-line,.level-line{ display:flex; align-items:baseline; gap:7px; margin-top:12px; color:var(--muted) }
.score-line b{ font-size:1.5rem; color:var(--accent) }
.level-line span{ background:var(--accent-soft); color:var(--accent); padding:6px 9px; border-radius:6px; font-weight:700 }
.evidence-list{ padding-left:18px; color:var(--muted); font-size:.78rem; line-height:1.5 }
.evaluation-empty{ display:grid; gap:6px; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); color:var(--muted) }
.evaluation-empty strong{ color:var(--ink) }
@media(max-width:720px){ .evaluation-columns{ grid-template-columns:1fr } .evaluation-heading{ align-items:flex-start; flex-direction:column } }

/* ---------- Responsive ----------------------------------------------------*/
/* Tablet: keep the Discord-style rail + sidebar, just stack the content columns. */
@media(max-width:1024px){
    .app-shell{ grid-template-columns:72px 220px minmax(0,1fr) }
    .split-layout{ grid-template-columns:1fr }
    .profile-editor{ grid-template-columns:1fr }
}

/* Phone: rail + channel list become a slide-in drawer (like Discord mobile). */
@media(max-width:760px){
    html,body{ overflow-x:hidden }
    .app-shell{ grid-template-columns:minmax(0,1fr) }
    .main-content{ -webkit-overflow-scrolling:touch }
    .sidebar-toggle{ display:grid }

    .server-rail{
        position:fixed; left:0; top:0; bottom:0; width:68px; z-index:41; padding-bottom:calc(92px + env(safe-area-inset-bottom));
        transform:translateX(-100%); transition:transform .22s ease
    }
    .server-item{ width:68px }
    .channel-sidebar{
        position:fixed; left:68px; top:0; bottom:0; width:min(300px, calc(100vw - 68px - 36px)); z-index:42;
        border-radius:22px 0 0 0; border-right:0; transform:translateX(calc(-100% - 68px)); transition:transform .22s ease;
        box-shadow:0 0 40px rgba(0,0,0,.45)
    }
    .app-shell.sidebar-open .server-rail,.app-shell.sidebar-open .channel-sidebar{ transform:none }
    .app-shell.sidebar-open::after{ content:""; position:fixed; inset:0; background:rgba(3,5,12,.55); z-index:39; animation:fade-in .15s ease both }
    .app-shell.sidebar-open .server-rail{ z-index:41 }
    .app-shell.sidebar-open .channel-sidebar{ z-index:42 }
    .channel-scroll{ padding-bottom:96px }
    .channel-item{ padding:11px 12px; font-size:.95rem }

    /* Profile banner floats over the bottom of rail + list, with the settings button beside it. */
    .user-panel{
        position:absolute; left:-60px; right:8px; bottom:calc(10px + env(safe-area-inset-bottom)); margin:0; padding:8px 10px 8px 8px;
        border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.4); z-index:3
    }
    .user-panel-profile .avatar{ width:44px; height:44px }
    .user-panel-text strong{ font-size:.95rem }
    .icon-button{ width:40px; height:40px }

    .topbar{ height:52px; padding:0 12px }
    .sidebar-toggle{ width:40px; height:40px; color:var(--ink) }
    .content-wrap{ padding:18px 14px calc(40px + env(safe-area-inset-bottom)) }
    .workspace-hero{ display:block; margin-bottom:18px }
    .workspace-hero .workspace-actions{ margin-top:14px }
    .workspace-actions .button,.workspace-actions button{ flex:1; text-align:center }
    .hero-with-icon{ gap:12px }
    .group-icon.lg{ width:52px; height:52px; border-radius:16px }
    h1{ font-size:1.45rem }
    .two-col,.profile-grid{ grid-template-columns:1fr }
    .grid{ grid-template-columns:1fr }
    .card{ padding:16px }
    .assignment-card{ align-items:flex-start }
    .assignment-arrow{ display:none }
    .teacher-submissions,.rubric-grid-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
    .teacher-rubric-head{ display:none }
    .teacher-rubric-row{ grid-template-columns:1fr }
    .teacher-rubric-row select{ grid-column:auto }
    .file-manager-row{ flex-wrap:wrap }
    .member-row{ flex-wrap:wrap }

    /* 16px inputs stop iOS from zooming on focus; larger tap targets. */
    input,textarea,select{ font-size:16px }
    .button,button{ min-height:40px }
    .toast-stack{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)) }

    /* Dialogs become bottom sheets / full-screen pages. */
    .modal-backdrop{ padding:0; place-items:end stretch }
    .dialog{ width:100%; border-radius:22px 22px 0 0; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); max-height:92dvh; overflow-y:auto }
    .settings-dialog{
        width:100%; height:100dvh; border-radius:0; border:0; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)
    }
    .settings-nav{ flex-direction:row; align-items:center; overflow-x:auto; padding:10px 12px; gap:6px; border-right:0; border-bottom:1px solid var(--line) }
    .settings-user{ padding:4px; flex:none }
    .settings-user span:last-child,.settings-search,.settings-sub,.settings-label,.settings-links hr{ display:none }
    .settings-links{ flex-direction:row; gap:4px }
    .settings-links form{ display:contents }
    .settings-link{ white-space:nowrap; width:auto; padding:9px 12px }
    .settings-header{ padding:12px 16px 4px }
    .settings-header .modal-close small{ display:none }
    .settings-scroll{ padding:8px 16px calc(100px + env(safe-area-inset-bottom)) }
    .setting-row{ grid-template-columns:1fr auto }
    .setting-value{ grid-column:1/-1; text-align:left; order:3 }
    .unsaved-bar{ left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); flex-wrap:wrap }
    .invite-toolbar-actions{ width:100% }
    .invite-toolbar-actions form{ display:block; flex:1 }
    .invite-toolbar-actions button{ width:100% }
    .cropper-dialog{ border-radius:22px 22px 0 0 }
    .auth-discord{ padding:24px 18px 16px }
    .auth-shell{ padding:16px; align-items:start }
}