/* ═══════════════════════════════════════════════════════════════
   星耀云社 · style-s02-pages.css
   Page-specific styles: character.html · auth.html · dashboard.html
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   CHARACTER PAGE
───────────────────────────────────────────────────────────────*/
.char-page { overflow-y: auto; }
.char-page .nav { position: sticky; }

/* Hero — split layout */
.char-hero {
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: 100dvh;
  position: relative;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.ch-bg-gradient {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 60% 50%,
    rgba(var(--purple-rgb),0.14) 0%, transparent 65%);
  transition: background 0.8s var(--ease);
}
.ch-3d-viewport {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
#charViewerCanvas {
  width: 100%; height: 100%; max-height: calc(100dvh - var(--nav-h));
  display: block; border-radius: var(--r-xl);
}
.viewer-controls {
  position: absolute; top: 56px; right: 56px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 2;
}
.vc-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-heavy); backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text-dim); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; cursor: pointer;
}
.vc-btn:hover {
  background: rgba(var(--purple-rgb),0.2);
  border-color: rgba(var(--purple-rgb),0.5);
  color: var(--text);
}
.viewer-hint {
  position: absolute; bottom: 52px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem; color: var(--text-faint);
  letter-spacing: 0.1em;
  background: var(--glass-heavy); backdrop-filter: blur(8px);
  padding: 5px 12px; border-radius: 99px;
  pointer-events: none; z-index: 2;
}

.ch-info-panel {
  position: relative; z-index: 2;
  padding: 48px 40px 48px 20px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.chip-rarity {
  display: inline-block;
  padding: 3px 12px; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.chip-rarity.ur {
  background: linear-gradient(135deg,var(--gold),#ffb347);
  color: #0a0d18;
}
.chip-season { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 16px; }

.ch-name {
  font-family: 'Noto Serif SC', serif;
  font-size: clamp(2.2rem, 3vw, 3rem); font-weight: 700;
  line-height: 1.1; margin-bottom: 4px;
}
.ch-name-en { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 24px; letter-spacing: 0.05em; }

.ch-rank-band {
  display: flex; gap: 0;
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 16px; overflow: hidden;
}
.crb-rank, .crb-votes, .crb-change {
  flex: 1; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--border);
}
.crb-change { border-right: none; }
.crb-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem; font-weight: 700;
}
.crb-num.gold { color: var(--gold); }
.crb-num.cyan { color: var(--cyan); }
.crb-label { font-size: 0.68rem; color: var(--text-dim); }

.ch-vote-progress { margin-bottom: 20px; }
.cvp-bar {
  height: 4px; background: var(--border);
  border-radius: 99px; overflow: hidden; margin-bottom: 8px;
}
.cvp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--cyan));
  border-radius: 99px;
  transition: width 1s var(--ease);
}
.cvp-meta {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--text-dim);
}

.ch-vote-block {
  background: linear-gradient(145deg,
    rgba(var(--gold-rgb),0.06), rgba(var(--purple-rgb),0.04));
  border: 1px solid rgba(var(--gold-rgb),0.2);
  border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 16px;
}
.cvb-label { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 10px; }
.cvb-amounts { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cva-btn {
  padding: 7px 14px;
  background: var(--glass-card); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  transition: all 0.2s; cursor: pointer;
}
.cva-btn:hover { border-color: var(--gold); background: rgba(var(--gold-rgb),0.08); }
.cva-btn.active {
  border-color: var(--gold); background: rgba(var(--gold-rgb),0.12);
  color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb),0.15);
}
.btn-vote-char {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--gold), #e8a82a);
  color: #0a0d18; font-weight: 700; font-size: 0.95rem;
  border-radius: var(--r-md);
  box-shadow: 0 0 24px rgba(var(--gold-rgb),0.25);
  transition: all 0.3s var(--ease);
}
.btn-vote-char:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(var(--gold-rgb),0.4), 0 6px 20px rgba(0,0,0,0.3);
}
.cvb-hint { font-size: 0.72rem; color: var(--text-dim); margin-top: 10px; }

.ch-scout-band {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(var(--cyan-rgb),0.07);
  border: 1px solid rgba(var(--cyan-rgb),0.2);
  border-radius: var(--r-md);
}
.csb-icon { font-size: 1.2rem; flex-shrink: 0; }
.csb-text { flex: 1; font-size: 0.78rem; color: var(--text-dim); }
.csb-text strong { color: var(--text); display: block; margin-bottom: 2px; }
.csb-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem; color: var(--cyan); flex-shrink: 0;
}

