/* MultiSearch / workspace-web. Original semantic tokens, inspired by public Material principles. */
:root {
    --surface: #f8fafd; --container: #fff; --subtle: #f0f4f9; --hover: #e8edf4;
    --text: #1f1f1f; --muted: #535c68; --outline: #747b85; --divider: #dce2ea;
    --primary: #0b57d0; --on-primary: #fff; --selected: #d3e3fd; --on-selected: #0842a0;
    --error: #b3261e; --error-bg: #f9dedc; --success-bg: #e3f2e7; --success: #146c2e;
    --inverse: #303034; --on-inverse: #f2f2f2; --scrim: #141b2b66;
    --ink: var(--text); --ink-2: var(--muted); --ink-3: var(--muted); --line: var(--divider);
    --accent: var(--primary); --accent-2: var(--primary); --card: var(--container);
    --g-blue: var(--primary); --g-blue-dark: var(--on-selected); --g-blue-weak: var(--selected);
    --g-text: var(--text); --g-text2: var(--text); --g-muted: var(--muted); --g-faint: var(--muted);
    --g-border: var(--divider); --g-line: var(--divider); --g-hover: var(--hover); --g-bg: var(--surface);
}
:root[data-theme="dark"] {
    --surface: #111318; --container: #1b1e24; --subtle: #252932; --hover: #303640;
    --text: #e3e3e8; --muted: #b6bdc9; --outline: #9199a6; --divider: #424852;
    --primary: #a8c7fa; --on-primary: #062e6f; --selected: #253f66; --on-selected: #d3e3fd;
    --error: #ffb4ab; --error-bg: #602a28; --success-bg: #193e29; --success: #a4d9b2;
    --inverse: #e3e3e8; --on-inverse: #24262c; --scrim: #0009;
}
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body, body.dash, body.auth, body.results { background: var(--surface); color: var(--text); font-family: Roboto, 'Noto Sans SC', 'Segoe UI', 'Microsoft YaHei', sans-serif; }
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { transition: background-color 140ms, color 140ms, box-shadow 140ms; }
button:active:not(:disabled), .solid-btn:active, .rail-link:active { filter: brightness(.92); }
button:disabled { opacity: .48; cursor: not-allowed; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
input::placeholder { color: var(--muted); opacity: 1; }
input { accent-color: var(--primary); }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 100; background: var(--primary); color: var(--on-primary); padding: 12px 20px; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.mi { width: 22px; height: 22px; flex: none; display: inline-block; background: currentColor; mask: var(--icon) center / contain no-repeat; vertical-align: middle; }
.logo-mark, .dash-head .logo-mark { width: 32px; height: 32px; background: var(--primary); border-radius: 11px; box-shadow: none; flex: none; }
.logo-mark::after, .dash-head .logo-mark::after { inset: 8px; border-color: var(--on-primary); border-right-color: transparent; }
.dash-head { position: sticky; top: 0; z-index: 20; max-width: none; min-height: 80px; padding: 16px 32px; background: var(--surface); gap: 20px; }
.dash-head .logo-text { font-size: 21px; letter-spacing: -.5px; font-weight: 500; }
.head-divider { height: 24px; width: 1px; background: var(--divider); }
.app-label { color: var(--muted); font-size: 14px; }
.head-user { gap: 12px; }
.theme-control { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.theme-control select { max-width: 120px; min-height: 40px; border: 1px solid var(--divider); border-radius: 24px; padding: 0 12px; background: var(--container); color: var(--text); cursor: pointer; font-size: 13px; }
.workspace-rail { position: fixed; top: 104px; bottom: 24px; left: 16px; width: 184px; display: flex; flex-direction: column; gap: 8px; }
.rail-caption { margin: 12px 20px; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 1px; }
.rail-link { display: flex; align-items: center; gap: 14px; padding: 14px 20px; min-height: 52px; border-radius: 28px; text-decoration: none; color: var(--muted); font-size: 14px; }
.rail-link:hover { background: var(--hover); }
.rail-link.active { background: var(--selected); color: var(--on-selected); font-weight: 600; }
.rail-note { margin: auto 16px 4px; padding-top: 32px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.rail-note .mi { display: block; margin-bottom: 12px; color: var(--primary); }
.dash-main { max-width: 1480px; margin: 0 auto 0 216px; padding: 12px 32px 32px 16px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 12px 4px 24px; }
.page-intro h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 400; margin: 0 0 4px; line-height: 1.4; }
.page-intro p { color: var(--muted); margin: 0; font-size: 14px; }
.date-badge { border-radius: 24px; padding: 8px 14px; background: var(--container); color: var(--muted); white-space: nowrap; font-size: 13px; }
.hero { background: var(--container); border-radius: 28px; text-align: left; padding: 32px 36px 28px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: var(--primary); font-size: 12px; font-weight: 500; margin: 0 0 12px; }
.hero h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.4; }
.hero-sub { margin: 8px 0 24px; color: var(--muted); font-size: 14px; }
.gs-box { max-width: none; margin: 0; height: 64px; background: var(--subtle); border: 1px solid transparent; padding: 6px 8px 6px 20px; border-radius: 36px; gap: 12px; }
.gs-box:hover { background: var(--hover); border-color: transparent; box-shadow: none; }
.gs-box:focus-within { background: var(--container); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gs-ico { color: var(--muted); width: 24px; height: 24px; }
.gs-box input { color: var(--text); font-size: 16px; }
.gs-box input::placeholder { color: var(--muted); }
.gs-go { min-height: 46px; padding: 0 28px; background: var(--primary); color: var(--on-primary); border-radius: 28px; font-size: 14px; }
.gs-go:hover, .solid-btn:hover, .mini-btn.solid:hover { background: var(--primary); box-shadow: 0 2px 6px var(--scrim); }
.clear-search { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; }
.clear-search[hidden] { display: none; }
.clear-search:hover { background: var(--hover); }
.search-help { display: flex; justify-content: space-between; color: var(--muted); margin: 10px 4px 20px; font-size: 12px; }
kbd { font: inherit; padding: 1px 6px; border: 1px solid var(--divider); border-radius: 4px; }
.quick-wrap { max-width: none; margin: 0; }
.quick-engines { justify-content: flex-start; gap: 8px; }
.qe { height: 38px; background: var(--container); color: var(--muted); border-color: var(--divider); padding-right: 12px; }
.qe.on, .dlg .chip.on { color: var(--on-selected); background: var(--selected); border-color: transparent; }
.qe.on::after, .dlg .chip.on::after { content: '✓'; font-size: 13px; }
.qe.on:hover { background: var(--selected); box-shadow: inset 0 0 0 1px var(--primary); }
.qe.off { color: var(--muted); border-color: var(--divider); opacity: .6; }
.quick-meta { justify-content: flex-start; margin-top: 14px; }
.link-btn { color: var(--primary); min-height: 36px; padding: 4px 8px; font-size: 13px; }
.recent-row { justify-content: flex-start; margin: 16px 0 0; max-width: none; }
.recent-chip { border: 0; background: var(--subtle); color: var(--muted); }
.two-col { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.dash .panel { background: var(--container); border: 0; border-radius: 24px; }
.panel-head { padding: 22px 24px 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 17px; gap: 10px; font-weight: 500; }
.panel-head h2 .mi { color: var(--primary); }
.panel-description { color: var(--muted); font-size: 13px; margin: 0 24px 12px; }
.seg { background: var(--subtle); }
.seg button { min-height: 36px; padding: 4px 14px; color: var(--muted); }
.seg button.on { background: var(--selected); color: var(--on-selected); box-shadow: none; }
.ghost-btn, .solid-btn, .mini-btn { min-height: 40px; padding: 8px 18px; border-radius: 24px; background: transparent; color: var(--primary); border-color: var(--outline); font-size: 13px; }
.ghost-btn { border-color: transparent; }
.ghost-btn:hover, .mini-btn:hover { background: var(--hover); }
.solid-btn, .mini-btn.solid { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.avatar { background: var(--selected); color: var(--on-selected); }
.quick-form { margin: 8px 24px 12px; padding: 6px; border: 1px solid var(--outline); background: var(--container); border-radius: 12px; }
.quick-form input, .quick-form input:focus { background: transparent; color: var(--text); min-height: 36px; border: 0; box-shadow: none; }
.quick-form:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
.quick-form input[type="time"] { width: 98px; flex: none; }
.quick-form .mini-btn { width: 38px; min-height: 38px; padding: 0; border-radius: 10px; justify-content: center; }
.ev-list, .memo-list { padding: 0 24px 20px; max-height: 310px; }
.ev-list li, .memo-list li { min-height: 48px; }
.ev-time { color: var(--primary); background: var(--subtle); padding: 3px 7px; border-radius: 6px; }
.ev-list li.past .ev-time { color: var(--error); background: var(--error-bg); }
.memo-check { background: transparent; border-color: var(--outline); flex: none; width: 22px; height: 22px; padding: 0; }
.memo-list li.done .memo-check, .ev-list li.done .memo-check { background: var(--primary); }
.memo-list li.done .memo-check::after, .ev-list li.done .memo-check::after { color: var(--on-primary); }
.row-ops, .lc-ops { opacity: 1; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.icon-btn .mi { width: 18px; height: 18px; }
.icon-btn.danger:hover { background: var(--error-bg); color: var(--error); }
.empty-state { min-height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px 24px 28px; }
.empty-state > .mi { width: 36px; height: 36px; padding: 12px; color: var(--primary); margin-bottom: 16px; }
.empty-state p { max-width: 300px; color: var(--muted); margin-bottom: 16px; }
.empty-state .solid-btn { background: var(--selected); color: var(--on-selected); }
.nav-panel { margin-top: 20px; }
.nav-groups { padding: 0 24px 24px; }
.nav-group-title { margin: 18px 0 12px; font-size: 12px; color: var(--muted); }
.nav-group-title::after { display: none; }
.cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.link-card { background: var(--subtle); border: 1px solid transparent; border-radius: 14px; padding: 16px; min-height: 82px; }
.link-card:hover { background: var(--hover); border-color: var(--divider); box-shadow: none; }
.lc-ico { width: 36px; height: 36px; border-radius: 10px; }
.lc-meta { color: var(--muted); font-size: 11px; margin-top: 4px; }
.lc-ops { position: static; background: transparent; flex-direction: column; gap: 0; }
.lc-ops .icon-btn { width: 28px; height: 28px; }
.link-card-wrap { position: relative; display: flex; background: var(--subtle); border-radius: 14px; }
.link-card-wrap .link-card { flex: 1; padding-right: 8px; }
.link-card-wrap .lc-ops { justify-content: center; padding-right: 8px; }
.add-card { background: transparent; border-color: var(--outline); color: var(--primary); border-radius: 14px; min-height: 82px; }
.add-card:hover { background: var(--selected); color: var(--on-selected); }
.dash-foot { display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; color: var(--muted); font-size: 12px; }
.dlg { background: var(--container); color: var(--text); border-radius: 28px; width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.dlg::backdrop { background: var(--scrim); }
.dlg-body { padding: 28px; }
.dlg-head h3 { font-size: 24px; font-weight: 400; }
.dlg-tip { margin: 12px 0 24px; }
.dlg .chip { min-height: 40px; background: var(--container); color: var(--text); font-family: inherit; box-shadow: none; }
.dlg .chip:hover { transform: none; }
.dlg .chip.off { opacity: .6; }
.field > span { font-size: 13px; color: var(--muted); }
.field input { min-height: 48px; background: var(--container); color: var(--text); border: 1px solid var(--outline); border-radius: 8px; font-size: 15px; }
.field input:focus { background: var(--container); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.inline-error { color: var(--error); font-size: 13px; margin: 8px 0; }
.toast { background: var(--inverse); color: var(--on-inverse); padding: 14px 20px; border-radius: 12px; font-size: 14px; }
.toast.err { background: var(--error-bg); color: var(--error); }
.toast-wrap { max-width: calc(100vw - 32px); width: max-content; }
body.auth { padding: 72px 24px; }
.bg-glow { display: none; }
.auth-theme { position: absolute; right: 24px; top: 20px; }
.auth-wrap { width: min(480px, 100%); }
.auth-brand { font-size: 20px; font-weight: 500; margin-bottom: 24px; }
.auth-card { background: var(--container); border: 0; border-radius: 28px; padding: 40px; box-shadow: none; }
.auth-card h1 { font-size: 30px; font-weight: 400; }
.auth-sub { font-size: 14px; color: var(--muted); margin: 12px 0 28px; }
.auth-err { background: var(--error-bg); color: var(--error); border: 0; }
.auth-go { min-height: 48px; border-radius: 24px; background: var(--primary); color: var(--on-primary); box-shadow: none; font-weight: 500; }
.auth-go:hover { transform: none; box-shadow: 0 2px 5px var(--scrim); }
.auth-switch, .auth-back { color: var(--muted); font-size: 13px; }
.topbar { background: var(--surface); border: 0; backdrop-filter: none; padding: 14px 20px; }
.tb-form { background: var(--container); border-color: var(--divider); border-radius: 28px; padding: 4px 4px 4px 16px; }
.tb-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.tb-form input { font-size: 15px; min-height: 36px; }
.tb-form button { background: var(--primary); color: var(--on-primary); min-height: 40px; border-radius: 24px; }
.tb-count, .tb-user { background: var(--selected); color: var(--on-selected); }
.tb-link { background: transparent; border-color: var(--outline); }
.results .panel { background: var(--container); border-color: var(--divider); box-shadow: none; border-radius: 16px; }
.results .panel-hd { background: var(--container); border-color: var(--divider); min-height: 52px; }
.results .ibtn { width: 36px; height: 36px; color: var(--muted); border-radius: 50%; }
.results .ibtn:hover { color: var(--text); background: var(--hover); }
.results .loading, .results .panel.is-slow .loading { background: var(--container); color: var(--muted); }
.results .spinner { border-color: var(--divider); border-top-color: var(--primary); }
.results .hint-bar { background: var(--inverse); color: var(--on-inverse); border: 0; }
.results .panel.is-zoomed { border-color: var(--primary); }
@media (min-width: 1720px) { .dash-main { margin-left: max(216px, calc((100vw - 1480px) / 2)); } }
@media (max-width: 1199px) {
    .workspace-rail { width: 76px; left: 8px; align-items: center; }
    .rail-caption, .rail-note, .rail-link span:last-child { display: none; }
    .rail-link { padding: 16px; border-radius: 20px; }
    .dash-main { margin-left: 88px; padding-right: 24px; }
    .hero { padding: 28px; }
    .two-col { gap: 16px; }
}
@media (max-width: 920px) { .two-col { grid-template-columns: 1fr; } .head-divider, .app-label { display: none; } }
@media (max-width: 599px) {
    html { scroll-padding-top: 88px; }
    .dash-head { min-height: 72px; padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
    .dash-head .logo-text { font-size: 17px; }
    .head-user { gap: 4px; } .head-user .solid-btn { display: none; }
    .head-user .theme-control .mi, .date-badge { display: none; }
    .theme-control select { max-width: 96px; font-size: 12px; padding: 0 8px; }
    .user-chip { max-width: 110px; overflow: hidden; font-size: 12px; padding-right: 6px; }
    .head-user .ghost-btn { padding: 8px; }
    .workspace-rail { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); flex-direction: row; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--divider); z-index: 25; }
    .rail-link { display: flex; flex-direction: column; gap: 3px; width: 72px; min-height: 56px; padding: 6px; border-radius: 18px; font-size: 11px; }
    .rail-link span:last-child { display: inline; }
    .dash-main { margin: 0; padding: 8px 16px 108px; }
    .page-intro { margin: 8px 4px 24px; }
    .page-intro h1 { font-size: 26px; }
    .page-intro p { font-size: 13px; }
    .hero { border-radius: 24px; padding: 24px 20px; }
    .hero h2 { font-size: 25px; }
    .gs-box { height: 56px; padding-left: 12px; gap: 6px; }
    .gs-ico { width: 20px; }
    .gs-box input { font-size: 14px; }
    .gs-go { min-height: 42px; padding: 0 16px; }
    .clear-search { width: 28px; }
    .search-help span:last-child { display: none; }
    .qe { height: 44px; }
    .panel-head { padding: 20px 20px 12px; }
    .panel-actions { flex-wrap: wrap; }
    .nav-groups { padding: 0 20px 20px; }
    .cards { grid-template-columns: minmax(0, 1fr); }
    .quick-form { margin-left: 20px; margin-right: 20px; }
    .quick-form input[type="time"] { width: 86px; font-size: 13px; }
    .quick-form input[type="text"] { font-size: 14px; }
    .icon-btn, .lc-ops .icon-btn { width: 44px; height: 44px; }
    .lc-ops { flex-direction: row; }
    .link-card-wrap .lc-ops { flex-direction: column; }
    .dash-foot { flex-direction: column; text-align: left; }
    .auth-card { padding: 28px 24px; }
    .topbar { flex-wrap: wrap; gap: 10px; padding: 12px; }
    .tb-form { order: 3; flex-basis: 100%; }
    .tb-user { display: none; }
    .tb-meta { gap: 4px; }
    .results .panel-hd .host { display: none; }
    .results .ibtn { width: 44px; height: 44px; }
    .dlg-body { padding: 24px 20px; }
    .dlg .chip { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .mi { background: CanvasText; } .rail-link.active, .qe.on, .chip.on { outline: 2px solid Highlight; } }

.qe-ico img.hide { display: none; }
.qe-ico i { font-style: normal; }
.ev-list li:hover, .memo-list li:hover { background: var(--subtle); }
.ev-list li.past:not(.done) .ev-time { color: var(--error); background: var(--error-bg); }
.ev-day-sep { color: var(--muted) !important; }
[aria-busy="true"] { cursor: progress; }
.quick-form[aria-busy="true"], .dlg-body[aria-busy="true"] { opacity: .7; }

.move-up { transform: rotate(90deg); }
.user-chip { white-space: nowrap; flex-shrink: 0; }
.page-intro h1 { overflow-wrap: anywhere; }
.lc-ops { flex-direction: row; }
.link-card-wrap { flex-wrap: wrap; }
.link-card-wrap .lc-ops { flex-direction: row; width: 100%; justify-content: flex-end; padding: 0 6px 4px; }
.link-card-wrap .link-card { min-height: 72px; }
@media (max-width: 599px) { .toast-wrap { bottom: calc(90px + env(safe-area-inset-bottom)); } }

/* 跨搜 / original KS + search monogram, shared by every app page. */
.brand-symbol { display: block; width: 36px; height: 36px; flex: none; }
.logo-text { letter-spacing: .04em; }
.auth-brand .brand-symbol { width: 44px; height: 44px; }
.tb-brand .brand-symbol { width: 32px; height: 32px; }
@media (max-width: 599px) { .dash-head .brand-symbol { width: 32px; height: 32px; } }

/* Cross-search brand: four colours form one shared KS structure. */
:root {
    --brand-blue: #4285f4; --brand-red: #ea4335; --brand-yellow: #fbbc05; --brand-green: #34a853;
    --brand-blue-ink: #1967d2; --brand-red-ink: #b3261e; --brand-yellow-ink: #8a5700; --brand-green-ink: #137333;
    --surface: #f8f9fa; --subtle: #f1f3f4; --hover: #e8eaed;
}
:root[data-theme="dark"] {
    --brand-blue-ink: #a8c7fa; --brand-red-ink: #ffb4ab; --brand-yellow-ink: #fddd83; --brand-green-ink: #a8dab5;
    --surface: #111318; --subtle: #252932; --hover: #303640;
}
.brand-blue { color: var(--brand-blue-ink); }
.brand-red { color: var(--brand-red-ink); }
.brand-yellow { color: var(--brand-yellow-ink); }
.brand-green { color: var(--brand-green-ink); }
.brand-symbol { width: 42px; height: 42px; }
.brand-wordmark { display: grid; gap: 3px; text-align: left; line-height: 1; }
.brand-name { color: var(--text); font-size: 23px; font-weight: 650; letter-spacing: .06em; }
.brand-roman { display: block; font-size: 9px; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
.auth-brand { gap: 12px; }
.auth-brand .brand-symbol { width: 54px; height: 54px; }
.auth-brand .brand-name { font-size: 28px; }
.auth-brand .brand-roman { font-size: 10px; }
.tb-brand .brand-symbol { width: 34px; height: 34px; }
.tb-brand .brand-name { font-size: 18px; }
.tb-brand .brand-roman { font-size: 8px; }
#searchTitle { font-weight: 500; }
#schedule .panel-head h2 .mi { color: var(--brand-red-ink); }
#notes .panel-head h2 .mi { color: var(--brand-yellow-ink); }
#navigation .panel-head h2 .mi { color: var(--brand-green-ink); }
.rail-link[href="#schedule"] > .mi { color: var(--brand-red-ink); }
.rail-link[href="#notes"] > .mi { color: var(--brand-yellow-ink); }
.rail-link[href="#navigation"] > .mi { color: var(--brand-green-ink); }
@media (max-width: 599px) {
    .dash-head .brand-symbol { width: 36px; height: 36px; }
    .dash-head .brand-name { font-size: 20px; }
    .dash-head .brand-roman { font-size: 8px; }
}