/* =========================================================
   Shell · Sidebar + Topbar (v2)
   ========================================================= */

/* Auth flash guard — hide chrome until /me confirms.
   shell.js sets body.xyc-checking before /me settles, body.xyc-anon after 401.
   .xyc-checking uses visibility so layout space is preserved (no jump on reveal). */
body.xyc-checking .shell,
body.xyc-checking .side,
body.xyc-checking .top,
body.xyc-checking .op-sidebar { visibility: hidden !important; }
body.xyc-anon .shell,
body.xyc-anon .side,
body.xyc-anon .top,
body.xyc-anon .op-sidebar { display: none !important; }

/* Sidebar user footer — clickable + chevron hint */
.side__user { cursor: pointer; user-select: none; transition: background .15s; border-radius: 8px; padding-right: 6px; }
.side__user:hover, .side__user:focus { background: color-mix(in srgb, var(--accent, #1A6CFF) 8%, transparent); outline: none; }
.side__user-chev { margin-left: auto; color: var(--slate-2, #9CA3AF); display: inline-flex; transform: rotate(-90deg); transition: transform .15s; }
.side__user:hover .side__user-chev { color: var(--accent, #1A6CFF); }

/* User dropdown menu */
.user-menu {
    position: fixed; min-width: 188px;
    background: var(--paper, #fff); border: 1px solid var(--hairline, #E4E8F1); border-radius: 10px;
    box-shadow: 0 12px 32px -12px rgba(11,21,48,.28);
    padding: 6px; z-index: 300;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .12s, transform .12s, visibility .12s;
}
.user-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; font-size: 13px;
    color: var(--ink, #0B1530); text-decoration: none;
    background: transparent; border: 0; width: 100%; text-align: left;
    cursor: pointer; font-family: inherit;
}
.user-menu__item:hover { background: var(--paper-2, #F4F7FB); }
.user-menu__item--danger { color: var(--coral, #C12626); }
.user-menu__item--danger:hover { background: color-mix(in srgb, var(--coral, #C12626) 10%, transparent); }
.user-menu__ic { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.user-menu__divider { height: 1px; background: var(--hairline-2, #E4E8F1); margin: 4px 0; }

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
        "side top"
        "side main";
    min-height: 100vh;
    transition: grid-template-columns .2s ease;
}
body.is-collapsed .shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ========== Sidebar ========== */
.side {
    grid-area: side;
    position: sticky; top: 0;
    height: 100vh;
    background: var(--ink);
    color: rgba(255,255,255,.78);
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
    z-index: 20;
}

.side__brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.side__logo {
    width: 32px; height: 32px; flex: none;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-weight: 700; font-size: 17px;
    letter-spacing: -.02em;
    box-shadow: 0 6px 18px -6px rgba(255,106,61,.6);
}
.side__brand-text { min-width: 0; }
.side__brand-name {
    font-family: var(--f-display);
    font-size: 14.5px; font-weight: 600;
    color: #fff;
    letter-spacing: -.015em;
    white-space: nowrap;
}
.side__brand-sub {
    font-size: 10.5px;
    color: rgba(255,255,255,.42);
    letter-spacing: .14em;
    margin-top: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
body.is-collapsed .side__brand-text { display: none; }

/* Groups */
.side__nav {
    flex: 1; overflow-y: auto;
    padding: 10px 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.side__nav::-webkit-scrollbar { width: 4px; }
.side__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); }

.side__group-label {
    font-size: 10px;
    color: rgba(255,255,255,.36);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 10px 6px;
    white-space: nowrap; overflow: hidden;
}
body.is-collapsed .side__group-label {
    color: transparent;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin: 6px 8px 0;
    height: 1px;
    overflow: hidden;
}

.side__item {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 10px;
    border-radius: 8px;
    color: rgba(255,255,255,.7);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap; overflow: hidden;
    position: relative;
}
.side__item:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.side__item.is-active {
    background: linear-gradient(90deg, rgba(255,106,61,.18), rgba(255,106,61,.04));
    color: #fff;
}
.side__item.is-active::before {
    content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
    width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}
.side__ic { width: 18px; height: 18px; flex: none; opacity: .85; }
.side__item.is-active .side__ic { opacity: 1; color: var(--accent); }
.side__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side__badge {
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px; font-weight: 700;
    font-family: var(--f-mono);
    display: inline-flex; align-items: center; justify-content: center;
}
.side__badge--mute { background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.side__badge--coral { background: var(--coral); }
.side__badge--accent { background: var(--accent); color: #fff; }
.side__badge--moss { background: var(--moss); color: #fff; }
.side__badge--cobalt { background: var(--cobalt); color: #fff; }
.side__badge--amber { background: var(--amber); color: #fff; }
.side__badge--plum { background: var(--plum); color: #fff; }
.side__badge--warn { background: var(--amber); color: #fff; }

body.is-collapsed .side__label,
body.is-collapsed .side__badge { display: none; }
body.is-collapsed .side__item { justify-content: center; padding: 9px 0; }

/* Sidebar footer */
.side__foot {
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column; gap: 6px;
}
.side__user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    color: rgba(255,255,255,.85);
}
.side__avatar {
    width: 28px; height: 28px; flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #FF9560);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 12px;
    font-family: var(--f-display);
}
.side__user-text { min-width: 0; }
.side__user-name { font-size: 12.5px; font-weight: 600; color: #fff; }
.side__user-role { font-size: 10.5px; color: rgba(255,255,255,.45); }
body.is-collapsed .side__user-text { display: none; }
body.is-collapsed .side__user { justify-content: center; padding: 6px 0; }

.side__collapse {
    position: absolute; top: 22px; right: -10px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--paper);
    border: 1px solid var(--hairline);
    color: var(--slate);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--sh-2);
    z-index: 25;
}
.side__collapse:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
body.is-collapsed .side__collapse svg { transform: rotate(180deg); }

/* ========== Topbar ========== */
.top {
    grid-area: top;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    display: flex; align-items: center;
    padding: 0 22px;
    gap: 16px;
    z-index: 15;
}

.top__crumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    color: var(--slate-2);
}
.top__crumb b { color: var(--ink); font-weight: 600; }
.top__crumb svg { width: 14px; height: 14px; color: var(--mute); }

.top__search {
    flex: 1; max-width: 460px;
    position: relative;
    margin-left: auto;
}
.top__search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    background: var(--bone-2);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    outline: none;
    transition: background .14s, border-color .14s;
}
.top__search input:focus { background: var(--paper); border-color: var(--hairline); }
.top__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--mute); }
.top__search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--f-mono); font-size: 11px;
    padding: 2px 6px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--slate-2);
}

.top__actions { display: flex; align-items: center; gap: 6px; }
.top__act {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: transparent;
    color: var(--slate);
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.top__act:hover { background: var(--bone-2); color: var(--ink); }
.top__act svg { width: 18px; height: 18px; }
.top__act .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--paper); }

.top__divider { width: 1px; height: 24px; background: var(--hairline); margin: 0 4px; }

/* ========== Main area ========== */
.main {
    grid-area: main;
    padding: var(--s-6) var(--s-7) var(--s-9);
    overflow-x: hidden;
}
.main--full { padding: 0; }
.main--chat { padding: 0; height: calc(100vh - var(--topbar-h)); }

/* Page header (shared) */
.page__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: var(--s-6);
    flex-wrap: wrap;
}
.page__eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--slate-2);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
}
.page__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -.025em;
    margin: 0;
    line-height: 1.1;
}
.page__sub {
    margin: 6px 0 0;
    color: var(--slate-2);
    font-size: 13.5px;
    max-width: 640px;
}
.page__actions { display: flex; align-items: center; gap: 8px; }

/* Section header (subsections inside a page) */
.sec__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--hairline-2);
}
.sec__title {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.005em;
}
.sec__sub { font-size: 12px; color: var(--slate-2); }
.sec__action { font-size: 12.5px; color: var(--accent-ink); font-weight: 500; white-space: nowrap; }
.sec__action:hover { text-decoration: underline; }

/* ========== Shared page utilities ========== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* KPI card (shared) */
.skpi {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 16px 18px;
}
.skpi__lbl { font-size: 12px; color: var(--slate-2); font-weight: 500; margin-bottom: 6px; }
.skpi__val {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    letter-spacing: -.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.skpi__val sub { font-family: var(--f-sans); font-size: 13px; color: var(--slate-2); font-weight: 500; vertical-align: baseline; margin-left: 3px; }
.skpi__delta { font-size: 11.5px; color: var(--slate-2); margin-top: 6px; font-family: var(--f-mono); }
.skpi__delta.is-up { color: var(--moss); }
.skpi__delta.is-down { color: var(--coral); }

/* Section card */
.scard { background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px; }
.scard--ink { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Form fields */
.form-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hairline-2);
    align-items: start;
}
.form-row:last-child { border-bottom: 0; }
.form-row__lbl { font-size: 13px; color: var(--ink); font-weight: 500; padding-top: 8px; }
.form-row__lbl small { display: block; color: var(--slate-2); font-weight: 400; margin-top: 2px; font-size: 11.5px; }
.form-row__ctl input[type="text"],
.form-row__ctl input[type="password"],
.form-row__ctl input[type="number"],
.form-row__ctl input[type="email"],
.form-row__ctl textarea,
.form-row__ctl select {
    width: 100%; max-width: 420px;
    height: 38px; padding: 0 12px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--ink);
    font-family: inherit;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.form-row__ctl textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.form-row__ctl input:focus,
.form-row__ctl textarea:focus,
.form-row__ctl select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20,22,42,.06); }
.form-row__hint { font-size: 11.5px; color: var(--slate-2); margin-top: 6px; line-height: 1.5; }
.form-row__hint code { font-family: var(--f-mono); font-size: 11px; background: var(--bone-2); padding: 1px 5px; border-radius: 3px; color: var(--accent-ink); }

/* Toggle switch */
.tog {
    position: relative;
    width: 38px; height: 22px;
    background: var(--bone-2);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s;
    flex: none;
    display: inline-block;
}
.tog::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(20,22,42,.2);
    transition: left .15s;
}
.tog.is-on { background: var(--accent); }
.tog.is-on::after { left: 19px; }

/* Simple table */
.stbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.stbl th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--slate-2);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 16px;
    border-bottom: 1px solid var(--hairline);
    background: var(--bone);
    font-family: var(--f-mono);
    white-space: nowrap;
}
.stbl td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline-2);
    vertical-align: middle;
}
.stbl tr:last-child td { border-bottom: 0; }
.stbl tr:hover td { background: var(--bone); }

/* Status dot */
.dotline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--slate); font-family: var(--f-mono); }

