:root{--header-h: 58px}
.shell{padding-top:0}
.hero-shell{position:relative;height:160vh}
.hero-stick{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity 1.35s ease, transform 7s ease}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-gradient{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(80% 55% at 15% 35%, rgba(0,0,0,.10), rgba(0,0,0,.70) 70%),linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.72))}
.hero-bottom-fade{position:absolute;left:0;right:0;bottom:0;height:220px;pointer-events:none;z-index:2;background:linear-gradient(to bottom, rgba(11,13,16,0), rgba(11,13,16,1))}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;font-size:12.5px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.85);background:rgba(0,0,0,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.content{position:relative;z-index:5;margin-top:-138px;padding-bottom:64px}
.content-inner{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start}
@media (max-width:980px){.content-inner{grid-template-columns:1fr;gap:16px}.content{margin-top:-94px}}
.panel{border-radius:28px;padding:22px 22px 18px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.18);color:rgba(255,255,255,.92)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12.5px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.86);margin-bottom:14px}
.tag-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(10,132,255,.18)}
.title{font-size:clamp(34px,4.8vw,52px);line-height:1.02;letter-spacing:-.02em;margin-bottom:12px;text-shadow:0 6px 28px rgba(0,0,0,.45)}
.sub{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.72);max-width:44ch;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.78);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-size:13px;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-primary{background:rgba(255,255,255,.12);color:rgba(255,255,255,.92)}
.btn-ghost{background:rgba(0,0,0,.25);color:rgba(255,255,255,.86)}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border-radius:22px;padding:16px 16px 14px;background:rgba(15,15,20,.60);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card.big{grid-column:1 / -1}
.card h3{font-size:14px;margin:0 0 6px;opacity:.92}
.card p{font-size:12.5px;line-height:1.6;color:rgba(245,245,247,.68);margin:0}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:12.5px;color:rgba(245,245,247,.68)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(10,132,255,.12);border:1px solid rgba(10,132,255,.20);color:rgba(10,132,255,.95)}
.badge-dot{width:6px;height:6px;border-radius:999px;background:rgba(10,132,255,.95);box-shadow:0 0 0 4px rgba(10,132,255,.12)}

/* 浅色模式样式 */
html[data-theme="light"] .panel,
:root[data-theme="light"] .panel{
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.12);
  color: var(--fg);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}

html[data-theme="light"] .tag,
:root[data-theme="light"] .tag{
  background: rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.12);
  color: var(--fg);
}

html[data-theme="light"] .title,
:root[data-theme="light"] .title{
  text-shadow:0 2px 12px rgba(0,0,0,.1);
  color: var(--fg);
}

html[data-theme="light"] .sub,
:root[data-theme="light"] .sub{
  color: var(--muted);
}

html[data-theme="light"] .chip,
:root[data-theme="light"] .chip{
  background: rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12);
  color: var(--fg);
}

html[data-theme="light"] .btn-primary,
:root[data-theme="light"] .btn-primary{
  background: rgba(0,113,227,.12);
  color: var(--accent);
  border:1px solid rgba(0,113,227,.20);
}

html[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .btn-ghost{
  background: rgba(0,0,0,.08);
  color: var(--fg);
  border:1px solid rgba(0,0,0,.12);
}

html[data-theme="light"] .card,
:root[data-theme="light"] .card{
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.12);
}

html[data-theme="light"] .card h3,
:root[data-theme="light"] .card h3{
  color: var(--fg);
}

html[data-theme="light"] .card p,
html[data-theme="light"] .row,
:root[data-theme="light"] .card p,
:root[data-theme="light"] .row{
  color: var(--muted);
}

html[data-theme="light"] .scroll-hint,
:root[data-theme="light"] .scroll-hint{
  border:1px solid rgba(0,0,0,.12);
  color: var(--fg);
  background: rgba(255,255,255,.85);
}


/* HOME_LIGHT_THEME_PATCH_v1 */
/* 目的：让“切到 Light”时首页控件明显变成浅色玻璃卡（不再像 Dark 那样一直白字黑卡） */
html[data-theme="light"] .hero-bottom-fade{
  background: linear-gradient(to bottom, rgba(245,245,247,0), rgba(245,245,247,1));
}

html[data-theme="light"] .panel{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  color: rgba(16,17,20,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

html[data-theme="light"] .tag{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(16,17,20,.82);
}

html[data-theme="light"] .title{
  color: rgba(16,17,20,0.96);
  text-shadow: 0 10px 30px rgba(0,0,0,0.22);
}

html[data-theme="light"] .sub{
  color: rgba(16,17,20,0.62);
}

html[data-theme="light"] .chip{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(16,17,20,0.70);
}

html[data-theme="light"] .btn{
  border-color: rgba(0,0,0,0.10);
}

html[data-theme="light"] .btn-primary{
  background: rgba(0,0,0,0.06);
  color: rgba(16,17,20,0.92);
}

html[data-theme="light"] .btn-ghost{
  background: rgba(255,255,255,0.60);
  color: rgba(16,17,20,0.86);
}


/* === THEME POLISH: LIGHT MODE VISIBILITY (AUTO) === */
/* 目的：白天模式“明显变亮”，不要只是背景变白。 */
/* 覆盖范围：你站里常见的 panel / card / chip / btn / header / nav 等 */

/* iOS 缩放露底：html 也要有明确背景（light） */
html{ background: #f5f5f7; }

/* ---- Light mode ---- */
body:not([data-theme="dark"]) .panel{
  background: rgba(255,255,255,0.78) !important;
  color: rgba(16,17,20,0.92) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body:not([data-theme="dark"]) .sub,
body:not([data-theme="dark"]) .panel .sub{
  color: rgba(16,17,20,0.66) !important;
}

body:not([data-theme="dark"]) .chip{
  background: rgba(255,255,255,0.74) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(16,17,20,0.68) !important;
}

body:not([data-theme="dark"]) .card{
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body:not([data-theme="dark"]) .card p{
  color: rgba(16,17,20,0.62) !important;
}

body:not([data-theme="dark"]) .btn{
  border-color: rgba(0,0,0,0.10) !important;
}

body:not([data-theme="dark"]) .btn-primary{
  background: rgba(0,0,0,0.08) !important;
  color: rgba(16,17,20,0.92) !important;
}

body:not([data-theme="dark"]) .btn-ghost{
  background: rgba(255,255,255,0.58) !important;
  color: rgba(16,17,20,0.88) !important;
}

body:not([data-theme="dark"]) header{
  background: rgba(245,245,247,0.72) !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* 让 hero 上的暗膜在白天更轻，不压画面 */
body:not([data-theme="dark"]) .hero-gradient{
  opacity: 0.65 !important;
  background:
    radial-gradient(80% 55% at 15% 35%, rgba(255,255,255,.35), rgba(0,0,0,.22) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.25)) !important;
}
/* === END THEME POLISH === */