/* ══ SIDEBAR ══ */
.sidebar {
  width:var(--sz-sidebar-w);
  background:linear-gradient(180deg,var(--glass) 0%,color-mix(in srgb,var(--surface2) 76%,var(--glass)) 100%);
  border-right: 1px solid var(--border);
  backdrop-filter:var(--ba1);
  -webkit-backdrop-filter:var(--ba1);
  display:flex; flex-direction:column; align-items:center;
  padding:calc(24px * var(--ui-scale)) 0; gap:calc(4px * var(--ui-scale));
  position:fixed; top:0; left:0; bottom:0;
  z-index:100;
  flex-shrink:0;
}
.logo {
  font-family:'Space Mono',monospace;
  font-size:calc(11px * var(--ui-scale)); color:var(--accent);
  letter-spacing:calc(2px * var(--ui-scale));
  writing-mode:vertical-rl; text-orientation:mixed;
  margin-bottom:calc(20px * var(--ui-scale)); opacity:.9;
  user-select:none;
}
.dev-badge {
  position:fixed;
  bottom:12px;
  right:16px;
  z-index:1400;
  display:none;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(var(--accent-rgb),0.14);
  border:1px solid rgba(var(--accent-rgb),0.35);
  color:var(--accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:var(--s2);
}
.sidebar .nav-item {
  width:calc(48px * var(--ui-scale)); height:calc(48px * var(--ui-scale)); border-radius:calc(12px * var(--ui-scale));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:calc(4px * var(--ui-scale));
  transition:transform var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
  position:relative;
  color:var(--text-muted); border:none; background:transparent;
  font-family:inherit;
}
.sidebar .nav-item:hover { background:var(--surface2); color:var(--text-dim); transform:translateY(var(--hover-lift-1)); }
.sidebar .nav-item.active { background:rgba(var(--accent-rgb),0.12); color:var(--accent); }
.sidebar .nav-item svg { width:calc(20px * var(--ui-scale)); height:calc(20px * var(--ui-scale)); stroke:currentColor; fill:none; stroke-width:1.5; }
.sidebar .nav-label { font-size:calc(9px * var(--ui-scale)); letter-spacing:calc(.5px * var(--ui-scale)); line-height:1; }
.sidebar .nav-item .tooltip {
  position:absolute; left:calc(62px * var(--ui-scale));
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text); font-size:calc(12px * var(--ui-scale)); padding:calc(6px * var(--ui-scale)) calc(12px * var(--ui-scale));
  border-radius:calc(8px * var(--ui-scale)); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity var(--motion-fast) var(--ease-standard);
  z-index:200; font-family:'Space Mono',monospace; letter-spacing:.5px;
}
.sidebar .nav-item:hover .tooltip { opacity:1; }
.nav-bottom { margin-top:auto; }

/* ══ MAIN ══ */
.main {
  margin-left:var(--sz-sidebar-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
}

/* ══ TOPBAR ══ */
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 var(--sz-topbar-pad-x); gap:calc(16px * var(--ui-scale));
  background:linear-gradient(180deg,var(--glass) 0%,color-mix(in srgb,var(--surface) 82%,var(--surface2)) 100%);
  backdrop-filter:var(--ba1);
  -webkit-backdrop-filter:var(--ba1);
  position:relative;
}
.page-title { font-size:var(--sz-page-title); font-weight:600; color:var(--text); flex:1; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:calc(10px * var(--ui-scale)); }
.icon-btn {
  width:calc(34px * var(--ui-scale)); height:calc(34px * var(--ui-scale)); border-radius:calc(9px * var(--ui-scale));
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text-dim); font-size:calc(14px * var(--ui-scale)); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
  flex-shrink:0;
}
.icon-btn:hover { border-color:rgba(var(--accent-rgb),0.35); color:var(--accent); transform:translateY(var(--hover-lift-1)); }

/* Theme toggle */
.theme-toggle-btn {
  position:static !important; width:calc(46px * var(--ui-scale)) !important; height:calc(26px * var(--ui-scale)) !important;
  border-radius:9999px !important; border:1px solid var(--border) !important;
  background:var(--surface2) !important; cursor:pointer !important;
  padding:calc(3px * var(--ui-scale)) !important; display:flex !important; align-items:center !important;
  justify-content:flex-start !important; appearance:none !important; outline:none !important;
  overflow:hidden; flex-shrink:0;
}
.theme-toggle-btn:focus-visible {
  outline:2px solid rgba(var(--accent-rgb),0.72) !important;
  outline-offset:2px !important;
}
.theme-toggle-btn .knob {
  width:calc(20px * var(--ui-scale)) !important; height:calc(20px * var(--ui-scale)) !important; border-radius:50% !important;
  background:linear-gradient(135deg,var(--btn-primary-start),var(--btn-primary-end)) !important;
  transition:transform var(--motion-slow) var(--ease-standard) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important; position:relative !important;
}
[data-tm="light"] .theme-toggle-btn .knob { transform:translateX(calc(20px * var(--ui-scale))) !important; }