/* Empty state */
.empty {
    padding: 50px 20px;
    text-align: center;
    color: var(--slate-2);
}
.empty__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--bone-2); color: var(--slate-2); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.empty__ic svg { width: 20px; height: 20px; }
.empty__title { font-family: var(--f-display); font-size: 16px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.empty__sub { font-size: 13px; color: var(--slate-2); }

/* ========== Tweaks panel ========== */
.tweaks {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: 16px;
    width: 296px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow: var(--sh-pop);
    z-index: 50;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.tweaks.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tweaks__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--hairline-2);
}
.tweaks__eyebrow {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--accent-ink);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 4px;
}
.tweaks__eyebrow svg { width: 12px; height: 12px; }
.tweaks__title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.tweaks__close {
    width: 26px; height: 26px;
    border-radius: 7px;
    color: var(--slate-2);
    display: inline-flex; align-items: center; justify-content: center;
}
.tweaks__close:hover { background: var(--bone-2); color: var(--ink); }
.tweaks__close svg { width: 14px; height: 14px; }
.tweaks__body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.tweaks__sec { }
.tweaks__lbl {
    font-size: 11px;
    color: var(--slate-2);
    font-family: var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 8px;
}
.tweaks__swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.tweaks .sw {
    width: 30px; height: 30px;
    border-radius: 9px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s, border-color .12s;
    position: relative;
}
.tweaks .sw:hover { transform: scale(1.08); }
.tweaks .sw.is-on { border-color: var(--ink); }
.tweaks .sw.is-on::after {
    content: ""; position: absolute; inset: 2px;
    border: 2px solid var(--paper);
    border-radius: 6px;
}
.tweaks__seg {
    display: flex;
    background: var(--bone);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.tweaks__seg button {
    flex: 1;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--slate);
    font-weight: 500;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.tweaks__seg button svg { width: 13px; height: 13px; }
.tweaks__seg button:hover { color: var(--ink); }
.tweaks__seg button.is-on {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--sh-1);
}
.tweaks__hint {
    font-size: 11px;
    color: var(--mute);
    padding-top: 6px;
    border-top: 1px solid var(--hairline-2);
    text-align: center;
    font-family: var(--f-mono);
}