/* Character tabs */
.char-tabs-nav {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  background: rgba(6,8,16,0.85);
  backdrop-filter: blur(16px);
  position: sticky; top: var(--nav-h); z-index: 50;
  overflow-x: auto; scrollbar-width: none;
}
.char-tabs-nav::-webkit-scrollbar { display: none; }
.ctab {
  padding: 14px 20px;
  font-size: 0.85rem; font-weight: 500; color: var(--text-dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.ctab:hover { color: var(--text); }
.ctab.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}
.char-tabs-content { max-width: 1200px; margin: 0 auto; padding: 48px 24px 80px; }
.ctab-panel { display: none; }
.ctab-panel.active { display: block; animation: fade-in 0.4s var(--ease); }

/* Story tab */
.story-layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 48px;
}
.story-heading {
  font-family: 'Noto Serif SC', serif;
  font-size: 1.4rem; font-weight: 700; margin-bottom: 16px;
}
.story-lead {
  font-size: 1.05rem; color: var(--text); line-height: 1.75;
  font-family: 'Noto Serif SC', serif;
  margin-bottom: 16px;
}
.story-text p { font-size: 0.9rem; color: var(--text-dim); line-height: 1.8; margin-bottom: 14px; }
.story-text em { color: var(--cyan); font-style: normal; }
.story-attributes { margin-top: 28px; }
.sa-row {
  display: flex; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.sa-key { color: var(--text-dim); min-width: 80px; flex-shrink: 0; }
.sa-val { color: var(--text); }

/* Skill radar card */
.skill-card {
  position: sticky; top: calc(var(--nav-h) + var(--tabs-h) + 24px);
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px;
  text-align: center;
}
.skill-labels {
  position: relative; height: 300px; margin-top: -280px;
}
.sl-item {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%)
             rotate(var(--a))
             translateY(calc(-1 * var(--d)))
             rotate(calc(-1 * var(--a)));
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
}
.sl-item span { font-size: 0.62rem; color: var(--text-dim); white-space: nowrap; }
.sl-item strong { font-size: 0.8rem; font-weight: 700; color: var(--gold); }

/* Designer tab */
.designer-layout {
  display: grid; grid-template-columns: 360px 1fr; gap: 48px;
}
.designer-card {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px; height: fit-content;
}
.dc-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  margin: 0 auto 16px; overflow: hidden;
  background-size: cover;
}
.dca-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
}
.dc-name { font-family:'Noto Serif SC',serif; font-size:1.2rem; font-weight:700; text-align:center; margin-bottom:4px; }
.dc-handle { font-size:0.75rem; color:var(--text-dim); text-align:center; margin-bottom:12px; }
.dc-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.dc-tags span {
  padding: 3px 10px; border-radius: 99px;
  font-size: 0.68rem; background: var(--glass-card);
  border: 1px solid var(--border); color: var(--text-dim);
}
.dc-bio { font-size: 0.82rem; color: var(--text-dim); line-height: 1.65; margin-bottom: 16px; }
.dc-stats { display:flex; gap:0; margin-bottom:16px; }
.dcs-item {
  flex:1; text-align:center;
  padding: 12px 8px;
  border-right: 1px solid var(--border);
}
.dcs-item:last-child { border-right: none; }
.dcs-num {
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:1.1rem; font-weight:700; color:var(--gold);
}
.dcs-num em { font-size:0.7rem; font-style:normal; }
.dcs-label { font-size:0.65rem; color:var(--text-dim); }
.dc-links { display:flex; gap:8px; justify-content:center; }
.dcl-btn {
  padding: 7px 14px; border-radius: var(--r-sm);
  font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-dim);
  transition: all 0.2s;
}
.dcl-btn:hover { color: var(--text); border-color: var(--border-hov); }
.dcl-btn.bilibili:hover { border-color: #00a1d6; color: #00a1d6; }

.process-timeline h3 {
  font-family:'Noto Serif SC',serif; font-size:1rem; margin-bottom:20px;
}
.pt-items { display:flex; flex-direction:column; gap:0; }
.pt-item {
  display:flex; gap:16px;
  padding-bottom: 24px; position:relative;
}
.pt-item:not(:last-child)::after {
  content:''; position:absolute; left:7px; top:16px; bottom:0;
  width:2px; background:var(--border);
}
.pti-dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--border); border:2px solid var(--bg);
  flex-shrink:0; margin-top:3px; position:relative; z-index:1;
}
.pti-dot.gold {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(var(--gold-rgb),0.5);
}
.pt-item.active .pti-dot {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(var(--gold-rgb),0.5);
}
.pti-date { font-size:0.7rem; color:var(--text-faint); display:block; margin-bottom:3px; }
.pti-content strong { font-size:0.88rem; display:block; margin-bottom:4px; }
.pti-content p { font-size:0.78rem; color:var(--text-dim); line-height:1.6; }

/* Votes tab */
.votes-layout { display:grid; grid-template-columns:1fr 320px; gap:40px; }
.vote-chart-wrap h3 {
  font-size:0.9rem; margin-bottom:16px;
}
#voteChartCanvas { width:100%; border-radius:var(--r-md); }
.vote-breakdown h3 { font-size:0.9rem; margin-bottom:14px; }
.vb-items { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.vbi-row { display:flex; align-items:center; gap:10px; }
.vbi-label { font-size:0.78rem; color:var(--text-dim); min-width:90px; }
.vbi-bar-track { flex:1; height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.vbi-bar {
  height:100%; width:var(--w,50%);
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:99px;
  transition:width 1s var(--ease);
}
.vbi-pct { font-size:0.75rem; color:var(--text-dim); min-width:32px; text-align:right; }
.scout-list { display:flex; flex-direction:column; gap:8px; }
.scout-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-md);
}
.si-avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:700; color:#fff; flex-shrink:0;
}
.si-name { font-size:0.8rem; font-weight:500; }
.si-time { font-size:0.68rem; color:var(--text-faint); }