/* ══ CONTENT AREA ══ */
.content {
  flex:1; display:flex; min-height:0;
  overflow:hidden;
}

/* Archive split layout: keep inner columns scrolling independently */
#page-archive .content { overflow:hidden; }

/* ══ SUBNAV (二级左侧面板 200px) ══ */
.subnav {
  width:var(--sz-subnav-w); border-right:1px solid var(--border);
  padding:calc(16px * var(--ui-scale)) 0; flex-shrink:0; overflow-y:auto;
  overscroll-behavior:contain;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
}
.subnav.hidden, #subnav.subnav--template { display:none !important; }
.subnav-section { margin-bottom:4px; }
.subnav-group-label {
  font-size:calc(10px * var(--ui-scale)); letter-spacing:calc(2px * var(--ui-scale)); color:var(--text-muted);
  padding:calc(6px * var(--ui-scale)) calc(18px * var(--ui-scale)) calc(4px * var(--ui-scale)); text-transform:uppercase;
  font-family:'Space Mono',monospace;
}
.subnav-item {
  display:flex; align-items:center; padding:calc(9px * var(--ui-scale)) calc(18px * var(--ui-scale));
  font-size:calc(13px * var(--ui-scale)); color:var(--text-dim); cursor:pointer;
  border-left:2px solid transparent;
  transition:transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
  gap:calc(8px * var(--ui-scale));
  width:100%; background:none; border-right:none; border-top:none; border-bottom:none;
  font-family:inherit; text-align:left;
}
.subnav-item:hover { color:var(--text); background:rgba(255,255,255,0.03); transform:translateX(2px); }
.subnav-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(var(--accent-rgb),0.06); }
.subnav-item svg { width:calc(13px * var(--ui-scale)); height:calc(13px * var(--ui-scale)); opacity:.7; stroke:currentColor; fill:none; flex-shrink:0; }

/* ══ PANEL (主内�?flex:1) ══ */
.panel {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--sz-panel-pad);
  background:var(--bg);
  min-height:0;
  position:relative;
  isolation:isolate;
}
.panel > * { position:relative; z-index:1; }

/* Section heading */
.section-heading {
  font-size:calc(10px * var(--ui-scale)); font-weight:600; text-transform:uppercase; letter-spacing:calc(2px * var(--ui-scale));
  color:var(--text-muted); margin-bottom:calc(14px * var(--ui-scale));
  display:flex; align-items:center; gap:calc(8px * var(--ui-scale)); font-family:'Space Mono',monospace;
}
.section-heading::after { content:''; flex:1; height:1px; background:var(--border); }
.section-heading::before { content:''; width:calc(5px * var(--ui-scale)); height:calc(5px * var(--ui-scale)); border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent3)); flex-shrink:0; }
/* zip compat */
.section-title { font-size:calc(10px * var(--ui-scale)); font-weight:600; text-transform:uppercase; letter-spacing:calc(2px * var(--ui-scale)); color:var(--text-muted); margin-bottom:calc(14px * var(--ui-scale)); display:flex; align-items:center; gap:calc(8px * var(--ui-scale)); font-family:'Space Mono',monospace; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }
.section-title::before { content:''; width:calc(5px * var(--ui-scale)); height:calc(5px * var(--ui-scale)); border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent3)); flex-shrink:0; }
.section { margin-top:calc(20px * var(--ui-scale)); }
h1 { font-size:calc(22px * var(--ui-scale)); font-weight:700; color:var(--text); margin:0 0 calc(4px * var(--ui-scale)); padding-bottom:0; }
h1::after { display:none; }
.muted { color:var(--text-muted); line-height:1.6; font-size:calc(13px * var(--ui-scale)); }

/* ══ PAGE / SECTION visibility ══ */
.page { display:none; flex-direction:column; height:100%; min-height:0; }
.page.active { display:flex; min-height:0; }
.page-inner { display:flex; flex:1; overflow:visible; }
.section-panel { display:none; flex:1; overflow:visible; padding:var(--sz-panel-pad); }
.section-panel.active { display:block; }

/* Account page scroll area */
#page-account > div:last-child { min-height:0; }

/* ══ CARDS ══ */
.cards { display:grid; grid-template-columns:1fr; gap:calc(10px * var(--ui-scale)); }
@media(min-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
.cards--tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:900px){.cards--tiles{grid-template-columns:repeat(3,minmax(0,1fr));}}

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--s1);
  padding:calc(14px * var(--ui-scale)); position:relative; overflow:hidden;
  color:var(--text); cursor:pointer;
  transition:transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.card::before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,0) 55%); pointer-events:none; }
