/* SecreTie public site — two themes:
   light = "Blush" (design 7: blush pink + navy evening band)
   dark  = "Midnight" (design 6: night navy, gold buttons, no pink buttons) */
:root, :root[data-theme="light"] {
  --bg:#fff7f5; --bg2:#ffeef1; --card:#ffffff; --text:#1f2240; --muted:#75708a; --line:#f3dde3;
  --accent:#e8577e; --on-accent:#ffffff; --accent-shadow:rgba(232,87,126,.30); --em:#e8577e; --pill:#e8577e;
  --btn2-bg:#151834; --btn2-text:#ffffff; --btn2-line:#151834;
  --band:#151834; --band-card:#1f2348; --band-line:#2f3466; --band-text:#f1eef9; --band-muted:#a8a6c8; --band-em:#ff8fab;
  --ok:#2c9c79; --ok-bg:#e5f7f1; --warn:#c0354f; --warn-bg:#fdeaee; --tip-bg:#ffeef1;
  --phone:#151834; --mark-bg:#151834; --mark-fg:#ff8fab; --stars:0; --glow:0;
  --foot:#151834; --foot-text:#a8a6c8; --foot-strong:#ffffff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0e1022; --bg2:#151834; --card:#1c2043; --text:#f1eef9; --muted:#a3a3c6; --line:#2c3160;
  --accent:#f0c987; --on-accent:#1d1608; --accent-shadow:rgba(240,201,135,.25); --em:#f0c987; --pill:#ff9db5;
  --btn2-bg:#151834; --btn2-text:#f1eef9; --btn2-line:#2c3160;
  --band:#151834; --band-card:#1c2043; --band-line:#2c3160; --band-text:#f1eef9; --band-muted:#a3a3c6; --band-em:#f0c987;
  --ok:#6fd6b8; --ok-bg:rgba(111,214,184,.12); --warn:#ff9db5; --warn-bg:rgba(255,122,156,.10); --tip-bg:#1c2043;
  --phone:#232850; --mark-bg:linear-gradient(135deg,#f0c987,#d9a75a); --mark-fg:#1d1608; --stars:1; --glow:1;
  --foot:#0a0c1a; --foot-text:#a3a3c6; --foot-strong:#f1eef9;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1022; --bg2:#151834; --card:#1c2043; --text:#f1eef9; --muted:#a3a3c6; --line:#2c3160;
    --accent:#f0c987; --on-accent:#1d1608; --accent-shadow:rgba(240,201,135,.25); --em:#f0c987; --pill:#ff9db5;
    --btn2-bg:#151834; --btn2-text:#f1eef9; --btn2-line:#2c3160;
    --band:#151834; --band-card:#1c2043; --band-line:#2c3160; --band-text:#f1eef9; --band-muted:#a3a3c6; --band-em:#f0c987;
    --ok:#6fd6b8; --ok-bg:rgba(111,214,184,.12); --warn:#ff9db5; --warn-bg:rgba(255,122,156,.10); --tip-bg:#1c2043;
    --phone:#232850; --mark-bg:linear-gradient(135deg,#f0c987,#d9a75a); --mark-fg:#1d1608; --stars:1; --glow:1;
    --foot:#0a0c1a; --foot-text:#a3a3c6; --foot-strong:#f1eef9;
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 Nunito, "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  transition: background-color .25s, color .25s;
}
a { color:var(--em); }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
.muted { color:var(--muted); }
.small { font-size:.9rem; }
.serif, h1, h2, .doc h1 { font-family:Fraunces, "Noto Serif TC", Georgia, serif; font-weight:400; }

/* night sky behind the hero (dark only) */
.sky { position:relative; overflow:hidden; }
.sky::before { content:""; position:absolute; inset:-20% -10% auto; height:700px; opacity:var(--glow); pointer-events:none;
  background:radial-gradient(closest-side at 30% 40%, rgba(255,122,156,.16), transparent 70%), radial-gradient(closest-side at 80% 50%, rgba(240,201,135,.14), transparent 70%); }
