/* ── CSS Variables (WMT / LifeValue / CareerCard shared palette) ── */
:root {
  --ink: #1a1410;
  --paper: #faf7f2;
  --warm: #f0ebe0;
  --accent: #c8502a;
  --accent2: #4a7c6f;
  --accent3: #d4a84b;
  --accent4: #5a6ea0;
  --muted: #8a7f72;
  --border: #d8cfc0;
}

/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Noto Sans TC', sans-serif;
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── HERO HEADER ── */
.header { background:var(--ink); padding:9rem 2rem 6rem; text-align:center; position:relative; overflow:hidden; }
.header-bg { position:absolute; inset:0; background: radial-gradient(ellipse 70% 55% at 50% 85%,rgba(212,168,75,.12) 0%,transparent 65%), radial-gradient(ellipse 40% 30% at 20% 20%,rgba(74,124,111,.06) 0%,transparent 60%), linear-gradient(160deg,#1a1410 0%,#221c14 60%,#1a1410 100%); }
.header-lines { position:absolute; inset:0; pointer-events:none; }
.header-lines svg { width:100%; height:100%; }
.header-inner { position:relative; z-index:2; max-width:680px; margin:0 auto; }
.header-eyebrow { font-family:'Noto Serif TC',serif; font-style:italic; font-weight:300; font-size:.82rem; letter-spacing:.28em; color:var(--accent3); text-transform:uppercase; margin-bottom:1.4rem; opacity:0; animation:hdrFadeUp .9s .2s ease forwards; }
.header h1 { font-family:'Noto Serif TC',serif; font-size:clamp(2rem,5.5vw,3.2rem); font-weight:700; color:var(--paper); letter-spacing:.1em; line-height:1.3; margin-bottom:0; opacity:0; animation:hdrFadeUp .9s .4s ease forwards; }
.header-divider { width:40px; height:1px; background:linear-gradient(90deg,transparent,var(--accent3),transparent); margin:1.4rem auto; opacity:0; animation:hdrFadeIn .9s .6s ease forwards; }
.header p { font-size:.85rem; font-weight:300; color:rgba(250,247,242,.48); letter-spacing:.06em; line-height:2; opacity:0; animation:hdrFadeUp .9s .75s ease forwards; }
@keyframes hdrFadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes hdrFadeIn { from{opacity:0} to{opacity:1} }

/* ── MODE SCREEN ── */
.mode-screen { max-width:900px; margin:3rem auto 0; padding:0 2rem 5rem; }
@media(max-width:700px) { .mode-screen { padding:0 1.5rem 4rem; } }

/* ── PANELS GRID / WELCOME PANEL ── */
.panels-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5px; background:rgba(0,0,0,.07); border:1px solid rgba(0,0,0,.07); }
@media(max-width:700px) { .panels-grid { grid-template-columns:1fr; } }
.panel-number { position:absolute; top:1.6rem; right:2rem; font-family:'Noto Serif TC',serif; font-size:3.5rem; color:rgba(0,0,0,.04); line-height:1; font-weight:400; pointer-events:none; user-select:none; }
.panel-category { font-family:'Noto Serif TC',serif; font-style:italic; font-size:.72rem; letter-spacing:.22em; color:var(--accent3); margin-bottom:.6rem; }
.welcome-panel { background:var(--paper); padding:2.8rem 2.4rem; position:relative; overflow:hidden; transition:background .3s; max-width:none; margin:0; border-radius:0; box-shadow:none; }
.welcome-panel::before { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:linear-gradient(90deg,var(--accent3),var(--accent)); transition:width .4s ease; }
.welcome-panel:hover { background:var(--warm); }
.welcome-panel:hover::before { width:100%; }
.welcome-panel--job::before { background:linear-gradient(90deg,var(--accent3),var(--accent4)); }
.welcome-title { font-family:'Noto Serif TC',serif; font-size:1.15rem; font-weight:600; color:var(--ink); letter-spacing:.06em; margin-bottom:.4rem; line-height:1.4; }
.welcome-subtitle { font-family:'Noto Serif TC',serif; font-size:.78rem; font-weight:400; color:var(--muted); letter-spacing:.08em; margin-bottom:1rem; }
.welcome-desc { font-size:.79rem; color:var(--muted); line-height:2; margin-bottom:1.4rem; }
.welcome-steps { list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-direction:column; gap:.3rem; }
.welcome-steps li { font-size:.74rem; color:var(--muted); line-height:1.8; display:flex; align-items:center; gap:.6rem; }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:transparent; border:1px solid var(--border); font-size:.58rem; font-weight:700; color:var(--accent3); letter-spacing:.05em; flex-shrink:0; }
.welcome-actions { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; margin-top:0; }
.btn-welcome { font-family:'Noto Serif TC',serif; cursor:pointer; transition:all .2s; background:none; border:none; padding:0; text-align:left; }
.btn-welcome-primary { font-size:.75rem; color:var(--accent3); letter-spacing:.18em; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border:1.5px solid var(--accent3); border-radius:999px; padding:.45rem 1.1rem .45rem 1rem; }
.btn-welcome-primary:hover { background:var(--accent3); color:var(--ink); gap:.8rem; }
.btn-welcome--job { border-color:var(--accent4); color:var(--accent4); }
.btn-welcome--job:hover { background:var(--accent4); color:#fff; gap:.8rem; }
.btn-welcome-secondary { font-size:.7rem; color:var(--muted); font-style:italic; letter-spacing:.06em; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(0,0,0,.15); }
.btn-welcome-secondary:hover { color:var(--ink); }

/* ── SHARED INPUTS ── */
.name-input-block { display:flex; align-items:center; gap:.8rem; background:white; border:1.5px solid var(--border); border-radius:8px; padding:.8rem 1rem; margin-bottom:1.5rem; max-width:380px; transition:border-color .2s,box-shadow .2s; }
.name-input-block.error { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,80,42,.12); animation:shake .3s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.name-input-block label { font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.name-required-tag { font-size:.62rem; color:var(--accent); font-weight:700; margin-left:2px; }
.name-input-block input { flex:1; border:none; outline:none; font-family:'Noto Sans TC',sans-serif; font-size:.9rem; color:var(--ink); background:transparent; }
.name-input-block input::placeholder { color:#ccc; }
.name-input-block:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,80,42,.08); }

/* ── SHARED NAV BUTTONS ── */
.nav-btn { padding:.65rem 1.8rem; border-radius:6px; font-family:'Noto Sans TC',sans-serif; font-size:.83rem; font-weight:600; cursor:pointer; letter-spacing:.05em; transition:all .2s; border:2px solid; }
.nav-btn.primary { background:var(--accent); border-color:var(--accent); color:white; }
.nav-btn.primary:hover { background:#a8401e; border-color:#a8401e; }
.nav-btn.primary.wm, .nav-btn.primary.jm { background:var(--accent4); border-color:var(--accent4); }
.nav-btn.primary.wm:hover, .nav-btn.primary.jm:hover { background:#485888; border-color:#485888; }
.nav-btn.secondary { background:transparent; border-color:var(--border); color:var(--muted); }
.nav-btn.secondary:hover { border-color:var(--muted); color:var(--ink); }
.sticky-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:rgba(250,247,242,.92); backdrop-filter:blur(10px); border-top:1px solid var(--border); padding:.75rem 1.5rem; box-shadow:0 -2px 16px rgba(0,0,0,.08); justify-content:flex-end; gap:.8rem; align-items:center; }
.sticky-nav.visible { display:flex; }

/* ── SHARED UTILITIES ── */
.warn-msg { background:#fff8e6; border:1px solid #f0c040; border-radius:6px; padding:.65rem 1rem; font-size:.78rem; color:#7a5c00; margin-bottom:1.5rem; display:none; }
.warn-msg.show { display:block; }
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:white; padding:.7rem 1.5rem; border-radius:30px; font-size:.85rem; opacity:0; transition:all .3s; z-index:999; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.loading-overlay { display:none; position:fixed; inset:0; background:rgba(26,20,16,.6); z-index:9000; align-items:center; justify-content:center; backdrop-filter:blur(3px); flex-direction:column; gap:1.2rem; }
.loading-overlay.show { display:flex; }
.loading-spinner { width:44px; height:44px; border:3px solid rgba(250,247,242,.2); border-top-color:var(--accent3); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-text { color:var(--paper); font-size:.9rem; letter-spacing:.05em; }
.export-bar { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; background:var(--warm); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; margin-bottom:2rem; }
.export-bar span { font-size:.78rem; color:var(--muted); font-weight:500; }
.export-btn { padding:.45rem 1rem; border-radius:6px; font-family:'Noto Sans TC',sans-serif; font-size:.78rem; font-weight:600; cursor:pointer; border:1.5px solid; transition:all .2s; }
.export-btn.dl { background:white; border-color:var(--border); color:var(--ink); }
.export-btn.dl:hover { border-color:var(--ink); }
.export-btn.copy { background:white; border-color:var(--border); color:var(--ink); }
.export-btn.copy:hover { border-color:var(--accent2); color:var(--accent2); }
.restore-banner { background:#fff8e6; border:1px solid #f0c040; border-radius:8px; padding:.9rem 1.2rem; margin:1.5rem auto; max-width:720px; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.restore-banner p { font-size:.82rem; color:#7a5c00; flex:1; }
.restore-btn { font-size:.78rem; padding:.35rem .9rem; border-radius:6px; border:1.5px solid #f0c040; background:white; cursor:pointer; font-family:inherit; color:#7a5c00; font-weight:600; transition:all .15s; }
.restore-btn:hover { background:#f0c040; color:white; }
.restore-btn.dismiss { border-color:var(--border); color:var(--muted); }

/* ── CODE VERIFICATION MODAL ── */
.code-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(26,20,16,.65); z-index:8000; align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:1rem; }
.code-modal-backdrop.show { display:flex; }
.code-modal { background:var(--paper); border-radius:16px; padding:2.2rem 2rem 1.8rem; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); position:relative; }
.code-modal-icon { font-size:2.2rem; text-align:center; margin-bottom:.8rem; }
.code-modal h2 { font-family:'Noto Serif TC',serif; font-size:1.25rem; font-weight:700; text-align:center; margin-bottom:.4rem; }
.code-modal .code-modal-sub { font-size:.82rem; color:var(--muted); text-align:center; line-height:1.7; margin-bottom:1.6rem; }
.code-input-wrap { display:flex; gap:.6rem; margin-bottom:.8rem; }
.code-input { flex:1; min-width:0; border:2px solid var(--border); border-radius:8px; padding:.7rem 1rem; font-family:'Noto Sans TC',sans-serif; font-size:1rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); outline:none; transition:border-color .2s,box-shadow .2s; background:white; text-align:center; }
.code-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,80,42,.1); }
.code-input.error { border-color:var(--accent); animation:shake .3s ease; }
.code-submit-btn { padding:.7rem 1.4rem; background:var(--accent); border:none; border-radius:8px; color:white; font-family:'Noto Sans TC',sans-serif; font-size:.88rem; font-weight:700; cursor:pointer; transition:background .2s; white-space:nowrap; flex-shrink:0; }
.code-submit-btn:hover { background:#a8401e; }
.code-submit-btn:disabled { background:var(--border); cursor:not-allowed; }
.code-submit-btn.wm, .code-submit-btn.jm { background:var(--accent4); }
.code-submit-btn.wm:hover, .code-submit-btn.jm:hover { background:#485888; }
@media(max-width:480px) { .code-modal { padding:1.8rem 1.2rem 1.5rem; } .code-input-wrap { flex-direction:column; } .code-submit-btn { width:100%; padding:.8rem; font-size:.95rem; } }
.code-error-msg { font-size:.78rem; color:var(--accent); min-height:1.2em; margin-bottom:.6rem; text-align:center; }
.code-modal-footer { font-size:.72rem; color:var(--muted); text-align:center; line-height:1.6; margin-top:.8rem; border-top:1px solid var(--border); padding-top:.8rem; }
.code-modal-footer a { color:var(--accent); text-decoration:underline; }
.code-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:.4rem; }