/* Gallery tab */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
}
.gallery-item {
  aspect-ratio:3/4; border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer; position:relative;
  background:var(--glass-card);
  transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.gallery-item:hover { transform:scale(1.03); box-shadow:0 16px 48px rgba(0,0,0,0.5); z-index:2; }
.gallery-item img { width:100%; height:100%; object-fit:cover; }
.gi-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,8,16,0.8) 0%, transparent 50%);
  opacity:0; transition:opacity 0.25s;
  display:flex; align-items:flex-end; padding:16px;
}
.gallery-item:hover .gi-overlay { opacity:1; }
.gi-caption { font-size:0.78rem; color:var(--text); }

/* Related chars */
.related-chars {
  padding: 60px 0;
  border-top: 1px solid var(--border);
}
.rc-title {
  font-family:'Noto Serif SC',serif;
  font-size:1.1rem; margin-bottom:24px;
}
.rc-strip {
  display:flex; gap:16px; overflow-x:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  padding-bottom:12px;
}
.rc-card {
  flex-shrink:0; width:160px;
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px; cursor:pointer;
  transition:all 0.25s var(--ease);
}
.rc-card:hover { border-color:var(--border-hov); transform:translateY(-4px); }
.rc-art {
  width:100%; aspect-ratio:3/4; border-radius:var(--r-md);
  background:rgba(var(--purple-rgb),0.12);
  margin-bottom:10px; background-size:cover;
}
.rc-name { font-size:0.88rem; font-weight:600; margin-bottom:2px; }
.rc-votes { font-size:0.72rem; color:var(--text-dim); }

/* ─────────────────────────────────────────────────────────────
   AUTH PAGE
───────────────────────────────────────────────────────────────*/
.auth-page { min-height:100dvh; overflow-y:auto; }
.auth-topbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:rgba(6,8,16,0.8);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.atb-back { font-size:0.85rem; color:var(--text-dim); transition:color 0.2s; }
.atb-back:hover { color:var(--text); }
.atb-brand {
  display:flex; align-items:center; gap:8px;
  font-family:'Noto Serif SC',serif; font-size:0.95rem; font-weight:600;
}

.auth-layout {
  display:grid; grid-template-columns:1fr 480px;
  min-height:100dvh; padding-top:52px;
}
.auth-visual {
  position:relative; overflow:hidden;
  background:rgba(6,8,16,0.6);
}
.auth-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.av-content {
  position:relative; z-index:1;
  padding:80px 60px;
  height:100%; display:flex; flex-direction:column; justify-content:center;
}
.avc-eyebrow {
  font-size:0.72rem; letter-spacing:0.16em; color:var(--cyan);
  margin-bottom:16px;
}
.avc-title {
  font-family:'Noto Serif SC',serif;
  font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; line-height:1.25;
  margin-bottom:32px;
}
.avc-benefits { display:flex; flex-direction:column; gap:12px; margin-bottom:48px; }
.avb-item {
  display:flex; align-items:center; gap:12px;
  font-size:0.88rem; color:var(--text-dim);
}
.avb-icon { font-size:1rem; flex-shrink:0; }
.avc-char-preview {
  display:flex; flex-direction:column; gap:12px;
}
.acp-art {
  width:120px; height:150px; border-radius:var(--r-lg);
  background:rgba(var(--purple-rgb),0.18);
  background-size:cover; background-position:center top;
}
.acp-quote {
  font-family:'Noto Serif SC',serif;
  font-size:0.88rem; color:var(--text-dim); font-style:italic;
}

.auth-form-panel {
  background:var(--bg-1);
  padding:80px 48px;
  display:flex; flex-direction:column;
  overflow-y:auto;
  border-left:1px solid var(--border);
}

/* Steps indicator */
.auth-steps {
  display:flex; align-items:center; gap:0;
  margin-bottom:40px;
}
.as-step {
  display:flex; align-items:center; gap:8px;
  font-size:0.78rem; color:var(--text-faint);
  transition:color 0.3s;
}
.as-step.active { color:var(--text); }
.as-step.done { color:var(--cyan); }
.as-num {
  width:24px; height:24px; border-radius:50%;
  background:var(--border); font-size:0.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.as-step.active .as-num {
  background:var(--gold); color:#0a0d18;
  box-shadow:0 0 12px rgba(var(--gold-rgb),0.4);
}
.as-step.done .as-num {
  background:var(--cyan); color:#0a0d18;
}
.as-line {
  flex:1; height:1px; background:var(--border); margin:0 8px;
}

.auth-step-panel { display:none; }
.auth-step-panel.active { display:flex; flex-direction:column; }

.auth-title {
  font-family:'Noto Serif SC',serif;
  font-size:1.8rem; font-weight:700; margin-bottom:8px;
}
.auth-sub { font-size:0.88rem; color:var(--text-dim); margin-bottom:28px; }

/* WeChat */
.auth-wechat-btn {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; padding:15px;
  background:#07C160; border-radius:var(--r-md);
  color:#fff; font-weight:700; font-size:0.95rem;
  position:relative;
  transition:all 0.3s var(--ease);
  margin-bottom:16px;
}
.auth-wechat-btn:hover {
  background:#05a050; transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(7,193,96,0.3);
}
.awb-recommended {
  position:absolute; top:-8px; right:16px;
  padding:2px 8px; border-radius:99px;
  font-size:0.62rem; background:var(--gold); color:#0a0d18;
}

.wechat-qr-area {
  display:none; flex-direction:column; align-items:center; gap:12px;
  padding:20px;
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); margin-bottom:16px;
}
.wechat-qr-area.show { display:flex; animation:fade-in 0.3s var(--ease); }
.wqa-qr-box {
  width:160px; height:160px;
  background:#fff; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.wqa-qr-img { width:100%; height:100%; object-fit:cover; }
.wqa-fallback {
  display:none; flex-direction:column; align-items:center; gap:8px;
  font-size:0.72rem; color:#333;
}
.wqaf-grid {
  width:120px; height:120px;
  background:repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
  opacity:0.9;
}
.wqa-hint { font-size:0.75rem; color:var(--text-dim); }
.wqa-status {
  display:flex; align-items:center; gap:6px;
  font-size:0.75rem; color:var(--text-dim);
}
.wqs-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--cyan); animation:pulse-dot 1.5s infinite;
}