/* ========== Notification panel (top-right popover) ========== */
.notif-panel {
    position: fixed; top: calc(var(--topbar-h) + 6px); right: 14px;
    width: 360px; max-height: 70vh;
    background: var(--paper); border: 1px solid var(--hairline);
    border-radius: 12px; box-shadow: var(--sh-pop);
    z-index: 2000; opacity: 0; pointer-events: none;
    transform: translateY(-4px); transition: opacity .14s, transform .14s;
    display: flex; flex-direction: column; overflow: hidden;
}
.notif-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.notif-panel__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline-2); }
.notif-panel__head b { font-family: var(--f-display); font-size: 14.5px; color: var(--ink); font-weight: 600; }
.notif-panel__readall { background: transparent; border: 0; color: var(--accent); font-size: 12px; cursor: pointer; }
.notif-panel__readall:hover { text-decoration: underline; }
.notif-panel__list { flex: 1; overflow-y: auto; padding: 6px; }
.notif-empty { text-align: center; padding: 50px 20px; color: var(--slate-2); font-size: 13px; }
.notif-item { padding: 12px 14px; border-radius: 8px; cursor: pointer; transition: background .12s; border-left: 3px solid transparent; }
.notif-item:hover { background: var(--bone-2); }
.notif-item.is-unread { background: var(--accent-soft); }
.notif-item.is-unread:hover { background: var(--accent-soft); filter: brightness(.96); }
.notif-item--err { border-left-color: var(--coral); }
.notif-item--warn { border-left-color: var(--amber); }
.notif-item--info { border-left-color: var(--cobalt); }
.notif-item--ok { border-left-color: var(--moss); }
.notif-item__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.notif-item__title { font-size: 13px; color: var(--ink); font-weight: 600; }
.notif-item__time { font-size: 11px; color: var(--slate-2); font-family: var(--f-mono); flex: none; }
.notif-item__body { font-size: 12px; color: var(--slate); margin-top: 4px; line-height: 1.5; }
.notif-item__cta { font-size: 11.5px; color: var(--accent); margin-top: 6px; display: inline-block; text-decoration: none; }
.notif-item__cta:hover { text-decoration: underline; }

