/* ══ SIDEBAR ══ */
.sidebar {
  width:72px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
  padding:24px 0; gap:4px;
  position:fixed; top:0; left:0; bottom:0;
  z-index:100;
  flex-shrink:0;
}
.logo {
  font-family:'Space Mono',monospace;
  font-size:11px; color:var(--accent);
  letter-spacing:2px;
  writing-mode:vertical-rl; text-orientation:mixed;
  margin-bottom:20px; opacity:.9;
  user-select:none;
}
.sidebar .nav-item {
  width:48px; height:48px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:4px; transition:all .2s; position:relative;
  color:var(--text-muted); border:none; background:transparent;
  font-family:inherit;
}
.sidebar .nav-item:hover { background:var(--surface2); color:var(--text-dim); }
.sidebar .nav-item.active { background:rgba(200,169,126,0.12); color:var(--accent); }
.sidebar .nav-item svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; }
.sidebar .nav-label { font-size:9px; letter-spacing:.5px; line-height:1; }
.sidebar .nav-item .tooltip {
  position:absolute; left:62px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text); font-size:12px; padding:6px 12px;
  border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
  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:72px;
  flex:1; display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
}

/* ══ TOPBAR ══ */
.topbar {
  height:60px; flex-shrink:0;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 28px; gap:16px;
  background:var(--surface); /* 与 sidebar 同色 */
}
.page-title { font-size:16px; font-weight:600; color:var(--text); flex:1; }
.search-bar {
  display:flex; align-items:center;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; padding:8px 14px; gap:8px; width:260px;
  transition:border-color .2s;
}
.search-bar:focus-within { border-color:rgba(200,169,126,0.40); }
.search-bar input { background:none; border:none; outline:none; color:var(--text); font-size:13px; font-family:inherit; width:100%; }
.search-bar input::placeholder { color:var(--text-muted); }
.search-bar svg { color:var(--text-muted); width:15px; height:15px; flex-shrink:0; }
.icon-btn {
  width:34px; height:34px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface2);
  color:var(--text-dim); font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .18s; flex-shrink:0;
}
.icon-btn:hover { border-color:rgba(200,169,126,0.35); color:var(--accent); }

/* Theme toggle */
.theme-toggle-btn {
  position:static !important; width:46px !important; height:26px !important;
  border-radius:9999px !important; border:1px solid var(--border) !important;
  background:var(--surface2) !important; cursor:pointer !important;
  padding:3px !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 .knob {
  width:20px !important; height:20px !important; border-radius:50% !important;
  background:linear-gradient(135deg,var(--accent),var(--accent3)) !important;
  transition:transform .28s var(--esp) !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(20px) !important; }

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

/* ══ SUBNAV (二级左侧面板 200px) ══ */
.subnav {
  width:200px; border-right:1px solid var(--border);
  padding:16px 0; flex-shrink:0; overflow-y:auto;
  background:var(--bg);
}
.subnav.hidden, #subnav.subnav--template { display:none !important; }
.subnav-section { margin-bottom:4px; }
.subnav-group-label {
  font-size:10px; letter-spacing:2px; color:var(--text-muted);
  padding:6px 18px 4px; text-transform:uppercase;
  font-family:'Space Mono',monospace;
}
.subnav-item {
  display:flex; align-items:center; padding:9px 18px;
  font-size:13px; color:var(--text-dim); cursor:pointer;
  border-left:2px solid transparent; transition:all .15s; gap:8px;
  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); }
.subnav-item.active { color:var(--accent); border-left-color:var(--accent); background:rgba(200,169,126,0.06); }
.subnav-item svg { width:13px; height:13px; opacity:.7; stroke:currentColor; fill:none; flex-shrink:0; }

/* ══ PANEL (主内容 flex:1) ══ */
.panel {
  flex:1; overflow-y:auto; padding:28px;
  background:var(--bg);
}
.panel::-webkit-scrollbar { width:4px; }
.panel::-webkit-scrollbar-track { background:transparent; }
.panel::-webkit-scrollbar-thumb { background:rgba(200,169,126,0.15); border-radius:4px; }

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

/* ══ PAGE / SECTION visibility ══ */
.page { display:none; flex-direction:column; height:100%; }
.page.active { display:flex; }
.page-inner { display:flex; flex:1; overflow:hidden; }
.section-panel { display:none; flex:1; overflow-y:auto; padding:28px; }
.section-panel.active { display:block; }

/* ══ CARDS ══ */
.cards { display:grid; grid-template-columns:1fr; gap:10px; }
@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:14px; position:relative; overflow:hidden;
  color:var(--text); cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.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(-2px);box-shadow:var(--s2);border-color:rgba(200,169,126,0.18)}}
.card:active{transform:scale(.98)}
.card-title { font-weight:700; font-size:14px; color:var(--text); }
.card-sub { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.4; }
.card-actions { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; position:relative; z-index:1; }
.card-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; position:relative; z-index:1; }
.card[data-kind="character"]{ border-top:2px solid rgba(200,169,126,0.28); }
.card[data-kind="world"]{ border-top:2px solid rgba(158,126,200,0.28); }
.card[data-kind="persona"]{ border-top:2px solid rgba(126,158,200,0.28); }
.card[data-kind="chat"]{ border-top:2px solid rgba(126,200,160,0.22); }
.card--featured { background:radial-gradient(600px 150px at 15% 0%,rgba(200,169,126,0.07),transparent 60%),var(--surface); }

/* ══ BUTTONS ══ */
.btn-primary,.btn-secondary,.btn-danger {
  border-radius:10px; font-weight:600; font-size:13px;
  min-height:38px; padding:8px 16px; cursor:pointer; border:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:all .2s var(--esp); font-family:inherit;
}
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent3)); color:#0c0c10; box-shadow:0 4px 14px rgba(200,169,126,0.20); }
.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn-primary:active { transform:scale(.96); }
.btn-secondary { background:var(--surface2); border:1px solid var(--border); color:var(--text); }
.btn-secondary:hover { background:var(--surface); border-color:rgba(200,169,126,0.25); }
.btn-secondary:active { transform:scale(.96); }
.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); }
.small-btn { border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-dim); font-size:11px; padding:5px 10px; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.small-btn.primary { background:rgba(200,169,126,0.10); border-color:rgba(200,169,126,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:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.60); backdrop-filter:blur(6px); }
.modal-card { position:relative; z-index:1; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--s4); color:var(--text); width:min(560px,100%); max-height:90vh; display:flex; flex-direction:column; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-title { font-weight:700; font-size:16px; color:var(--text); }
.modal-body { padding:18px 20px; overflow-y:auto; flex:1; color:var(--text); }
.modal-footer { padding:12px 20px; border-top:1px solid var(--border); background:rgba(0,0,0,0.15); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* ══ TOAST ══ */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:900; padding:10px 20px; border-radius:12px; background:var(--surface2); border:1px solid var(--border); color:var(--text); box-shadow:var(--s3); font-weight:500; font-size:13px; white-space:nowrap; }
.toast.hidden { display:none; }

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