@media(hover:hover){.card:hover{transform:translateY(var(--hover-lift-2));box-shadow:var(--s2);border-color:rgba(var(--accent-rgb),0.18)}}
.card:active{transform:scale(var(--press-scale))}
.card-title { font-weight:700; font-size:calc(14px * var(--ui-scale)); color:var(--text); }
.card-sub { font-size:calc(12px * var(--ui-scale)); color:var(--text-muted); margin-top:calc(3px * var(--ui-scale)); line-height:1.4; }
.card-actions { margin-top:calc(12px * var(--ui-scale)); display:flex; gap:calc(8px * var(--ui-scale)); flex-wrap:wrap; position:relative; z-index:1; }
.card-head { display:flex; justify-content:space-between; gap:calc(8px * var(--ui-scale)); align-items:flex-start; position:relative; z-index:1; }
.card[data-kind="character"]{ border-top:2px solid rgba(var(--accent-rgb),0.28); }
.card[data-kind="world"]{ border-top:2px solid rgba(var(--accent3-rgb),0.28); }
.card[data-kind="persona"]{ border-top:2px solid rgba(var(--accent2-rgb),0.28); }
.card[data-kind="chat"]{ border-top:2px solid rgba(126,200,160,0.22); }
.card--featured { background:var(--surface); }

/* ══ BUTTONS ══ */
.btn-primary,.btn-secondary,.btn-danger {
  border-radius:calc(10px * var(--ui-scale)); font-weight:600; font-size:var(--sz-control-fs);
  min-height:var(--sz-control-h); padding:calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale)); cursor:pointer; border:none;
  display:inline-flex; align-items:center; justify-content:center; gap:calc(7px * var(--ui-scale));
  transition:transform var(--motion-base) var(--ease-standard), filter var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
  font-family:inherit;
}
.btn-primary { background:linear-gradient(135deg,var(--btn-primary-start),var(--btn-primary-end)); color:var(--btn-primary-text); box-shadow:0 4px 14px var(--btn-primary-shadow); }
.btn-primary {
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--btn-primary-end) 44%,rgba(255,255,255,0.30));
  box-shadow:0 8px 20px var(--btn-primary-shadow),inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.btn-primary:hover {
  transform:translateY(calc(var(--hover-lift-2) - 1px));
  filter:brightness(1.06);
  box-shadow:0 12px 26px var(--btn-primary-shadow),inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:active { transform:scale(var(--press-scale)); }
.btn-secondary { background:var(--surface2); border:1px solid var(--border); color:var(--text); }
.btn-secondary:hover { background:var(--surface); border-color:rgba(var(--accent-rgb),0.25); transform:translateY(var(--hover-lift-1)); }
.btn-secondary:active { transform:scale(var(--press-scale)); }
.btn-danger { background:rgba(200,126,126,0.09); border:1px solid rgba(200,126,126,0.22); color:var(--danger); }
.btn-danger:hover { background:rgba(200,126,126,0.15); transform:translateY(var(--hover-lift-1)); }
.small-btn { border-radius:calc(8px * var(--ui-scale)); border:1px solid var(--border); background:var(--surface2); color:var(--text-dim); font-size:calc(11px * var(--ui-scale)); padding:calc(5px * var(--ui-scale)) calc(10px * var(--ui-scale)); cursor:pointer; font-family:inherit; transition:transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); white-space:nowrap; }
.small-btn.primary { background:rgba(var(--accent-rgb),0.10); border-color:rgba(var(--accent-rgb),0.20); color:var(--accent); }
.small-btn.danger { background:rgba(200,126,126,0.09); border-color:rgba(200,126,126,0.20); color:var(--danger); }