.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:20px 0; font-size:0.75rem; color:var(--text-faint);
}
.auth-divider::before,.auth-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* Phone form */
.apf-field { margin-bottom:14px; }
.apf-field label { display:block; font-size:0.75rem; color:var(--text-dim); margin-bottom:6px; }
.apf-input-wrap {
  display:flex; align-items:center;
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
  transition:border-color 0.2s;
}
.apf-input-wrap:focus-within { border-color:rgba(var(--purple-rgb),0.5); }
.apf-prefix {
  padding:12px 14px; font-size:0.88rem;
  color:var(--text-dim); border-right:1px solid var(--border);
  flex-shrink:0;
}
.apf-input-wrap input {
  flex:1; padding:12px 14px; background:none;
  border:none; outline:none; color:var(--text);
  font-size:0.95rem; font-family:inherit;
}
.apf-code-row {
  display:flex; gap:10px; align-items:flex-end;
}
.apf-code-row .apf-input-wrap { flex:1; }
.btn-send-code {
  padding:12px 14px; flex-shrink:0;
  background:rgba(var(--purple-rgb),0.15);
  border:1px solid rgba(var(--purple-rgb),0.35);
  border-radius:var(--r-sm);
  font-size:0.8rem; color:var(--purple); font-weight:600;
  white-space:nowrap; transition:all 0.2s;
}
.btn-send-code:hover { background:rgba(var(--purple-rgb),0.25); }
.btn-send-code:disabled { opacity:0.4; cursor:not-allowed; }
.btn-phone-login {
  width:100%; padding:13px;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff; font-weight:700; border-radius:var(--r-md);
  font-size:0.95rem; transition:all 0.3s var(--ease);
  margin-top:4px;
}
.btn-phone-login:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(var(--purple-rgb),0.4); }
.auth-agree { font-size:0.72rem; color:var(--text-faint); margin-top:16px; text-align:center; }
.auth-agree a { color:var(--text-dim); border-bottom:1px solid var(--border); }
.auth-agree a:hover { color:var(--text); }

/* Plan cards */
.plan-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-bottom:16px;
}
.plan-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 14px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; transition:all 0.25s var(--ease); cursor:pointer;
}
.plan-card:hover { border-color:var(--border-hov); }
.plan-card.featured {
  border-color:rgba(var(--gold-rgb),0.35);
  background:rgba(var(--gold-rgb),0.04);
}
.plan-card.pro {
  border-color:rgba(var(--purple-rgb),0.35);
  background:rgba(var(--purple-rgb),0.04);
}
.plan-card.selected {
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(var(--gold-rgb),0.15);
}
.pc-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  padding:2px 10px; border-radius:99px;
  font-size:0.62rem; font-weight:700;
  background:var(--gold); color:#0a0d18;
  white-space:nowrap;
}
.pc-name { font-size:0.8rem; font-weight:600; color:var(--text-dim); }
.pc-price {
  font-family:'JetBrains Mono',monospace;
  font-size:1.3rem; font-weight:700;
}
.pc-price span { font-size:0.7rem; font-weight:400; color:var(--text-dim); }
.pc-crystal { font-size:0.75rem; color:var(--gold); }
.pc-features {
  display:flex; flex-direction:column; gap:5px;
  font-size:0.72rem; color:var(--text-dim); list-style:none;
  flex:1;
}
.pc-features li { line-height:1.4; }
.btn-select-plan {
  width:100%; padding:9px; border-radius:var(--r-sm);
  font-size:0.8rem; font-weight:600;
  background:var(--glass-card); border:1px solid var(--border);
  color:var(--text-dim); transition:all 0.2s;
  margin-top:auto;
}
.btn-select-plan:hover { border-color:var(--border-hov); color:var(--text); }

.plan-payment {
  padding:16px; background:var(--glass-card);
  border:1px solid rgba(var(--gold-rgb),0.2);
  border-radius:var(--r-lg); margin-bottom:12px;
}
.pp-selected { font-size:0.82rem; margin-bottom:12px; }
.pp-selected strong { color:var(--gold); }
.pp-methods { display:flex; gap:8px; margin-bottom:14px; }
.ppm-btn {
  flex:1; padding:10px;
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:0.82rem; font-weight:600;
  color:var(--text-dim); transition:all 0.2s; cursor:pointer;
}
.ppm-btn.active { border-color:var(--gold); color:var(--gold); }
.btn-pay {
  width:100%; padding:13px;
  background:linear-gradient(135deg,var(--gold),#e8a82a);
  color:#0a0d18; font-weight:700; font-size:0.95rem;
  border-radius:var(--r-md); transition:all 0.3s var(--ease);
}
.btn-pay:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(var(--gold-rgb),0.3); }
.btn-skip-plan {
  text-align:center; font-size:0.8rem; color:var(--text-faint);
  padding:10px; transition:color 0.2s;
}
.btn-skip-plan:hover { color:var(--text-dim); }

