/* theme.css — site-wide theme + base layout (Apple-ish) */
* { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

:root{
  --bg1:#f5f9ff; --bg2:#e6edf7;

  --cardBg: rgba(255,255,255,0.98);
  --text: #0f172a;
  --muted: #64748b;
  --muted2:#94a3b8;

  --border: rgba(148,163,184,0.25);
  --shadow: 0 22px 60px rgba(15,23,42,0.14);

  --chipBg: #f1f5f9;
  --chipText:#475569;
  --chipHoverBg:#e0edff;
  --chipHoverBorder:#3b82f6;
  --chipHoverText:#1d4ed8;

  --primaryBg:#1d4ed8;
  --primaryText:#eff6ff;
  --primaryShadow: 0 12px 24px rgba(37,99,235,0.35);

  --softPanelBg:#f8fafc;
  --softPanelBorder:#e2e8f0;

  --tagBg:#eff6ff;
  --tagText:#1d4ed8;

  --btnBg:#1d4ed8;
  --btnText:#eff6ff;
}

/* Dark theme override */
html[data-theme="dark"]{
  --bg1:#0b1220; --bg2:#0f172a;

  --cardBg: rgba(17,24,39,0.92);
  --text:#e5e7eb;
  --muted:#a1a1aa;
  --muted2:#94a3b8;

  --border: rgba(148,163,184,0.18);
  --shadow: 0 22px 60px rgba(0,0,0,0.35);

  --chipBg: rgba(148,163,184,0.10);
  --chipText:#cbd5e1;
  --chipHoverBg: rgba(59,130,246,0.18);
  --chipHoverBorder: rgba(59,130,246,0.35);
  --chipHoverText:#dbeafe;

  --primaryBg:#2563eb;
  --primaryText:#eff6ff;
  --primaryShadow: 0 12px 24px rgba(37,99,235,0.25);

  --softPanelBg: rgba(148,163,184,0.10);
  --softPanelBorder: rgba(148,163,184,0.18);

  --tagBg: rgba(59,130,246,0.16);
  --tagText:#bfdbfe;

  --btnBg:#2563eb;
  --btnText:#eff6ff;
}

body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  background: radial-gradient(circle at top, var(--bg1), var(--bg2));
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:var(--text);
}

.shell{ width:100%; max-width:1120px; }

.card{
  background: var(--cardBg);
  border-radius: 22px;
  padding: 22px 24px 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

/* topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:36px;height:36px;border-radius:14px;
  background: linear-gradient(135deg,#2563eb,#22c55e);
  display:flex; align-items:center; justify-content:center;
  color:#eff6ff; font-weight:800;
  flex-shrink:0;
}
.brand-main{ display:flex; flex-direction:column; gap:2px; }
.brand-name{ font-size:16px; font-weight:650; letter-spacing:0.02em; }
.brand-sub{ font-size:11px; color:var(--muted); }

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.nav a, .nav button{
  padding:6px 10px;
  border-radius:999px;
  background: var(--chipBg);
  color: var(--chipText);
  border: 1px solid transparent;
  cursor:pointer;
  transition: all .15s ease-out;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
}
.nav a:hover, .nav button:hover{
  background: var(--chipHoverBg);
  border-color: var(--chipHoverBorder);
  color: var(--chipHoverText);
}
.nav a.primary{
  background: var(--primaryBg);
  color: var(--primaryText);
  box-shadow: var(--primaryShadow);
}
.nav a.primary:hover{ filter: brightness(1.04); }

.theme-btn{ display:inline-flex; align-items:center; gap:6px; }
.theme-dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(34,197,94,0.9);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
}
html[data-theme="dark"] .theme-dot{
  background: rgba(59,130,246,0.95);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.14);
}

/* layout blocks */
.layout{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap:18px;
}
.hero h1{ font-size:26px; line-height:1.25; margin-bottom:8px; }
.hero p{ color:var(--muted); line-height:1.8; font-size:14px; margin-bottom:12px; }

.tag{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background: var(--tagBg);
  color: var(--tagText);
  border: 1px solid rgba(148,163,184,0.18);
  margin-left:8px;
  vertical-align:middle;
  white-space:nowrap;
}

.box{
  border-radius:16px;
  padding:12px 12px;
  background: var(--softPanelBg);
  border: 1px solid var(--softPanelBorder);
}
.box h2{ font-size:14px; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.box p{ font-size:12px; color:var(--muted); line-height:1.75; }
.box ul{ margin-top:8px; padding-left:18px; color:var(--chipText); font-size:12px; line-height:1.85; }
.box li{ list-style: disc; }

.cta-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.btn-ghost{
  padding:6px 10px; border-radius:999px;
  background: rgba(148,163,184,0.10);
  border: 1px solid rgba(148,163,184,0.18);
  color: var(--chipText);
  font-size:12px;
  cursor:pointer;
  transition: all .15s ease-out;
}
.btn-ghost:hover{
  border-color: var(--chipHoverBorder);
  background: var(--chipHoverBg);
  color: var(--chipHoverText);
}
.btn-solid{
  padding:6px 12px;
  border-radius:999px;
  border:none;
  background: var(--btnBg);
  color: var(--btnText);
  font-size:12px;
  cursor:pointer;
  box-shadow: var(--primaryShadow);
}
.btn-solid:hover{ filter: brightness(1.05); }

.footer{
  margin-top:14px;
  padding-top:12px;
  border-top: 1px solid rgba(148,163,184,0.18);
  font-size:11px;
  color: var(--muted2);
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.footer a{ text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 920px){
  .layout{ grid-template-columns: minmax(0,1fr); }
  .nav{ justify-content:flex-start; }
}