/* Shared theme tokens: cool light surfaces and reference-inspired midnight blue. */
:root {
  color-scheme: light;
  --bg: #f2f3f9;
  --surface: #ffffff;
  --sidebar: #eaeaf4;
  --topbar: #f9f9fc;
  --field: #f6f6fb;
  --raised: #ededf7;
  --ink: #272a43;
  --muted: #62667e;
  --border: #d9dcea;
  --accent: #6c48c9;
  --accent-hover: #5837b0;
  --accent-soft: #eee8fb;
  --accent-line: #8960de;
  --mint: #247c74;
  --mint-soft: #e0efed;
  --hero: #eaeaf6;
  --hero-end: #f5f5fb;
  --orbit: #b9b2d755;
  --star: #936c19;
  --danger: #b64464;
  --danger-soft: #f9e8ee;
  --shadow: 0 8px 28px #29234212;
}
body.dark {
  color-scheme: dark;
  --bg: #11152b;
  --surface: #151a30;
  --sidebar: #201f33;
  --topbar: #12121f;
  --field: #272b42;
  --raised: #2a2c44;
  --ink: #ececf5;
  --muted: #a7acc6;
  --border: #34364e;
  --accent: #b6a1ff;
  --accent-hover: #6845c4;
  --accent-soft: #302844;
  --accent-line: #945aff;
  --mint: #8bdccc;
  --mint-soft: #272f42;
  --hero: #1d203a;
  --hero-end: #15192f;
  --orbit: #77729d40;
  --star: #e7c66f;
  --danger: #ef9ab2;
  --danger-soft: #402738;
  --shadow: 0 8px 28px #07081840;
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
button:disabled { cursor:not-allowed; opacity:.5; }
a { color:inherit; text-decoration:none; }
button,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible { outline:2px solid var(--accent-line); outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.topbar { min-height:58px; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--topbar); border-bottom:1px solid var(--border); }
.brand { color:var(--mint); font-size:17px; font-weight:650; white-space:nowrap; }
.brand span { color:var(--muted); font-size:12px; font-weight:400; margin-left:8px; }
.header-actions,.toolbar-actions { display:flex; align-items:center; gap:9px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 13px; font-size:12px; border-radius:8px; border:1px solid transparent; white-space:nowrap; }
.button svg { width:15px; height:15px; }
.secondary { border-color:var(--border); background:var(--surface); color:var(--muted); }
.secondary:hover { border-color:var(--accent-line); color:var(--accent); }
.primary { background:#7350c6; border-color:#7350c6; color:#fff; }
.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.icon-button { display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; border-radius:6px; color:var(--muted); font-size:22px; flex-shrink:0; }
.icon-button:hover { color:var(--accent); background:var(--accent-soft); }
.header-actions>.icon-button { border:1px solid var(--border); height:35px; width:35px; background:var(--surface); }
.workspace-layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100vh - 58px); }
.sidebar { background:var(--sidebar); border-right:1px solid var(--border); padding:24px 14px; min-width:0; }
.page-content { width:100%; min-width:0; max-width:1200px; margin:0 auto; padding:28px 32px 60px; }
.search-box { display:flex; align-items:center; gap:12px; max-width:720px; height:50px; margin:0 auto 38px; padding:0 17px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--muted); box-shadow:0 3px 14px #1b173507; }
.search-box:focus-within { outline:2px solid var(--accent-line); outline-offset:1px; }
.search-box input { flex:1; min-width:0; background:transparent; border:0; outline:none; font-size:13px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
.search-box kbd { border:1px solid var(--border); border-radius:4px; padding:0 5px; font-size:11px; }
.search-box button { font-size:22px; padding:0; }
.website-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.browse-controls { display:flex; align-items:center; gap:14px; min-width:0; }
#view-title { font-size:12px; color:var(--muted); font-weight:400; margin:0; overflow-wrap:anywhere; }
.count-badge { margin-left:5px; color:var(--accent); font-variant-numeric:tabular-nums; }
.toolbar-actions select { font-size:12px; max-width:100px; background:transparent; border:0; padding:5px 0; color:var(--muted); }
option { background:var(--surface); color:var(--ink); }
.view-toggle { display:flex; border:1px solid var(--border); background:var(--surface); padding:2px; border-radius:7px; }
.view-toggle .icon-button { width:27px; height:27px; }
.view-toggle svg { width:14px; height:14px; }
.view-toggle .selected { background:var(--accent-soft); color:var(--accent); }
.quick-views { display:flex; flex-direction:column; gap:6px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.nav-item { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; font-size:12px; color:var(--muted); flex:1; min-width:0; text-align:left; }
.nav-item:hover { background:var(--bg); }
.nav-item.active { color:var(--mint); background:var(--mint-soft); }
.nav-item b { font-weight:400; font-size:10px; margin-left:auto; }
.section-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; margin:22px 6px 6px; }
.section-label .icon-button { width:25px; height:25px; }
.section-label svg { width:14px; height:14px; }
.group-nav-row { display:flex; align-items:center; gap:3px; }
.group-nav-row .nav-item>span:not(.category-dot) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-dot { width:6px; height:6px; border-radius:50%; background:var(--accent-line); flex-shrink:0; }
.group-edit { width:26px; height:27px; }
.group-edit svg { width:13px; height:13px; }
.group-empty { color:var(--muted); font-size:11px; line-height:1.8; margin:8px 0; }
.search-status { font-size:12px; color:var(--muted); margin:0 0 16px; }
.site-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.site-card { position:relative; min-width:0; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 2px 4px #16142b03; transition:border-color .15s,box-shadow .15s; }
.site-card:hover { border-color:var(--accent-line); box-shadow:var(--shadow); }
.card-link { display:block; padding:19px 12px 16px; border-radius:10px; }
.card-top { display:flex; flex-direction:column; align-items:center; gap:10px; }
.site-icon { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:11px; background:var(--icon-bg); color:var(--icon-fg); font-size:23px; font-weight:650; line-height:1; white-space:nowrap; }
.dark .site-icon { background:var(--raised); color:color-mix(in srgb,var(--icon-fg) 35%,#e3ddff); }
.card-title { width:100%; min-width:0; text-align:center; }
.card-title h3 { margin:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-domain,.card-description,.card-bottom { display:none; }
.card-actions { position:absolute; right:4px; top:4px; display:flex; gap:1px; padding:1px; border-radius:6px; background:var(--surface); opacity:0; transition:opacity .15s; }
.site-card:hover .card-actions,.site-card:focus-within .card-actions { opacity:1; }
.card-actions .icon-button { width:23px; height:23px; }
.card-actions svg { width:12px; height:12px; }
.card-actions .favorite-on { color:var(--star); }
.favorite-on svg { fill:var(--accent-soft); }
.card-actions .delete-action:hover { color:var(--danger); background:var(--danger-soft); }
.site-grid.list-mode { grid-template-columns:1fr; gap:8px; }
.list-mode .card-link { padding:13px 100px 13px 16px; }
.list-mode .card-top { flex-direction:row; gap:14px; }
.list-mode .card-title { text-align:left; }
.list-mode .site-icon { width:32px; height:32px; font-size:18px; flex-shrink:0; }
.site-icon.site-icon-text { width:max-content; min-width:42px; padding:0 7px; font-size:13px; }
.list-mode .site-icon.site-icon-text { min-width:32px; font-size:12px; }
.list-mode .site-domain { display:block; font-size:11px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-mode .card-actions { top:50%; right:12px; transform:translateY(-50%); opacity:1; }
.empty-state { text-align:center; padding:50px 20px; border:1px dashed var(--border); border-radius:12px; background:var(--surface); }
.empty-state>span { display:inline-flex; color:var(--muted); }
.empty-state h3 { font-size:16px; font-weight:500; margin:12px 0 6px; }
.empty-state p { color:var(--muted); font-size:12px; margin-bottom:20px; }
dialog { width:min(480px,calc(100% - 32px)); max-height:90vh; padding:26px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 100px #0c0c203d; }
dialog::backdrop { background:#0c0c2070; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.dialog-heading h2 { font-size:20px; font-weight:600; margin:0; }
.eyebrow { display:none; }
label:not(.backup-option) { display:block; font-size:12px; margin-top:15px; }
label>span { color:var(--accent); }
label input:not([type=checkbox]),textarea,label select { display:block; width:100%; background:var(--field); color:var(--ink); padding:10px 12px; margin-top:7px; border:1px solid var(--border); border-radius:7px; outline:none; font-size:12px; }
textarea { resize:vertical; }
label input:focus,textarea:focus,label select:focus { border-color:var(--accent-line); outline:2px solid var(--accent-soft); }
.form-row { display:flex; gap:14px; }
.form-row>label { flex:1; min-width:0; }
.form-row>.icon-field { flex:0 0 95px; }
.checkbox-label { display:flex!important; align-items:center; gap:8px; color:var(--muted); }
.checkbox-label input { accent-color:var(--accent); }
.dialog-footer { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--border); padding-top:18px; margin-top:22px; }
.error { color:var(--danger); font-size:12px; }
.error:empty { display:none; }
.dialog-description { color:var(--muted); font-size:12px; line-height:1.9; }
.backup-option { display:flex; align-items:center; gap:13px; width:100%; padding:17px 12px; margin-top:14px; border:1px solid var(--border); border-radius:9px; cursor:pointer; text-align:left; }
.backup-option:hover { background:var(--accent-soft); border-color:var(--accent-line); }
.backup-option>span:first-child { color:var(--accent); }
.backup-option strong { display:block; font-size:13px; font-weight:500; }
.backup-option small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.backup-option>span:last-child { margin-left:auto; color:var(--muted); }
.help-content p { font-size:12px; line-height:1.9; color:var(--muted); margin:20px 0; }
.help-content b { color:var(--ink); font-weight:500; }
.help-content .hint { font-size:11px; padding:12px; border-radius:8px; background:var(--accent-soft); }
.group-delete-section { border-top:1px solid var(--border); margin-top:24px; padding-top:16px; }
.group-delete-section h3,.group-manager-heading h3 { font-size:14px; margin:0; }
.danger-button { color:var(--danger); background:var(--danger-soft); border:1px solid var(--danger); margin-top:16px; }
.group-manager-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 10px; }
.manager-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--border); border-radius:8px; padding:12px; margin-top:8px; background:var(--field); }
.manager-row>span { overflow-wrap:anywhere; min-width:0; }
.manager-row small { margin-left:auto; color:var(--muted); white-space:nowrap; }
.manager-row svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; }
.manager-row:hover { border-color:var(--accent-line); }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:15px; align-items:center; width:max-content; max-width:90vw; padding:12px 17px; background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:9px; box-shadow:var(--shadow); font-size:12px; z-index:10; }
.toast button { color:var(--mint); white-space:nowrap; }
.toast #dismiss-toast { font-size:20px; color:var(--muted); }
@media(max-width:1200px) { .site-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { .workspace-layout { grid-template-columns:184px minmax(0,1fr); } .site-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .topbar { padding:10px 16px; } .brand span { display:none; } .page-content { padding:26px 16px 40px; } }
@media(max-width:620px) { .workspace-layout { grid-template-columns:140px minmax(0,1fr); } .sidebar { padding:16px 7px; } .sidebar .nav-item { padding:9px 6px; gap:5px; font-size:11px; } .sidebar .group-edit { width:22px; } .page-content { padding:22px 12px 40px; } .site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .website-toolbar { flex-wrap:wrap; gap:12px; } .toolbar-actions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; } .search-box { margin-bottom:26px; } .header-actions { gap:5px; } .header-actions .button { padding:7px 9px; font-size:11px; } .brand { font-size:15px; } .topbar { gap:10px; } .card-title h3 { font-size:12px; } .card-link { padding:28px 8px 14px; } dialog { padding:22px; } }
@media(max-width:420px) { .site-grid { grid-template-columns:1fr; } .topbar { flex-wrap:wrap; } .search-box { padding:0 10px; gap:7px; } .search-box kbd { display:none; } }
@media(hover:none),(pointer:coarse) { .card-actions { opacity:1; } .card-link { padding-top:30px; } .list-mode .card-link { padding-top:13px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

@media(min-width:621px) { .sidebar { position:sticky; top:0; align-self:start; height:calc(100vh - 58px); overflow-y:auto; } }

/* Versions stay nested under their project in both themes. */
.project-row { gap:1px; }
.project-row .nav-item { padding-left:3px; gap:0; }
.project-marker { display:none; }
.project-toggle { flex:0 0 18px; padding:6px 0; color:var(--muted); font-size:14px; border-radius:4px; }
.project-toggle:hover { background:var(--accent-soft); color:var(--accent); }
.version-children { margin:3px 0 10px 9px; border-left:1px solid var(--border); padding-left:12px; }
.version-row .nav-item { font-size:11px; padding:7px 8px; }
.project-add-version { color:var(--accent); }
.version-children:empty { display:none; }
.field-hint { display:block; color:var(--muted); font-size:11px; margin-top:6px; }
.release-badge { display:block; width:max-content; max-width:100%; margin:7px auto 0; color:var(--muted); background:var(--raised); border-radius:4px; padding:1px 5px; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-mode .release-badge { margin:6px 0 0 46px; }
@media(max-width:620px) { .version-children { padding-left:5px; margin-left:6px; } .project-row .nav-item { padding-left:2px; } }

.module-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-top:1px solid var(--border); padding-top:14px; margin-bottom:18px; }
.module-tabs { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.module-chip { display:flex; align-items:center; gap:1px; }
.module-filter { color:var(--muted); font-size:12px; padding:6px 10px; border-radius:6px; max-width:250px; overflow-wrap:anywhere; text-align:left; }
.module-filter.active { color:var(--accent); background:var(--accent-soft); }
.module-filter:hover { background:var(--raised); }
.module-edit { width:23px; height:25px; }
.module-edit svg { width:12px; height:12px; }
@media(max-width:620px) { .module-bar { flex-direction:column; } }

.sync-status { padding:12px; border-radius:8px; background:var(--raised); color:var(--ink); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.sync-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.sync-choices { margin-top:20px; padding-top:16px; border-top:1px solid var(--border); }
.sync-choices h3 { font-size:15px; }
#sync-config-form .field-hint a { color:var(--accent); text-decoration:underline; }
#sync-account { font-size:13px; overflow-wrap:anywhere; }
@media(max-width:620px) { .header-actions { flex-wrap:wrap; justify-content:flex-end; } #sync-button { max-width:140px; } }