/* Onboard success */
.onboard-success {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; padding:20px 0;
}
.os-star-burst { position:relative; }
#onboardCanvas { border-radius:50%; }
.os-title {
  font-family:'Noto Serif SC',serif; font-size:1.6rem; font-weight:700;
}
.os-user {
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; background:var(--glass-card);
  border:1px solid var(--border); border-radius:var(--r-md);
}
.os-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff;
}
.os-plan-badge {
  padding:2px 8px; border-radius:4px;
  font-size:0.65rem; font-weight:700;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  color:#fff; margin-left:8px;
}
.os-crystal-grant {
  display:flex; align-items:center; gap:8px;
  font-size:0.9rem; color:var(--text-dim);
}
.os-crystal-grant strong { color:var(--gold); }
.os-quick-links { display:flex; gap:12px; }
.oql-btn {
  padding:12px 24px; border-radius:var(--r-md);
  font-size:0.88rem; font-weight:600; border:1px solid var(--border);
  color:var(--text-dim); transition:all 0.2s;
}
.oql-btn.primary {
  background:linear-gradient(135deg,var(--gold),#e8a82a);
  color:#0a0d18; border-color:transparent;
  box-shadow:0 0 20px rgba(var(--gold-rgb),0.25);
}
.oql-btn:hover { border-color:var(--border-hov); color:var(--text); }
.oql-btn.primary:hover { transform:translateY(-2px); }
.os-hint { font-size:0.72rem; color:var(--text-faint); max-width:300px; line-height:1.5; }

/* ─────────────────────────────────────────────────────────────
   DASHBOARD PAGE
───────────────────────────────────────────────────────────────*/
.dashboard-page { display:flex; min-height:100dvh; overflow:hidden; }

.dash-sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:rgba(4,5,12,0.95);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  padding:0 0 24px;
  position:fixed; left:0; top:0; bottom:0;
  z-index:60; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  transition:transform 0.3s var(--ease);
}
.dash-sidebar.collapsed { transform:translateX(-100%); }
.ds-brand {
  display:flex; align-items:center; gap:8px;
  padding:20px 20px 16px;
  font-family:'Noto Serif SC',serif; font-size:0.95rem; font-weight:700;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.ds-user-card {
  display:flex; align-items:center; gap:10px;
  padding:16px 20px; border-bottom:1px solid var(--border);
}
.dsuc-avatar {
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--cyan));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:0.85rem; flex-shrink:0;
}
.dsuc-name { font-size:0.85rem; font-weight:600; }
.dsuc-plan {
  display:inline-block;
  font-size:0.62rem; padding:2px 7px; border-radius:4px;
  font-weight:700; margin-top:3px;
}
.pro-badge { background:rgba(var(--purple-rgb),0.2); border:1px solid rgba(var(--purple-rgb),0.4); color:var(--purple); }
.plus-badge { background:rgba(var(--cyan-rgb),0.15); border:1px solid rgba(var(--cyan-rgb),0.3); color:var(--cyan); }

.ds-crystal-widget {
  display:flex; align-items:center; gap:8px;
  padding:12px 20px; border-bottom:1px solid var(--border);
  font-size:0.82rem;
}
.dscw-num {
  font-family:'JetBrains Mono',monospace; font-size:1rem;
  font-weight:700; color:var(--gold);
}
.dscw-label { font-size:0.7rem; color:var(--text-dim); margin-right:4px; }
.dscw-bar {
  flex:1; height:3px; background:rgba(255,255,255,0.08);
  border-radius:99px; overflow:hidden;
}
.dscw-fill {
  height:100%;
  background:linear-gradient(90deg,var(--gold),#ffb347);
  border-radius:99px; transition:width 0.5s var(--ease);
}

.ds-nav { padding:12px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.dsn-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-sm);
  font-size:0.85rem; color:var(--text-dim);
  transition:all 0.2s; cursor:pointer;
}
.dsn-item:hover { color:var(--text); background:var(--glass-card); }
.dsn-item.active {
  color:var(--text); background:rgba(var(--purple-rgb),0.12);
  border:1px solid rgba(var(--purple-rgb),0.25);
}
.dsn-icon { color:var(--text-faint); font-size:0.65rem; }
.dsn-item.active .dsn-icon { color:var(--purple); }

.ds-quick-vote { padding:12px 20px; border-top:1px solid var(--border); }
.dsqv-label { font-size:0.7rem; color:var(--text-dim); margin-bottom:6px; }
.dsqv-progress {
  height:3px; background:rgba(255,255,255,0.08);
  border-radius:99px; overflow:hidden; margin-bottom:5px;
}
.dsqvp-fill {
  height:100%;
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:99px; transition:width 0.5s var(--ease);
}
.dsqv-count { font-size:0.7rem; color:var(--text-faint); }
.ds-back-home {
  padding:12px 20px;
  font-size:0.78rem; color:var(--text-faint); transition:color 0.2s;
}
.ds-back-home:hover { color:var(--text-dim); }

