:root {
    --bg: #202434;
    --bg-deep: #191d2b;
    --sidebar: #2a2f43;
    --sidebar-dark: #252a3c;
    --topbar: #282d40;
    --surface: #2d3247;
    --surface-2: #272c3f;
    --surface-3: #222638;
    --line: rgba(255, 255, 255, .055);
    --line-strong: rgba(255, 255, 255, .09);
    --text: #c8cde0;
    --text-strong: #ffffff;
    --muted: #9ca3ba;
    --muted-2: #737b96;
    --accent: #27c5c7;
    --accent-soft: rgba(39, 197, 199, .12);
    --green: #37d67a;
    --green-hover: #49e38b;
    --red: #f05267;
    --red-hover: #ff6477;
    --blue: #5b6cf4;
    --amber: #efb64c;
    --purple: #8c6bff;
    --gold: #d7b56d;
    --radius: 2px;
    --sidebar-width: 238px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
code { color: #d8dbff; }
.svg-icon { width: 15px; height: 15px; display: inline-block; fill: currentColor; vertical-align: -3px; flex: 0 0 auto; }

/* Auth */
.auth-body {
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(rgba(32,36,52,.88), rgba(32,36,52,.96)), url('../images/bg-auth.png') center / cover fixed no-repeat, var(--bg);
}
.auth-shell {
    width: min(980px, 100%);
    min-height: 520px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
}
.auth-showcase {
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
}
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row img { width: 44px; height: 44px; object-fit: contain; }
.brand-kicker, .tag, .kicker {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10px;
    font-weight: 850;
}
.auth-showcase h1 { margin: 18px 0 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.04em; color: #fff; }
.auth-card { border-top: 1px solid var(--line); padding-top: 20px; }
.auth-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.auth-stats { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.auth-stat { min-width: 105px; }
.auth-stat span { display: block; color: var(--muted-2); font-size: 11px; margin-bottom: 5px; }
.auth-stat strong { font-size: 14px; color: #fff; }
.login-side { display: grid; place-items: center; padding: 34px; background: var(--bg-deep); }
.login-card {
    width: min(430px, 100%);
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: var(--surface);
    padding: 28px;
}
.login-card h2 { font-size: 28px; margin: 10px 0 8px; letter-spacing: -.035em; color:#fff; }
.login-card.compact { max-width: 520px; }
.subtext { color: var(--muted); line-height: 1.65; margin: 0 0 22px; }
.login-foot { margin-top: 16px; color: var(--muted-2); font-size: 11px; text-align: center; }

/* Shell */
.app-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    background: var(--bg);
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--sidebar);
    border-right: 1px solid rgba(0,0,0,.16);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface) transparent;
}
.sidebar-brand {
    height: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: var(--sidebar);
    border-bottom: 1px solid rgba(255,255,255,.025);
}
.sidebar-brand img { width: 27px; height: 27px; object-fit: contain; }
.sidebar-brand strong {
    color: var(--accent);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .02em;
}
.sidebar-hamburger { margin-left: auto; color: #aeb6cc; display: inline-grid; place-items: center; }
.side-nav { padding: 12px 0 10px; }
.nav-section { padding: 0 14px 11px; }
.nav-heading {
    padding: 12px 0 7px;
    color: var(--muted-2);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .085em;
    font-weight: 900;
}
.nav-link {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--radius);
    color: #bbc0d1;
    font-size: 11px;
    font-weight: 650;
    padding: 0 8px;
    margin-bottom: 2px;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}
.nav-link:hover { background: rgba(255,255,255,.035); color: #fff; }
.nav-link.active {
    color: var(--accent);
    background: rgba(39,197,199,.08);
    box-shadow: inset 3px 0 0 var(--accent);
}
.nav-icon { width: 17px; display: inline-grid; place-items: center; color: currentColor; opacity: .94; }
.nav-icon .svg-icon { width: 14px; height: 14px; }
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer {
    margin: 8px 14px 18px;
    padding: 12px 8px;
    border-top: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 10.5px;
}

.main { min-width: 0; background: var(--bg); }
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 0 18px;
    background: var(--topbar);
    border-bottom: 1px solid rgba(255,255,255,.025);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.topbar-shortcuts { display: none !important; }
.mobile-toggle {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: #c5cadb;
    display: inline-grid;
    place-items: center;
}
.mobile-toggle:hover { background: rgba(255,255,255,.05); color:#fff; }
.notice-dot {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #adb4cc;
}
.notice-dot b {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 8px;
    line-height: 1;
}
.current-user { display: flex; align-items: center; gap: 8px; color: #dfe2f0; }
.current-user-name { max-width: 135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-circle {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #273043, #576175);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
}
.logout-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius);
    color: #aeb4cc;
}
.logout-icon:hover { background: rgba(255,255,255,.05); color: #fff; }
.content { padding: 22px 22px 40px; }

/* Page headers */
.page-head, .page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 15px;
}
.page-head-main { min-width: 0; }
.page-title {
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .035em;
    font-weight: 900;
}
.page-head p { max-width: 960px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; font-size: 12px; }
.page-actions, .quick-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.meta-line span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    background: rgba(255,255,255,.035);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.meta-line strong { color: #fff; margin-left: 4px; }

/* Forms and buttons */
.field { margin-bottom: 12px; min-width: 0; }
.field label, .field-label { display: block; color: #dfe3f4; font-size: 10.5px; font-weight: 800; margin-bottom: 5px; }
.input, .select, .textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.055);
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--radius);
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.input, .select { height: 32px; padding: 0 9px; }
.textarea { min-height: 98px; padding: 10px 9px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(39,197,199,.45); box-shadow: 0 0 0 3px var(--accent-soft); background: #25293d; }
.input::placeholder, .textarea::placeholder { color: rgba(214,217,234,.38); }
select option { background: var(--surface); color: #fff; }
.alert { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; line-height: 1.45; background: var(--surface); }
.alert-error { border-color: rgba(240,82,103,.35); color: #ffcbd2; }
.alert-success { border-color: rgba(55,214,122,.35); color: #cdfbdd; }
.alert-info { border-color: rgba(39,197,199,.35); color: #caf6f6; }
.submit-btn, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: var(--radius);
    border: 0;
    background: var(--green);
    color: #fff;
    font-weight: 850;
    font-size: 10.5px;
    line-height: 1;
    white-space: nowrap;
}
.submit-btn { width: 100%; height: 38px; }
.btn:hover, .submit-btn:hover { background: var(--green-hover); }
.btn-secondary { background: rgba(255,255,255,.065); color: #d6d9ea; }
.btn-secondary:hover { background: rgba(255,255,255,.10); color:#fff; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red-hover); }
.btn-green { background: var(--green); color: #fff; }
.btn-small { min-height: 25px; padding: 0 8px; font-size: 10px; }
.as-link { text-decoration: none; }

/* Cards and panels */
.card, .panel-block, .action-panel, .data-card {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.card-header { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.035); }
.card-title { color: #fff; font-weight: 850; font-size: 11.5px; }
.card-body { padding: 14px; }
.card-body.tight { padding: 0; }
.panel-block { padding: 14px; margin-bottom: 14px; }
.inner-panel { background: rgba(0,0,0,.10); border-radius: var(--radius); padding: 12px; }
.action-panel { margin-bottom: 14px; }
.action-panel > summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; cursor: pointer; list-style: none; color: #fff; font-weight: 850; background: rgba(0,0,0,.035); }
.action-panel > summary::-webkit-details-marker { display: none; }
.action-panel > summary::after { content: "+"; color: var(--muted); font-weight: 900; }
.action-panel[open] > summary::after { content: "−"; }
.action-panel-body { padding: 14px; border-top: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.helper-text, .muted { color: var(--muted); line-height: 1.55; }
.empty-state { padding: 28px 18px; text-align: center; color: var(--muted); }
.pill, .role-badge, .status-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 21px; padding: 0 7px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.045); color: #e8eafb; font-size: 10px; font-weight: 800; white-space: nowrap; }
.role-owner { color: #ffefa8; border-color: rgba(215,181,109,.25); background: rgba(215,181,109,.10); }
.role-co-owner { color: #e8d8ff; border-color: rgba(140,107,255,.25); background: rgba(140,107,255,.10); }
.role-admin { color: #cfd5ff; border-color: rgba(91,108,244,.25); background: rgba(91,108,244,.10); }
.role-global-mod { color: #ffdca9; border-color: rgba(239,182,76,.25); background: rgba(239,182,76,.10); }
.role-mod { color: #c8ffdc; border-color: rgba(55,214,122,.25); background: rgba(55,214,122,.10); }
.role-support { color: #e5e7eb; }
.status-open, .severity-high, .severity-critical { color:#ffcbd2; border-color:rgba(240,82,103,.25); background:rgba(240,82,103,.10); }
.status-active, .severity-low { color:#c8ffdc; border-color:rgba(55,214,122,.25); background:rgba(55,214,122,.10); }
.status-closed, .status-inactive { color:#d5d7e4; background:rgba(148,163,184,.07); }
.severity-medium { color:#ffe1ae; border-color:rgba(239,182,76,.25); background:rgba(239,182,76,.10); }
.status-investigating { color:#e8d8ff; border-color:rgba(140,107,255,.25); background:rgba(140,107,255,.10); }
.status-waiting { color:#d3d8ff; border-color:rgba(91,108,244,.25); background:rgba(91,108,244,.10); }

/* Dashboard */
.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.summary-item { padding: 12px 14px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item span { display:block; color: var(--muted); font-size: 9.5px; font-weight: 850; margin-bottom: 5px; text-transform: uppercase; letter-spacing:.04em; }
.summary-item strong { display:block; color: #fff; font-size: 20px; letter-spacing: -.03em; }
.summary-item small { display:block; margin-top: 4px; color: var(--muted-2); }
.list { display:grid; gap: 0; }
.list-item { display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item strong { display:block; margin-bottom: 3px; color:#fff; }
.list-item small { color: var(--muted); }
.timeline { display:grid; gap: 0; }
.timeline-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-item strong { display:block; color:#fff; }
.timeline-item span { color: var(--muted); font-size: 11px; }

/* Tables */
.data-card { background: var(--surface); }
.data-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.filter-form, .filter-inline { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; width: 100%; }
.filter-form .field, .filter-inline .field { margin: 0; }
.filter-form .field-search, .filter-inline .field-search { min-width: 210px; flex: 1 1 260px; }
.filter-form .field-player, .filter-inline .field-player { min-width: 145px; flex: .45 1 150px; }
.filter-form .field-date, .filter-inline .field-date { min-width: 130px; flex: 0 0 130px; }
.filter-form .field-limit, .filter-inline .field-limit { min-width: 80px; flex: 0 0 80px; }
.table-wrap { width: 100%; overflow: auto; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 10px 11px; border-bottom: 1px solid var(--line); border-right: 1px solid rgba(255,255,255,.025); text-align: left; vertical-align: middle; font-size: 11.5px; }
th { position: sticky; top: 0; background: var(--surface-2); color: #c8cce1; z-index: 1; font-size: 10px; text-transform: none; letter-spacing: .02em; font-weight: 850; }
th a { color: #c8cce1; }
td { color: #c5cae0; }
tr:hover td { background: rgba(255,255,255,.025); }
.cell-muted { color: var(--muted); }
.cell-sensitive { color: #ffb4c0; font-weight: 850; }
.cell-money { color: #bdfbd4; font-weight: 900; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagination { display:flex; justify-content:space-between; align-items:center; padding: 10px 14px; gap: 10px; flex-wrap:wrap; background: var(--surface); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.form-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.full-span { grid-column: 1 / -1; }

/* Backward compatibility */
.hero { margin-bottom: 14px; }
.hero-card, .notice-card, .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.hero-card { padding: 16px; }
.hero-card h1 { margin: 6px 0 8px; color:#fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -.035em; }
.hero-card p, .notice-card p { color: var(--muted); line-height: 1.55; }
.notice-card { padding: 14px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat-card { padding: 14px; }
.stat-label { color: var(--muted); font-size: 9.5px; font-weight: 850; text-transform: uppercase; letter-spacing:.04em; }
.stat-value { display:block; margin-top: 5px; color:#fff; font-size: 20px; font-weight: 900; }
.stat-help { display:block; margin-top: 5px; color: var(--muted-2); }

@media (max-width: 1280px) {
    :root { --sidebar-width: 228px; }
    .nav-link { font-size: 10.5px; height: 30px; }
}
@media (max-width: 1100px) {
    .grid-2, .grid-3, .form-grid, .form-grid-3, .summary-strip, .stats-grid { grid-template-columns: 1fr; }
    .summary-item { border-right: 0; border-bottom: 1px solid var(--line); }
    .summary-item:last-child { border-bottom: 0; }
}
@media (max-width: 920px) {
    :root { --sidebar-width: 238px; }
    .auth-shell { grid-template-columns: 1fr; }
    .auth-showcase { display: none; }
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: min(270px, 88vw); z-index: 60; transform: translateX(-102%); transition: transform .2s ease; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .content { padding: 16px 12px 28px; }
    .topbar { padding: 0 12px; }
    .current-user-name { display:none; }
    .page-head, .page-title-row { align-items: flex-start; flex-direction: column; }
    .filter-form, .filter-inline { display: grid; grid-template-columns: 1fr; }
    .filter-form .field, .filter-inline .field { min-width: 0; flex: auto; }
    .input, .select { height: 36px; }
}

/* v7 notifications, tasks and development */
.role-developer { color: #bffaff; border-color: rgba(39,197,199,.30); background: rgba(39,197,199,.10); }
.field-span-2 { grid-column: span 2; }
.table-toolbar { padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.025); }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cell-link { color: var(--accent); font-weight: 800; }

.notification-menu { position: relative; }
.notice-dot {
    border: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    color: #cfd5ea;
    position: relative;
    cursor: pointer;
}
.notice-dot:hover { background: rgba(255,255,255,.10); color: #fff; }
.notice-dot b {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    background: var(--red);
    color:#fff;
    font-size: 9px;
    line-height: 1;
    border: 2px solid var(--topbar);
}
.notification-dropdown {
    position: absolute;
    top: 40px;
    right: 0;
    width: min(360px, calc(100vw - 24px));
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.32);
    overflow: hidden;
    z-index: 80;
    display: none;
}
.notification-menu.open .notification-dropdown { display: block; }
.notification-dropdown-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 11px 12px; border-bottom:1px solid var(--line); }
.notification-dropdown-head strong { color:#fff; }
.notification-dropdown-head a { color: var(--accent); font-size: 11px; font-weight: 800; }
.notification-empty { padding: 18px 12px; color: var(--muted); text-align:center; }
.notification-item { display:block; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: rgba(255,255,255,.035); }
.notification-item strong { display:block; color:#fff; margin-bottom:3px; }
.notification-item span { display:block; color: var(--muted); font-size: 11px; line-height: 1.35; }
.notification-item small { display:block; color: var(--muted-2); margin-top:5px; font-size: 10px; }
.notification-item.unread { background: rgba(39,197,199,.06); }

.notice-list { display:grid; gap:0; }
.notice-row { display:flex; justify-content:space-between; gap: 14px; padding: 14px; border-bottom:1px solid var(--line); }
.notice-row:last-child { border-bottom:0; }
.notice-row.unread { background: rgba(39,197,199,.05); }
.notice-main strong { display:block; color:#fff; margin-bottom:4px; }
.notice-main p { margin:0 0 6px; color: var(--muted); line-height:1.45; }
.notice-main small { color: var(--muted-2); }

.status-in_progress, .status-testing { color:#e8d8ff; border-color:rgba(140,107,255,.25); background:rgba(140,107,255,.10); }
.status-done, .status-fixed { color:#c8ffdc; border-color:rgba(55,214,122,.25); background:rgba(55,214,122,.10); }
.status-cancelled, .status-wont_fix { color:#d5d7e4; background:rgba(148,163,184,.07); }
.priority-low { color:#c8ffdc; border-color:rgba(55,214,122,.25); background:rgba(55,214,122,.10); }
.priority-medium { color:#ffe1ae; border-color:rgba(239,182,76,.25); background:rgba(239,182,76,.10); }
.priority-high { color:#ffcbd2; border-color:rgba(240,82,103,.25); background:rgba(240,82,103,.10); }
.priority-urgent, .priority-critical { color:#fff; border-color:rgba(240,82,103,.38); background:rgba(240,82,103,.18); }

@media (max-width: 920px) {
    .notice-row { flex-direction: column; }
    .field-span-2 { grid-column: auto; }
    .notification-dropdown { right: -52px; }
}