.sky::after { content:""; position:absolute; inset:0; opacity:var(--stars); pointer-events:none;
  background-image:radial-gradient(1px 1px at 12% 20%, #fff9, transparent), radial-gradient(1px 1px at 48% 12%, #fff6, transparent), radial-gradient(1.5px 1.5px at 66% 64%, #fff5, transparent), radial-gradient(1px 1px at 30% 82%, #fff7, transparent), radial-gradient(1px 1px at 92% 30%, #fff6, transparent), radial-gradient(1px 1px at 5% 60%, #fff5, transparent); }
.sky > * { position:relative; z-index:1; }

/* header */
header.top { display:flex; align-items:center; gap:14px; height:76px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font:600 1.4rem Fraunces, Georgia, serif; }
.brand .mark { width:34px; height:34px; border-radius:11px; background:var(--mark-bg); color:var(--mark-fg); display:grid; place-items:center; font-size:1rem; font-family:system-ui, sans-serif; }
.brand i { font-style:normal; color:var(--em); }
header.top nav { margin-left:auto; display:flex; gap:18px; align-items:center; }
header.top nav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.95rem; }
header.top nav a:hover { color:var(--text); }
.theme-btn, .lang-btn { border:1.5px solid var(--line); background:transparent; color:var(--text) !important; border-radius:999px; height:36px; min-width:36px; padding:0 10px; display:inline-grid; place-items:center; cursor:pointer; font:600 .9rem Nunito, system-ui, sans-serif; text-decoration:none; }
@media (max-width:760px){ header.top nav .hide-sm { display:none; } header.top nav { gap:8px; } }
@media (max-width:400px){ header.top nav .btn { display:none; } }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:16px; font-weight:800; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-size:1rem; }
.btn.primary { background:var(--accent); color:var(--on-accent) !important; box-shadow:0 8px 24px var(--accent-shadow); }
.btn.primary:hover { filter:brightness(1.05); }
.btn.secondary { background:var(--btn2-bg); color:var(--btn2-text) !important; border-color:var(--btn2-line); }
.btn.sm { padding:8px 16px; border-radius:12px; font-size:.92rem; box-shadow:none; }

/* hero */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding:40px 0 80px; }
@media (max-width:860px){ .hero { grid-template-columns:1fr; } }
.pill { display:inline-block; background:var(--card); border:1.5px solid var(--line); padding:5px 14px; border-radius:999px; font-weight:700; font-size:.85rem; color:var(--pill); }
.hero h1 { font-size:clamp(2.6rem,6.6vw,4.6rem); line-height:1.05; margin:18px 0 18px; letter-spacing:-.02em; }
.hero h1 em { font-style:italic; color:var(--em); }
.hero .lead { color:var(--muted); font-size:1.1rem; max-width:520px; margin:0 0 28px; }
.ctas { display:flex; gap:12px; flex-wrap:wrap; }
.hero .note { margin-top:16px; }

/* phone preview */
.phone { justify-self:center; width:290px; max-width:100%; background:var(--phone); border-radius:38px; padding:12px; box-shadow:0 30px 60px rgba(20,22,50,.28); position:relative; }
.phone::after { content:"♥"; position:absolute; top:-16px; right:-10px; color:var(--em); font-size:2rem; transform:rotate(12deg); }
.screen { background:var(--bg); border-radius:28px; padding:16px 12px; }
.screen .top { font-weight:800; margin-bottom:10px; display:flex; justify-content:space-between; font-size:.95rem; }
.screen .top span { color:var(--em); font-size:.78rem; background:var(--bg2); padding:2px 8px; border-radius:999px; }
.post { background:var(--card); border-radius:18px; padding:12px; margin-bottom:10px; border:1px solid var(--line); font-size:.85rem; }
.post .who { display:flex; align-items:center; gap:8px; font-weight:800; }
.post .av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:.8rem; }
.post .ok { color:var(--ok); font-size:.72rem; background:var(--ok-bg); border-radius:999px; padding:1px 7px; }
.post p { margin:6px 0 8px; }
.post .inv { display:inline-block; background:var(--accent); color:var(--on-accent); border-radius:10px; padding:4px 10px; font-weight:800; font-size:.75rem; }