.dash-main {
  flex:1; margin-left:var(--sidebar-w);
  overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.dash-topbar {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:14px 28px;
  background:rgba(6,8,16,0.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.dtb-sidebar-toggle {
  display:none; width:36px; height:36px; border-radius:50%;
  background:var(--glass-card); border:1px solid var(--border);
  color:var(--text-dim); font-size:1.1rem; transition:all 0.2s;
}
.dtb-sidebar-toggle:hover { color:var(--text); }
.dtb-title {
  font-family:'Noto Serif SC',serif; font-size:1rem; font-weight:600;
  flex:1;
}
.dtb-actions { display:flex; align-items:center; gap:12px; }
.dtb-vote-btn {
  padding:7px 16px;
  background:linear-gradient(135deg,var(--gold),#e8a82a);
  color:#0a0d18; font-weight:700; font-size:0.8rem;
  border-radius:var(--r-sm); transition:all 0.2s;
}
.dtb-vote-btn:hover { transform:translateY(-1px); }

.dash-panel { display:none; padding:28px 28px 60px; }
.dash-panel.active { display:block; animation:fade-in 0.3s var(--ease); }

/* KPI row */
.kpi-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:24px;
}
.kpi-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
  transition:all 0.25s var(--ease);
}
.kpi-card:hover { border-color:var(--border-hov); transform:translateY(-3px); }
.kpi-icon { font-size:1.4rem; margin-bottom:10px; }
.kpi-val {
  font-family:'JetBrains Mono',monospace;
  font-size:1.6rem; font-weight:700; margin-bottom:4px;
}
.kpi-label { font-size:0.78rem; color:var(--text-dim); margin-bottom:4px; }
.kpi-sub { font-size:0.68rem; }

.overview-grid {
  display:grid; grid-template-columns:1fr 320px; gap:20px;
  margin-bottom:20px;
}
.og-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
}
.ogc-header {
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.ogc-header h3 { font-size:0.9rem; font-weight:600; flex:1; }
.ogc-sub { font-size:0.75rem; color:var(--text-dim); }
.ogc-period {
  padding:5px 10px; background:var(--glass-card);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text-dim); font-size:0.75rem; font-family:inherit;
  cursor:pointer; outline:none; -webkit-appearance:none;
}
.ec-total-row {
  display:flex; align-items:center; gap:12px; margin-top:12px;
  font-size:0.82rem; color:var(--text-dim);
}
.ec-pending { margin-left:auto; font-size:0.75rem; }

.scout-positions-list { display:flex; flex-direction:column; gap:10px; }
.spl-empty {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px; text-align:center;
}
.sple-icon { font-size:2rem; opacity:0.4; }
.spl-empty p { font-size:0.8rem; color:var(--text-faint); line-height:1.6; }
.sple-btn {
  padding:8px 18px; border-radius:var(--r-sm);
  background:rgba(var(--purple-rgb),0.15);
  border:1px solid rgba(var(--purple-rgb),0.3);
  color:var(--purple); font-size:0.8rem; transition:all 0.2s;
}
.spl-position-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:rgba(var(--cyan-rgb),0.05);
  border:1px solid rgba(var(--cyan-rgb),0.15); border-radius:var(--r-md);
}
.spi-art {
  width:36px; height:44px; border-radius:6px;
  background:rgba(var(--purple-rgb),0.15);
  background-size:cover; flex-shrink:0;
}
.spi-name { font-size:0.85rem; font-weight:600; }
.spi-earnings { font-size:0.72rem; color:var(--cyan); }
.spi-share { font-size:0.68rem; color:var(--text-faint); }

.scout-alert {
  display:flex; align-items:center; gap:14px;
  padding:16px 20px;
  background:rgba(var(--gold-rgb),0.06);
  border:1px solid rgba(var(--gold-rgb),0.2);
  border-radius:var(--r-lg); margin-bottom:20px;
  animation:pulse-border 3s ease-in-out infinite;
}
@keyframes pulse-border {
  0%,100% { border-color:rgba(var(--gold-rgb),0.2); }
  50%      { border-color:rgba(var(--gold-rgb),0.5); }
}
.sa-icon { font-size:1.4rem; flex-shrink:0; }
.sa-text { flex:1; font-size:0.82rem; color:var(--text-dim); line-height:1.6; }
.sa-text strong { color:var(--text); }
.sa-time {
  font-family:'JetBrains Mono',monospace;
  color:var(--gold); font-weight:700;
}
.sa-cta {
  padding:8px 16px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--gold),#e8a82a);
  color:#0a0d18; font-weight:700; font-size:0.78rem;
  flex-shrink:0; white-space:nowrap; transition:all 0.2s;
}
.sa-cta:hover { transform:translateY(-1px); }

.daily-tasks-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
}
.dt-reset { font-size:0.7rem; color:var(--text-faint); margin-left:auto; }
.dt-list { display:flex; flex-direction:column; gap:10px; }
.dt-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:rgba(255,255,255,0.02);
  border:1px solid var(--border); border-radius:var(--r-md);
  transition:all 0.2s;
}
.dt-item.done {
  opacity:0.5;
  background:rgba(var(--cyan-rgb),0.04);
  border-color:rgba(var(--cyan-rgb),0.15);
}
.dt-check {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0.55rem;
}
.dt-item.done .dt-check {
  background:var(--cyan); border-color:var(--cyan); color:#0a0d18;
}
.dt-text { flex:1; font-size:0.82rem; }
.dt-reward {
  font-size:0.75rem; color:var(--gold);
  background:rgba(var(--gold-rgb),0.1);
  padding:2px 8px; border-radius:99px;
}

