/* 个人中心首屏所需的最小公共外壳。
   后台不再为导航、主题和按钮加载完整的公开站样式。 */
:root {
  --bg-0:#000000;
  --bg-1:#0a0a0a;
  --bg-2:#111111;
  --bg-3:#1a1a1a;
  --tx-1:#ffffff;
  --tx-2:#d1d1d6;
  --tx-3:#6e6e73;
  --accent:#00d4ff;
  --accent-dim:rgba(0,212,255,.08);
  --accent-line:rgba(0,212,255,.25);
  --accent-hover:rgba(0,212,255,.15);
  --err:#ff453a;
  --warn:#f59e0b; /* 固定琥珀,不随主题 */
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --font-display:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-body:"Space Grotesk","Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --transition:color .15s,background-color .15s,border-color .15s;
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  min-height:100vh;
  background:var(--bg-0);
  color:var(--tx-1);
  font:14px/1.5 var(--font-body);
  font-variant-numeric:tabular-nums;
}

.navbar {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  height:52px;
  padding:0 20px;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--line);
  background:var(--bg-1);
}
.nav-brand {
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  height:100%;
  justify-self:start;
  cursor:pointer;
}
.nav-brand::after {
  content:"";
  position:absolute;
  top:100%;
  right:0;
  left:0;
  height:32px;
}
.nav-title h1 {
  color:var(--tx-1);
  font:700 15px/1 var(--font-display);
  letter-spacing:.02em;
}
.nav-title h1 .proto { color:var(--accent); }
.nav-subtitle {
  color:var(--tx-3);
  font:500 9px/1.4 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.brand-dropdown {
  position:absolute;
  top:100%;
  left:0;
  z-index:200;
  width:max-content;
  padding:4px 0;
  visibility:hidden;
  border:1px solid var(--line-strong);
  background:var(--bg-2);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s,visibility .2s,transform .2s;
}
.nav-brand:hover .brand-dropdown,
.brand-dropdown.open {
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}
.brand-dropdown-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 12px;
  border:0;
  background:transparent;
  color:var(--tx-2);
  cursor:pointer;
  font:500 12px/1.4 var(--font-body);
  letter-spacing:.06em;
  white-space:nowrap;
}
.brand-dropdown-item:hover { background:var(--bg-3); color:var(--tx-1); }
.brand-dropdown-item[data-theme="RED"] > span:first-child { color:#B91C1C; }
.brand-dropdown-item[data-theme="PURPLE"] > span:first-child { color:#7B2FA0; }
.brand-dropdown-item[data-theme="CYAN"] > span:first-child { color:#00d4ff; }
.brand-dropdown-check {
  width:12px;
  height:12px;
  flex:0 0 12px;
  border:1px solid var(--line-strong);
  border-radius:50%;
}
.brand-dropdown-item.active .brand-dropdown-check {
  border-color:var(--accent);
  background:var(--accent);
}

.nav-tabs { display:flex; justify-self:center; }
.nav-tab {
  display:flex;
  align-items:center;
  position:relative;
  padding:14px 20px;
  border:0;
  background:transparent;
  color:var(--tx-2);
  cursor:pointer;
  font:500 13px/1.4 var(--font-body);
  letter-spacing:.08em;
  text-decoration:none;
  transition:var(--transition);
}
.nav-tab:hover { background:var(--bg-2); color:var(--tx-1); }
.nav-tab.active { background:var(--accent-dim); color:var(--tx-1); }
.nav-tab.active::after {
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  height:2px;
  background:var(--accent);
}
.nav-user {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  justify-self:end;
}

.btn-accent,
.btn-ghost {
  padding:6px 16px;
  border:1px solid;
  background:transparent;
  cursor:pointer;
  font:500 12px/1.5 var(--font-display);
  letter-spacing:.06em;
  text-decoration:none;
}
.btn-accent { border-color:var(--accent); color:var(--accent); }
.btn-accent:hover { background:var(--accent-dim); }
.btn-ghost { border-color:var(--line); color:var(--tx-2); }
.btn-ghost:hover { background:var(--bg-2); }

.footer {
  margin-top:40px;
  padding:16px 20px;
  border-top:1px solid var(--line);
  color:var(--tx-3);
  font:500 10px/1.5 var(--font-display);
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}

@media (max-width:768px) {
  .navbar {
    display:flex;
    height:auto;
    padding:10px 16px;
    flex-wrap:wrap;
  }
  .nav-tabs {
    order:3;
    width:100%;
    margin-top:8px;
  }
  .nav-tab {
    flex:1;
    justify-content:center;
    padding:10px 4px;
    font-size:11px;
  }
}