/* ========== New menu (+ 新建 dropdown) ========== */
.new-menu {
    position: fixed; top: calc(var(--topbar-h) + 6px); right: 14px;
    width: 320px; background: var(--paper); border: 1px solid var(--hairline);
    border-radius: 12px; box-shadow: var(--sh-pop);
    z-index: 2000; padding: 6px; opacity: 0; pointer-events: none;
    transform: translateY(-4px); transition: opacity .14s, transform .14s;
}
.new-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* Settings dropdown anchors to the gear button which sits left of the "新建" button */
.new-menu--settings { right: 130px; width: 280px; }
.new-menu__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .12s; }
.new-menu__item:hover { background: var(--bone-2); text-decoration: none; color: var(--accent-ink); }
.new-menu__ic { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.new-menu__ic svg { width: 16px; height: 16px; }
.new-menu__lbl { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.new-menu__sub { font-size: 11.5px; color: var(--slate-2); margin-top: 2px; }

/* ========== Search modal (⌘K) ========== */
.search-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 80px 24px 24px; }
.search-modal.is-open { display: flex; }
.search-modal__bd { position: absolute; inset: 0; background: rgba(20,22,42,.55); backdrop-filter: blur(4px); }
.search-modal__card { position: relative; width: 100%; max-width: 640px; background: var(--paper); border-radius: 14px; box-shadow: var(--sh-pop); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 120px); }
.search-modal__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hairline-2); }
.search-modal__head svg { width: 18px; height: 18px; color: var(--slate-2); flex: none; }
.search-modal__head input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--ink); font-family: var(--f-sans); }
.search-modal__head kbd { background: var(--bone-2); padding: 2px 7px; border-radius: 5px; font-family: var(--f-mono); font-size: 11px; color: var(--slate-2); border: 1px solid var(--hairline); }
.search-modal__results { flex: 1; overflow-y: auto; padding: 6px; }
.search-modal__foot { padding: 8px 18px; border-top: 1px solid var(--hairline-2); font-size: 11px; color: var(--slate-2); font-family: var(--f-mono); background: var(--bone); }
.search-modal__foot kbd { background: var(--paper); padding: 1px 5px; border-radius: 4px; font-family: var(--f-mono); font-size: 10.5px; border: 1px solid var(--hairline); margin: 0 2px; }
.search-empty { padding: 50px 20px; text-align: center; color: var(--slate-2); font-size: 13px; }
.search-group { padding: 10px 14px 4px; font-size: 10.5px; color: var(--slate-2); font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.search-result { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: inherit; cursor: pointer; margin: 2px 0; }
.search-result:hover, .search-result.is-active { background: var(--accent-soft); text-decoration: none; color: var(--ink); }
.search-result__ic { width: 32px; height: 32px; border-radius: 8px; background: var(--bone-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.search-result__ic svg { width: 15px; height: 15px; }
.search-result__title { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.search-result__sub { font-size: 11.5px; color: var(--slate-2); margin-top: 2px; }
.search-result__meta { font-size: 11px; color: var(--slate-2); font-family: var(--f-mono); padding: 2px 8px; background: var(--bone-2); border-radius: 4px; flex: none; }

.top__search { cursor: pointer; }
.top__search input { cursor: pointer; pointer-events: none; }

/* Mobile */
@media (max-width: 900px) {
    .shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
    .side__label, .side__badge, .side__brand-text, .side__user-text { display: none; }
    .side__group-label { color: transparent; height: 1px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); margin: 6px 8px 0; }
    .side__item { justify-content: center; padding: 9px 0; }
    .side__collapse { display: none; }
    .main { padding: 18px 16px 60px; }
    .top { padding: 0 14px; }
    .top__search { display: none; }
    .top__crumb { font-size: 12.5px; }
}