/* Earnings panel */
.earnings-layout { display:flex; flex-direction:column; gap:24px; }
.el-summary {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:24px;
}
.els-total { margin-bottom:16px; }
.els-label { font-size:0.75rem; color:var(--text-dim); }
.els-val {
  font-family:'JetBrains Mono',monospace;
  font-size:2rem; font-weight:700; color:var(--gold);
}
.els-breakdown { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.elsb-item {
  display:flex; align-items:center; gap:8px;
  font-size:0.82rem; color:var(--text-dim);
}
.elsb-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.elsb-item strong { color:var(--text); margin-left:4px; }
.els-settle {
  display:flex; align-items:center; gap:12px;
  font-size:0.78rem; color:var(--text-faint);
  border-top:1px solid var(--border); padding-top:14px;
}
.btn-withdraw {
  padding:8px 18px; border-radius:var(--r-sm);
  background:rgba(var(--gold-rgb),0.12);
  border:1px solid rgba(var(--gold-rgb),0.3);
  color:var(--gold); font-size:0.8rem; font-weight:600;
  margin-left:auto; transition:all 0.2s;
}
.btn-withdraw:hover { background:rgba(var(--gold-rgb),0.22); }
.el-chart-big canvas { width:100%; border-radius:var(--r-md); }
.el-history { background:var(--glass-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; }
.el-history h3 { font-size:0.9rem; margin-bottom:14px; }
.earnings-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.earnings-table th {
  text-align:left; padding:8px 12px;
  font-size:0.7rem; letter-spacing:0.08em; color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.earnings-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); }
.earnings-table tr:hover td { background:rgba(255,255,255,0.02); }

/* Votes panel */
.vd-summary-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-bottom:24px;
}
.vds-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px; text-align:center;
}
.vds-card strong {
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:1.5rem; font-weight:700; color:var(--text); margin-bottom:4px;
}
.vds-card span { font-size:0.72rem; color:var(--text-dim); }

.vote-heatmap {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px; margin-bottom:20px;
}
.vote-heatmap h3 { font-size:0.9rem; margin-bottom:14px; }
.vhm-grid {
  display:grid; grid-template-columns:repeat(52,1fr); gap:2px;
  margin-bottom:10px;
}
.vhm-cell {
  aspect-ratio:1;
  background:rgba(var(--purple-rgb),calc(0.08 + var(--intensity,0)*0.55));
  border-radius:2px;
  transition:all 0.2s;
  cursor:pointer;
}
.vhm-cell:hover { transform:scale(1.4); }
.vhm-legend {
  display:flex; align-items:center; gap:6px;
  font-size:0.68rem; color:var(--text-faint);
}
.vhml-squares { display:flex; gap:3px; }
.vhml-squares div {
  width:10px; height:10px; border-radius:2px;
  background:rgba(var(--purple-rgb),calc(0.08 + var(--intensity)*0.55));
}

.vote-char-breakdown {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px; margin-bottom:20px;
}
.vote-char-breakdown h3 { font-size:0.9rem; margin-bottom:14px; }
.vcb-list { display:flex; flex-direction:column; gap:10px; }
.vcb-item {
  display:flex; align-items:center; gap:10px;
}
.vcbi-art {
  width:32px; height:40px; border-radius:6px;
  background:rgba(var(--purple-rgb),0.15); flex-shrink:0;
}
.vcbi-name { font-size:0.82rem; font-weight:500; min-width:60px; }
.vcbi-bar-wrap { flex:1; height:6px; background:var(--border); border-radius:99px; overflow:hidden; }
.vcbi-bar {
  height:100%; width:var(--w,50%);
  background:linear-gradient(90deg,var(--purple),var(--cyan));
  border-radius:99px; transition:width 1s var(--ease);
}
.vcbi-votes { font-size:0.75rem; color:var(--text-dim); min-width:40px; text-align:right; }

.vote-log { background:var(--glass-card); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; }
.vote-log h3 { font-size:0.9rem; margin-bottom:14px; }
.vl-list { display:flex; flex-direction:column; gap:8px; }
.vl-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r-sm);
  border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.8rem;
}
.vl-item:last-child { border-bottom:none; }
.vl-time { color:var(--text-faint); min-width:90px; font-size:0.72rem; }
.vl-char { font-weight:600; min-width:50px; }
.vl-amt { color:var(--gold); }
.vl-type { margin-left:auto; font-size:0.68rem; color:var(--text-faint); }