/* ══ MODAL ══ */
.modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:calc(20px * var(--ui-scale)); }
.modal.hidden { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.60); backdrop-filter:blur(6px); animation:ucimFadeIn var(--motion-base) var(--ease-standard) both; }
.modal-card { position:relative; z-index:1; background:var(--surface); border:1px solid var(--border); border-radius:calc(18px * var(--ui-scale)); box-shadow:var(--s4); color:var(--text); width:min(calc(560px * var(--ui-scale)),100%); max-height:90vh; display:flex; flex-direction:column; overflow:auto; overscroll-behavior:contain; animation:ucimModalPop var(--motion-slow) var(--ease-standard) both; }
.modal-card.is-verified { border-color:var(--money); box-shadow:0 0 0 2px color-mix(in srgb, var(--money) 38%, transparent); }
.modal-header { display:flex; align-items:center; justify-content:flex-start; padding:calc(16px * var(--ui-scale)) calc(20px * var(--ui-scale)); border-bottom:1px solid var(--border); }
.modal-title { font-weight:700; font-size:calc(16px * var(--ui-scale)); color:var(--text); }
.modal-body { padding:calc(18px * var(--ui-scale)) calc(20px * var(--ui-scale)); overflow-y:auto; flex:1; color:var(--text); }
.modal-footer { padding:calc(18px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(20px * var(--ui-scale)); border-top:1px solid var(--border); background:rgba(0,0,0,0.15); display:flex; gap:calc(12px * var(--ui-scale)); justify-content:flex-end; flex-wrap:wrap; }

/* ══ GLOBAL REQUEST OVERLAY ══ */
.request-overlay {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(5px);
}
.request-overlay.hidden { display: none; }
.request-overlay__card {
  min-width: min(calc(320px * var(--ui-scale)), 92vw);
  max-width: min(calc(420px * var(--ui-scale)), 92vw);
  border-radius: calc(16px * var(--ui-scale));
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--s4);
  padding: calc(18px * var(--ui-scale)) calc(20px * var(--ui-scale));
  display: inline-flex;
  align-items: center;
  gap: calc(12px * var(--ui-scale));
}
.request-overlay__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  flex-shrink: 0;
  animation: ucimSpin .82s linear infinite;
}
.request-overlay__text {
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
  letter-spacing: .2px;
}
.request-overlay__cancel {
  margin-left: auto;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  border-radius: calc(10px * var(--ui-scale));
  padding: calc(6px * var(--ui-scale)) calc(10px * var(--ui-scale));
  font-size: calc(12px * var(--ui-scale));
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.request-overlay__cancel:hover {
  border-color: rgba(var(--accent-rgb),0.35);
  color: var(--accent);
  transform: translateY(var(--hover-lift-1));
}

/* ══ TOAST ══ */
.toast { position:fixed; bottom:calc(28px * var(--ui-scale)); left:50%; transform:translateX(-50%); z-index:2100; padding:calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)); border-radius:calc(12px * var(--ui-scale)); background:var(--surface2); border:1px solid var(--border); color:var(--text); box-shadow:var(--s3); font-weight:500; font-size:calc(13px * var(--ui-scale)); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--motion-base) var(--ease-standard); }
.toast.hidden { opacity:0; pointer-events:none; }
.toast:not(.hidden) { opacity:1; pointer-events:auto; }

/* ══ FORMS ══ */
.form { display:flex; flex-direction:column; gap:calc(12px * var(--ui-scale)); }
.field { display:flex; flex-direction:column; gap:calc(5px * var(--ui-scale)); }
.field label { font-size:calc(10px * var(--ui-scale)); font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:calc(1px * var(--ui-scale)); font-family:'Space Mono',monospace; }
.field input,.field textarea,.field select { background:var(--surface2); border:1px solid var(--border); border-radius:calc(9px * var(--ui-scale)); color:var(--text); font-family:inherit; font-size:calc(13px * var(--ui-scale)); padding:calc(9px * var(--ui-scale)) calc(11px * var(--ui-scale)); outline:none; transition:border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.field input::placeholder,.field textarea::placeholder { color:var(--text-muted); }
.field input:focus,.field textarea:focus,.field select:focus { border-color:rgba(var(--accent-rgb),0.45); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.09); background:var(--surface); }
.field select { appearance:none; -webkit-appearance:none; }
.field select option { background:var(--surface2); color:var(--text); }
.field textarea { min-height:calc(72px * var(--ui-scale)); resize:vertical; }
.hint { font-size:calc(11px * var(--ui-scale)); color:var(--text-muted); }
.req { color:var(--danger); }
.char-count { font-size:calc(10px * var(--ui-scale)); color:var(--text-muted); text-align:right; font-family:'Space Mono',monospace; }
.details { border:1px solid var(--border); border-radius:calc(9px * var(--ui-scale)); overflow:hidden; }
.details summary { padding:calc(9px * var(--ui-scale)) calc(13px * var(--ui-scale)); cursor:pointer; font-size:calc(13px * var(--ui-scale)); color:var(--text-dim); background:var(--surface2); user-select:none; }
.details summary:hover { color:var(--text); }
.details-body { padding:calc(13px * var(--ui-scale)); display:flex; flex-direction:column; gap:calc(11px * var(--ui-scale)); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:calc(10px * var(--ui-scale)); }
@media(max-width:480px){.grid-2{grid-template-columns:1fr;}}
.avatar-picker { display:flex; gap:calc(12px * var(--ui-scale)); align-items:flex-start; }
.avatar-preview { width:calc(56px * var(--ui-scale)); height:calc(56px * var(--ui-scale)); border-radius:calc(11px * var(--ui-scale)); background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:calc(20px * var(--ui-scale)); font-weight:700; color:var(--accent); overflow:hidden; flex-shrink:0; }
.avatar-preview img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }