/* ===== ASTC Site — Premium Dark UI v3 (2026-05-18 翻案) =====
 * v3 翻案：design-tokens.json 變唯一真相·砍既有 :root primitive·改 @import
 * element-scope overrides 集中本檔·page-handler 用 body class 套用
 * 鐵則：feedback_existing_site_style_is_truth.md（線上既有風格 1:1 + 1 份真相）
 *
 * 變數來源優先級：
 *   1. design-tokens.json（W3C DTCG · primitive 唯一真相）
 *   2. 本檔下方 legacy alias :root（既有頁不破壞）
 *   3. 本檔下方 body.page-* element scope（page-handler 獨家覆蓋）
 */

/* ===== 主要層變數·內聯 design-tokens.css 自動生成內容（來源：public/design/design-tokens.json） =====
 * 每次 design-tokens.json 改·跑 pnpm build:tokens 重生·手動 sync 此區段
 */
:root {
  --black-2: #0f0f0f;
  --black-3: #111111; /* 對齊 shared.css 線上 · home/bootcamp 既有色 */
  --black-4: #141414;
  --black: #0a0a0a;
  --white-1: #ffffffeb;
  --white-2: #ffffff9e;
  --white-3: #ffffff66;
  --white-4: #ffffff2e;
  --white: #fafafa;
  --border-2: #ffffff24;
  --border: #ffffff12;
  --border-strong: #ffffff21;
  --amber: #f59e0b;
  --amber-bright: #fcd34d;
  --amber-dim: #f59e0b14;
  --amber-glow: #f59e0b40;
  --emerald: #34d399;
  --teal: #2bb5b8;
  --red: #f87171;
  --rose: #f472b6;
  --violet: #a78bfa;
  --blue: #60a5fa;
  --nav-bg: #0a0a0ab8;
  --bubble-admin: #fcd34d1f;
  --bubble-user: #ffffff0f;
  --nav-height: 70px;
  --nav-z: 100;
  --topbar-h: 64px;
  --card-radius: 12px;
  --nav-border: var(--border);
  --nav-text: var(--white);
  --nav-text-muted: var(--white-2);
  --nav-link-hover: var(--amber-bright);
  --nav-link-active: var(--amber);
  --nav-cta-bg: var(--amber);
  --nav-cta-text: var(--black);
  --nav-cta-hover-bg: var(--amber-bright);
}

/* ===== Legacy aliases · 保留既有頁不破壞 ===== */
:root {
  --bg: var(--black);
  --bg-card: rgba(255,255,255,.025);
  --bg-elevated: rgba(255,255,255,.05);
  --text: var(--white);
  --text-secondary: var(--white-2);
  --text-muted: var(--white-3);
  --gold: var(--amber);
  --green: var(--emerald);
  --purple: #a855f7;
  --radius: 14px;
  --max-w: 1240px;
}

/* ===== Element-scope overrides · 9 page-handler 既有獨家色 1:1 對齊線上 ===== */

/* 多數頁面共用：black-3 #141414 + border .08（home/bootcamp 例外·走主要層 #111111 + .07）*/
body.page-chat,
body.page-community-ask,
body.page-community-install,
body.page-community-channel,
body.page-learn,
body.page-pdf-viewer,
body.page-student-login,
body.page-community-parts {
  --black-3: #141414;
  --border: rgba(255,255,255,.08);
}

/* chat 獨家：black-4 + bubble */
body.page-chat {
  --black-4: #1c1c1c;
  --bubble-admin: rgba(252, 211, 77, .12);
  --bubble-user: rgba(255,255,255,.06);
}

/* community-ask 獨家：red 標準色 */
body.page-community-ask {
  --red: #ef4444;
}

/* student-login 獨家：border-strong .16 */
body.page-student-login {
  --border-strong: rgba(255,255,255,.16);
}

/* community-parts 獨家（社群子頁共用）：black-4 + border-2 + rose 標準色 + 尺寸 */
body.page-community-parts {
  --black-4: #1a1a1a;
  --border-2: rgba(255,255,255,.14);
  --rose: #f43f5e;
  --topbar-h: 64px;
  --bottom-tabs-h: 56px;
  --sidebar-w: 280px;
}

/* ===== 既有實體規則（從原 shared.css R2 線上 line 17-130 1:1 拷貝） ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{width:0;height:0;display:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background:var(--black);color:var(--white);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv11";
  overflow-x:hidden;overscroll-behavior-x:none;
}
/* L1 Ambient depth */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 18% 22%,rgba(255,255,255,.035),transparent 60%),radial-gradient(ellipse 55% 45% at 82% 78%,rgba(255,255,255,.022),transparent 60%);
}
a{color:var(--amber-bright);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max-w);margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* ===== Navbar (Premium Dark · 居中對齊 5/4 ship) ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 0;background:rgba(10,10,10,.72);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-bottom:1px solid var(--border);transition:transform .3s,background .3s}
.navbar.scrolled{background:rgba(10,10,10,.88)}
.nav-inner{display:flex;align-items:center;justify-content:center;gap:32px;max-width:var(--max-w);margin:0 auto;padding:0 28px}
.nav-logo{font-size:14px;font-weight:600;color:var(--white);display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;text-decoration:none}
.nav-logo img{height:28px;width:auto;display:block;margin-top:0}
.nav-logo .teal{color:var(--teal)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--white-2);font-size:13px;font-weight:500;transition:color .15s;letter-spacing:-0.005em}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--amber-bright)}
.nav-links .nav-cta{background:linear-gradient(180deg,var(--amber-bright) 0%,var(--amber) 65%,#d97706 100%);color:#1a1300;padding:10px 18px;border-radius:10px;font-weight:700;font-size:13px;box-shadow:0 0 0 1px rgba(245,158,11,.4),0 6px 18px rgba(245,158,11,.22),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,box-shadow .2s;letter-spacing:-0.005em}
.nav-links .nav-cta:hover{color:#1a1300;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(245,158,11,.5),0 10px 26px rgba(245,158,11,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.nav-hamburger{display:none;background:none;border:none;color:var(--white);font-size:24px;cursor:pointer}

/* ===== Mobile Menu (Premium · 5/4 ship 右側 off-canvas) ===== */
.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:300px;background:rgba(10,10,10,.96);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-left:1px solid var(--border);padding:80px 24px 32px;z-index:200;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;display:block}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{display:block;padding:14px 4px;color:var(--white-1);font-size:15px;font-weight:500;border-bottom:1px solid var(--border);text-decoration:none;transition:color .15s}
.mobile-menu a:hover{color:var(--amber-bright)}
.mobile-menu .nav-cta{background:linear-gradient(180deg,var(--amber-bright),var(--amber));color:#1a1300;padding:14px;border-radius:10px;text-align:center;border-bottom:0;font-weight:700;margin-top:18px;box-shadow:0 4px 14px rgba(245,158,11,.28)}
.mobile-menu .close-btn{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--white);font-size:18px;cursor:pointer;padding:0;width:36px;height:36px;border-radius:8px;display:grid;place-items:center}

/* ===== body padding (給教育站 17 頁等 fixed navbar 用) ===== */
body.astc-has-navbar{padding-top:60px}

/* ===== Sections ===== */
section{padding:80px 0;position:relative;z-index:1}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-0.028em;margin-bottom:12px;line-height:1.1;color:var(--white)}
.section-header p{font-size:16px;color:var(--white-2);max-width:640px;margin:0 auto;line-height:1.55}
.section-label{display:inline-block;font-size:11px;font-weight:600;color:var(--amber-bright);margin-bottom:16px;text-transform:uppercase;letter-spacing:0.14em}

/* ===== Buttons (Premium) ===== */
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:11px;background:linear-gradient(180deg,var(--amber-bright) 0%,var(--amber) 65%,#d97706 100%);color:#1a1300;font-weight:700;font-size:14px;border:0;cursor:pointer;text-decoration:none;letter-spacing:-0.005em;box-shadow:0 0 0 1px rgba(245,158,11,.4),0 8px 22px rgba(245,158,11,.26),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,box-shadow .2s;font-family:inherit}
.btn-primary:hover{color:#1a1300;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(245,158,11,.5),0 12px 30px rgba(245,158,11,.34),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:11px;background:rgba(255,255,255,.04);color:var(--white);font-weight:600;font-size:14px;border:1px solid var(--border-strong);cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s;font-family:inherit}
.btn-secondary:hover{color:var(--white);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.btn-white{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:11px;background:linear-gradient(180deg,#fafafa 0%,#d4d4d8 100%);color:var(--black);font-weight:600;font-size:14px;border:0;cursor:pointer;text-decoration:none;letter-spacing:-0.005em;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s;font-family:inherit}
.btn-white:hover{color:var(--black);transform:translateY(-1px)}

/* ===== Page Hero (sub-pages) ===== */
.page-hero{padding:140px 0 60px;text-align:center;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(245,158,11,.05) 0%,transparent 60%);pointer-events:none}
.page-hero h1{font-size:clamp(32px,5vw,56px);font-weight:600;letter-spacing:-0.032em;margin-bottom:14px;position:relative;line-height:1.05;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.78) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero h1 .gold{background:linear-gradient(135deg,var(--amber-bright),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-hero p{font-size:17px;color:var(--white-2);max-width:600px;margin:0 auto;position:relative;line-height:1.55}
.page-hero .breadcrumb{font-size:11px;color:var(--white-3);margin-bottom:18px;position:relative;letter-spacing:0.12em;text-transform:uppercase;font-weight:600}
.page-hero .breadcrumb a{color:var(--white-2)}

/* ===== Cards (Premium) ===== */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.012) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:24px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}

/* ===== Footer (Premium) ===== */
.footer{border-top:1px solid var(--border);padding:50px 0 36px;background:var(--black-2);position:relative;z-index:1}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;max-width:var(--max-w);margin:0 auto;padding:0 28px}
.footer-brand{max-width:300px}
.footer-brand .logo{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--white)}
.footer-brand .logo .teal{color:var(--teal)}
.footer-brand p{font-size:13px;color:var(--white-3);line-height:1.6}
.footer-links h4{font-size:11px;font-weight:700;margin-bottom:14px;color:var(--white-2);text-transform:uppercase;letter-spacing:0.12em}
.footer-links a{display:block;font-size:13px;color:var(--white-3);margin-bottom:8px;transition:color .15s}
.footer-links a:hover{color:var(--white)}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--white-2);transition:all .2s}
.footer-social a:hover{border-color:var(--border-strong);background:rgba(255,255,255,.07);color:var(--white)}
.footer-copy{text-align:center;padding-top:22px;margin-top:22px;border-top:1px solid var(--border);font-size:12px;color:var(--white-3);max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}

/* ===== Back to Top (Premium amber) ===== */
.top-btn{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(180deg,var(--amber-bright),var(--amber));color:#1a1300;font-size:20px;display:none;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(245,158,11,.32),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s;z-index:50}
.top-btn.show{display:flex}
.top-btn:hover{transform:translateY(-2px)}

/* ===== Scroll Reveal ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== RWD ===== */
@media(max-width:860px){
  .nav-links{display:none}
  .nav-hamburger{display:block}
  .container{padding:0 22px}
  section{padding:64px 0}
  .page-hero{padding:120px 0 40px}
  .page-hero h1{font-size:32px}
  .footer{padding:36px 0 28px}
  .footer-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;padding:0 22px}
  .footer-brand{grid-column:1 / -1;max-width:none}
  .footer-brand p{font-size:13px;line-height:1.6}
  .footer-links{min-width:0}
  .footer-links h4{margin-bottom:8px;font-size:11px}
  .footer-links a{margin-bottom:6px;font-size:13px}
  .footer-inner > .footer-links:last-child{grid-column:1 / -1}
  .footer-inner > .footer-links:last-child a{display:inline-block;margin-right:14px;margin-bottom:8px}
  .footer-inner > .footer-links:last-child a:first-of-type{display:block;margin-right:0;margin-bottom:12px;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:9px;text-align:center;font-weight:600;color:var(--amber-bright)}
}