/* Achievements */
.achievements-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px; padding:28px;
}
.ach-card {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; transition:all 0.25s var(--ease);
}
.ach-card:hover { border-color:var(--border-hov); transform:translateY(-4px); }
.ach-card.unlocked {
  border-color:rgba(var(--gold-rgb),0.3);
  background:rgba(var(--gold-rgb),0.04);
}
.ach-card.locked { opacity:0.45; filter:grayscale(0.6); }
.ach-icon { font-size:2rem; }
.ach-name { font-size:0.82rem; font-weight:600; }
.ach-desc { font-size:0.7rem; color:var(--text-dim); line-height:1.5; }
.ach-progress-bar {
  width:100%; height:4px; background:var(--border);
  border-radius:99px; overflow:hidden;
}
.ach-progress-fill {
  height:100%; width:var(--prog,0%);
  background:linear-gradient(90deg,var(--gold),#ffb347);
  border-radius:99px; transition:width 1s var(--ease);
}

/* Settings */
.settings-layout {
  display:flex; flex-direction:column; gap:24px; padding:28px;
  max-width:640px;
}
.settings-section {
  background:var(--glass-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px;
}
.settings-section h3 { font-size:0.9rem; margin-bottom:16px; color:var(--text-dim); }
.setting-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border);
  font-size:0.85rem;
}
.setting-row:last-child { border-bottom:none; }
.setting-row label:first-child { color:var(--text-dim); flex:1; }
.sr-val { color:var(--text-dim); margin-left:auto; }
.sr-action {
  padding:5px 12px; border-radius:var(--r-sm); font-size:0.75rem;
  color:var(--text-dim); border:1px solid var(--border); transition:all 0.2s;
}
.sr-action:hover { color:var(--text); border-color:var(--border-hov); }
.sr-input-wrap { display:flex; gap:8px; margin-left:auto; }
.sr-input-wrap input {
  padding:7px 12px; background:var(--glass-card);
  border:1px solid var(--border); border-radius:var(--r-sm);
  color:var(--text); font-size:0.85rem; font-family:inherit; outline:none;
}
.sr-input-wrap input:focus { border-color:rgba(var(--purple-rgb),0.5); }
.sr-save {
  padding:7px 14px; border-radius:var(--r-sm); font-size:0.8rem;
  background:rgba(var(--purple-rgb),0.15);
  border:1px solid rgba(var(--purple-rgb),0.35);
  color:var(--purple); font-weight:600; transition:all 0.2s;
}
.sr-save:hover { background:rgba(var(--purple-rgb),0.25); }

.current-plan-card {
  background:rgba(var(--purple-rgb),0.06);
  border:1px solid rgba(var(--purple-rgb),0.2);
  border-radius:var(--r-md); padding:16px;
}
.cpc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cpc-price { font-family:'JetBrains Mono',monospace; font-size:0.9rem; color:var(--text-dim); }
.cpc-perks { display:flex; flex-wrap:wrap; gap:8px; font-size:0.72rem; color:var(--text-dim); margin-bottom:12px; }
.cpc-perks span { padding:3px 8px; background:rgba(var(--cyan-rgb),0.1); border-radius:99px; }
.cpc-renew { font-size:0.72rem; color:var(--text-faint); margin-bottom:12px; }
.cpc-actions { display:flex; gap:10px; }
.btn-manage-plan {
  padding:8px 16px; border-radius:var(--r-sm); font-size:0.78rem;
  background:rgba(var(--purple-rgb),0.15);
  border:1px solid rgba(var(--purple-rgb),0.3);
  color:var(--purple); transition:all 0.2s;
}
.btn-cancel-plan {
  padding:8px 16px; border-radius:var(--r-sm); font-size:0.78rem;
  color:var(--text-faint); border:1px solid var(--border); transition:all 0.2s;
}
.btn-cancel-plan:hover { color:#E63946; border-color:rgba(230,57,70,0.3); }

/* Toggle switch */
.toggle-switch { position:relative; display:inline-block; width:44px; height:22px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.ts-slider {
  position:absolute; inset:0; border-radius:99px;
  background:rgba(255,255,255,0.12); border:1px solid var(--border);
  transition:all 0.3s;
}
.ts-slider::after {
  content:''; position:absolute; left:2px; top:50%;
  transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--text-dim); transition:all 0.3s var(--ease);
}
.toggle-switch input:checked + .ts-slider {
  background:rgba(var(--cyan-rgb),0.2);
  border-color:rgba(var(--cyan-rgb),0.5);
}
.toggle-switch input:checked + .ts-slider::after {
  transform:translateX(22px) translateY(-50%);
  background:var(--cyan);
  box-shadow:0 0 8px rgba(var(--cyan-rgb),0.5);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — PAGES
───────────────────────────────────────────────────────────────*/
@media (max-width:1024px) {
  .char-hero { grid-template-columns:1fr; }
  .ch-3d-viewport { min-height:50dvh; }
  .ch-info-panel { padding:24px; }
  .story-layout { grid-template-columns:1fr; }
  .skill-card { position:static; }
  .designer-layout { grid-template-columns:1fr; }
  .votes-layout { grid-template-columns:1fr; }
  .auth-layout { grid-template-columns:1fr; }
  .auth-visual { display:none; }
  .auth-form-panel { border-left:none; }
  .overview-grid { grid-template-columns:1fr; }
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .vd-summary-row { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .dash-sidebar { transform:translateX(-100%); }
  .dash-sidebar.open { transform:translateX(0); }
  .dash-main { margin-left:0; }
  .dtb-sidebar-toggle { display:flex; }
  .plan-cards { grid-template-columns:1fr; }
  .kpi-row { grid-template-columns:1fr 1fr; }
  .char-tabs-nav { position:sticky; }
  .auth-form-panel { padding:40px 24px; }
  .dash-panel { padding:16px 16px 40px; }
  .vd-summary-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:480px) {
  .kpi-row { grid-template-columns:1fr; }
  .vd-summary-row { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
}