/* sections */
section.block { padding:72px 0; }
section.block h2, .band h2 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; margin:0 0 10px; }
.intro { color:var(--muted); max-width:640px; margin:0 0 36px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.steps > div { background:var(--card); border:1.5px solid var(--line); border-radius:24px; padding:24px; }
.steps b { font:400 2.2rem/1 Fraunces, Georgia, serif; color:var(--em); display:block; margin-bottom:12px; }
.steps h3 { margin:0 0 6px; font-size:1.08rem; }
.steps p { margin:0; color:var(--muted); }

/* evening band (safety) */
.band { background:var(--band); color:var(--band-text); border:1px solid var(--band-line); border-radius:36px; padding:60px 28px; position:relative; overflow:hidden; }
.band::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(1px 1px at 12% 20%, #fff9, transparent), radial-gradient(1px 1px at 80% 15%, #fff7, transparent), radial-gradient(1.5px 1.5px at 66% 74%, #fff5, transparent), radial-gradient(1px 1px at 30% 85%, #fff6, transparent); }
.band > * { position:relative; }
.band h2 em { font-style:italic; color:var(--band-em); }
.band .intro { color:var(--band-muted); }
.band a { color:var(--band-em); }
.safe { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.safe > div { background:var(--band-card); border:1px solid var(--band-line); border-radius:22px; padding:24px; }
.safe h3 { margin:0 0 6px; font-size:1.06rem; }
.safe p { margin:0; color:var(--band-muted); }
@media (max-width:520px){ .band { padding:44px 18px; border-radius:26px; } }

/* points */
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-bottom:28px; }
.two > div { background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:22px; }
.two h3 { margin:0 0 6px; font-size:1.08rem; }
.two p { margin:0; color:var(--muted); }
.tag { display:inline-block; font-size:.76rem; padding:1px 8px; border-radius:999px; background:var(--bg2); color:var(--em); font-weight:800; }
.packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.packs > div { background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:20px; text-align:center; position:relative; }
.packs .p { font:400 1.9rem Fraunces, Georgia, serif; }
.packs .pts { color:var(--em); font-weight:800; }
.packs .f { color:var(--muted); font-size:.85rem; }
.packs .more { font-size:.78rem; color:var(--muted); }
.packs .hot { border-color:var(--accent); }
.packs .hot::before { content:attr(data-badge); position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--on-accent); font-size:.72rem; font-weight:800; padding:2px 10px; border-radius:999px; white-space:nowrap; }

/* find us */
.find { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.find a { background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:20px; text-decoration:none; color:var(--text); font-weight:800; }
.find a span { display:block; color:var(--em); font-weight:700; }
.find a small { display:block; color:var(--muted); font-weight:400; margin-top:4px; }

/* faq */
details { background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:14px 18px; margin-bottom:10px; }
details summary { cursor:pointer; font-weight:800; }
details p { margin:10px 0 2px; color:var(--muted); }

/* guidelines */
.doc { max-width:780px; margin:0 auto; padding:24px 16px 40px; }
.doc h1 { font-size:clamp(2rem,5vw,3rem); margin:12px 0 8px; letter-spacing:-.02em; }
.doc h2 { font-size:1.45rem; margin:40px 0 8px; }
.doc ul { padding-left:1.2em; }
.doc li { margin:6px 0; }
.toc { background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:16px 20px; }
.toc ol { margin:6px 0 0; padding-left:1.3em; }
.callout { background:var(--tip-bg); border-radius:18px; padding:16px 18px; margin:18px 0; }
.callout.ok { background:var(--ok-bg); }
.callout.warn { background:var(--warn-bg); }

/* footer */
footer.bottom { background:var(--foot); color:var(--foot-text); padding:44px 0 50px; margin-top:40px; }
footer.bottom .wrap { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
footer.bottom .brand { color:var(--foot-strong); }
footer.bottom h4 { margin:0 0 6px; font-size:.9rem; color:var(--foot-strong); }
footer.bottom a { color:var(--foot-text); text-decoration:none; display:block; margin:4px 0; }
footer.bottom a:hover { color:var(--foot-strong); }

/* language gate */
.gate { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.gate .box { width:100%; max-width:440px; background:var(--card); border:1.5px solid var(--line); border-radius:28px; padding:36px 28px; text-align:center; box-shadow:0 30px 60px rgba(20,22,50,.18); }
.gate .mark { width:64px; height:64px; border-radius:20px; background:var(--mark-bg); color:var(--mark-fg); display:grid; place-items:center; margin:0 auto; font-size:1.8rem; }
.gate h1 { margin:14px 0 2px; font-size:2.1rem; }
.gate h1 i { font-style:normal; color:var(--em); }
.gate .q { margin:20px 0 18px; font-weight:800; }
.gate .choices { display:grid; gap:12px; }
.gate .choices a { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-radius:18px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); text-decoration:none; font-size:1.1rem; font-weight:800; }
.gate .choices a:hover, .gate .choices a.last { border-color:var(--accent); }
.gate .choices a small { color:var(--muted); font-weight:600; font-size:.85rem; }
.gate label { display:inline-flex; gap:8px; align-items:center; margin-top:16px; color:var(--muted); font-size:.9rem; cursor:pointer; }
.theme-btn.corner { position:fixed; top:16px; right:16px; }