/* Layout: spec-sheet portfolio, re-themed from the logo (blue + red loop) and Little Witch's starry cape */
:root{
  --bg:#F5F7FB; --surface:#FFFFFF; --ink:#0B1530; --muted:#55607A; --line:#E1E6F0;
  --accent:#1667C7; --accent-2:#4B3FD6; --accent-soft:#EAF1FC; --signal:#D62839; --star:#F2B632;
  --dark:#0C1C4A; --dark-2:#1E3F96; --dark-3:#3A2C86; --dark-line:rgba(255,255,255,.14); --on-dark:#F5F7FB; --on-dark-muted:#B9C4E4;
  --ok:#1B7A43; --warn:#9A6200; --mute:#5B6680; --line-green:#06C755; --line-green-2:#03A84A;
  --head-bg:rgba(245,247,251,.86); --glow:rgba(22,103,199,.28);
  --shadow-sm:0 1px 2px rgba(11,21,48,.05),0 4px 14px rgba(11,21,48,.06);
  --shadow-md:0 6px 16px rgba(11,21,48,.08),0 18px 40px rgba(11,21,48,.10);
  --display:"Bricolage Grotesque","Noto Sans TC",sans-serif;
  --body:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --fs:18px; --btn-ink:#fff;
  --c1:#1667C7; --c2:#D62839; --c3:#E0A51B; --c4:#1B9E77; --c5:#6A4FD8; --c6:#E8743B; --c7:#5B6B86;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070D1F; --surface:#10182F; --ink:#EEF2FB; --muted:#A8B3CF; --line:#222C47;
  --accent:#6AA8F5; --accent-2:#958CFF; --accent-soft:#15244A; --signal:#FF5D6C; --star:#F7CD52;
  --dark:#0A1640; --dark-2:#1A3478; --dark-3:#2E2470; --dark-line:rgba(255,255,255,.12); --on-dark:#EEF2FB; --on-dark-muted:#A9B5DA;
  --ok:#5CCB8A; --warn:#E6AE52; --mute:#93A0BE; --head-bg:rgba(7,13,31,.86); --glow:rgba(106,168,245,.30);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30); --shadow-md:0 8px 20px rgba(0,0,0,.40),0 20px 44px rgba(0,0,0,.35);
  --c1:#6AA8F5; --c2:#FF5D6C; --c3:#F7CD52; --c4:#3CC89B; --c5:#A585F0; --c6:#F59A62; --c7:#93A0BE; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070D1F; --surface:#10182F; --ink:#EEF2FB; --muted:#A8B3CF; --line:#222C47;
  --accent:#6AA8F5; --accent-2:#958CFF; --accent-soft:#15244A; --signal:#FF5D6C; --star:#F7CD52;
  --dark:#0A1640; --dark-2:#1A3478; --dark-3:#2E2470; --dark-line:rgba(255,255,255,.12); --on-dark:#EEF2FB; --on-dark-muted:#A9B5DA;
  --ok:#5CCB8A; --warn:#E6AE52; --mute:#93A0BE; --head-bg:rgba(7,13,31,.86); --glow:rgba(106,168,245,.30);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.30); --shadow-md:0 8px 20px rgba(0,0,0,.40),0 20px 44px rgba(0,0,0,.35);
  --c1:#6AA8F5; --c2:#FF5D6C; --c3:#F7CD52; --c4:#3CC89B; --c5:#A585F0; --c6:#F59A62; --c7:#93A0BE; color-scheme:dark}
html.fs-l{--fs:20px} html.fs-xl{--fs:23px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs);line-height:1.75;padding:0 16px 96px}
.wrap{max-width:1160px;margin:0 auto}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
h1,h2,h3,h4{line-height:1.3}
.eyebrow{font-family:var(--display);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);font-weight:500}

/* buttons: ≥52px tall for easy tapping */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 22px;background:var(--accent);color:var(--btn-ink,#fff);border:2px solid var(--accent);font:700 1em var(--body);text-decoration:none;border-radius:6px;cursor:pointer;text-align:center}
.btn.line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;font-weight:900;font-size:1.15em;text-decoration:none}
.brand img{width:40px;height:40px;margin-right:10px}
.fs{display:flex;align-items:center}
.fs span{font-size:.8em;color:var(--muted);margin-right:8px}
.fs button{min-width:48px;min-height:48px;margin-left:6px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:700 16px var(--body);border-radius:6px;cursor:pointer}
.fs button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.fs button:nth-child(3){font-size:19px}.fs button:nth-child(4){font-size:22px}
.menu{display:flex;flex-wrap:wrap;width:100%;margin-top:10px}
.menu a{min-height:48px;display:inline-flex;align-items:center;padding:0 14px 0 0;margin-right:10px;text-decoration:none;font-weight:500;color:var(--muted)}
.menu a:hover{color:var(--ink)}


/* header tools: text size + language */
.tools{display:flex;align-items:center;flex-wrap:wrap}
.lang{display:flex;margin-left:14px;border:2px solid var(--line);border-radius:8px;overflow:hidden}
.lang a{min-width:56px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;text-decoration:none;font-weight:700;color:var(--muted);background:var(--surface)}
.lang a[aria-current="true"]{background:var(--accent);color:#fff}
/* hero */
.hero{padding:44px 0 36px;display:grid;grid-template-columns:1.3fr 1fr;grid-gap:40px;align-items:end}
.hero h1{font-weight:900;font-size:2.6em;margin:10px 0 18px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.lede{color:var(--muted);font-size:1.08em;max-width:32em;margin:0 0 24px}
.ctas{display:grid;grid-template-columns:auto auto;justify-content:start;grid-gap:12px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--surface)}
.stats div{padding:18px 16px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats strong{display:block;font-family:var(--display);font-weight:800;font-size:2.2em;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:.85em;color:var(--muted)}

section{padding:48px 0}
.sec-head{border-top:3px solid var(--ink);padding-top:14px;margin-bottom:26px}
.sec-head h2{font-size:1.7em;font-weight:900;margin:4px 0 0}
.sec-head p{color:var(--muted);margin:8px 0 0;max-width:36em}

/* services */
.ai{display:grid;grid-template-columns:1fr 1.2fr;grid-gap:32px;background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2));color:var(--on-dark);padding:32px;border-radius:8px;margin-bottom:16px}
.ai h3{font-size:2.2em;font-weight:900;margin:6px 0 12px}
.ai h3 small{display:block;font-family:var(--display);font-size:.4em;font-weight:500;color:var(--on-dark-muted);letter-spacing:.1em;text-transform:uppercase}
.ai p{color:var(--on-dark-muted);margin:0}
.ai ul{list-style:none;margin:0;padding:0}
.ai li{padding:14px 0 14px 34px;border-bottom:1px solid var(--dark-line);position:relative}
.ai li:before{content:"AI";position:absolute;left:0;top:16px;font:800 .62em var(--display);background:var(--signal);color:#fff;padding:2px 5px;border-radius:3px}
.ai .cases{margin-top:16px;font-size:.88em;color:var(--on-dark-muted)}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px}
.shots{min-width:0}
.thumbs{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;margin-top:14px}
.thumbs figure{margin:0}
.thumbs figcaption{font-size:.8em;color:var(--muted);margin-top:6px}
.stk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px;margin-top:16px}
.stk h3{font-size:1.45em;font-weight:900;margin:4px 0 10px}
.stk p{color:var(--muted);margin:0}
.stk .sheet{background:#fff;border-radius:8px;padding:12px}
.stk .sheet img{display:block;width:100%;height:auto}
.backend+.backend{margin-top:48px;padding-top:48px;border-top:1px dashed var(--line)}
.shot.wide{max-width:none}
.masked{font-size:.8em;color:var(--muted);margin-top:8px}
.svc article{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px}
.svc .en{font-family:var(--display);font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.svc h3{margin:4px 0 8px;font-size:1.2em;font-weight:900}
.svc p{margin:0 0 10px;color:var(--muted);font-size:.95em}
.svc ul{margin:0;padding-left:1.1em;font-size:.92em}
.svc li{margin:4px 0}

.avatar{background:#F3F6FA;border-radius:8px;display:flex;justify-content:center;margin:-6px -6px 14px}
.avatar img{width:auto;height:140px;max-width:100%;display:block;padding:8px 0}
/* backend demo */
.backend{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-gap:40px;align-items:center}
.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#F3F6FA;max-width:460px;width:100%;justify-self:center;box-shadow:0 10px 30px rgba(15,27,34,.12)}
.shot-bar{display:flex;align-items:center;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 12px;font-size:.7em;color:var(--muted)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);margin-right:6px}
.shot-bar span{margin-left:8px}
.shot img{display:block;width:100%;height:auto}
.bk-text h3{font-size:1.45em;font-weight:900;margin:0 0 10px}
.bk-text p{color:var(--muted);margin:0 0 14px}
.ticks{list-style:none;padding:0;margin:0 0 20px}
.ticks li{padding:10px 0 10px 32px;border-bottom:1px solid var(--line);position:relative}
.ticks li:before{content:"✓";position:absolute;left:4px;top:10px;color:var(--accent);font-weight:900}
.bk-btns{display:grid;grid-template-columns:auto auto;justify-content:start;grid-gap:12px}
/* diagnosis */
.diag{display:grid;grid-template-columns:220px minmax(0,1fr);grid-gap:28px;background:var(--surface);border:2px solid var(--accent);border-radius:12px;padding:28px}
.diag-side{text-align:center}
.diag-side .orb{width:170px;margin:0 auto}
.bubble{position:relative;background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:.92em;margin:10px 0 0;text-align:left}
.bubble:before{content:"";position:absolute;top:-10px;left:50%;margin-left:-10px;border:10px solid transparent;border-top:0;border-bottom-color:var(--accent-soft)}
.progress{display:flex;align-items:center;margin-bottom:14px;font-size:.85em;color:var(--muted)}
.pbar{flex:1;height:8px;background:var(--line);border-radius:4px;margin-left:12px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);transition:width .3s}
.step-pane h3{font-size:1.35em;font-weight:900;margin:0 0 12px}
.hint{color:var(--muted);margin:-6px 0 12px;font-size:.92em}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px}
.opt{min-height:60px;padding:10px 14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;font:500 1em var(--body);text-align:left;cursor:pointer}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.opt[aria-pressed="true"]:before{content:"✓ ";color:var(--accent);font-weight:900}
.tasks{display:grid;grid-gap:10px}
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border:2px solid var(--line);border-radius:8px;background:var(--bg)}
.task.on{border-color:var(--accent);background:var(--accent-soft)}
.task .opt{border:0;background:transparent;min-height:60px}
.stepper{display:flex;align-items:center;padding-right:10px}
.stepper button{width:48px;height:48px;border:2px solid var(--accent);background:var(--surface);color:var(--accent);font:900 22px var(--body);border-radius:8px;cursor:pointer}
.stepper span{min-width:84px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.nav-btns{display:grid;grid-template-columns:auto auto;justify-content:end;grid-gap:10px;margin-top:20px}
.result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:24px}
.saved .lbl{color:var(--muted)}
.big{font-size:1.2em;font-weight:700;margin-bottom:10px}
.big strong{font-family:var(--display);font-weight:800;font-size:3em;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.tbar{margin:8px 0;font-size:.85em}
.tbar .row{display:flex;justify-content:space-between;color:var(--muted)}
.tbar .track{height:12px;background:var(--line);border-radius:6px;position:relative;overflow:hidden;margin-top:3px}
.tbar .before{position:absolute;left:0;top:0;bottom:0;background:var(--signal);opacity:.3;border-radius:6px}
.tbar .after{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1) .25s}
.tbar .before{transition:width .8s cubic-bezier(.2,.8,.2,1)}
.note{font-size:.78em;color:var(--muted);margin:10px 0 0}
.recs h4{margin:0 0 6px;font-size:1em;color:var(--signal)}
.recs ol,.recs ul{margin:0 0 16px;padding-left:1.2em}
.recs li{margin:4px 0}
.recs a{color:var(--accent);font-weight:700}
.ai-box{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px}
.ai-text{white-space:pre-line;margin-top:12px;background:var(--accent-soft);border-radius:8px;padding:0 16px}
.ai-text:not(:empty){padding:14px 16px}
.summary{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px}
.summary label{display:block;font-weight:700;margin-bottom:6px}
.summary textarea{width:100%;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:.92em/1.7 var(--body);padding:10px 12px;resize:vertical}
.sum-btns{display:grid;grid-template-columns:auto auto;justify-content:start;grid-gap:10px;margin-top:10px}
.summary .copied{color:var(--ok)}
/* filter */
.chips{display:flex;flex-wrap:wrap;margin:0 0 18px}
.chip{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;margin:0 8px 8px 0;border:2px solid var(--line);border-radius:999px;text-decoration:none;font-weight:500;background:var(--surface)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* project cards */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;display:flex;flex-direction:column}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.8em;color:var(--muted)}
.st{display:inline-flex;align-items:center;font-weight:700}
.st:before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;margin-right:6px}
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.mute{color:var(--mute)}
.card h3{margin:10px 0 2px;font-size:1.3em;font-weight:900}
.card .client{font-size:.85em;color:var(--muted)}
.card .pitch{margin:10px 0 12px;flex:1}
.tags{display:flex;flex-wrap:wrap;margin-bottom:12px}
.tags span{font-size:.75em;border:1px solid var(--line);padding:2px 8px;margin:0 6px 6px 0;border-radius:4px;color:var(--muted)}
.metric{border-top:1px dashed var(--line);padding-top:12px;margin-bottom:6px}
.metric strong{font-family:var(--display);font-weight:800;font-size:1.5em;color:var(--accent);font-variant-numeric:tabular-nums;margin-right:8px}
.metric span{font-size:.85em;color:var(--muted)}
details{border-top:1px solid var(--line);margin-top:8px}
summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;color:var(--accent);list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"＋";font-size:1.2em}
details[open] summary:after{content:"－"}
details h4{margin:6px 0 2px;font-size:.85em;color:var(--signal)}
details p,details ul{margin:0 0 10px;font-size:.95em;color:var(--muted)}
details ul{padding-left:1.1em}
details .btn{width:100%;margin-top:6px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:20px}
.step{border-left:3px solid var(--accent);padding-left:16px}
.step h4{margin:4px 0;font-size:1.15em}
.step p{margin:0;color:var(--muted);font-size:.95em}

/* contact */
.contact{background:var(--dark);background-image:var(--stars),linear-gradient(160deg,var(--dark),var(--dark-2));color:var(--on-dark);margin:0 -16px;padding:52px 16px}
.contact .inner{display:grid;grid-template-columns:1fr 1fr;grid-gap:40px;align-items:center}
.contact h2{font-size:1.9em;font-weight:900;margin:6px 0 12px}
.contact p{color:var(--on-dark-muted)}
.linecard{border:2px solid var(--dark-line);border-radius:10px;padding:26px}
.linecard .lbl{font-size:.8em;color:var(--on-dark-muted)}
.lineid{font-family:var(--display);font-weight:800;font-size:2.4em;line-height:1.1;margin:4px 0 16px;word-break:break-all;-webkit-user-select:all;user-select:all}
.linecard .btns{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}
.linecard .btn.ghost{color:var(--on-dark);border-color:var(--on-dark-muted)}
.copied{min-height:1.6em;font-size:.85em;color:var(--line-green);margin-top:6px}
.alt{border-top:1px solid var(--dark-line);margin-top:12px;padding-top:12px;display:grid;grid-template-columns:auto 1fr;grid-gap:6px 16px;font-size:.95em}
.alt span{color:var(--on-dark-muted)}
.alt a{color:var(--on-dark);text-decoration:none;-webkit-user-select:all;user-select:all}


/* back to top */
.totop{position:fixed;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:30;width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop span{font-size:22px;line-height:1;font-weight:900}
.totop small{font-size:12px;line-height:1.2;margin-top:2px}
/* phone bottom bar */
.bar{display:none}
@media (max-width:960px){
  .hero,.ai,.contact .inner,.backend{grid-template-columns:1fr}
  .svc{grid-template-columns:repeat(2,1fr)}
  .stk{grid-template-columns:1fr}
  .diag{grid-template-columns:1fr}
  .diag-side{display:grid;grid-template-columns:90px 1fr;grid-gap:12px;align-items:center}
  .diag-side .orb{width:90px;padding:3px}
  .bubble{margin:0}
  .bubble:before{top:50%;left:-10px;margin:-10px 0 0;border:10px solid transparent;border-left:0;border-right-color:var(--accent-soft)}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hero h1{font-size:2em}
  .ctas,.svc,.grid,.steps,.linecard .btns,.bk-btns,.thumbs,.opts,.sum-btns{grid-template-columns:1fr}
  .diag{padding:18px 14px}
  .nav-btns{grid-template-columns:1fr 2fr}
  .task{grid-template-columns:1fr}
  .stepper{padding:0 10px 10px;justify-content:flex-end}
  .ctas .btn,.bk-btns .btn{width:100%}
  .ai{padding:24px 18px}
  .ai h3{font-size:1.8em}
  .stats strong{font-size:1.7em}
  .fs span{display:none}
  .lang{margin-left:8px}
  .lang a{min-width:48px;padding:0 8px}
  .bar{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .bar .btn{width:100%}
  .totop{bottom:calc(86px + env(safe-area-inset-bottom,0px));right:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{--stars:radial-gradient(circle at 8% 18%,rgba(247,205,82,.9) 0 1.5px,transparent 2.5px),radial-gradient(circle at 22% 72%,rgba(255,255,255,.7) 0 1px,transparent 2px),radial-gradient(circle at 46% 30%,rgba(247,205,82,.8) 0 1.2px,transparent 2.2px),radial-gradient(circle at 68% 82%,rgba(255,255,255,.6) 0 1px,transparent 2px),radial-gradient(circle at 84% 14%,rgba(255,255,255,.8) 0 1.4px,transparent 2.4px),radial-gradient(circle at 93% 58%,rgba(247,205,82,.85) 0 1.6px,transparent 2.6px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--btn-ink:#06142E}}
:root[data-theme="dark"]{--btn-ink:#06142E}
.btn.star{background:var(--star);border-color:var(--star);color:#1A1405}
.btn.big{min-height:60px;font-size:1.08em;padding:12px 28px}

/* ---------- loader ---------- */
.loader{display:none}
html.loading .loader{display:flex;position:fixed;inset:0;top:0;left:0;right:0;bottom:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;background:var(--dark);background-image:var(--stars),radial-gradient(circle at 50% 45%,var(--dark-2),var(--dark) 70%);color:var(--on-dark);transition:opacity .5s ease,visibility .5s}
html.loading.loaded .loader{opacity:0;visibility:hidden}
html.loading body{overflow:hidden}
.ld-stage{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.ld-ring{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;border-radius:50%;background:conic-gradient(from 0deg,#BF1D2C,#F5C33B,#0F75BC,#BF1D2C);-webkit-mask:radial-gradient(circle,transparent 62px,#000 63px);mask:radial-gradient(circle,transparent 62px,#000 63px);animation:ldSpin 1.4s linear infinite}
.ld-logo{position:relative;width:116px;height:116px;background:#fff;border-radius:50%;padding:10px;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 40px rgba(247,205,82,.35);animation:ldPop .8s cubic-bezier(.2,1.4,.4,1) both}
.ld-star{position:absolute;color:var(--star);font-size:20px;animation:ldTwinkle 1.2s ease-in-out infinite}
.ld-star.s1{top:-6px;right:8px}.ld-star.s2{bottom:4px;left:-8px;font-size:16px;animation-delay:.3s}.ld-star.s3{top:30px;left:-16px;font-size:14px;animation-delay:.6s}
.ld-name{font-weight:900;font-size:1.3em;margin:22px 0 2px;letter-spacing:.06em}
.ld-text{margin:0;color:var(--on-dark-muted);font-size:.9em}
@keyframes ldSpin{to{transform:rotate(360deg)}}
@keyframes ldPop{from{transform:scale(.4) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ldTwinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

/* ---------- hero art ---------- */
.trust{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap}
.trust li{margin:0 16px 6px 0;font-size:.9em;color:var(--muted);font-weight:500}
.trust li:before{content:"✓";color:var(--ok);font-weight:900;margin-right:6px}
.hero-art{display:grid;grid-gap:14px}
.hero-witch{position:relative;display:grid;grid-template-columns:150px 1fr;align-items:center;background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2));border-radius:14px;padding:18px 20px;color:var(--on-dark);overflow:hidden}
.hero-witch .orb{width:150px;animation:float 4s ease-in-out infinite}
.hero-bubble{position:relative;background:var(--surface);color:var(--ink);border-radius:14px;padding:12px 16px;margin:0 0 0 10px;font-weight:700;font-size:.95em;line-height:1.5}
.hero-bubble:before{content:"";position:absolute;left:-9px;top:50%;margin-top:-9px;border:9px solid transparent;border-left:0;border-right-color:var(--surface)}
.spark{position:absolute;color:var(--star);animation:ldTwinkle 2.4s ease-in-out infinite}
.spark.k1{top:12px;left:44%}.spark.k2{bottom:14px;left:30%;animation-delay:.8s}.spark.k3{top:18px;right:18px;animation-delay:1.4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- CTA strips & band ---------- */
.strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--accent-soft);border:2px dashed var(--accent);border-radius:12px;padding:16px 20px;margin:0 0 8px}
.strip p{margin:6px 16px 6px 0;font-weight:700;flex:1 1 300px}
.wand{color:var(--signal);margin-right:8px}
.cta-band{margin:32px 0;padding:0 44px;border-radius:18px;background:var(--dark);background-image:var(--stars),linear-gradient(120deg,var(--dark) 0%,var(--dark-2) 60%,#2A1B5E 100%);color:var(--on-dark);position:relative;overflow:hidden}
.cta-band:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(247,205,82,.22),transparent 65%)}
.cta-in{position:relative;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-gap:32px;align-items:center;padding:56px 0}
.cta-band .eyebrow{color:var(--star)}
.cta-band h2{font-size:2.3em;font-weight:900;margin:8px 0 14px;line-height:1.25}
.cta-band h2 em{font-style:normal;color:var(--star)}
.cta-band p{color:var(--on-dark-muted);max-width:34em;margin:0 0 16px}
.cta-list{list-style:none;padding:0;margin:0 0 22px}
.cta-list li{padding:6px 0 6px 30px;position:relative;font-weight:500}
.cta-list li:before{content:"✦";position:absolute;left:4px;color:var(--star)}
.cta-btns{display:flex;flex-wrap:wrap}
.cta-btns .btn{margin:0 12px 10px 0}
.cta-art{position:relative;text-align:center;align-self:end;margin-bottom:-56px}
.cta-art img{display:block;margin:0 auto;width:340px;max-width:100%;height:auto;filter:drop-shadow(0 -6px 24px rgba(247,205,82,.25))}
.cta-art .spark{font-size:22px}

/* ---------- FAQ & security ---------- */
.secure{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:20px}
.secure h3{margin:0 0 14px;font-size:1.25em;font-weight:900}
.sec-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px}
.sec-tiles div{border-left:3px solid var(--accent);padding-left:14px}
.sec-tiles .ic{display:inline-flex;width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);align-items:center;justify-content:center}
.sec-tiles .ic svg{width:22px;height:22px}
.sec-tiles h4{margin:8px 0 4px;font-size:1.05em}
.sec-tiles p{margin:0;color:var(--muted);font-size:.92em}
.faq-list{display:grid;grid-gap:10px}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 18px;margin:0}
.faq summary{min-height:60px;color:var(--ink);font-size:1.02em;padding:12px 0}
.faq summary:after{color:var(--accent)}
.faq[open]{border-color:var(--accent)}
.faq p{margin:0 0 16px;color:var(--muted)}
.faq-more{margin:18px 0 0}
@media (max-width:960px){
  .cta-in{grid-template-columns:1fr}
  .cta-art img{width:260px}
}
@media (max-width:640px){
  .hero-witch{grid-template-columns:100px 1fr;padding:14px}
  .hero-witch .orb{width:100px;padding:4px}
  .cta-band h2{font-size:1.7em}
  .cta-band{padding:0 20px}
  .cta-in{padding:36px 0}
  .cta-art{margin-bottom:-36px}
  .cta-btns .btn{width:100%;margin-right:0}
  .sec-tiles{grid-template-columns:1fr}
  .strip .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.ld-ring,.ld-star,.hero-witch .orb,.spark{animation:none}}

/* ---------- results charts ---------- */
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:16px}
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.res-card h3{margin:0 0 10px;font-size:1.2em;font-weight:900}
.legend-row{display:flex;align-items:center;flex-wrap:wrap;font-size:.85em;color:var(--muted);margin-bottom:10px}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;margin:0 6px 0 0;flex:none}
.legend-row .sw{margin-left:0}.legend-row .sw.after{margin-left:16px}
.sw.before{background:var(--accent-soft);border:1px solid var(--accent)}
.sw.after{background:var(--accent)}
.rbar{margin:14px 0 18px}
.rbar-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;font-weight:700;margin-bottom:6px}
.saved-pill{background:var(--signal);color:#fff;border-radius:999px;padding:2px 12px;font-size:.82em;font-variant-numeric:tabular-nums}
.rtrack{position:relative;height:30px;margin-top:6px;border-radius:6px;background:var(--bg)}
.rb{height:100%;border-radius:6px;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.rv{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:.85em;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;transition:opacity .4s .9s}
.rv.in{padding-right:10px;color:var(--ink)}
.rv.out{padding-left:8px;color:var(--accent)}
.rtrack.pre .rb{width:0!important}
.rtrack.pre .rv{opacity:0;transition:none}
.rb.before{background:var(--accent-soft);border:1px solid var(--accent);color:var(--ink)}
.rb.after{background:linear-gradient(90deg,var(--accent),var(--c5))}
.donut-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);grid-gap:20px;align-items:center}
.donut{width:200px;height:200px;display:block}
.donut .seg{transition:stroke-dasharray 1.3s cubic-bezier(.2,.8,.2,1)}
.donut-num{font-family:var(--display);font-weight:800;font-size:36px;fill:var(--ink)}
.donut-lbl{font-size:12px;fill:var(--muted)}
.donut-legend{list-style:none;margin:0;padding:0}
.donut-legend li{display:flex;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92em}
.donut-legend .lg-name{flex:1;min-width:0}
.donut-legend b{font-variant-numeric:tabular-nums;margin:0 10px}
.donut-legend .lg-pct{color:var(--muted);font-size:.85em;width:3em;text-align:right;font-variant-numeric:tabular-nums}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:16px;margin-top:16px}
.kpis div{background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2));color:var(--on-dark);border-radius:12px;padding:20px}
.kpis strong{display:block;font-family:var(--display);font-weight:800;font-size:2.4em;line-height:1;color:var(--star);font-variant-numeric:tabular-nums}
.kpis span{display:block;margin-top:8px;font-size:.88em;color:var(--on-dark-muted)}
/* animation start states (added by script only when the element is about to animate) */
/* footer */
.site-foot{margin:0 -16px;padding:40px 16px 20px;background:var(--surface);border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;grid-gap:28px}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--accent);text-decoration:underline}
.foot-names{font-weight:700;margin:10px 0 6px;line-height:1.6}
.foot-brand p{color:var(--muted);font-size:.92em;margin:6px 0}
.foot-col h4{margin:0 0 8px;font-size:.95em;color:var(--signal)}
.foot-col a{display:flex;align-items:center;min-height:40px;color:var(--muted);font-size:.95em}
.foot-col p{margin:6px 0;color:var(--muted);font-size:.95em;word-break:break-all}
.foot-copy{border-top:1px solid var(--line);margin-top:24px;padding-top:16px;font-size:.82em;color:var(--muted)}
.alt .addr{-webkit-user-select:text;user-select:text;text-decoration:underline}
/* sitemap page */
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px;margin-bottom:24px}
.sm-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.sm-box h2{font-size:1.15em;margin:0 0 10px;font-weight:900}
.sm-box ul{margin:0;padding-left:1.1em}
.sm-box li{margin:6px 0}
.sm-box a{color:var(--accent);font-weight:500}
.sm-box li small{color:var(--muted)}
@media (max-width:960px){
  .res-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr 1fr}
  .sm-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .donut-wrap{grid-template-columns:1fr;justify-items:center}
  .donut-legend{width:100%}
  .kpis strong{font-size:1.9em}
  .foot-in,.sm-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.rb,.donut .seg{transition:none}}
.sm-title{font-size:1.7em;font-weight:900;margin:4px 0 0}
.sm-cols{columns:3 240px;column-gap:28px}
.sm-cols li{break-inside:avoid}

/* Little Witch circle avatar: head and shoulders inside a logo-colored ring */
.orb{display:inline-block;flex:none;border-radius:50%;padding:5px;background:conic-gradient(from 200deg,#BF1D2C,#F5C33B,#0F75BC,#BF1D2C);box-shadow:0 8px 20px rgba(8,20,60,.25)}
.orb img{display:block;width:100%;height:auto;border-radius:50%;background:radial-gradient(circle at 50% 35%,#FFFFFF,#DCE9F8)}

.q-sub{margin-top:22px!important;font-size:1.1em!important}
.recs .btn.star{margin-top:4px;width:100%}

/* ---------- order page ---------- */
.menu a.nav-cta{color:var(--signal);font-weight:900}
.od{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-gap:24px;align-items:start}
.od-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.od-items{display:grid;grid-gap:14px}
.od-item{display:grid;grid-template-columns:92px minmax(0,1fr);background:var(--surface);border:2px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.od-item.on{border-color:var(--accent);box-shadow:0 8px 22px rgba(15,117,188,.14)}
.od-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);cursor:pointer;font-weight:700;font-size:.85em;color:var(--muted);border-right:1px solid var(--line)}
.od-item.on .od-pick{background:var(--accent-soft);color:var(--accent)}
.od-pick input{width:30px;height:30px;margin:0 0 6px;accent-color:var(--accent);cursor:pointer}
.od-body{padding:18px 20px}
.od-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.od-head h2{font-size:1.2em;font-weight:900;margin:0 12px 4px 0}
.od-price{margin:0;font-family:var(--display);font-weight:800;font-size:1.25em;color:var(--accent);font-variant-numeric:tabular-nums}
.od-price small{font-family:var(--body);font-size:.6em;color:var(--muted);font-weight:500}
.od-body>p{margin:4px 0 12px;color:var(--muted);font-size:.93em}
.od-ctl{display:flex;align-items:center;flex-wrap:wrap}
.od-lbl{font-weight:700;font-size:.9em;margin-right:12px}
.od-ctl .stepper{padding:0}
.od-ctl .stepper input{width:72px;height:48px;margin:0 8px;text-align:center;font:700 1.1em var(--body);border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.seg{display:flex;flex-wrap:wrap}
.seg label{margin:0 8px 8px 0;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:84px;min-height:56px;padding:6px 12px;border:2px solid var(--line);border-radius:10px;font-weight:700;background:var(--bg)}
.seg em{font-style:normal;font-size:.72em;color:#fff;background:var(--signal);border-radius:999px;padding:0 8px;margin-top:3px}
.seg input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.seg input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.od-ai{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:12px;align-items:center;width:100%}
.od-ai input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:6px;background:var(--line);outline:none}
.od-ai input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:var(--star);border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.od-ai input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--star);border:3px solid var(--accent);cursor:pointer}
.money-in{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:8px;background:var(--bg);padding-left:10px}
.money-in span{color:var(--muted);font-weight:700}
.money-in input{width:120px;height:48px;border:0;background:transparent;color:var(--ink);font:700 1.1em var(--body);padding:0 10px;font-variant-numeric:tabular-nums}
.quick{grid-column:1/-1;display:flex;flex-wrap:wrap}
.quick button{min-height:44px;padding:0 14px;margin:0 8px 0 0;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:700 .9em var(--body);cursor:pointer}
.od-two{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;width:100%}
.od-two label{display:grid;grid-gap:4px}
.od-two input[type=text]{height:52px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:1em var(--body);padding:0 12px}
.od-cart{position:-webkit-sticky;position:sticky;top:calc(16px + env(safe-area-inset-top,0px));background:var(--surface);border:2px solid var(--dark-2);border-radius:16px;padding:22px;box-shadow:0 14px 34px rgba(8,20,60,.12)}
.od-cart h2{margin:0 0 10px;font-size:1.25em;font-weight:900}
.od-cart h3{margin:20px 0 8px;font-size:1.05em}
.od-lines{list-style:none;margin:0 0 12px;padding:0}
.od-lines li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.93em}
.od-lines li b{font-variant-numeric:tabular-nums;margin-left:12px;white-space:nowrap}
.od-lines li.disc{color:var(--signal)}
.od-lines li.muted{color:var(--muted)}
.od-coupon label{font-weight:700;font-size:.9em}
.od-coupon div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:8px;margin-top:4px}
.od-coupon input{height:52px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:700 1em var(--body);padding:0 12px;text-transform:uppercase}
.od-cmsg{min-height:1.4em;margin:4px 0 0;font-size:.85em}
.od-cmsg.ok{color:var(--ok)}.od-cmsg.bad{color:var(--signal)}
.od-total{display:flex;justify-content:space-between;align-items:baseline;background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2));color:var(--on-dark);border-radius:12px;padding:14px 16px;margin-top:10px}
.od-total span{font-weight:700;font-size:.9em}
.od-total strong{font-family:var(--display);font-weight:800;font-size:1.9em;color:var(--star);font-variant-numeric:tabular-nums}
.od-fields{display:grid;grid-gap:10px}
.od-fields label{display:grid;grid-gap:4px;font-size:.9em;font-weight:700}
.od-fields input,.od-fields textarea{border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:1em var(--body);padding:10px 12px;min-height:52px}
.od-submit{width:100%;margin-top:16px;background:var(--signal);border-color:var(--signal);color:#fff}
.od-secure{font-size:.82em;color:var(--muted);margin:10px 0 0}
.od-errors{border:2px solid var(--signal);border-radius:12px;padding:12px 16px;margin-bottom:16px;background:var(--surface)}
.od-errors ul{margin:4px 0 0;padding-left:1.2em}
.od-msg{max-width:640px;margin:0 auto;padding:56px 0;text-align:center}
.od-msg .orb{width:130px}
.od-msg h1{font-size:1.8em;font-weight:900;margin:16px 0 8px}
.od-msg p{color:var(--muted)}
.od-msg.bad h1{color:var(--signal)}
.od-no{font-size:1.1em}
.od-no b{color:var(--ink);font-variant-numeric:tabular-nums}
.od-sumtext{width:100%;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:.92em/1.7 var(--body);padding:10px 12px;text-align:left}
.od-msg .sum-btns{justify-content:center;margin:10px 0}
@media (max-width:960px){ .od{grid-template-columns:1fr} .od-cart{position:static} }
@media (max-width:640px){
  .od-item{grid-template-columns:1fr}
  .od-pick{flex-direction:row;justify-content:flex-start;padding:10px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .od-pick input{margin:0 10px 0 0}
  .od-ai,.od-two{grid-template-columns:1fr}
  .money-in input{width:100%}
}
.alt .taxid{font-weight:400;letter-spacing:.04em;-webkit-user-select:all;user-select:all}
.foot-brand .verify{color:var(--accent);font-size:.92em}
.od-payee{font-size:.82em;color:var(--muted);margin:6px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.od-payee a{color:var(--accent)}

/* =========================================================
   Polish layer: refined surfaces, motion and buttons
   ========================================================= */
body{background:radial-gradient(1100px 520px at 88% -8%,var(--glow),transparent 62%),radial-gradient(760px 420px at -12% 6%,rgba(242,182,50,.12),transparent 60%),var(--bg);background-repeat:no-repeat;background-color:var(--bg)}
section{padding-block:64px}
h1,h2,h3{letter-spacing:-.01em}

/* sticky glass header on desktop */
@media (min-width:961px){
  .top{position:-webkit-sticky;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 0 0 100vmax var(--head-bg);clip-path:inset(0 -100vmax);border-bottom-color:transparent;padding-block:10px 16px}
  section,#top{scroll-margin-top:120px}
}

/* section heads: pill eyebrow instead of heavy rule */
.sec-head{border-top:0;padding-top:0;margin-bottom:30px}
.sec-head .eyebrow{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;letter-spacing:.14em}
.sec-head .eyebrow:before{content:"✦";margin-right:8px;color:var(--star)}
.sec-head h2{font-size:2em;margin-top:12px}

/* hero */
.hero h1 em{background:linear-gradient(100deg,var(--accent),var(--accent-2) 60%,var(--signal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-witch{border-radius:20px;box-shadow:var(--shadow-md);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2) 60%,var(--dark-3))}
.stats{border:0;border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.stats div{border-right:1px solid var(--line)}
.stats strong{background:linear-gradient(180deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* cards: soft layered shadows, gentle lift */
.svc article,.card,.res-card,.secure,.faq,.od-item,.sm-box,.stk{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm)}
.svc article,.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
@media (hover:hover){
  .svc article:hover,.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-soft)}
}
.card .metric strong{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tags span{border-radius:999px;background:var(--bg);border-color:var(--line)}
.avatar{border-radius:14px;background:linear-gradient(180deg,#F6F9FE,#E7EFFB)}

/* dark feature blocks share one rich gradient */
.ai,.cta-band,.kpis div,.od-total,.contact{background-image:var(--stars),linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 58%,var(--dark-3) 100%)}
.ai{border-radius:22px;box-shadow:var(--shadow-md)}
.ai li:before{content:"✦";background:none;color:var(--star);font-size:1em;top:13px;padding:0}
.cta-band{border-radius:24px;box-shadow:var(--shadow-md)}
.kpis div{border-radius:18px;box-shadow:var(--shadow-sm)}

/* diagnosis panel */
.diag{position:relative;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md);overflow:hidden}
.diag:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--signal),var(--star),var(--accent),var(--accent-2))}
.opt{border-radius:12px;transition:border-color .2s,background .2s,transform .15s}
@media (hover:hover){ .opt:hover{border-color:var(--accent);transform:translateY(-1px)} }
.pbar i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* CTA strips */
.strip{border:1px solid var(--line);background:linear-gradient(100deg,var(--accent-soft),var(--surface));border-radius:18px;box-shadow:var(--shadow-sm)}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:12px;border:0;background-color:var(--accent);background-image:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent));background-size:220% 100%;background-position:0 0;color:var(--btn-ink,#fff);box-shadow:0 6px 18px var(--glow);transition:transform .2s ease,box-shadow .25s ease,background-position .6s ease}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none;z-index:1}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow);background-position:100% 0}
  .btn:hover:after{left:130%;transition:left .7s ease}
}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;background-image:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover){ .btn.ghost:hover{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent),0 8px 20px var(--glow)} }
.btn.line{background-color:var(--line-green);background-image:linear-gradient(120deg,var(--line-green),var(--line-green-2),var(--line-green));color:#fff;box-shadow:0 6px 18px rgba(6,199,85,.32)}
@media (hover:hover){ .btn.line:hover{box-shadow:0 12px 28px rgba(6,199,85,.42)} }
.btn.star{background-color:var(--star);background-image:linear-gradient(120deg,var(--star),#FFE08A,var(--star));color:#1A1405;box-shadow:0 6px 18px rgba(242,182,50,.35)}
.btn.od-submit{background-color:var(--signal);background-image:linear-gradient(120deg,var(--signal),#F2603B,var(--signal));color:#fff;box-shadow:0 8px 22px rgba(214,40,57,.32)}
.linecard .btn.ghost{color:var(--on-dark);box-shadow:inset 0 0 0 2px var(--on-dark-muted)}
.btn.star:after,.btn.od-submit:after{animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-75%}85%,100%{left:130%}}

/* breathing ring for the main LINE calls to action */
.btn.pulse{animation:pulseRing 2.4s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:0 6px 18px rgba(6,199,85,.32),0 0 0 0 rgba(6,199,85,.45)}70%{box-shadow:0 6px 18px rgba(6,199,85,.32),0 0 0 16px rgba(6,199,85,0)}100%{box-shadow:0 6px 18px rgba(6,199,85,.32),0 0 0 0 rgba(6,199,85,0)}}

/* 線上選購: flowing gradient pill with a twinkling star */
.menu a.nav-cta{position:relative;overflow:hidden;color:#fff;font-weight:900;padding:0 18px 0 16px;margin-left:4px;min-height:44px;border-radius:999px;background-image:linear-gradient(110deg,var(--signal),#F2603B,var(--star),#F2603B,var(--signal));background-size:300% 100%;animation:ctaFlow 5s linear infinite;box-shadow:0 3px 10px rgba(214,40,57,.30);transition:transform .2s ease,box-shadow .2s ease}
.menu a.nav-cta .spk{display:inline-block;margin-right:6px;animation:spk 1.8s ease-in-out infinite}
.menu a.nav-cta:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
@media (hover:hover){ .menu a.nav-cta:hover{color:#fff;transform:translateY(-1px) scale(1.03);box-shadow:0 5px 14px rgba(214,40,57,.42)} }
@keyframes ctaFlow{0%{background-position:0 0}100%{background-position:300% 0}}
@keyframes spk{0%,100%{transform:scale(.8) rotate(0);opacity:.75}50%{transform:scale(1.25) rotate(90deg);opacity:1}}

/* small controls */
.chip,.quick button,.fs button,.lang a,.seg span{transition:transform .15s ease,background .2s,border-color .2s,box-shadow .2s}
@media (hover:hover){ .chip:hover,.quick button:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:var(--shadow-sm)} }
.chip.on{background:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
.totop{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}

/* order page refinements */
.od-item{border-width:2px;border-color:var(--line)}
.od-item.on{border-color:var(--accent);box-shadow:0 10px 28px var(--glow)}
.od-cart{border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md)}
.seg em{background:linear-gradient(90deg,var(--signal),#F2603B)}

@media (prefers-reduced-motion:reduce){
  .btn.pulse,.menu a.nav-cta,.menu a.nav-cta .spk,.menu a.nav-cta:after,.btn.star:after,.btn.od-submit:after{animation:none}
}

.brand img{background:#fff;border-radius:50%;padding:3px;box-shadow:var(--shadow-sm)}

/* ---------- partner wall (marquee) ---------- */
.partners{padding-block:40px 8px}
.partners-head{display:flex;align-items:baseline;flex-wrap:wrap;margin-bottom:14px}
.partners-head h2{font-size:1.25em;font-weight:900;margin:0 14px 0 0}
.partners-head p{margin:0;color:var(--muted);font-size:.92em}
.marquee{position:relative;display:flex;overflow:hidden;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;flex:none;list-style:none;margin:0;padding:16px 0;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{display:flex;align-items:center;flex:none;white-space:nowrap;padding:8px 18px;margin:0 6px;border-radius:999px;font-weight:700;color:var(--ink);background:var(--bg);border:1px solid var(--line)}
.marquee-track li .pt-star{color:var(--star);margin-right:8px}
.marquee-track li.is-repeat{background:linear-gradient(120deg,var(--accent-soft),var(--surface));border-color:var(--accent)}
.marquee-track li em{font-style:normal;font-size:.75em;margin-left:10px;padding:2px 10px;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;flex-wrap:wrap;flex:1;padding:12px}
  .marquee-track li{margin:4px}
  .marquee-track[aria-hidden="true"]{display:none}
}

/* ---------- 小魔女 AI 客服 ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.totop{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
.chat-fab{position:fixed;right:18px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;padding:6px 18px 6px 6px;border:0;border-radius:999px;cursor:pointer;color:#fff;font:900 1em var(--body);background-image:linear-gradient(120deg,var(--dark-2),var(--accent-2));box-shadow:0 10px 26px rgba(30,63,150,.40);transition:transform .2s ease,box-shadow .2s ease}
.chat-fab .orb{width:58px;padding:3px;margin-right:10px;animation:float 4s ease-in-out infinite}
.chat-fab:after{content:"";position:absolute;inset:0;top:0;left:0;right:0;bottom:0;border-radius:999px;animation:fabRing 2.8s ease-out infinite;pointer-events:none}
@keyframes fabRing{0%{box-shadow:0 0 0 0 rgba(149,140,255,.55)}70%{box-shadow:0 0 0 16px rgba(149,140,255,0)}100%{box-shadow:0 0 0 0 rgba(149,140,255,0)}}
@media (hover:hover){ .chat-fab:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(30,63,150,.5)} }
html.chat-open .chat-fab{opacity:0;pointer-events:none}
.chat-panel{position:fixed;right:18px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;width:390px;max-width:calc(100vw - 36px);height:min(640px,calc(100vh - 60px));display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md),0 30px 60px rgba(8,20,60,.25);overflow:hidden;animation:chatIn .28s cubic-bezier(.2,.9,.3,1.2)}
.chat-panel[hidden]{display:none!important}
section.chat-panel{padding:0}
@keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.chat-head{display:flex;align-items:center;padding:14px 14px 14px 16px;color:var(--on-dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2) 60%,var(--dark-3))}
.chat-head .orb{width:48px;padding:3px;margin-right:12px}
.chat-head div{flex:1;min-width:0}
.chat-head h2{margin:0;font-size:1.05em;font-weight:900}
.chat-head p{margin:0;font-size:.78em;color:var(--on-dark-muted)}
.chat-head .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3DDC84;margin-right:6px;box-shadow:0 0 0 3px rgba(61,220,132,.25)}
.chat-x{width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.chat-log{flex:1;overflow-y:auto;padding:16px 14px;background:var(--bg);-webkit-overflow-scrolling:touch}
.msg{display:flex;margin:0 0 10px}
.msg .b{max-width:86%;padding:10px 14px;border-radius:16px;font-size:.92em;line-height:1.65;white-space:pre-line;word-break:break-word}
.msg.bot .b{background:var(--surface);border:1px solid var(--line);border-top-left-radius:6px;box-shadow:var(--shadow-sm)}
.msg.me{justify-content:flex-end}
.msg.me .b{background-image:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--btn-ink,#fff);border-top-right-radius:6px}
.msg.typing .b:after{content:"";display:inline-block;width:1.4em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"．"}50%{content:"．．"}75%{content:"．．．"}}
.msg.sys .b{background:transparent;border:1px dashed var(--ok);color:var(--ok);box-shadow:none;font-size:.82em}
.chat-quick{display:flex;flex-wrap:wrap;padding:8px 12px 0;background:var(--bg)}
.chat-quick[hidden]{display:none}
.chat-quick button{margin:0 6px 8px 0;min-height:40px;padding:0 12px;border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--accent);font:700 .85em var(--body);cursor:pointer}
.chat-form{display:flex;align-items:flex-end;padding:10px;border-top:1px solid var(--line);background:var(--surface)}
.chat-form textarea{flex:1;min-width:0;min-height:48px;max-height:120px;resize:none;border:2px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:1em/1.5 var(--body);padding:10px 12px;margin:0 8px}
.chat-form textarea:focus{border-color:var(--accent);outline:none}
.chat-mic,.chat-send{flex:none;width:48px;height:48px;border:0;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.chat-mic svg,.chat-send svg{width:22px;height:22px}
.chat-mic{background:var(--accent-soft);color:var(--accent)}
.chat-mic.on{background:var(--signal);color:#fff;animation:pulseMic 1s ease-in-out infinite}
@keyframes pulseMic{50%{transform:scale(1.08)}}
.chat-send{background-image:linear-gradient(120deg,var(--accent),var(--accent-2));color:var(--btn-ink,#fff)}
.chat-actions{display:grid;grid-template-columns:1fr auto;grid-gap:8px;padding:0 10px 6px;background:var(--surface)}
.chat-actions .btn{min-height:44px;font-size:.88em;padding:6px 14px}
.chat-note{margin:0;padding:0 12px 10px;font-size:.72em;color:var(--muted);background:var(--surface)}
@media (max-width:640px){
  .chat-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px));right:12px;padding:4px}
  .chat-fab .orb{width:54px;margin:0}
  .chat-fab .fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .totop{bottom:calc(158px + env(safe-area-inset-bottom,0px))}
  section.chat-panel{right:0;left:0;bottom:0;top:0;width:auto;max-width:none;height:auto;border-radius:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
}
@media (prefers-reduced-motion:reduce){ .chat-fab .orb,.chat-fab:after,.chat-panel,.chat-mic.on{animation:none} }
/* suggested plan in diagnosis results */
.plan{margin-top:6px;padding:16px;border-radius:16px;background:var(--surface);border:2px solid var(--star);box-shadow:var(--shadow-sm)}
.plan h4{margin:0 0 8px;color:var(--ink)!important}
.plan ul{list-style:none;margin:0;padding:0}
.plan li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.9em}
.plan li b,.plan-total b{font-variant-numeric:tabular-nums;margin-left:10px;white-space:nowrap}
.plan-total{display:flex;justify-content:space-between;margin:10px 0;font-weight:900}
.plan-total b{font-family:var(--display);font-size:1.3em;color:var(--accent)}
.plan .btn.star{width:100%}
.plan .note{margin-top:8px}
.od-applied{margin:0 0 16px;padding:12px 16px;border-radius:14px;background:linear-gradient(100deg,rgba(242,182,50,.18),var(--surface));border:1px solid var(--star);font-weight:700}

/* ---------- footer (v2) ---------- */
.site-foot{margin:0 -16px;padding:56px 16px 24px;background:var(--surface);border-top:1px solid var(--line);position:relative}
.site-foot:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--signal),var(--star),var(--accent),var(--accent-2))}
.foot-cta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-gap:20px;align-items:center;padding:22px 26px;margin-bottom:44px;border-radius:22px;color:var(--on-dark);background-image:var(--stars),linear-gradient(120deg,var(--dark),var(--dark-2) 60%,var(--dark-3));box-shadow:var(--shadow-md)}
.foot-cta .orb{width:76px;padding:4px}
.foot-cta h3{margin:0 0 4px;font-size:1.3em;font-weight:900}
.foot-cta p{margin:0;color:var(--on-dark-muted);font-size:.95em}
.foot-cta-btns{display:flex;flex-wrap:wrap}
.foot-cta-btns .btn{margin:4px 0 4px 10px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);grid-gap:36px;align-items:start}
.foot-logo{display:inline-flex;align-items:center;text-decoration:none;font-weight:900;font-size:1.25em;color:var(--ink)}
.foot-logo img{width:52px;height:52px;padding:5px;margin-right:12px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm)}
.foot-names{margin:14px 0 12px;font-weight:700;line-height:1.6}
.foot-names span{font-family:var(--display);font-weight:500;letter-spacing:.06em;color:var(--muted);font-size:.9em}
.foot-meta{list-style:none;margin:0;padding:0}
.foot-meta li{display:flex;align-items:flex-start;margin:8px 0;color:var(--muted);font-size:.92em}
.foot-meta svg{flex:none;width:18px;height:18px;margin:4px 10px 0 0;color:var(--accent)}
.foot-meta b{color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.foot-meta a{color:var(--muted);text-decoration:none}
.foot-col h4{position:relative;margin:4px 0 14px;padding-bottom:10px;font-size:.95em;color:var(--ink);letter-spacing:.04em}
.foot-col h4:after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.foot-col a{display:flex;align-items:center;min-height:40px;color:var(--muted);font-size:.95em;text-decoration:none;transition:color .2s,transform .2s}
@media (hover:hover){ .foot-col a:hover,.foot-meta a:hover{color:var(--accent);transform:translateX(3px)} }
.foot-col a.foot-hl{color:var(--signal);font-weight:700}
.foot-contact a{align-items:flex-start;margin-bottom:8px}
.foot-contact .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:12px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.foot-contact .ic.line{background:rgba(6,199,85,.14);color:#06A84A}
.foot-contact .ic svg{width:18px;height:18px}
.foot-contact span{display:flex;flex-direction:column;justify-content:center;min-height:36px;word-break:break-all}
.foot-contact b{color:var(--ink)}
.foot-contact small{font-size:.78em;color:var(--muted)}
.foot-copy{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.82em;color:var(--muted)}
.foot-copy-links a{margin-left:16px;color:var(--muted);text-decoration:none}
.foot-copy-links a[aria-current="true"]{color:var(--accent);font-weight:700}
.foot-copy-links a:hover{color:var(--accent)}
@media (max-width:960px){
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand,.foot-contact{grid-column:1/-1}
  .foot-cta{grid-template-columns:auto minmax(0,1fr)}
  .foot-cta-btns{grid-column:1/-1}
  .foot-cta-btns .btn{margin:4px 10px 4px 0}
}
@media (max-width:640px){
  .site-foot{padding-top:40px}
  .foot-cta{grid-template-columns:1fr;text-align:center;padding:22px 18px}
  .foot-cta .orb{margin:0 auto}
  .foot-cta-btns{display:grid;grid-template-columns:1fr;grid-gap:10px}
  .foot-cta-btns .btn{margin:0;width:100%}
  .foot-in{grid-gap:24px}
  .foot-copy{flex-direction:column;align-items:flex-start}
  .foot-copy-links{margin-top:10px}
  .foot-copy-links a{margin:0 16px 0 0}
}
.foot-contact em{font-style:normal}

[hidden]{display:none!important}
/* ---------- sitemap page (v2) ---------- */
.sm-hero{padding-block:48px 24px;text-align:center}
.sm-hero .eyebrow{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;letter-spacing:.14em}
.sm-hero .eyebrow:before{content:"✦";margin-right:8px;color:var(--star)}
.sm-hero .sm-title{font-size:2.4em;margin:12px 0 6px}
.sm-hero>p{color:var(--muted);margin:0 auto 22px;max-width:32em}
.sm-stats{display:inline-grid;grid-template-columns:repeat(4,auto);grid-gap:0;margin:0 auto 22px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.sm-stats div{padding:12px 24px;border-right:1px solid var(--line)}
.sm-stats div:last-child{border-right:0}
.sm-stats strong{display:block;font-family:var(--display);font-weight:800;font-size:1.7em;line-height:1.1;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sm-stats span{font-size:.8em;color:var(--muted)}
.sm-search{position:relative;display:block;max-width:560px;margin:0 auto}
.sm-search svg{position:absolute;left:18px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--muted)}
.sm-search input{width:100%;height:60px;padding:0 20px 0 52px;border:2px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:1em var(--body);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.sm-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-sm)}
.sm-none{margin:18px auto 0;color:var(--muted)}
.sm-none .btn{margin-left:8px;min-height:44px}
.sm-sec{padding-block:20px}
.sm-h{display:flex;align-items:center;font-size:1.3em;font-weight:900;margin:0 0 14px}
.sm-h em,.sm-cat h3 em{font-style:normal;font-size:.62em;font-weight:700;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.sm-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.sm-sec.sm-card{margin-block:20px}
.sm-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:12px}
.sm-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:150px;padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.sm-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);margin-bottom:12px}
.sm-ic svg{width:22px;height:22px}
.sm-tx b{display:block;font-size:1em;font-weight:900;line-height:1.35}
.sm-tx small{display:block;margin-top:4px;color:var(--muted);font-size:.8em;line-height:1.5}
.sm-tile .arr{position:absolute;right:16px;top:20px;width:18px;height:18px;color:var(--muted);transition:transform .2s,color .2s}
.sm-tile.is-hl{border:2px solid transparent;background-image:linear-gradient(var(--surface),var(--surface)),linear-gradient(120deg,var(--signal),var(--star),var(--accent-2));background-origin:border-box;background-clip:padding-box,border-box}
.sm-tile.is-hl .sm-ic{background:linear-gradient(120deg,var(--signal),#F2603B);color:#fff}
@media (hover:hover){
  .sm-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent)}
  .sm-tile:hover .arr{transform:translateX(4px);color:var(--accent)}
}
.sm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-gap:20px;align-items:start;margin-top:20px}
.sm-two .sm-sec.sm-card{margin:0}
.sm-pills{display:flex;flex-wrap:wrap}
.sm-pill{display:inline-flex;align-items:center;min-height:44px;margin:0 8px 8px 0;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:700;font-size:.92em;text-decoration:none;transition:transform .15s,border-color .2s,background .2s}
.sm-pill.is-hl,.sm-pill.is-on{background-image:linear-gradient(120deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}
@media (hover:hover){ .sm-pill:hover{transform:translateY(-1px);border-color:var(--accent)} }
.sm-list{list-style:none;margin:0;padding:0}
.sm-list li{border-bottom:1px solid var(--line)}
.sm-list li:last-child{border-bottom:0}
.sm-list a{display:flex;align-items:center;min-height:52px;padding:8px 4px;color:var(--ink);text-decoration:none;transition:color .2s,background .2s}
.sm-list a>span:not(.q):not(.st-dot){flex:1;min-width:0}
.sm-list b{display:block;font-weight:700}
.sm-list small{display:block;font-size:.8em;color:var(--muted)}
.sm-list .arr{flex:none;width:16px;height:16px;margin-left:10px;color:var(--line);transition:transform .2s,color .2s}
@media (hover:hover){ .sm-list a:hover{color:var(--accent)} .sm-list a:hover .arr{color:var(--accent);transform:translateX(3px)} }
.sm-list .q{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:12px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-family:var(--display);font-weight:800;font-size:.85em}
.st-dot{flex:none;width:10px;height:10px;margin-right:12px;border-radius:50%;background:currentColor}
.st-dot.ok{color:var(--ok)}.st-dot.warn{color:var(--warn)}.st-dot.mute{color:var(--mute)}
.sm-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px 28px}
.sm-cat h3{display:flex;align-items:center;margin:10px 0 4px;font-size:.95em;color:var(--signal)}
.sm-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px}
.sm-mini h3{margin:0 0 10px;font-size:1em}
.sm-link{display:inline-flex;align-items:center;color:var(--accent);font-weight:700;text-decoration:none}
.sm-link .arr{width:16px;height:16px;margin-left:6px}
.sm-contact{margin:0;color:var(--muted);line-height:1.9;font-size:.95em}
.sm-contact b{color:var(--ink)}
.sm-contact a{color:var(--accent)}
@media (max-width:1100px){ .sm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:960px){ .sm-two{grid-template-columns:1fr} .sm-cats{grid-template-columns:1fr 1fr} .sm-mini{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .sm-hero .sm-title{font-size:1.9em}
  .sm-stats{grid-template-columns:repeat(2,auto)}
  .sm-stats div:nth-child(2){border-right:0}
  .sm-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sm-tiles{grid-template-columns:1fr 1fr}
  .sm-tile{min-height:132px;padding:14px}
  .sm-cats,.sm-mini{grid-template-columns:1fr}
  .sm-card{padding:18px}
}
.sm-cats{display:block;columns:3 260px;column-gap:32px}
.sm-cat{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:14px}
@media (max-width:960px){ .sm-cats{columns:2 240px} }
@media (max-width:640px){ .sm-cats{columns:1} }

/* ---------- contact: LINE card + enquiry form ---------- */
.contact .inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.ct-left .linecard{margin-top:24px}
.ct-card{background:var(--surface);color:var(--ink);border-radius:22px;padding:28px;box-shadow:0 24px 50px rgba(0,0,0,.30)}
.ct-form h3,.ct-ok h3{margin:0 0 4px;font-size:1.4em;font-weight:900}
.ct-sub{margin:0 0 16px!important;color:var(--muted)!important;font-size:.92em}
.ct-form{display:grid;grid-gap:14px}
.ct-form label{display:grid;grid-gap:6px;font-weight:700;font-size:.9em;color:var(--ink)}
.ct-form input[type=text],.ct-form input[type=email],.ct-form select,.ct-form textarea{width:100%;min-height:52px;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:1em var(--body);padding:10px 14px;transition:border-color .2s,box-shadow .2s}
.ct-form textarea{min-height:130px;resize:vertical;line-height:1.6}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px}
.ct-via{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.ct-via legend{font-weight:700;font-size:.9em;margin-bottom:6px;padding:0;width:100%}
.ct-via label{display:inline-flex;margin:0 8px 0 0;cursor:pointer}
.ct-via input{position:absolute;opacity:0;pointer-events:none}
.ct-via span{display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:48px;padding:0 18px;border:2px solid var(--line);border-radius:999px;background:var(--bg);font-weight:700}
.ct-via input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.ct-via input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-err{padding:10px 14px;border-radius:12px;border:2px solid var(--signal);color:var(--signal);font-weight:700;font-size:.9em;background:var(--surface)}
.ct-submit{width:100%;margin-top:4px}
.ct-privacy{margin:0!important;font-size:.8em;color:var(--muted)!important}
.ct-ok{text-align:center;padding:20px 0}
.ct-ok .orb{width:110px}
.ct-ok h3{margin-top:14px}
.ct-ok p{color:var(--muted)!important}
.ct-ok-btns{display:flex;justify-content:center;flex-wrap:wrap;margin-top:14px}
.ct-ok-btns .btn{margin:4px 6px}
.sum-btns{grid-template-columns:auto auto auto}
@media (max-width:960px){ .contact .inner{grid-template-columns:1fr} }
@media (max-width:640px){ .ct-card{padding:20px 16px} .ct-row{grid-template-columns:1fr} .sum-btns{grid-template-columns:1fr} }
.card-visit{align-self:flex-start;display:inline-flex;align-items:center;min-height:40px;margin:-4px 0 10px;padding:0 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.85em;text-decoration:none;transition:transform .15s,background .2s}
.card-visit span{margin-left:4px;transition:transform .2s}
@media (hover:hover){ .card-visit:hover{background:var(--accent);color:#fff} .card-visit:hover span{transform:translate(2px,-2px)} }

/* =========================================================
   Mobile: hamburger menu + shorter page
   ========================================================= */
.nav-toggle,.mnav,.mnav-backdrop,.swipe-hint,.more-proj{display:none}
@media (max-width:960px){
  .top{position:-webkit-sticky;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;flex-wrap:nowrap;padding-block:8px;background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 0 0 100vmax var(--head-bg);clip-path:inset(0 -100vmax);border-bottom-color:var(--line)}
  .top .tools,.top .menu{display:none}
  .brand img{width:36px;height:36px}
  .nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:52px;border:0;border-radius:14px;background:var(--accent-soft);color:var(--accent);cursor:pointer;position:relative}
  .nav-toggle span{display:block;width:22px;height:2.5px;margin:2px 0;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
  .nav-toggle b{font-size:10px;line-height:1;margin-top:3px;font-weight:700}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mnav-backdrop{display:block;position:fixed;top:0;left:0;right:0;bottom:0;z-index:79;background:rgba(6,12,32,.5)}
  .mnav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(86vw,380px);padding:calc(12px + env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px));background:var(--surface);box-shadow:-20px 0 50px rgba(6,12,32,.3);overflow-y:auto;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
  .mnav.in{transform:none}
  .mnav-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .mnav-x{width:48px;height:48px;border:0;border-radius:14px;background:var(--bg);color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
  .mnav-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 6px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.08em;font-weight:700;text-decoration:none}
  .mnav-links a span{color:var(--muted);font-size:1.4em}
  .mnav-links a:active{background:var(--accent-soft)}
  .mnav-cta{width:100%;margin-top:12px}
  .mnav-tools{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-gap:12px}
  .mnav-tools .fs{display:flex;flex-wrap:wrap;align-items:center}
  .mnav-tools .fs span{display:inline;width:100%;margin:0 0 6px;font-size:.85em}
  .mnav-tools .fs button{margin:0 8px 0 0}
  .mnav-tools .lang{display:inline-flex;margin:0;justify-self:start}
  html.nav-open,html.nav-open body{overflow:hidden}
  html.nav-open .chat-fab,html.nav-open .totop,html.nav-open .bar{visibility:hidden}
  section,#top{scroll-margin-top:84px}
}
@media (max-width:640px){
  section{padding-block:40px}
  .sec-head{margin-bottom:18px}
  .sec-head h2{font-size:1.55em}
  .hero{padding:24px 0 20px;grid-gap:20px}
  .hero h1{font-size:1.85em;margin:8px 0 12px}
  .lede{font-size:.98em;margin-bottom:18px}
  .trust{margin-top:12px}
  .hero-witch{padding:12px 14px}
  .stats strong{font-size:1.6em}
  .stats div{padding:12px 10px}
  /* services: swipe carousel */
  .swipe-hint{display:block;margin:-6px 0 8px;text-align:right;font-size:.82em;color:var(--muted)}
  .svc{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;grid-gap:0;scrollbar-width:none}
  .svc::-webkit-scrollbar{display:none}
  .svc article{flex:0 0 84%;margin-right:12px;scroll-snap-align:start}
  .ai{padding:20px 16px;grid-gap:14px}
  .ai li{padding:10px 0 10px 28px}
  .stk{padding:16px;grid-gap:14px}
  /* projects: horizontal chips + show first 6 */
  .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;margin-bottom:0}
  .grid:not(.show-all) .card.is-extra{display:none}
  .more-proj{display:flex;width:100%;margin-top:14px}
  .more-proj[hidden]{display:none!important}
  .card{padding:18px}
  /* other sections */
  .thumbs{display:none}
  .backend+.backend{margin-top:28px;padding-top:28px}
  .steps{grid-template-columns:1fr 1fr;grid-gap:14px}
  .step p{font-size:.88em}
  .res-card{padding:18px}
  .kpis{grid-gap:10px}
  .kpis div{padding:14px}
  .partners{padding-block:24px 0}
  .cta-band h2{font-size:1.55em}
  .faq summary{min-height:56px}
}

/* =========================================================
   AI design layer: aurora, glass, spotlight, flowing borders
   ========================================================= */
:root{
  --glass:rgba(255,255,255,.72); --gb-a:rgba(22,103,199,.30); --gb-b:rgba(75,63,214,.12); --gb-c:rgba(255,255,255,.7);
  --cyan:#1FB3E0; --dot:rgba(22,40,90,.10); --aurora-o:.5;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --shadow-sm:0 1px 2px rgba(11,21,48,.04),0 6px 20px rgba(11,21,48,.05);
  --shadow-md:0 2px 6px rgba(11,21,48,.04),0 14px 36px rgba(11,21,48,.09);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glass:rgba(16,24,47,.66); --gb-a:rgba(106,168,245,.38); --gb-b:rgba(149,140,255,.14); --gb-c:rgba(255,255,255,.06);
  --cyan:#4FD6F5; --dot:rgba(255,255,255,.07); --aurora-o:.32}}
:root[data-theme="dark"]{
  --glass:rgba(16,24,47,.66); --gb-a:rgba(106,168,245,.38); --gb-b:rgba(149,140,255,.14); --gb-c:rgba(255,255,255,.06);
  --cyan:#4FD6F5; --dot:rgba(255,255,255,.07); --aurora-o:.32}

body{position:relative;isolation:isolate;background:var(--bg)}

/* aurora + dot grid behind the top of every page */
.aurora{position:absolute;top:0;left:0;right:0;height:1100px;overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
.aurora:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(var(--dot) 1.1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 75%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--aurora-o);animation:drift 20s ease-in-out infinite alternate}
.aurora .a1{width:560px;height:560px;left:-160px;top:-180px;background:var(--accent)}
.aurora .a2{width:520px;height:520px;right:-140px;top:-120px;background:var(--accent-2);animation-duration:24s;animation-delay:-6s}
.aurora .a3{width:420px;height:420px;left:38%;top:180px;background:var(--cyan);opacity:calc(var(--aurora-o) * .7);animation-duration:28s;animation-delay:-12s}
.aurora .a4{width:260px;height:260px;right:22%;top:420px;background:var(--star);opacity:calc(var(--aurora-o) * .5);animation-duration:22s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,30px) scale(1.12)}100%{transform:translate(-40px,60px) scale(.95)}}

/* glass surfaces with a hairline gradient border */
.svc article,.card,.res-card,.secure,.faq,.sm-card,.sm-tile,.stk,.stats,.strip,.diag,.od-cart,.od-item,.marquee,.plan{
  background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b) 50%,var(--gb-c)) border-box;
  border:1px solid transparent;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--shadow-sm)}
.diag{border-radius:24px}
.plan{border-width:1px}

/* spotlight that follows the pointer */
.spot{position:relative}
.spot:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(75,63,214,.13),rgba(31,179,224,.06) 40%,transparent 65%)}
.spot:hover:after{opacity:1}

/* selected / active: flowing gradient border */
@keyframes flowBorder{0%{background-position:0 0,0% 50%}100%{background-position:0 0,100% 50%}}
.od-item.on,.opt[aria-pressed="true"],.task.on{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--accent),var(--accent-2),var(--cyan),var(--accent)) border-box;background-size:100% 100%,300% 300%;animation:flowBorder 5s linear infinite;box-shadow:0 10px 28px var(--glow)}
.opt[aria-pressed="true"]{color:var(--accent)}
.task.on .opt{animation:none;background:transparent;border:0;box-shadow:none}
.od-pick{background:transparent;border-right:1px dashed var(--line)}
.od-item.on .od-pick{background:linear-gradient(180deg,var(--accent-soft),transparent)}
input:focus,select:focus,textarea:focus,.sm-search input:focus{border-color:var(--accent-2)!important;box-shadow:0 0 0 4px rgba(75,63,214,.14),0 0 22px rgba(31,179,224,.16)!important;outline:none}

/* slimmer header */
.top{padding-block:8px}
@media (min-width:961px){ .top{padding-block:8px 10px} }
.aa{position:relative;margin-right:10px}
.aa-btn{display:inline-flex;align-items:baseline;justify-content:center;width:50px;height:44px;padding-top:6px;border:1px solid var(--line);border-radius:12px;background:var(--glass);color:var(--ink);font:800 19px/1 var(--display);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.aa-btn small{font-size:13px;margin-left:1px}
.aa-btn[aria-expanded="true"],.aa-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.aa-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:flex;flex-direction:column;min-width:180px;padding:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.aa-menu[hidden]{display:none!important}
.aa-menu span{display:block!important;margin:2px 4px 6px;font-size:.78em;color:var(--muted)}
.aa-menu button{width:100%;min-height:44px;margin:3px 0!important}
.fs button{border:1px solid var(--line)}
.fs button[aria-pressed="true"]{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.lang{border-width:1px;border-radius:12px}
.lang a{min-height:42px;min-width:48px;font-size:.88em}
.menu{margin-top:4px}
.menu a{min-height:44px;font-size:.95em}

/* tech accents: monospace numbers and labels */
.eyebrow{font-family:var(--mono);letter-spacing:.1em}
.stats strong,.kpis strong,.od-total strong,.card .metric strong,.plan-total b,.sm-stats strong,.big strong,.od-price{font-family:var(--mono);font-weight:700;letter-spacing:-.03em}
.hero .eyebrow{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid var(--gb-a);background:var(--glass);color:var(--accent-2)}
.hero .eyebrow:before{content:"";width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(31,179,224,.6);animation:liveDot 2s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(31,179,224,.55)}80%,100%{box-shadow:0 0 0 8px rgba(31,179,224,0)}}

/* typing caret */
@keyframes caret{50%{opacity:0}}
.hero h1 em.typing:after,.hero h1 em.typed:after{content:"";display:inline-block;width:3px;height:.85em;margin-left:4px;vertical-align:-.05em;background:var(--accent-2);animation:caret .8s steps(1) infinite}
.hero h1 em.typed:after{animation:caret .8s steps(1) 3;opacity:0}
.msg.streaming .b:after{content:"▍";margin-left:2px;color:var(--accent-2);animation:caret .7s steps(1) infinite}

/* calmer colors */
.seg em{background:transparent!important;color:var(--accent-2);border:1px solid currentColor;font-weight:700}
.seg input:checked+span em{color:var(--accent-2)}
.saved-pill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.st.ok,.st-dot.ok{color:var(--ok)}

@media (prefers-reduced-motion:reduce){
  .aurora i,.od-item.on,.opt[aria-pressed="true"],.task.on,.hero .eyebrow:before{animation:none}
}
:root{--aurora-o:.30;--head-bg:rgba(245,247,251,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--aurora-o:.24;--head-bg:rgba(7,13,31,.55)}}
:root[data-theme="dark"]{--aurora-o:.24;--head-bg:rgba(7,13,31,.55)}
.aurora i{filter:blur(100px)}
.top{border-bottom:1px solid rgba(255,255,255,.35)}
:root{--head-bg:rgba(245,247,251,.78)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--head-bg:rgba(7,13,31,.78)}}
:root[data-theme="dark"]{--head-bg:rgba(7,13,31,.78)}
@media (max-width:960px){ .aurora{height:800px} .aurora i{filter:blur(70px)} .aurora .a3,.aurora .a4{display:none} }

/* =========================================================
   AI emphasis: AI 診斷／AI 賦能 as the site's hero feature
   ========================================================= */
.ai-chip{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 7px;margin-right:8px;border-radius:7px;font:700 12px/1 var(--mono);letter-spacing:.04em;color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--cyan));background-size:200% 100%;animation:ctaFlow 4s linear infinite;box-shadow:0 0 12px rgba(75,63,214,.35);vertical-align:middle}
.ai-chip.big{height:34px;padding:0 11px;font-size:18px;border-radius:10px;margin-right:12px}

/* primary AI button: flowing gradient + glow ring */
.btn.ai-cta{background-image:linear-gradient(110deg,var(--accent),var(--accent-2),var(--cyan),var(--accent-2),var(--accent));background-size:300% 100%;animation:ctaFlow 6s linear infinite,aiGlow 2.6s ease-out infinite;color:#fff;font-weight:900}
@keyframes aiGlow{0%{box-shadow:0 8px 22px rgba(75,63,214,.35),0 0 0 0 rgba(75,63,214,.45)}70%{box-shadow:0 8px 22px rgba(75,63,214,.35),0 0 0 14px rgba(75,63,214,0)}100%{box-shadow:0 8px 22px rgba(75,63,214,.35),0 0 0 0 rgba(75,63,214,0)}}
.btn.ai-cta:after{animation:shine 3.4s ease-in-out infinite}

/* nav: AI 需求診斷 as a glowing pill */
.menu a.nav-ai{padding:0 14px 0 6px;margin-right:6px;border-radius:999px;color:var(--ink);font-weight:900;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--accent),var(--accent-2),var(--cyan)) border-box;border:1.5px solid transparent;box-shadow:0 4px 14px rgba(75,63,214,.18)}
.menu a.nav-ai:hover{color:var(--accent-2)}
.mnav-links a.mnav-ai{margin:6px 0;padding:0 12px;border:0;border-radius:14px;color:#fff;background-image:linear-gradient(120deg,var(--dark-2),var(--accent-2));box-shadow:0 8px 20px rgba(75,63,214,.3)}
.mnav-links a.mnav-ai span{color:#fff}
.mnav-links a.mnav-ai .ai-chip{background:rgba(255,255,255,.2);animation:none;box-shadow:none}

/* hero: AI quick start inside the witch card */
.hero-witch{grid-template-columns:120px minmax(0,1fr);align-items:start;padding:20px}
.hero-witch .orb{width:120px}
.hero-ai{min-width:0;margin-left:14px}
.hero-ai-h{display:flex;align-items:center;margin:2px 0 4px;font-size:1.15em;font-weight:900;color:#fff}
.hero-ai-q{margin:0 0 10px;font-size:.88em;color:var(--on-dark-muted)}
.hero-ai-opts{display:flex;flex-wrap:wrap}
.hero-ai-opts a{display:inline-flex;align-items:center;min-height:40px;margin:0 6px 6px 0;padding:0 12px;border-radius:999px;font-size:.85em;font-weight:700;color:#fff;text-decoration:none;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);transition:background .2s,transform .15s,border-color .2s}
@media (hover:hover){ .hero-ai-opts a:hover{background:rgba(255,255,255,.22);border-color:var(--star);transform:translateY(-1px)} }
.hero-ai-meta{margin:6px 0 0;font:500 .74em var(--mono);color:var(--star);letter-spacing:.02em}
.hero-bubble{display:none}

/* diagnosis + AI service: glowing animated frame */
.ai-frame{position:relative;isolation:isolate}
.ai-frame:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--ang,0deg),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent));animation:spinAng 8s linear infinite;filter:blur(0)}
.ai-frame:after{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;z-index:-2;border-radius:inherit;background:conic-gradient(from var(--ang,0deg),var(--accent),var(--accent-2),var(--cyan),var(--accent));filter:blur(22px);opacity:.35;animation:spinAng 8s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spinAng{to{--ang:360deg}}
.diag.ai-frame{background:var(--surface);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.diag.ai-frame:before{top:-2px}
.diag:before{height:0}
.diag.ai-frame>.diag-side,.diag.ai-frame>.diag-main{position:relative}
.diag-badges{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap}
.diag-badges li{margin:0 8px 8px 0;padding:6px 14px;border-radius:999px;font:700 .8em var(--mono);color:var(--accent-2);background:var(--glass);border:1px solid var(--gb-a)}
#diagnose .sec-head h2{display:flex;align-items:center;font-size:2.3em}
#diagnose{padding-top:72px}
.ai.ai-frame{border:0}
.core-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font:700 .75em var(--mono);letter-spacing:.06em;color:#1A1405;background:var(--star)}
.ai .btn.ai-cta{margin-top:16px}

/* mobile bottom bar: three actions, AI first */
@media (max-width:640px){
  .bar{grid-template-columns:1.25fr 1fr 1fr;grid-gap:6px;padding-inline:8px}
  .bar .btn{min-height:50px;padding:6px 8px;font-size:.92em}
  .bar .btn.ghost{background:var(--surface);color:var(--ink)}
  .hero-witch{grid-template-columns:1fr;padding:16px}
  .hero-witch .orb{display:none}
  .hero-ai{margin-left:0}
  #diagnose .sec-head h2{font-size:1.7em}
  .ai-chip.big{height:28px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){ .ai-chip,.btn.ai-cta,.ai-frame:before,.ai-frame:after{animation:none} }
.diag.ai-frame{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
.diag.ai-frame:before{height:auto;top:-2px;bottom:-2px}
.ai.ai-frame:before{top:-2px;bottom:-2px}
/* AI frame v2: animated conic border via background layers (draws under content, over nothing) */
.ai-frame{isolation:auto;--ang:0deg;animation:spinAng 8s linear infinite}
.ai-frame:before{display:none!important}
.ai-frame:after{z-index:-1}
.diag.ai-frame{border:2px solid transparent!important;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent)) border-box!important}
.ai.ai-frame{border:2px solid transparent;background:var(--stars) padding-box,linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 58%,var(--dark-3) 100%) padding-box,conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent)) border-box}
@media (prefers-reduced-motion:reduce){ .ai-frame{animation:none} }

/* ---------- quick guide (懶人包) ---------- */
.menu a.nav-guide{font-weight:700;color:var(--accent-2)}
.mnav-links a.mnav-guide{color:var(--accent-2)}
.hero-guide{display:inline-flex;align-items:center;margin-top:14px;font-weight:700;font-size:.92em;color:var(--accent-2);text-decoration:none}
.hero-guide:hover{text-decoration:underline}
.hg-tag{font:700 .72em var(--mono);padding:3px 8px;margin-right:8px;border-radius:6px;background:var(--accent-soft);color:var(--accent-2);letter-spacing:.06em}
.g-hero{padding-block:40px 18px}
.g-hero h1{font-size:2.5em;font-weight:900;margin:14px 0 12px;text-wrap:balance}
.g-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2) 60%,var(--signal));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-hero .eyebrow{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid var(--gb-a);background:var(--glass);color:var(--accent-2)}
.g-toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:10px;margin-top:22px}
.g-toc a{display:flex;align-items:center;min-height:52px;padding:0 14px;border-radius:14px;text-decoration:none;color:var(--ink);font-weight:700;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b),var(--gb-c)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.g-toc a b{font:700 .78em var(--mono);color:var(--accent-2);margin-right:10px}
.g-toc a.is-form{color:#fff;background-image:linear-gradient(110deg,var(--accent),var(--accent-2),var(--cyan),var(--accent-2),var(--accent));background-size:300% 100%;animation:ctaFlow 6s linear infinite;border:0}
.g-toc a.is-form b{color:rgba(255,255,255,.8)}
@media (hover:hover){ .g-toc a:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} }
.g-sec{padding-block:30px;scroll-margin-top:96px}
.g-h{display:flex;align-items:center;font-size:1.55em;font-weight:900;margin:0 0 16px}
.g-h span{font:700 .62em var(--mono);color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2));padding:4px 9px;border-radius:8px;margin-right:12px}
.g-who{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:24px;align-items:center}
.g-who>p{margin:0;font-size:1.05em;line-height:1.85}
.g-nums{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px}
.g-nums div{padding:14px 16px;border-radius:16px;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b),var(--gb-c)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.g-nums strong{display:block;font:700 1.8em/1.1 var(--mono);background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-nums span{font-size:.82em;color:var(--muted)}
.g-svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:10px}
.g-svc-item{padding:16px;border-radius:16px;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b),var(--gb-c)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.g-svc-item h3{display:flex;align-items:center;margin:0 0 6px;font-size:1em;font-weight:900;line-height:1.35}
.g-svc-item p{margin:0;font-size:.82em;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.g-svc-item.is-core{grid-column:span 2;border:2px solid transparent;background:var(--stars) padding-box,linear-gradient(135deg,var(--dark),var(--dark-2) 60%,var(--dark-3)) padding-box,conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent)) border-box;color:var(--on-dark)}
.g-svc-item.is-core p{color:var(--on-dark-muted);-webkit-line-clamp:4}
.g-svc-item.is-core h3{font-size:1.25em}
.g-price{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px}
.g-price>div{padding:18px;border-radius:18px;background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b),var(--gb-c)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.g-price h3{margin:0 0 6px;font-size:.95em;color:var(--muted)}
.g-amt{margin:0 0 6px;font:700 1.7em/1.1 var(--mono);color:var(--ink);letter-spacing:-.03em}
.g-amt small{font:600 .5em var(--body);color:var(--muted)}
.g-amt-txt{font-family:var(--body);font-size:1.35em;font-weight:900}
.g-price p:last-child{margin:0;font-size:.84em;color:var(--muted)}
.g-note{margin:14px 0 0;font-size:.88em;color:var(--muted)}
.g-note a{color:var(--accent-2);font-weight:700}
.g-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;counter-reset:f}
.g-flow li{position:relative;padding:16px 16px 16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.g-flow li:not(:last-child):after{content:"→";position:absolute;right:-12px;top:50%;margin-top:-12px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-2);color:#fff;font-size:12px;z-index:1}
.g-flow b{display:block;margin-bottom:4px}
.g-flow span{font-size:.86em;color:var(--muted)}
.g-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px}
.g-work-item{display:flex;flex-direction:column;padding:16px 18px;border-radius:18px;text-decoration:none;color:var(--ink);background:linear-gradient(var(--glass),var(--glass)) padding-box,linear-gradient(135deg,var(--gb-a),var(--gb-b),var(--gb-c)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
@media (hover:hover){ .g-work-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} }
.g-work-item small{font-size:.75em;color:var(--muted)}
.g-work-item b{margin:4px 0;font-size:1.05em}
.g-work-item span{flex:1;font-size:.86em;color:var(--muted)}
.g-work-item em{margin-top:10px;font:700 1em var(--mono);font-style:normal;color:var(--accent-2)}
.g-work-item em i{font:500 .72em var(--body);font-style:normal;color:var(--muted)}
.g-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px}
.g-why div{padding:18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent-2);box-shadow:var(--shadow-sm)}
.g-why b{display:block;margin-bottom:6px}
.g-why p{margin:0;font-size:.88em;color:var(--muted)}
.g-form-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);grid-gap:24px;align-items:start;padding:26px;border-radius:24px;border:2px solid transparent;background:var(--stars) padding-box,linear-gradient(135deg,var(--dark),var(--dark-2) 60%,var(--dark-3)) padding-box,conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent)) border-box;color:var(--on-dark)}
.g-form-side .orb{width:96px}
.g-form-side h3{font-size:1.5em;font-weight:900;margin:14px 0 8px}
.g-form-side p{color:var(--on-dark-muted);margin:0 0 14px}
.g-form-side .g-alt{margin:20px 0 8px;font-weight:700;color:var(--on-dark)}
.g-form-side .btn{width:100%;margin-bottom:10px}
.g-card{box-shadow:none}
.g-topics{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap}
.g-topics legend{width:100%;padding:0;margin-bottom:8px;font-weight:700;font-size:.9em;color:var(--ink)}
.g-topics label{display:inline-flex!important;margin:0 8px 8px 0;cursor:pointer}
.g-topics input{position:absolute;opacity:0;pointer-events:none}
.g-topics span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);font-weight:700;font-size:.88em;transition:border-color .2s,background .2s}
.g-topics span:before{content:"+";margin-right:6px;color:var(--muted);font-weight:900}
.g-topics input:checked+span{border-color:var(--accent-2);background:var(--accent-soft);color:var(--accent-2)}
.g-topics input:checked+span:before{content:"✓";color:var(--accent-2)}
.g-topics input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
@media (max-width:1100px){ .g-svc{grid-template-columns:repeat(3,minmax(0,1fr))} .g-toc{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:960px){
  .g-who,.g-form-wrap{grid-template-columns:1fr}
  .g-price,.g-why,.g-flow{grid-template-columns:1fr 1fr}
  .g-flow li:not(:last-child):after{display:none}
  .g-work{grid-template-columns:1fr 1fr}
  .g-toc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .g-hero h1{font-size:1.85em}
  .g-svc{grid-template-columns:1fr 1fr}
  .g-svc-item.is-core{grid-column:1/-1}
  .g-work{grid-template-columns:1fr}
  .g-price,.g-why{grid-template-columns:1fr 1fr}
  .g-form-wrap{padding:16px}
  .g-form-side .orb{display:none}
  .g-sec{padding-block:22px}
}
.g-svc{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-svc-item.is-core{grid-column:1/-1}
.g-svc-item.is-core p{-webkit-line-clamp:3;max-width:60em}
@media (max-width:640px){ .g-svc{grid-template-columns:1fr} .g-svc-item p{-webkit-line-clamp:2} }

/* fix: header full-bleed background without clip-path (clip-path was cutting off the Aa dropdown) */
.top{max-width:none;margin-left:-16px;margin-right:-16px;padding-left:max(16px,calc((100% - 1128px) / 2));padding-right:max(16px,calc((100% - 1128px) / 2));clip-path:none!important;box-shadow:none!important;background:var(--head-bg);overflow:visible}
@media (min-width:961px){ .top{-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)} }
.aa-menu{z-index:60}

/* mobile: bigger logo + attention-grabbing menu button */
@media (max-width:960px){
  .top .brand{font-size:1.25em}
  .top .brand img{width:48px;height:48px;padding:4px;margin-right:12px}
  .nav-toggle{overflow:hidden;color:#fff;background-image:linear-gradient(120deg,var(--accent),var(--accent-2),var(--cyan),var(--accent-2),var(--accent));background-size:300% 100%;animation:ctaFlow 6s linear infinite,menuGlow 2.4s ease-out infinite;box-shadow:0 6px 16px rgba(75,63,214,.35)}
  .nav-toggle:after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:shine 3s ease-in-out infinite}
  .nav-toggle:before{content:"";position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--star);box-shadow:0 0 0 2px rgba(255,255,255,.9);animation:liveDot 2s ease-out infinite}
  .nav-toggle[aria-expanded="true"]{animation:none;box-shadow:none}
  .nav-toggle[aria-expanded="true"]:before,.nav-toggle[aria-expanded="true"]:after{display:none}
}
@keyframes menuGlow{0%{box-shadow:0 6px 16px rgba(75,63,214,.35),0 0 0 0 rgba(75,63,214,.5)}70%{box-shadow:0 6px 16px rgba(75,63,214,.35),0 0 0 12px rgba(75,63,214,0)}100%{box-shadow:0 6px 16px rgba(75,63,214,.35),0 0 0 0 rgba(75,63,214,0)}}
@media (prefers-reduced-motion:reduce){ .nav-toggle,.nav-toggle:before,.nav-toggle:after{animation:none} }

/* ---------- Turnstile ---------- */
.ts-box{margin:6px 0 2px;min-height:65px}
.ts-box .cf-turnstile{width:100%}

/* ---------- order page v2 ---------- */
.od-steps{list-style:none;margin:-6px 0 22px;padding:0;display:flex;flex-wrap:wrap;counter-reset:s}
.od-steps li{display:flex;align-items:center;margin:0 26px 8px 0;font-weight:700;color:var(--muted);font-size:.95em;position:relative}
.od-steps li:not(:last-child):after{content:"";width:28px;height:2px;margin-left:12px;background:var(--line);border-radius:2px}
.od-steps b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-right:8px;border-radius:50%;font:700 .85em var(--mono);border:2px solid var(--line);background:var(--surface);color:var(--muted)}
.od-steps li.on{color:var(--ink)}
.od-steps li.on b{border-color:transparent;color:#fff;background-image:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:0 0 0 4px var(--accent-soft)}
.od-steps li.done b{border-color:var(--ok);color:var(--ok)}
.od-steps li.done b{font-size:0}.od-steps li.done b:before{content:"✓";font-size:14px}
.od-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:10px;border-radius:8px;font:700 .7em var(--mono);color:#fff;background:linear-gradient(120deg,var(--accent),var(--accent-2));vertical-align:middle}
.od-cart h3{display:flex;align-items:center;margin:22px 0 10px;font-size:1.15em;scroll-margin-top:100px}
.od-cart h2{display:flex;align-items:center}
.od-item:not(.on){opacity:.82}
.od-item:not(.on):hover{opacity:1}
.od-saved{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;padding:8px 12px;border-radius:10px;background:rgba(27,122,67,.08);color:var(--ok);font-weight:700;font-size:.9em}
.od-saved b{font-family:var(--mono)}
.od-coupon{margin:4px 0}
.od-coupon summary{min-height:40px;display:inline-flex;align-items:center;cursor:pointer;color:var(--accent-2);font-weight:700;font-size:.9em;list-style:none}
.od-coupon summary::-webkit-details-marker{display:none}
.od-coupon summary:before{content:"＋";margin-right:6px}
.od-coupon[open] summary:before{content:"－"}
.od-fields{grid-template-columns:1fr 1fr;grid-gap:10px 12px}
.od-fields .full{grid-column:1/-1}
.od-opt{margin-top:10px;border-top:1px dashed var(--line);padding-top:4px}
.od-opt summary{min-height:48px;display:flex;align-items:center;cursor:pointer;color:var(--muted);font-weight:700;font-size:.9em;list-style:none}
.od-opt summary::-webkit-details-marker{display:none}
.od-opt summary:before{content:"＋";margin-right:8px;color:var(--accent-2)}
.od-opt[open] summary:before{content:"－"}
.od-submit{display:flex;align-items:center;justify-content:center}
.od-submit svg{width:20px;height:20px;margin-right:8px}
.od-trust{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:6px}
.od-trust li{display:flex;align-items:center;font-size:.8em;font-weight:700;color:var(--muted)}
.od-trust li:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border-radius:50%;font-size:11px;color:#fff;background:var(--ok)}
.od-mbar{display:none}
@media (max-width:960px){
  .od-mbar{position:fixed;left:0;right:0;bottom:0;z-index:46;display:flex;align-items:center;justify-content:space-between;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(11,21,48,.12);transform:translateY(110%);transition:transform .3s}
  .od-mbar.show{transform:none}
  .od-mbar small{display:block;font-size:.75em;color:var(--muted)}
  .od-mbar strong{font:700 1.35em var(--mono);color:var(--ink)}
  .od-mbar .btn{min-height:50px;padding:0 18px}
  body:has(.od-mbar.show) .bar{display:none}
  body:has(.od-mbar.show) .chat-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .od-steps li{margin-right:14px;font-size:.85em}
  .od-steps li:not(:last-child):after{width:14px;margin-left:8px}
  .od-fields{grid-template-columns:1fr}
}
.od-fields label{min-width:0}
.od-fields input,.od-fields textarea{width:100%;min-width:0}
.od-coupon summary,.od-opt summary{justify-content:flex-start}
.od-coupon summary:after,.od-opt summary:after{content:none!important}
@media (max-width:640px){
  .od-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:6px}
  .od-steps li{margin:0;flex-direction:column;text-align:center;font-size:.78em}
  .od-steps li:not(:last-child):after{display:none}
  .od-steps b{margin:0 0 4px}
  .od-mbar strong{font-size:1.15em}
  .od-mbar .btn{padding:0 14px;font-size:.92em}
}
.od-restored{display:flex;align-items:center;flex-wrap:wrap}
.od-clear{margin-left:auto;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 .85em var(--body);cursor:pointer}
.chip-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;margin-left:8px;padding:0 7px;border-radius:999px;font:700 .72em var(--mono);background:var(--accent-soft);color:var(--accent-2)}
.chip.on .chip-n{background:rgba(255,255,255,.25);color:#fff}

/* ---------- 數位經營性格測驗 quiz.php ---------- */
.qz{padding-block:30px 40px}
.qz-c-ai{--qc:var(--accent-2)} .qz-c-growth{--qc:var(--signal)} .qz-c-steady{--qc:var(--accent)} .qz-c-frugal{--qc:var(--ok)}
.qz-ico{display:inline-flex;color:var(--qc,var(--accent))}
.qz-ico svg{width:100%;height:100%}
.qz [tabindex="-1"]{scroll-margin-top:120px}
.qz-noscript{padding:14px 18px;border-radius:14px;border:2px solid var(--signal);background:var(--surface);font-weight:700}

.qz-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-gap:40px;align-items:center;padding-block:20px 10px}
.qz-intro h1{font-size:2.6em;font-weight:900;margin:14px 0 14px;line-height:1.22;text-wrap:balance}
.qz-intro h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2) 55%,var(--signal));-webkit-background-clip:text;background-clip:text;color:transparent}
.qz-friend{display:flex;width:-webkit-fit-content;width:fit-content;max-width:100%;align-items:center;margin:0 0 16px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);font-weight:700;font-size:.92em}
.qz-friend .qz-ico{width:30px;height:30px;margin-right:10px}
.qz-badges{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 24px;padding:0}
.qz-badges li{display:inline-flex;align-items:center;margin:0 10px 10px 0;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.9em}
.qz-badges li:before{content:"✓";margin-right:6px;font-weight:900}
.qz-start-row{display:flex;flex-wrap:wrap}
.qz-start-row .btn{margin:0 12px 12px 0}
.qz-privacy{margin:4px 0 0;color:var(--muted);font-size:.85em}
.qz-types{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px}
.qz-type{position:relative;display:flex;flex-direction:column;padding:20px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-md);border-top:5px solid var(--qc);transition:transform .25s ease}
.qz-type:nth-child(1){transform:rotate(-1.5deg)} .qz-type:nth-child(2){transform:translateY(18px) rotate(1.2deg)}
.qz-type:nth-child(3){transform:rotate(1deg)} .qz-type:nth-child(4){transform:translateY(18px) rotate(-1deg)}
.qz-type:hover{transform:translateY(-4px) rotate(0)}
.qz-type .qz-ico{width:44px;height:44px;margin-bottom:10px}
.qz-type b{font-size:1.12em;font-weight:900;color:var(--qc)}
.qz-type small{color:var(--muted);font-size:.82em;line-height:1.55;margin-top:4px}

.qz-card{position:relative;max-width:860px;margin:10px auto 0;padding:26px 28px 22px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-md);overflow:hidden}
.qz-card:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--signal),var(--star),var(--accent),var(--accent-2))}
.qz-prog{display:flex;align-items:center;margin-bottom:18px}
.qz-prog span{flex:none;font:700 .85em var(--mono);color:var(--accent-2);margin-right:14px}
.qz-bar{flex:1;height:10px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.qz-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s ease}
.qz-body{display:flex;align-items:center;margin-bottom:18px}
.qz-orb{width:76px;margin-right:16px}
.qz-q{margin:0;font-size:1.5em;font-weight:900;outline:none}
.qz-hint{margin:6px 0 0;color:var(--muted);font-size:.88em}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px}
.qz-opt{position:relative;display:flex;align-items:center;min-height:76px;padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);font:1em var(--body);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .15s,box-shadow .2s}
.qz-opt:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.qz-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 4px var(--glow)}
.qz-opt[aria-pressed="true"]:after{content:"✓";position:absolute;right:12px;top:50%;margin-top:-14px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.85em}
.qz-opt-i{flex:none;font-size:1.7em;line-height:1;margin-right:14px}
.qz-opt-t{display:flex;flex-direction:column;padding-right:26px}
.qz-opt-t b{font-weight:700}
.qz-opt-t small{color:var(--muted);font-size:.82em;line-height:1.5;margin-top:2px}
.qz-opts.is-cards .qz-opt{align-items:flex-start;min-height:140px;padding:18px}
.qz-opts.is-cards .qz-opt-i{font-size:2.1em}
.qz-opt-price{font-style:normal;font-weight:900;font-size:1.12em;color:var(--accent-2);margin:2px 0 4px}
.qz-opt-tag{position:absolute;top:-1px;right:16px;padding:3px 10px;border-radius:0 0 10px 10px;background:var(--signal);color:#fff;font-size:.72em;font-weight:700}
.qz-nav{display:flex;margin-top:18px}
.qz-nav .btn{min-height:48px;padding:6px 18px;font-size:.92em}

.qz-res-card{max-width:900px;margin:10px auto 0;padding:30px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-md);border-top:6px solid var(--qc)}
.qz-res-head{display:flex;align-items:center}
.qz-res-badge{flex:none;display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin-right:20px;border-radius:28px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line)}
.qz-res-badge .qz-ico{width:58px;height:58px}
.qz-res-head h2{margin:4px 0 2px;font-size:2.2em;font-weight:900;color:var(--qc);outline:none}
.qz-res-tag{margin:0;font-weight:700}
.qz-res-desc{margin:18px 0 6px;color:var(--muted)}
.qz-sub{margin:22px 0 10px;font-size:1em;font-weight:900}
.qz-budget{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px}
.qz-budget div{display:flex;flex-direction:column;padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.qz-budget small{color:var(--muted);font-weight:700;font-size:.8em}
.qz-budget strong{font:900 1.45em var(--display);color:var(--qc);margin:2px 0 0;line-height:1.3}
.qz-budget span{font-size:.85em;color:var(--muted)}
.qz-svc{list-style:none;counter-reset:qs;margin:0;padding:0;display:grid;grid-gap:10px}
.qz-svc li{counter-increment:qs;display:flex;flex-direction:column;position:relative;padding:12px 14px 12px 56px;border-radius:14px;background:var(--bg)}
.qz-svc li:before{content:counter(qs);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--qc);color:#fff;font:900 .9em var(--display);display:flex;align-items:center;justify-content:center}
.qz-svc li span{color:var(--muted);font-size:.86em;line-height:1.55}
.qz-res-btns{display:flex;flex-wrap:wrap;margin-top:22px}
.qz-res-btns .btn{margin:0 12px 12px 0}

.qz-lock{max-width:900px;margin:28px auto 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);grid-gap:24px;align-items:start;padding:26px;border-radius:24px;border:2px solid transparent;background:var(--stars) padding-box,linear-gradient(135deg,var(--dark),var(--dark-2) 60%,var(--dark-3)) padding-box,conic-gradient(from var(--ang),var(--accent),var(--accent-2),var(--cyan),var(--star),var(--accent)) border-box;color:var(--on-dark);--ang:0deg;animation:spinAng 8s linear infinite}
.qz-lock[hidden]{display:none}
.qz-lock-side .orb{width:120px;margin-bottom:12px}
.qz-lock-side h3{margin:0 0 8px;font-size:1.45em;font-weight:900;color:#fff}
.qz-lock-side p{margin:0 0 12px;color:var(--on-dark-muted)}
.qz-lock-list{list-style:none;margin:0;padding:0}
.qz-lock-list li{padding:4px 0;font-weight:700}
.qz-lock-list li:before{content:"✦";color:var(--star);margin-right:8px}
.qz-form-card{padding:22px}
.qz-agree{display:flex!important;align-items:flex-start;grid-gap:0;font-weight:500!important;font-size:.85em!important;line-height:1.6;cursor:pointer}
.qz-agree input{flex:none;width:24px;height:24px;margin:2px 10px 0 0;accent-color:var(--accent)}

.qz-full{max-width:900px;margin:28px auto 0;padding:28px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-md);border:2px solid var(--star)}
.qz-full h3{margin:0;font-size:1.5em;font-weight:900;outline:none}
.qz-ok{margin:6px 0 18px;color:var(--ok);font-weight:700}
.qz-full-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:24px}
.qz-full h4{margin:0 0 10px;font-size:1em;font-weight:900}
.qz-items{list-style:none;margin:0;padding:0}
.qz-items li{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line);font-size:.92em}
.qz-items li span{padding-right:12px}
.qz-items li b{flex:none;font-family:var(--display);color:var(--accent-2)}
.qz-road{list-style:none;counter-reset:qr;margin:0;padding:0}
.qz-road li{counter-increment:qr;position:relative;padding:0 0 16px 44px;font-size:.92em}
.qz-road li:before{content:counter(qr);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font:900 .85em var(--display);display:flex;align-items:center;justify-content:center}
.qz-road li:not(:last-child):after{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--line)}
.qz-note{margin:14px 0 0;color:var(--muted);font-size:.82em}
.qz-coupon{display:flex;align-items:center;flex-wrap:wrap;margin-top:18px;padding:16px 18px;border-radius:16px;border:2px dashed var(--star);background:var(--bg)}
.qz-coupon div{display:flex;flex-direction:column;margin-right:auto}
.qz-coupon small{color:var(--muted);font-size:.85em}
.qz-coupon code{font:900 1.5em var(--mono);letter-spacing:.08em;color:var(--signal);margin:6px 16px 6px 0}
.qz-coupon .btn{min-height:46px;padding:6px 18px}

/* 首頁、懶人包的測驗入口 */
.qz-promo{display:flex;align-items:center;flex-wrap:wrap;margin:22px 0 0;padding:18px 20px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);border-left:5px solid var(--star)}
.qz-promo div{flex:1;min-width:220px;margin-right:16px}
.qz-promo b{display:block;font-size:1.05em}
.qz-promo span{color:var(--muted);font-size:.88em}
.qz-promo .btn{margin-top:8px}

@media (max-width:860px){
  .qz-intro,.qz-lock,.qz-full-grid{grid-template-columns:1fr}
  .qz-intro{grid-gap:26px}
  .qz-intro h1{font-size:2em}
  .qz-type:nth-child(n){transform:none}
}
@media (max-width:640px){
  .qz-opts,.qz-opts.is-cards{grid-template-columns:1fr}
  .qz-opts.is-cards .qz-opt{min-height:0}
  .qz-card,.qz-res-card,.qz-full{padding:20px 16px}
  .qz-lock{padding:16px}
  .qz-q{font-size:1.25em}
  .qz-orb{width:56px}
  .qz-res-badge{width:70px;height:70px;border-radius:20px;margin-right:14px}
  .qz-res-badge .qz-ico{width:42px;height:42px}
  .qz-res-head h2{font-size:1.65em}
  .qz-budget{grid-template-columns:1fr}
  .qz-types{grid-gap:10px}
  .qz-type{padding:14px}
  .qz-res-btns .btn,.qz-start-row .btn{flex:1 1 100%;margin-right:0}
}
@media (prefers-reduced-motion:reduce){ .qz-lock{animation:none} .qz-type,.qz-opt,.qz-bar i{transition:none} }

/* ---------- 首頁精簡（作品集獨立成頁） ---------- */
.chips-link{margin-bottom:18px}
.chip-go{display:inline-flex;align-items:center;min-height:44px;margin:0 8px 8px 0;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:.88em;transition:border-color .2s,color .2s}
.chip-go:hover{border-color:var(--accent);color:var(--accent)}
.proj-more{display:flex;align-items:center;flex-wrap:wrap;margin-top:22px}
.proj-more .btn{margin:0 16px 10px 0}
.proj-more span{color:var(--muted);font-size:.9em}
.svc-more{margin:18px 0 0;font-weight:700;font-size:.92em}
.svc-more a{color:var(--accent);text-decoration:none}
.svc-more a:hover{text-decoration:underline}
.svc article{padding:20px 22px}
.svc article p{margin:0}
.svc .avatar{float:right;width:64px;margin:0 0 6px 10px}
.svc .avatar img{width:100%;height:auto}
.kpis-2{grid-template-columns:1fr 1fr;margin-top:0;align-content:stretch}
.kpis-2 div{display:flex;flex-direction:column;justify-content:center}
.bk-tabs{display:inline-flex;margin:0 0 22px;padding:5px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm)}
.bk-tabs button{min-height:48px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 .95em var(--body);cursor:pointer}
.bk-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.backend[hidden]{display:none}
.faq-show{margin-top:14px}
.faq-extra[hidden]{display:none}

/* 手機：可左右滑的區塊選單，固定在頁首下方 */
.jump{display:none}
@media (max-width:960px){
  .jump{display:flex;position:-webkit-sticky;position:sticky;top:calc(var(--hdr,62px) + env(safe-area-inset-top,0px));z-index:35;margin:0 -16px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--head-bg);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
  .jump::-webkit-scrollbar{display:none}
  .jump a{flex:none;display:inline-flex;align-items:center;min-height:40px;margin-right:8px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:.82em;white-space:nowrap}
  .jump a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .jump .ai-chip{margin-right:6px}
  section[id],#contact{scroll-margin-top:calc(var(--hdr,62px) + 64px)}
  .svc .avatar{display:none}
}

/* 作品集頁 */
.works-hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent-2) 60%,var(--signal));-webkit-background-clip:text;background-clip:text;color:transparent}
.works-stats{display:flex;flex-wrap:wrap;margin-top:6px}
.works-stats div{display:flex;flex-direction:column;margin:0 34px 10px 0}
.works-stats strong{font:800 2em/1 var(--display);color:var(--accent-2)}
.works-stats span{font-size:.85em;color:var(--muted);margin-top:4px}
.works-stk{margin-top:48px}
.works-cta{display:flex;align-items:center;flex-wrap:wrap;margin:48px 0 10px;padding:26px;border-radius:24px;color:var(--on-dark);background-image:var(--stars),linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 58%,var(--dark-3) 100%);box-shadow:var(--shadow-md)}
.works-cta .orb{width:86px;margin-right:20px}
.works-cta>div{flex:1;min-width:220px}
.works-cta h2{margin:0 0 4px;font-size:1.5em;color:#fff}
.works-cta p{margin:0;color:var(--on-dark-muted)}
.works-cta-btns{display:flex;flex-wrap:wrap;flex:none!important;margin-top:12px}
.works-cta-btns .btn{margin:0 10px 10px 0}
.works-cta .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
@media (max-width:640px){
  .works-cta{padding:20px 16px}
  .works-cta-btns{width:100%}
  .works-cta-btns .btn{flex:1 1 100%;margin-right:0}
  .proj-more .btn{width:100%;margin-right:0}
}

/* 手機再縮短：首頁精選作品、類別、資安小卡改成左右滑 */
@media (max-width:640px){
  #projects .grid.show-all{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;grid-gap:0;scrollbar-width:none;align-items:flex-start}
  #projects .grid.show-all::-webkit-scrollbar{display:none}
  #projects .grid.show-all .card{flex:0 0 86%;margin-right:12px;scroll-snap-align:start}
  .works #projects .grid.show-all{display:grid;overflow:visible;margin:0;padding:0}
  .works #projects .grid.show-all .card{margin-right:0}
  .chips-link{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px 12px;padding:0 16px;scrollbar-width:none}
  .chips-link::-webkit-scrollbar{display:none}
  .chip-go{flex:none}
  #bkPane1 .thumbs{display:none}
  .sec-tiles{display:flex!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -4px}
  .sec-tiles::-webkit-scrollbar{display:none}
  .sec-tiles>div{flex:0 0 80%;margin:0 10px 0 4px;scroll-snap-align:start}
}

/* ---------- 作品案例頁 work.php ---------- */
.card h3 .card-link{color:inherit;text-decoration:none}
.card h3 .card-link:hover{color:var(--accent);text-decoration:underline}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;margin:22px 0 6px;font-size:.85em;color:var(--muted)}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 8px}
.case-main{max-width:900px}
.case-head{padding:18px 0 8px}
.case-head .meta{display:flex;align-items:center;justify-content:flex-start}
.case-head .meta span+span{margin-left:12px;color:var(--muted)}
.case-head h1{font-size:2.4em;font-weight:900;margin:10px 0 2px;line-height:1.25}
.case-client{margin:0 0 12px;color:var(--muted);font-weight:700}
.case-btns{display:flex;flex-wrap:wrap}
.case-btns .btn{margin:0 12px 12px 0}
.case-sum{margin:20px 0 28px;padding:22px 24px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);border-left:5px solid var(--accent-2)}
.case-sum h2{margin:0 0 6px;font-size:1em;letter-spacing:.06em;color:var(--accent-2)}
.case-sum>p{margin:0 0 14px;font-size:1.05em}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:10px;margin:0}
.case-facts div{padding:10px 14px;border-radius:12px;background:var(--bg)}
.case-facts dt{font-size:.78em;color:var(--muted);font-weight:700}
.case-facts dd{margin:2px 0 0;font-weight:700}
.case-metric{font:800 1.3em var(--display);color:var(--accent)}
.case-body section{margin-bottom:26px}
.case-body h2,.case-rel h2{font-size:1.35em;font-weight:900;margin:0 0 10px}
.case-body .tags span{font-size:.9em}
.case-rel{margin-top:44px}
.case-pn{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:14px;align-items:stretch;margin:40px 0 10px}
.case-pn a{display:flex;flex-direction:column;justify-content:center;padding:14px 18px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);text-decoration:none;min-height:64px}
.case-pn a:last-child{text-align:right}
.case-pn small{color:var(--muted);font-size:.8em}
.case-pn b{font-size:.95em}
.case-pn .case-pn-mid{align-items:center;font-weight:700;color:var(--accent)}
@media (max-width:640px){
  .case-head h1{font-size:1.75em}
  .case-pn{grid-template-columns:1fr 1fr}
  .case-pn .case-pn-mid{grid-column:1/-1;grid-row:2}
}
.g-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:10px;margin:22px 0 0}
.g-facts div{padding:12px 16px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.g-facts dt{font-size:.78em;font-weight:700;color:var(--muted)}
.g-facts dd{margin:2px 0 0;font-weight:700;font-size:.92em}
.case .case-body section{padding-block:0}
.case .case-sum{padding:22px 24px}
.case .case-body section{margin-bottom:30px}
.case .case-rel{padding-block:0 10px;margin-top:40px}
.case .works-cta{padding-block:26px}

/* =========================================================
   萬聖節主題（可愛糖果風）：<html data-season="halloween">
   ========================================================= */
.season-btn,.hw-deco,.hw-banner,.hw-egg,.hw-hud,.hw-toast,.hw-modal{display:none}
.season-btn{align-items:center;height:44px;margin-right:10px;padding:0 14px 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--glass,var(--surface));color:var(--ink);font:700 .78em var(--body);cursor:pointer;white-space:nowrap;transition:border-color .2s,box-shadow .2s}
.season-btn svg{width:26px;height:26px;margin-right:6px;flex:none}
.season-btn:hover{border-color:#FF8A3D;box-shadow:0 0 0 3px rgba(255,138,61,.2)}
.tools .season-btn,.mnav-tools .season-btn{display:inline-flex}
.mnav-tools .season-btn{height:48px;margin:0 0 12px}

:root[data-season="halloween"]:not([data-none]){
  --bg:#FFF5FA; --surface:#FFFFFF; --ink:#3A2150; --muted:#6E5A86; --line:#F0DDEE;
  --accent:#7C3AED; --accent-2:#E04F93; --accent-soft:#F3E8FF; --signal:#E8436B; --star:#FFB020;
  --dark:#3B1A5A; --dark-2:#6A2C91; --dark-3:#B8417F; --dark-line:rgba(255,255,255,.16); --on-dark:#FFFFFF; --on-dark-muted:#F1DDF5;
  --ok:#1F9A73; --warn:#B86A00; --mute:#7C6A92; --head-bg:rgba(255,245,250,.88); --glow:rgba(224,79,147,.28);
  --shadow-sm:0 1px 2px rgba(90,40,110,.06),0 6px 18px rgba(224,79,147,.10); --shadow-md:0 4px 10px rgba(90,40,110,.08),0 18px 40px rgba(124,58,237,.14);
  --c1:#7C3AED; --c2:#E04F93; --c3:#FFB020; --c4:#3FB993; --c5:#FF8A3D; --c6:#8EC5FF; --c7:#A898C4;
  --glass:rgba(255,255,255,.78); --gb-a:rgba(224,79,147,.32); --gb-b:rgba(124,58,237,.14); --gb-c:rgba(255,255,255,.8);
  --cyan:#3FB993; --dot:rgba(224,79,147,.14); --aurora-o:.42; --btn-ink:#fff; color-scheme:light;
}
/* 彩色糖粒背景 */
:root[data-season="halloween"] body{background-color:var(--bg);background-image:radial-gradient(circle,rgba(224,79,147,.22) 1.6px,transparent 2px),radial-gradient(circle,rgba(124,58,237,.18) 1.6px,transparent 2px),radial-gradient(circle,rgba(63,185,147,.2) 1.6px,transparent 2px),radial-gradient(circle,rgba(255,176,32,.25) 1.6px,transparent 2px);background-size:90px 90px,120px 120px,150px 150px,110px 110px;background-position:0 0,40px 60px,80px 20px,20px 90px}
:root[data-season="halloween"] .aurora .a1{background:#FF9FC7}
:root[data-season="halloween"] .aurora .a2{background:#C9A7FF}
:root[data-season="halloween"] .aurora .a3{background:#9BEBD3}
/* 糖果按鈕 */
:where(:root[data-season="halloween"]) .btn{background-image:linear-gradient(120deg,#7C3AED,#C04BC0,#E04F93,#7C3AED);background-size:240% 100%;color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.28),inset 0 -3px 0 rgba(0,0,0,.12)}
/* 外框按鈕：不套糖果底色；深色區塊裡（LINE 卡片、作品集行動區）維持白字白框 */
:where(:root[data-season="halloween"]) .btn.ghost{background-image:none;box-shadow:inset 0 0 0 2px var(--ink)}
:root[data-season="halloween"] .linecard .btn.ghost,:root[data-season="halloween"] .works-cta .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
:root[data-season="halloween"] .linecard .btn.ghost:hover,:root[data-season="halloween"] .works-cta .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff}
:root[data-season="halloween"] .btn.line{background-image:linear-gradient(120deg,var(--line-green),var(--line-green-2),var(--line-green));color:#fff}
:root[data-season="halloween"] .btn.star{background-image:repeating-linear-gradient(135deg,#FFB020 0 14px,#FFC44D 14px 28px);color:#3A2150;box-shadow:0 6px 18px rgba(255,176,32,.35),inset 0 -3px 0 rgba(0,0,0,.1)}
:root[data-season="halloween"] .btn.od-submit{background-color:#C2410C;background-image:repeating-linear-gradient(135deg,#C2410C 0 14px,#D9480F 14px 28px);color:#fff;text-shadow:0 1px 1px rgba(80,20,0,.4)}
:root[data-season="halloween"] .btn.ai-cta{background-image:linear-gradient(110deg,#7C3AED,#B04BD6,#E04F93,#B04BD6,#7C3AED);color:#fff}
:root[data-season="halloween"] .hero h1 em,:root[data-season="halloween"] .g-hero h1 em,:root[data-season="halloween"] .qz-intro h1 em,:root[data-season="halloween"] .works-hero h1 em{background:linear-gradient(100deg,#7C3AED,#E04F93 50%,#FF8A3D);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-season="halloween"] .season-btn{border-color:#FF8A3D;background:#FFF0E4}
:root[data-season="halloween"] ::selection{background:#FF9FC7;color:#3A2150}
:root[data-season="halloween"] .card,:root[data-season="halloween"] .svc article,:root[data-season="halloween"] .faq{border-color:#F3D6EA}

/* 萬聖節橫幅（上方掛彩旗） */
:root[data-season="halloween"] .hw-banner{display:flex;align-items:center;flex-wrap:wrap;position:relative;z-index:2;margin-top:30px;padding:12px 16px 12px 14px;border-radius:18px;background:#fff;border:2px dashed #FF9FC7;box-shadow:var(--shadow-sm);font-size:.9em}
.hw-banner:before{content:"";position:absolute;left:12px;right:12px;top:-22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22'%3E%3Cpath d='M0 2Q60 8 120 2' fill='none' stroke='%23C9A7FF' stroke-width='1.5'/%3E%3Cpath d='M4 3l12 0-6 16z' fill='%23E04F93'/%3E%3Cpath d='M34 5l12 0-6 16z' fill='%23FFB020'/%3E%3Cpath d='M64 5l12 0-6 16z' fill='%237C3AED'/%3E%3Cpath d='M94 3l12 0-6 16z' fill='%233FB993'/%3E%3C/svg%3E") repeat-x 0 0/120px 22px}
.hw-banner-ico{font-size:1.6em;margin-right:10px;animation:hwBob 3s ease-in-out infinite}
.hw-banner p{flex:1;min-width:200px;margin:0}
.hw-banner p b{color:#E04F93}
.hw-banner-go{margin-left:12px;font-weight:800;color:#7C3AED;text-decoration:none;white-space:nowrap}
.hw-banner-go:hover{text-decoration:underline}
.hw-banner-x{margin-left:12px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:700 .85em var(--body);cursor:pointer}
.hw-banner-x:hover{color:var(--ink);border-color:var(--ink)}

/* 飄浮小幽靈與糖果 */
:root[data-season="halloween"] .hw-deco{display:block;position:absolute;top:0;left:0;right:0;height:1100px;overflow:hidden;pointer-events:none;z-index:-1}
.hw-bunting{display:none}
.hw-ghost{position:absolute;filter:drop-shadow(0 8px 12px rgba(124,58,237,.18));animation:hwFloat 5s ease-in-out infinite}
.hw-ghost.g1{width:74px;right:2.5%;top:150px}
.hw-ghost.g2{width:42px;left:47%;top:205px;animation-duration:6.5s;animation-delay:-2s}
.hw-ghost.g3{width:54px;left:1.5%;top:470px;animation-duration:7s;animation-delay:-4s}
.hw-candy,.hw-lolli,.hw-corn{position:absolute;opacity:.9;animation:hwSpin 9s ease-in-out infinite}
.hw-candy.c1{width:54px;left:36%;top:745px;transform:rotate(-18deg)}
.hw-candy.c2{width:46px;right:4%;top:690px;animation-delay:-3s}
.hw-candy.c3{width:40px;left:4%;top:250px;animation-delay:-6s}
.hw-lolli{width:30px;right:43%;top:690px;animation-delay:-2s}
.hw-corn{width:28px;left:58%;top:165px;animation-delay:-5s}
/* 小魔女拎著南瓜糖果桶 */
:root[data-season="halloween"] .hero-witch{position:relative}
:root[data-season="halloween"] .hero-witch:after{content:"";position:absolute;left:-6px;bottom:6px;width:64px;height:58px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M8 9Q16-2 24 9' fill='none' stroke='%237C3AED' stroke-width='1.6'/%3E%3Cpath d='M16 8c-2-1.5-6-1.6-8.6.6C4.6 11 4 15.4 5.2 19.2 6.6 23.8 10 26 13 25.6c1.2.6 4.8.6 6 0 3 .4 6.4-1.8 7.8-6.4 1.2-3.8.6-8.2-2.2-10.6C22 6.4 18 6.5 16 8z' fill='%23FF8A3D'/%3E%3Ccircle cx='12' cy='15' r='1.6' fill='%233A2150'/%3E%3Ccircle cx='20' cy='15' r='1.6' fill='%233A2150'/%3E%3Cellipse cx='9.5' cy='18.5' rx='2' ry='1.2' fill='%23FF9FC7'/%3E%3Cellipse cx='22.5' cy='18.5' rx='2' ry='1.2' fill='%23FF9FC7'/%3E%3Cpath d='M13.5 19q2.5 2 5 0' fill='none' stroke='%233A2150' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 6px 10px rgba(255,138,61,.35));animation:hwBob 3.2s ease-in-out infinite;z-index:2}

@keyframes hwFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes hwSpin{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-8px) rotate(14deg)}}
@keyframes hwBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}

@media (max-width:960px){
  .hw-ghost.g2,.hw-ghost.g3,.hw-candy.c1,.hw-lolli,.hw-corn{display:none}
  .hw-ghost.g1{width:46px;top:250px;right:2%}
  .hw-candy.c2{top:640px}
  :root[data-season="halloween"] .hw-banner{font-size:.82em;margin-top:28px}
  .hw-banner-go{display:none}
  .hw-banner-x{margin:8px 0 0 auto}
}
@media (prefers-reduced-motion:reduce){
  .hw-ghost,.hw-candy,.hw-lolli,.hw-corn,.hw-banner-ico,:root[data-season="halloween"] .hero-witch:after{animation:none}
}

/* 游標小火花 */
.hw-spark{position:fixed;z-index:9999;pointer-events:none;line-height:1;transform:translate(-50%,-50%);animation:hwSpark .8s ease-out forwards;text-shadow:0 0 6px rgba(255,255,255,.9)}
.hw-burst{animation-duration:.9s}
@keyframes hwSpark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,20px))) scale(.4) rotate(90deg)}}

/* 找南瓜彩蛋 */
:root[data-season="halloween"] .hw-egg{display:inline-flex;position:absolute;z-index:3;width:34px;height:32px;padding:0;border:0;background:none;cursor:pointer;opacity:.9;transition:transform .2s;animation:hwPeek 4s ease-in-out infinite}
.hw-egg svg{width:100%;height:100%}
.hw-egg:hover,.hw-egg:focus-visible{transform:scale(1.25) rotate(-8deg);opacity:1}
.hw-egg.got{animation:hwPop .45s ease-in forwards}
.hw-egg-0{right:4%;top:6px}
.hw-egg-1{right:18%;top:-6px}
.hw-egg-2{right:6%;bottom:10px}
.hw-egg-3{right:2px;top:2px}
.hw-egg-4{left:150px;top:-2px}
@keyframes hwPeek{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-12deg)}84%{transform:rotate(10deg)}92%{transform:rotate(-4deg)}}
@keyframes hwPop{to{transform:scale(1.8) translateY(-20px);opacity:0}}
.hw-hud-wrap{display:none}
:root[data-season="halloween"] .hw-hud-wrap{display:block;position:fixed;left:16px;bottom:20px;z-index:60}
:root[data-season="halloween"] .hw-hud{display:inline-flex;align-items:center;min-height:46px;padding:0 16px 0 8px;border-radius:999px;border:2px solid #FF9FC7;background:#fff;color:var(--ink);font:800 .82em var(--body);box-shadow:var(--shadow-md);cursor:pointer}
.hw-hud svg{width:30px;height:28px;margin-right:6px}
.hw-tip{position:absolute;left:0;bottom:56px;width:250px;padding:14px 16px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:var(--shadow-md);border:1px solid var(--line);font-size:.82em}
.hw-tip ul{margin:6px 0 0;padding-left:1.2em}
.hw-tip-reset{margin-top:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font:700 1em var(--body);cursor:pointer}
:root[data-season="halloween"] .hw-toast{display:block;position:fixed;left:50%;top:120px;z-index:9998;transform:translate(-50%,-20px);opacity:0;padding:12px 20px;border-radius:999px;background:#3A2150;color:#fff;font-weight:800;box-shadow:var(--shadow-md);pointer-events:none;transition:opacity .25s,transform .25s}
:root[data-season="halloween"] .hw-toast.show{opacity:1;transform:translate(-50%,0)}
:root[data-season="halloween"] .hw-modal{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9990;align-items:center;justify-content:center;padding:16px;background:rgba(58,33,80,.45)}
.hw-modal-box{position:relative;width:100%;max-width:440px;padding:28px 26px 22px;border-radius:26px;background:#fff;color:#3A2150;text-align:center;box-shadow:0 30px 70px rgba(58,33,80,.35);border:3px dashed #FF9FC7;animation:hwIn .35s ease-out}
.hw-modal-art{display:flex;justify-content:center;margin-bottom:6px}
.hw-modal-art svg{width:54px;height:50px;margin:0 2px;animation:hwBob 2.6s ease-in-out infinite}
.hw-modal-art svg:nth-child(2){width:68px;height:62px;animation-delay:-.8s}
.hw-modal-box h2{margin:4px 0 8px;font-size:1.35em;outline:none}
.hw-modal-box p{margin:0 0 14px;color:#6E5A86}
.hw-code{display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.hw-code code{font:900 1.6em var(--mono,monospace);letter-spacing:.08em;color:#E04F93;padding:6px 14px;border-radius:12px;background:#FFF0F7;margin-right:10px}
.hw-code .btn{min-height:44px;padding:4px 16px}
.hw-modal-btns{display:flex;flex-wrap:wrap;justify-content:center}
.hw-modal-btns .btn{margin:0 6px 8px}
@keyframes hwIn{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (max-width:960px){
  :root[data-season="halloween"] .hw-hud-wrap{bottom:96px;left:10px}
  :root[data-season="halloween"] .hw-hud{min-height:40px;font-size:.74em}
  .hw-egg-4{left:auto;right:10px}
}
@media (prefers-reduced-motion:reduce){ :root[data-season="halloween"] .hw-egg{animation:none} .hw-modal-art svg{animation:none} }
.hw-ghost.g3{top:790px;left:2%}
@media (max-width:960px){
  :root[data-season="halloween"] .hw-hud{min-height:44px;padding:0 10px 0 6px;font-size:.7em}
  :root[data-season="halloween"] .hw-hud-wrap{bottom:92px;left:8px}
  .hw-hud span{max-width:3.4em;overflow:hidden;white-space:nowrap}
}

/* =========================================================
   遊戲化：小魔女任務本、案例圖鑑
   ========================================================= */
.gq{position:fixed;left:18px;bottom:20px;z-index:65}
.gq-btn{display:inline-flex;align-items:center;min-height:56px;padding:5px 16px 5px 5px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-md);cursor:pointer;font:inherit;text-align:left;transition:transform .2s}
.gq-btn:hover{transform:translateY(-2px)}
.gq-btn.pop{animation:gqPop .6s ease-out}
.gq-ring{position:relative;display:inline-flex;width:46px;height:46px;margin-right:10px;flex:none}
.gq-ring svg{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}
.gq-ring circle{fill:none;stroke-width:3.5}
.gq-ring-bg{stroke:var(--line)}
.gq-ring-fg{stroke:var(--star);stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.gq-ring img{position:absolute;top:5px;left:5px;width:36px;height:36px;border-radius:50%;background:#EAF1FC}
.gq-btn-t{display:flex;flex-direction:column;line-height:1.25}
.gq-btn-t b{font-size:.86em}
.gq-btn-t small{font:700 .78em var(--mono);color:var(--accent-2)}
.gq.is-complete .gq-ring-fg{stroke:var(--ok)}
.gq-nudge{position:absolute;left:0;bottom:66px;display:flex;align-items:flex-start;width:240px;padding:12px 10px 12px 14px;border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-md);font-size:.84em;font-weight:700;animation:gqIn .35s ease-out}
.gq-nudge:after{content:"";position:absolute;left:26px;bottom:-7px;width:14px;height:14px;background:var(--surface);transform:rotate(45deg)}
.gq-nudge button{flex:none;margin-left:6px;width:28px;height:28px;border:0;border-radius:50%;background:var(--bg);color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.gq-panel{position:absolute;left:0;bottom:68px;width:380px;max-height:calc(100vh - 180px);overflow:auto;padding:18px 18px 14px;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(11,21,48,.28);border:1px solid var(--line);animation:gqIn .25s ease-out}
.gq-panel[hidden],.gq-nudge[hidden]{display:none}
.gq-head{display:flex;align-items:flex-start}
.gq-head h2{margin:0;font-size:1.15em;font-weight:900;outline:none}
.gq-head p{margin:2px 0 0;color:var(--muted);font-size:.8em}
.gq-x{flex:none;margin-left:auto;width:36px;height:36px;border:0;border-radius:50%;background:var(--bg);color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.gq-level{display:grid;grid-template-columns:auto 1fr;grid-gap:4px 10px;align-items:center;margin:14px 0 12px;padding:12px 14px;border-radius:16px;background:var(--accent-soft)}
.gq-lv{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font:900 .9em var(--display)}
.gq-level b{font-size:1em}
.gq-xp{height:10px;border-radius:999px;background:var(--surface);overflow:hidden}
.gq-xp i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--star),var(--signal));transition:width .6s ease}
.gq-list{list-style:none;margin:0;padding:0}
.gq-list li{display:grid;grid-template-columns:34px 1fr auto;grid-gap:0 10px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line)}
.gq-list li:last-child{border-bottom:0}
.gq-ico{font-size:1.45em;text-align:center}
.gq-txt{display:flex;flex-direction:column}
.gq-txt b{font-size:.9em}
.gq-txt small{font-size:.76em;color:var(--muted);line-height:1.5}
.gq-go{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.78em;text-decoration:none;white-space:nowrap}
.gq-go:hover{background:var(--accent);color:#fff}
.gq-ok{display:none;font-weight:800;font-size:.78em;color:var(--ok);white-space:nowrap}
.gq-list li.is-done .gq-go{display:none}
.gq-list li.is-done .gq-ok{display:inline}
.gq-list li.is-done .gq-txt b{text-decoration:line-through;text-decoration-color:var(--ok);opacity:.75}
.gq-list li.is-done .gq-ico{filter:grayscale(.2)}
.gq-reward{margin-top:10px;padding:14px;border-radius:16px;border:2px dashed var(--star);background:var(--bg);text-align:center}
.gq-reward[hidden]{display:none}
.gq-reward p{margin:4px 0 10px;font-size:.82em;color:var(--muted)}
.gq-code{display:flex;align-items:center;justify-content:center}
.gq-code code{font:900 1.3em var(--mono);letter-spacing:.06em;color:var(--signal);margin-right:10px}
.gq-code .btn{min-height:40px;padding:4px 14px}
.gq-bonus{display:none}
:root[data-season="halloween"] .gq-bonus{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.gq-bonus-h{display:block;font-weight:800;font-size:.82em;margin-bottom:6px}
:root[data-season="halloween"] .hw-hud-wrap.in-panel{position:static;display:block}
:root[data-season="halloween"] .in-panel .hw-hud{min-height:38px;box-shadow:none;font-size:.78em}
.in-panel .hw-tip{position:static;width:auto;margin-top:8px;box-shadow:none;border:0;padding:0;background:transparent}
.gq-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.gq-sound,.gq-hide{min-height:38px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 .78em var(--body);cursor:pointer}
.gq-sound{background:var(--bg)}
.gq-sound[aria-pressed="true"]{color:var(--accent)}
.gq-hide:hover,.gq-sound:hover{color:var(--ink)}
.gq-toast{position:fixed;left:50%;top:110px;z-index:9997;transform:translate(-50%,-16px);max-width:calc(100vw - 32px);opacity:0;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:800;box-shadow:var(--shadow-md);pointer-events:none;transition:opacity .25s,transform .25s}
.gq-toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes gqPop{0%{transform:scale(1)}35%{transform:scale(1.15) rotate(-3deg)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes gqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 案例圖鑑 */
.dex{margin:6px 0 26px;padding:18px 20px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.dex-top{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.dex-top h2{margin:0;font-size:1.1em;font-weight:900}
.dex-n{font:800 .95em var(--display);color:var(--accent-2)}
.dex-bar{height:12px;margin:10px 0 6px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.dex-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--star));transition:width .6s ease}
.dex-hint{margin:0 0 10px;font-size:.8em;color:var(--muted)}
.dex-cats{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.dex-cats li{display:inline-flex;align-items:center;margin:0 8px 8px 0;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.8em}
.dex-cats li b{margin-left:8px;font-family:var(--mono);color:var(--muted)}
.dex-cats li.full{border-color:var(--star);background:var(--accent-soft);font-weight:800}
.card{position:relative}
.seen-stamp{position:absolute;top:12px;right:14px;padding:3px 10px;border-radius:999px;border:2px solid var(--ok);color:var(--ok);font-weight:900;font-size:.72em;transform:rotate(6deg);background:var(--surface);pointer-events:none;animation:gqStamp .4s ease-out}
.card.is-seen .meta>span:last-child{visibility:hidden}
@keyframes gqStamp{from{transform:scale(1.8) rotate(6deg);opacity:0}to{transform:rotate(6deg);opacity:1}}

@media (max-width:960px){
  .gq{left:8px;bottom:92px}
  .gq-btn{min-height:48px;padding:4px 12px 4px 4px}
  .gq-ring{width:40px;height:40px;margin-right:8px}
  .gq-ring img{width:30px;height:30px}
  .gq-panel{position:fixed;left:8px;right:8px;bottom:150px;width:auto;max-height:calc(100vh - 230px)}
  .gq-nudge{bottom:58px}
  .gq-toast{top:76px;border-radius:16px;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .gq-btn.pop,.gq-panel,.gq-nudge,.seen-stamp{animation:none} .gq-ring-fg,.gq-xp i,.dex-bar i{transition:none} }

/* ---------- 自訂圖示（取代 emoji） ---------- */
:root{--ic-1:rgba(22,103,199,.14);--ic-2:#F2B632}
:root[data-season="halloween"]{--ic-1:rgba(224,79,147,.16);--ic-2:#FF8A3D}
.ic{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.28em;flex:none;overflow:visible}
.ic .f1{fill:var(--ic-1)}
.ic .f2{fill:var(--ic-2)}
.qz-opt-i .ic{width:1.6em;height:1.6em;color:var(--dark-2)}
.qz-opts.is-cards .qz-opt-i .ic{width:1.8em;height:1.8em}
:root[data-season="halloween"] .qz-opt-i .ic{color:#5B2A86}
.qz-opt-i{display:inline-flex}
.gq-ico .ic{width:1.35em;height:1.35em;color:var(--dark-2)}
:root[data-season="halloween"] .gq-ico .ic{color:#5B2A86}
.gq-ok .ic{width:1.1em;height:1.1em;--ic-1:rgba(27,122,67,.14)}
.gq-reward b .ic,.gq-bonus-h .ic,.dex-top h2 .ic{width:1.35em;height:1.35em;color:var(--dark-2)}
.gq-snd-ic{display:inline-flex}
.gq-snd-ic .ic{width:1.3em;height:1.3em}
.gq-toast .ic,.hw-toast .ic{width:1.25em;height:1.25em;--ic-1:rgba(255,255,255,.18)}
.hw-tip .ic{width:1.2em;height:1.2em}
.dex-cats .ic{width:1.15em;height:1.15em;margin-right:2px}
.hw-banner-ico{display:inline-flex}
.hw-banner-ico .ic{width:1.4em;height:1.4em;color:#5B2A86}

/* 小魔女揮魔法棒（AI 金鑰有設定時才會觸發） */
.orb.waving{animation:witchWave 1.5s ease-in-out!important}
@keyframes witchWave{
  0%{transform:translateY(0) rotate(0)}
  15%{transform:translateY(-6px) rotate(-14deg) scale(1.04)}
  35%{transform:translateY(-8px) rotate(12deg) scale(1.06)}
  55%{transform:translateY(-4px) rotate(-8deg) scale(1.03)}
  75%{transform:translateY(-2px) rotate(5deg)}
  100%{transform:translateY(0) rotate(0)}
}
.orb.waving:after{content:"";position:absolute;right:-2%;bottom:8%;width:32%;height:32%;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,230,140,.9) 35%,rgba(255,200,60,0) 70%);animation:wandGlow 1.5s ease-out forwards;pointer-events:none}
.orb{position:relative}
.wand-star{text-shadow:0 0 8px rgba(255,220,120,1),0 0 3px #fff,0 0 1px rgba(0,0,0,.25);animation-duration:1s}
@keyframes wandGlow{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){ .orb.waving,.orb.waving:after{animation:none!important} }

/* ===== 作品縮圖（inc/thumbs.php） ===== */
.pthumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe8f7}
@supports not (aspect-ratio:1/1){.pthumb{height:0;padding-top:62.5%}}
.pthumb img{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.pthumb-ph{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;padding:12px}
.pthumb-ph .ic{width:52px;height:52px;opacity:.95}
.pthumb-ph b{font-size:1em;letter-spacing:.06em}
.pthumb-ph small{font-size:.78em;opacity:.85;font-family:ui-monospace,Menlo,monospace}
.pthumb-ph::after{content:"";position:absolute;inset:0;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 10% 90%,rgba(255,255,255,.18),transparent 40%);pointer-events:none}
.pc-0 .pthumb-ph,.pthumb.pc-0{background:linear-gradient(135deg,#4B3FD6,#1667C7)}
.pc-1 .pthumb-ph{background:linear-gradient(135deg,#1667C7,#18A3B8)}
.pc-2 .pthumb-ph{background:linear-gradient(135deg,#0E7C66,#2BB673)}
.pc-3 .pthumb-ph{background:linear-gradient(135deg,#D9822B,#F2B632)}
.pc-4 .pthumb-ph{background:linear-gradient(135deg,#C2185B,#F06292)}
.pc-5 .pthumb-ph{background:linear-gradient(135deg,#6A1B9A,#AB47BC)}
.pc-6 .pthumb-ph{background:linear-gradient(135deg,#37474F,#78909C)}
.card-thumb{display:block;margin:-22px -22px 16px;border-radius:8px 8px 0 0;overflow:hidden;border-bottom:1px solid var(--line)}
.card-thumb:hover img{transform:scale(1.04)}
@media (max-width:640px){.card-thumb{margin:-18px -18px 14px}}
.case-shot{margin:14px 0 6px;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.case-shot a{display:block;color:inherit;text-decoration:none}
.case-shot-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.case-shot-bar i{width:10px;height:10px;border-radius:50%;background:#F2665E}
.case-shot-bar i+i{background:#F5BE4F}.case-shot-bar i+i+i{background:#5BC466}
.case-shot-bar span{margin-left:10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82em;color:var(--muted);background:var(--surface);border-radius:999px;padding:3px 12px}
.pthumb-lg .pthumb-ph .ic{width:84px;height:84px}
.pthumb-lg .pthumb-ph b{font-size:1.3em}
.case-shot a:hover img{transform:scale(1.02)}
:root[data-season="halloween"] .card-thumb{border-radius:18px 18px 0 0}
.case-shot{max-width:820px}

/* ===== 作品集頁：精簡卡片、分頁 ===== */
.works-grid.paged .card.is-more{display:none}
.card-c .pitch{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;flex:0 0 auto}
.card-c .metric{padding-top:10px}
.card-c-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.card-c-act .btn{min-height:46px;padding:0 20px}
.card-c-visit{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent);text-decoration:none}
.card-c-visit:hover{text-decoration:underline}
.card-c .meta{margin-top:2px}
.works-more{text-align:center;margin:28px 0 8px}
.works-count{margin:0 0 12px;color:var(--muted);font-size:.95em}
/* 示意封面：顯示作品名稱，每張不一樣 */
.pthumb-ph b{font-size:1.15em;font-weight:900;line-height:1.35;max-width:88%;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.18)}
.pthumb-ph small{font-family:inherit;letter-spacing:.04em}
.pthumb-ph .ic{width:44px;height:44px;margin-bottom:2px}
.pthumb-lg .pthumb-ph b{font-size:1.6em}
.ld-th-img .pthumb-ph b{display:none}

.card-c .metric+.card-c-act{margin-top:auto}
.card-c .pitch+.card-c-act,.card-c .metric{margin-bottom:14px}
/* 作品集頁的貼圖區：縮小，不搶作品的版面 */
.works-stk{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);max-width:900px;margin:48px auto 0;padding:22px 26px}
.works-stk .sheet{max-width:300px;justify-self:end;padding:8px}
@media (max-width:760px){ .works-stk .sheet{justify-self:center;max-width:240px} }

/* ===== 行銷版首頁：三個好處、作品展示、數字帶 ===== */
.bnf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:20px}
.bnf-card{position:relative;display:flex;flex-direction:column;padding:28px 26px 24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.bnf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bnf-card.is-ai{background:linear-gradient(160deg,var(--accent-soft),var(--surface) 60%);border-color:var(--accent)}
.bnf-ic{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:16px;background:var(--accent-soft);color:var(--accent);margin-bottom:16px}
.bnf-ic .ic{width:32px;height:32px}
.bnf-card h3{font-size:1.45em;font-weight:900;margin:0 0 8px}
.bnf-card p{margin:0 0 18px;color:var(--muted);font-size:1.02em}
.bnf-num{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line)}
.bnf-num strong{display:block;font-size:2em;font-weight:900;line-height:1.15;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bnf-num span{display:block;color:var(--muted);font-size:.9em;margin-top:2px}
.bnf-go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:800;color:var(--accent);text-decoration:none}
.bnf-go:hover{text-decoration:underline}
.bnf-more{text-align:center;margin:22px 0 0}
.bnf-more a{font-weight:700;color:var(--accent)}

.show-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:18px}
.show-tile{position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);background:var(--surface);color:#fff;text-decoration:none}
.show-tile .pthumb img{transition:transform .5s ease}
.show-tile:hover .pthumb img,.show-tile:focus-visible .pthumb img{transform:scale(1.05)}
.show-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(8,14,32,.86));display:flex;flex-direction:column}
.show-cap b{font-size:1.12em;font-weight:900;line-height:1.35}
.show-cap small{opacity:.85;font-size:.85em;margin-top:2px}
.show-tile .pthumb-ph small{display:none}
.show-sec .proj-more{display:flex;justify-content:center;margin-top:26px}

.kband{margin:56px 0;padding:34px 30px;border-radius:24px;background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-2));color:var(--on-dark);text-align:center}
.kband h2{margin:0 0 20px;font-size:1.5em;font-weight:900;color:var(--on-dark)}
.kband-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px}
.kband-row strong{display:block;font-size:2.6em;font-weight:900;line-height:1.1;color:var(--star)}
.kband-row span{display:block;font-size:.92em;opacity:.9;margin-top:6px}
.faq-short .faq-more{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero .lede{font-size:1.15em;max-width:34em}

@media (max-width:900px){
  .bnf,.show-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bnf-card.is-ai{grid-column:1 / -1}
  .kband-row{grid-template-columns:1fr 1fr;grid-gap:22px 12px}
}
@media (max-width:600px){
  .bnf{grid-template-columns:1fr}
  .show-grid{grid-gap:12px}
  .show-cap{padding:30px 12px 10px}
  .show-cap b{font-size:.95em}
  .show-cap small{display:none}
  .kband{padding:26px 18px}
  .kband-row strong{font-size:2.1em}
}
@media (max-width:600px){
  .bnf-card{display:grid;grid-template-columns:48px 1fr;grid-column-gap:14px;padding:20px 18px}
  .bnf-ic{width:48px;height:48px;margin:0;grid-row:1 / span 2}
  .bnf-ic .ic{width:26px;height:26px}
  .bnf-card h3{font-size:1.25em;margin:2px 0 4px}
  .bnf-card p{margin:0}
  .bnf-num,.bnf-go{grid-column:1 / -1}
  .bnf-num{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px}
  .bnf-num strong{font-size:1.6em}
  .bnf-go{margin-top:2px}
}
.show-cap{background:linear-gradient(rgba(8,14,32,0),rgba(8,14,32,.7) 35%,rgba(8,14,32,.92))}
.od-seller{margin:6px 0 0;font-size:.78em;color:var(--muted);line-height:1.6}
.contact .alt .remote{font-weight:700}

/* ===== 業務夥伴專區 partner.php ===== */
.pt-en-note{margin:16px 0 0;padding:10px 14px;border-radius:12px;background:var(--accent-soft);font-weight:700}
.pt-path{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:18px 0 20px;padding:0}
.pt-path li{display:grid;grid-template-columns:40px auto;grid-column-gap:10px;align-items:center;padding:10px 16px 10px 10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.pt-path span{grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900}
.pt-path small{color:var(--muted);font-size:.82em}
.pt-progress{display:grid;grid-template-columns:repeat(2,minmax(0,280px));grid-gap:14px;margin-top:22px}
.pt-progress div{display:grid;grid-template-columns:1fr auto;grid-row-gap:6px;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.pt-progress span{color:var(--muted);font-size:.9em}
.pt-progress i{grid-column:1 / -1;height:8px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.pt-progress em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s}
.pt-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.pt-toc a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:.92em}
.pt-toc a span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.85em}
.pt-toc a.is-read span{background:var(--ok,#1F9D55);color:#fff}
.pt-ch{margin:0 0 12px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);scroll-margin-top:110px}
.pt-ch>summary{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 20px;cursor:pointer;font-weight:900;font-size:1.15em;list-style:none}
.pt-ch>summary::-webkit-details-marker{display:none}
.pt-ch>summary:after{content:"+";margin-left:auto;font-size:1.4em;color:var(--accent)}
.pt-ch[open]>summary:after{content:"−"}
.pt-no{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.pt-ch.is-read .pt-no{background:var(--ok,#1F9D55);color:#fff}
.pt-body{padding:0 22px 22px}
.pt-body h3{font-size:1.1em;font-weight:900;margin:22px 0 10px}
.pt-pitch{padding:18px 20px;border-radius:16px;background:linear-gradient(150deg,var(--accent-soft),var(--surface));border-left:5px solid var(--accent)}
.pt-pitch p{margin:6px 0 0;font-size:1.08em;line-height:1.8}
.pt-label{font-size:.82em;font-weight:800;color:var(--accent-2)}
.pt-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:12px}
.pt-grid4 div{padding:14px 16px;border-radius:14px;border:1px solid var(--line)}
.pt-grid4 .ic{width:30px;height:30px;color:var(--accent)}
.pt-grid4 b{display:block;margin:6px 0 4px}
.pt-grid4 p{margin:0;color:var(--muted);font-size:.92em}
.pt-grid4 small,.pt-obj small{display:block;margin-top:6px;color:var(--muted);font-size:.78em}
.pt-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:10px}
.pt-svc div{padding:12px 14px;border-radius:12px;background:var(--bg)}
.pt-svc p{margin:4px 0 0;font-size:.9em;color:var(--muted)}
.pt-price{width:100%;border-collapse:collapse}
.pt-price th,.pt-price td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pt-price th{width:9em;white-space:nowrap}
.pt-role th{width:50%}
.pt-tip{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--muted)}
.pt-tip .ic{width:22px;height:22px;flex:none;color:var(--accent)}
.pt-seg{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line)}
.pt-seg h3{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.pt-seg h3 .ic{width:26px;height:26px;color:var(--accent)}
.pt-seg ul{list-style:none;margin:0;padding:0}
.pt-seg li{padding:10px 0;border-top:1px dashed var(--line)}
.pt-seg li:first-child{border-top:0}
.pt-seg li>a{font-weight:800}
.pt-seg p{margin:4px 0 0;font-size:.95em}
.pt-k{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:.8em;font-weight:800}
.pt-st{font-size:.78em;color:var(--muted);margin-left:6px}
.pt-steps,.pt-rules{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;grid-gap:10px}
.pt-steps li,.pt-rules li{counter-increment:s;position:relative;padding:12px 16px 12px 58px;border-radius:14px;background:var(--bg)}
.pt-steps li:before,.pt-rules li:before{content:counter(s);position:absolute;left:14px;top:12px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-weight:900}
.pt-rules li:before{background:var(--signal)}
.pt-steps p,.pt-rules p{margin:2px 0 0;color:var(--muted)}
.pt-ask{margin:0;padding-left:1.4em;line-height:2}
.pt-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:10px}
.pt-tools a{display:flex;flex-direction:column;padding:14px 16px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.pt-tools a b{color:var(--accent)}
.pt-tools a span{font-size:.88em;color:var(--muted);margin-top:4px}
.pt-obj{display:grid;grid-gap:12px}
.pt-obj>div{padding:14px 16px;border-radius:14px;border:1px solid var(--line)}
.pt-q,.pt-a{display:flex;gap:8px;margin:0}
.pt-q{font-weight:800}
.pt-a{margin-top:8px;color:var(--ink)}
.pt-q .ic,.pt-a .ic{flex:none;width:22px;height:22px;color:var(--accent)}
.pt-a .ic{color:var(--ok,#1F9D55)}

.pt-game{margin-top:40px}
.pt-map{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-gap:12px;counter-reset:none}
.pt-map[hidden]{display:none}
.pt-node{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;min-height:150px;padding:16px;border-radius:18px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s}
.pt-node b{margin-top:8px;font-size:1em}
.pt-node small{color:var(--muted);font-size:.82em;margin-top:2px}
.pt-node-ic .ic{width:34px;height:34px;color:var(--accent)}
.pt-node-st{margin-top:auto;padding-top:8px;font-style:normal;font-weight:800;font-size:.82em;color:var(--accent)}
.pt-node.is-open{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pt-node.is-open:hover{transform:translateY(-3px)}
.pt-node.is-done{border-color:var(--ok,#1F9D55);background:linear-gradient(160deg,rgba(31,157,85,.08),var(--surface))}
.pt-node.is-done .pt-node-st{color:var(--ok,#1F9D55)}
.pt-node.is-lock{opacity:.55;cursor:not-allowed}
.pt-play,.pt-res{max-width:820px;margin:0 auto;padding:24px 26px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.pt-play-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pt-play-top span{color:var(--muted)}
.pt-hearts{margin-left:auto;display:flex;gap:6px}
.pt-hearts i{width:14px;height:14px;border-radius:50%;background:var(--line)}
.pt-hearts i.ok{background:var(--ok,#1F9D55)}.pt-hearts i.no{background:var(--signal)}
.pt-bar{height:8px;margin:12px 0 16px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.pt-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}
.pt-img{margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.pt-img img{display:block;width:100%;height:auto}
.pt-qtext{font-size:1.3em;font-weight:900;line-height:1.5;margin:0 0 14px;outline:none}
.pt-opts{display:grid;grid-gap:10px}
.pt-opt{min-height:58px;padding:12px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s,transform .15s}
.pt-opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.pt-opt:disabled{cursor:default}
.pt-opt.is-right{border-color:var(--ok,#1F9D55);background:rgba(31,157,85,.1)}
.pt-opt.is-right:after{content:" ✓";color:var(--ok,#1F9D55)}
.pt-opt.is-wrong{border-color:var(--signal);background:rgba(214,40,57,.07)}
.pt-fb{margin-top:14px;padding:14px 16px;border-radius:14px;line-height:1.7}
.pt-fb.ok{background:rgba(31,157,85,.1)}.pt-fb.no{background:rgba(214,40,57,.07)}
.pt-fb p{margin:6px 0 0}
.pt-fb small{display:block;margin-top:6px;color:var(--muted)}
.pt-play-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
.pt-res{text-align:center;outline:none}
.pt-res-ic .ic{width:64px;height:64px;color:var(--star)}
.pt-res h3{font-size:1.4em;font-weight:900;margin:8px 0}
.pt-res .pt-play-btns{justify-content:center}
.pt-cert-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:22px;align-items:center;margin-top:26px}
.pt-cert{position:relative;padding:30px 26px;border-radius:22px;text-align:center;background:var(--dark);background-image:var(--stars),linear-gradient(135deg,var(--dark),var(--dark-3));color:var(--on-dark);border:3px solid var(--star);box-shadow:var(--shadow-md)}
.pt-cert-tag{font-size:.82em;letter-spacing:.08em;color:var(--star)}
.pt-cert-ic .ic{width:72px;height:72px;color:var(--star);margin:12px 0 0}
.pt-cert h3{margin:6px 0;font-size:1.8em;font-weight:900;color:var(--on-dark)}
.pt-cert-name{font-size:1.3em;font-weight:800;margin:0}
.pt-cert p{margin:6px 0 0;opacity:.9}
.pt-cert-tools label{display:grid;gap:6px;font-weight:700}
.pt-cert-tools input{min-height:48px;padding:0 12px;border-radius:12px;border:2px solid var(--line);font:inherit;background:var(--surface);color:var(--ink)}
.pt-cert-tools .btn{margin-top:14px}
.pt-apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-gap:28px;margin:56px 0 30px;padding:28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.pt-apply h2{font-size:1.7em;font-weight:900;margin:8px 0}
.pt-quest-st{margin:0;padding:10px 14px;border-radius:12px;background:var(--accent-soft);font-weight:700;font-size:.92em}
.pt-agree{display:flex;align-items:center;gap:10px;font-weight:700}
.pt-agree input{width:22px;height:22px}
.pt-ok{text-align:center;outline:none}
.pt-ok .orb{display:inline-block;width:110px}
@media (max-width:960px){
  .pt-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-map li:last-child{grid-column:1 / -1}
  .pt-cert-wrap,.pt-apply{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pt-progress{grid-template-columns:1fr}
  .pt-body{padding:0 14px 16px}
  .pt-play,.pt-res{padding:18px 16px}
  .pt-node{min-height:120px}
  .pt-price th{width:auto;white-space:normal}
  .pt-apply{padding:20px 16px}
}

/* ===== 業務百萬挑戰（小魔女主持） ===== */
.mg{display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-gap:16px;align-items:start}
.mg-stage{position:relative;padding:24px 26px 26px;border-radius:24px;color:var(--on-dark);background:var(--dark);background-image:radial-gradient(ellipse at 50% -10%,rgba(255,214,102,.28),transparent 55%),radial-gradient(circle at 10% 110%,rgba(149,140,255,.35),transparent 50%),var(--stars),linear-gradient(160deg,var(--dark),var(--dark-3));box-shadow:var(--shadow-md);overflow:hidden}
.mg-host{display:grid;grid-template-columns:150px minmax(0,1fr);grid-gap:16px;align-items:end;margin-bottom:18px}
.mg-witch img{display:block;width:150px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));transform-origin:50% 90%}
.mg-say{position:relative;margin:0 0 18px;padding:14px 18px;border-radius:18px;background:var(--surface);color:var(--ink);font-weight:700;font-size:1.06em;line-height:1.6;min-height:3.4em}
.mg-say:before{content:"";position:absolute;left:-10px;bottom:18px;border:10px solid transparent;border-left:0;border-right-color:var(--surface)}
.mg-witch.talk img{animation:mgTalk .6s ease}
.mg-witch.ask img{animation:mgTalk .5s ease 2}
.mg-witch.think img{animation:mgThink 1.3s ease-in-out}
.mg-witch.cheer img{animation:mgCheer .7s ease 2}
.mg-witch.sad img{animation:mgSad .9s ease forwards}
.mg-witch.magic img{animation:mgMagic .9s ease}
@keyframes mgTalk{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes mgThink{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}70%{transform:rotate(4deg)}}
@keyframes mgCheer{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-16px) scale(1.05)}}
@keyframes mgSad{to{transform:rotate(-6deg) translateY(4px);filter:grayscale(.4) drop-shadow(0 10px 18px rgba(0,0,0,.35))}}
@keyframes mgMagic{0%{filter:drop-shadow(0 0 0 rgba(255,214,102,0))}50%{filter:drop-shadow(0 0 22px rgba(255,214,102,.95))}100%{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}}
.mg-rules{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-gap:8px}
.mg-rules li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.07)}
.mg-rules .ic{flex:none;width:24px;height:24px;color:var(--star)}
.mg-best{margin:0 0 12px;color:var(--star);font-weight:800}
.mg-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mg-stage .btn.ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.55)}
.mg-go{background:linear-gradient(135deg,#F7CD52,#F2A93B);border-color:#F2A93B;color:#2A1B00}
.mg-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.mg-top>b{font-size:1.05em;color:var(--star)}
.mg-life{display:flex;gap:8px;flex-wrap:wrap}
.mg-life button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:2px solid rgba(255,214,102,.7);background:rgba(255,214,102,.12);color:var(--on-dark);font:inherit;font-weight:800;font-size:.88em;cursor:pointer}
.mg-life button .ic{width:20px;height:20px;color:var(--star)}
.mg-life button:hover:not(:disabled){background:rgba(255,214,102,.25)}
.mg-life button.used{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.mg-life button:disabled{cursor:not-allowed}
.mg-img{margin:0 0 12px;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.25)}
.mg-img img{display:block;width:100%;height:auto}
.mg-q{margin:0 0 16px;padding:16px 20px;border-radius:18px;border:2px solid rgba(255,214,102,.6);background:rgba(10,16,40,.55);font-size:1.25em;font-weight:900;line-height:1.55;color:var(--on-dark);outline:none;text-align:center}
.mg-opts{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px}
.mg-opt{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;border-radius:16px;border:2px solid rgba(255,255,255,.35);background:rgba(10,16,40,.6);color:var(--on-dark);font:inherit;font-weight:800;text-align:left;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.mg-opt:hover:not(:disabled){border-color:var(--star);transform:translateY(-2px)}
.mg-l{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,214,102,.2);color:var(--star);font-weight:900}
.mg-opt.sel{background:rgba(242,169,59,.35);border-color:#F2A93B}
.mg-opt.lock{animation:mgBlink .45s ease-in-out infinite alternate}
@keyframes mgBlink{from{background:rgba(242,169,59,.25)}to{background:rgba(242,169,59,.6)}}
.mg-opt.right{animation:none;background:rgba(43,182,115,.55);border-color:#2BB673}
.mg-opt.right .mg-l{background:#2BB673;color:#fff}
.mg-opt.wrong{animation:none;background:rgba(214,40,57,.5);border-color:#FF5D6C}
.mg-opt.gone{visibility:hidden}
.mg-opt:disabled{cursor:default}
.mg-aud{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08)}
.mg-aud>b{display:block;margin-bottom:6px;color:var(--star)}
.mg-bar{display:grid;grid-template-columns:24px 1fr 48px;align-items:center;gap:10px;margin:6px 0}
.mg-bar i{height:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.mg-bar em{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#F7CD52,#F2A93B);transition:width .9s ease}
.mg-bar b{text-align:right}
.mg-fb{margin-top:14px;padding:12px 16px;border-radius:14px;line-height:1.7}
.mg-fb.ok{background:rgba(43,182,115,.22)}.mg-fb.no{background:rgba(214,40,57,.25)}
.mg-fb p{margin:0}
.mg-fb small{display:block;margin-top:4px;opacity:.85}
.mg-fb a{color:var(--star)}
.mg-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:16px}
.mg-end{text-align:center;padding:10px 0 4px;outline:none}
.mg-end-ic .ic{width:76px;height:76px;color:var(--star)}
.mg-end h3{font-size:1.6em;font-weight:900;margin:8px 0;color:var(--on-dark)}
.mg-end p{opacity:.9}
.mg-end .mg-btns{justify-content:center}
.mg-ladder{list-style:none;margin:0;padding:10px;border-radius:20px;background:var(--dark);background-image:linear-gradient(160deg,var(--dark),var(--dark-2));color:var(--on-dark);box-shadow:var(--shadow-md)}
.mg-ladder li{display:flex;justify-content:space-between;align-items:center;padding:5px 12px;border-radius:10px;font-weight:700;font-size:.92em;opacity:.75}
.mg-ladder li span{color:var(--on-dark-muted);min-width:2em}
.mg-ladder li.safe{color:var(--star);opacity:1}
.mg-ladder li.done{opacity:1}
.mg-ladder li.done b:after{content:" ✓";color:#2BB673}
.mg-ladder li.cur{background:linear-gradient(90deg,#F7CD52,#F2A93B);color:#2A1B00;opacity:1}
.mg-ladder li.cur span{color:#2A1B00}
.pt-game .pt-cert-wrap{margin-top:26px}
@media (max-width:900px){
  .mg{grid-template-columns:1fr}
  .mg-ladder{order:-1;display:flex;flex-direction:row-reverse;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:none}
  .mg-ladder::-webkit-scrollbar{display:none}
  .mg-ladder li{flex:none;flex-direction:column;padding:6px 10px;font-size:.8em}
}
@media (max-width:600px){
  .mg-stage{padding:16px 14px 18px}
  .mg-host{grid-template-columns:84px minmax(0,1fr);grid-gap:10px}
  .mg-witch img{width:84px}
  .mg-say{font-size:.95em;padding:10px 12px;margin-bottom:8px}
  .mg-opts{grid-template-columns:1fr}
  .mg-q{font-size:1.08em;padding:12px 14px}
  .mg-life button span{display:none}
  .mg-life button{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){ .mg-witch img,.mg-opt.lock{animation:none!important} .mg-bar em{transition:none} }
.mg-img img{max-height:320px;object-fit:cover;object-position:top center}
@media (max-width:600px){ .mg-img img{max-height:200px} }

/* 業務工具包：Zoom 背景下載 */
.pt-kit{margin-top:40px}
.pt-kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px}
.pt-kit-card{margin:0;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.pt-kit-card img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.pt-kit-card figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.pt-kit-card figcaption span{color:var(--muted);font-size:.9em}
.pt-kit-card .btn{align-self:flex-start;margin-top:8px;gap:8px}
.pt-kit-card .btn .ic{width:20px;height:20px}
.pt-kit-how{margin:16px 0 0;padding:14px 18px 14px 36px;border-radius:14px;background:var(--accent-soft);line-height:1.9}
@media (max-width:900px){ .pt-kit-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .pt-kit-grid{grid-template-columns:1fr} }

/* ===== 線上報價單 quote.php ===== */
.qt-body{background:var(--bg)}
.qt{max-width:920px;margin:0 auto;padding:18px 16px 40px}
.qt-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.qt-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.qt-brand img{width:48px;height:48px}
.qt-brand b{display:block;font-size:1.15em}
.qt-brand small{display:block;color:var(--muted);font-size:.78em;letter-spacing:.08em}
.qt-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:26px;margin-bottom:16px}
.qt-none{text-align:center}
.qt-timer{margin-bottom:14px;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,#FFF6DA,#FFE9B8);border:2px solid #F2B632;color:#3A2A00}
.qt-timer-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.qt-timer-k{font-weight:800;font-size:.9em}
.qt-timer-main>b{font-size:1.25em}
.qt-timer-left{margin-left:auto;font-weight:700}
.qt-timer-left strong{font-size:1.5em;color:#B5520B}
.qt-timer-bar{height:10px;margin:12px 0 8px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.qt-timer-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#F2B632,#E07B12);transition:width .6s}
.qt-timer p{margin:0;font-size:.92em}
.qt-timer.urgent{background:linear-gradient(135deg,#FFE7E9,#FFD3D7);border-color:#D62839;color:#4A0B12;animation:qtPulse 2s ease-in-out infinite}
.qt-timer.urgent .qt-timer-left strong{color:#D62839}
.qt-timer.urgent .qt-timer-bar i{background:linear-gradient(90deg,#FF5D6C,#D62839)}
@keyframes qtPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,40,57,.25)}50%{box-shadow:0 0 0 8px rgba(214,40,57,0)}}
.qt-deliver{background:linear-gradient(135deg,#E6F6EE,#D2F0E0);border-color:#2BB673;color:#0B3A22;animation:none}
.qt-deliver .qt-timer-left strong{color:#16834F}
.qt-deliver .qt-timer-bar i{background:linear-gradient(90deg,#4FD1A5,#16834F)}
.qt-bonus{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding:16px 20px;border-radius:18px;background:linear-gradient(135deg,#4B3FD6,#1667C7);color:#fff}
.qt-bonus .ic{flex:none;width:42px;height:42px;color:#FFE08A}
.qt-bonus b{display:block;font-size:.85em;letter-spacing:.06em;opacity:.9}
.qt-bonus p{margin:2px 0 0;font-size:1.15em;font-weight:800}
.qt-state{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:16px 20px;border-radius:18px}
.qt-state.signed{background:rgba(43,182,115,.12);border:2px solid #2BB673}
.qt-state.signed .ic{width:40px;height:40px;color:#16834F}
.qt-state.expired{background:rgba(214,40,57,.07);border:2px solid var(--signal);display:block}
.qt-state p{margin:4px 0 0}
.qt-state .btn{margin-top:10px}
.qt-doc.is-dim{opacity:.6}
.qt-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:3px solid var(--ink)}
.qt-eyebrow{font-size:.8em;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.qt-head h1{margin:6px 0 0;font-size:1.7em;font-weight:900}
.qt-meta{display:grid;grid-gap:4px;margin:0;font-size:.92em}
.qt-meta div{display:flex;gap:12px;justify-content:space-between}
.qt-meta dt{color:var(--muted)}.qt-meta dd{margin:0;font-weight:700}
.qt-parties{display:grid;grid-template-columns:1fr 1fr;grid-gap:16px;margin:18px 0}
.qt-parties>div{padding:14px 16px;border-radius:14px;background:var(--bg)}
.qt-parties b{display:block;font-size:1.08em;margin-top:2px}
.qt-parties p{margin:4px 0 0;color:var(--muted);font-size:.9em;line-height:1.7}
.qt-k{display:block;font-size:.78em;font-weight:800;letter-spacing:.08em;color:var(--accent-2);margin-bottom:6px}
.qt-slides{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:16px 18px;border-radius:16px;border:2px solid var(--accent);background:var(--accent-soft);color:var(--ink);text-decoration:none}
.qt-slides-ic .ic{width:40px;height:40px;color:var(--accent)}
.qt-slides b{display:block;font-size:1.1em}
.qt-slides small{color:var(--muted)}
.qt-slides-go{margin-left:auto;flex:none;padding:10px 16px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800}
.qt-tbl-wrap{overflow-x:auto}
.qt-tbl{width:100%;border-collapse:collapse}
.qt-tbl th,.qt-tbl td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.qt-tbl th{font-size:.85em;color:var(--muted);background:var(--bg)}
.qt-tbl td small{display:block;color:var(--muted);font-size:.88em;margin-top:2px;line-height:1.6}
.qt-tbl .n{text-align:right;white-space:nowrap}
.qt-tbl tfoot td{border-bottom:0;padding:8px 10px;text-align:right}
.qt-tbl .qt-total td{font-size:1.25em;font-weight:900;border-top:3px solid var(--ink);padding-top:12px}
.qt-pay-sec,.qt-feat,.qt-bank,.qt-note,.qt-terms,.qt-signed{margin-top:20px}
.qt-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px}
.qt-stages>div{display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.qt-stage-no{grid-row:1 / span 3;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}
.qt-stages small{color:var(--muted)}
.qt-stages strong{font-size:1.2em}
.qt-weeks{display:flex;align-items:center;gap:8px;margin:12px 0 0}
.qt-weeks .ic{width:24px;height:24px;color:var(--accent)}
.qt-feat ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-gap:8px 16px}
.qt-feat li{display:flex;gap:8px;line-height:1.6}
.qt-feat li .ic{flex:none;width:20px;height:20px;color:#16834F;margin-top:3px}
.qt-bank dl{display:grid;grid-gap:6px;margin:0;padding:14px 16px;border-radius:14px;background:var(--bg)}
.qt-bank dl div{display:flex;gap:16px}
.qt-bank dt{min-width:3em;color:var(--muted)}.qt-bank dd{margin:0}
.qt-bank dd b{font-size:1.15em;letter-spacing:.04em}
.qt-note p,.qt-terms p{margin:0;line-height:1.8;color:var(--ink)}
.qt-terms p{font-size:.92em;color:var(--muted)}
.qt-bonus-doc p{font-weight:700}
.qt-signed{padding-top:16px;border-top:1px dashed var(--line)}
.qt-signed img{display:block;max-width:320px;width:100%;height:auto;background:#fff;border-bottom:2px solid var(--ink)}
.qt-signed p{margin:6px 0 0}
.qt-signed small{color:var(--muted)}
.qt-sign h2{margin:0 0 4px;font-size:1.4em;font-weight:900}
.qt-sub{color:var(--muted);font-size:.92em}
.qt-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;margin:14px 0}
.qt-row label,.qa-form label{display:grid;gap:6px;font-weight:700}
.qt-row input,.qa-form input,.qa-form select,.qa-form textarea{min-height:48px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:400}
.qt-pad-wrap{position:relative;border:2px dashed var(--accent);border-radius:16px;background:#fff;overflow:hidden}
.qt-pad{display:block;width:100%;height:auto;aspect-ratio:3/1;touch-action:none;cursor:crosshair}
.qt-pad-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#B9C4E4;font-size:1.4em;font-weight:800;pointer-events:none}
.qt-clear{position:absolute;right:10px;top:10px;min-height:40px;padding:0 14px}
.qt-agree{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font-weight:700;line-height:1.6}
.qt-agree input{width:24px;height:24px;flex:none;margin-top:2px}
.qt-submit{width:100%}
.qt-foot{text-align:center;color:var(--muted);font-size:.82em;margin-top:20px}
@media (max-width:640px){
  .qt-card{padding:18px 14px}
  .qt-parties,.qt-row,.qt-feat ul{grid-template-columns:1fr}
  .qt-stages{grid-template-columns:1fr}
  .qt-timer-left{margin-left:0;width:100%}
  .qt-slides{flex-wrap:wrap}.qt-slides-go{margin-left:0}
  .qt-print{display:none}
}
@media print{
  .qt-body{background:#fff}
  .qt-print,.qt-sign,.qt-state .btn,.qt-foot{display:none!important}
  .qt-card,.qt-timer,.qt-bonus{box-shadow:none;animation:none}
  .qt-doc{border:0;padding:0}
  .qt-slides{border:1px solid #999}
}

/* ===== 報價單管理 quotes.php ===== */
.qa{max-width:1100px;margin:0 auto;padding:26px 16px 60px}
.qa-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.qa-top h1{margin:0;font-size:1.6em}
.qa-muted{color:var(--muted);font-size:.9em}
.qa-msg{padding:12px 16px;border-radius:12px;background:rgba(43,182,115,.12);border:1px solid #2BB673;font-weight:700}
.qa-card{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-sm);border:1px solid var(--line);padding:22px;margin-bottom:18px}
.qa-card h2{margin:0 0 14px;font-size:1.25em}
.qa-form{display:grid;grid-gap:14px}
.qa-form fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin:0;display:grid;grid-gap:12px}
.qa-form legend{font-weight:900;padding:0 6px}
.qa-form small{font-weight:400;color:var(--muted);font-size:.82em}
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:12px}
.qa-items{display:grid;grid-gap:10px}
.qa-item{display:grid;grid-template-columns:minmax(0,1fr) 90px 140px 120px 44px;grid-gap:8px;align-items:center;padding:10px;border-radius:12px;background:var(--bg)}
.qa-item textarea{grid-column:1 / -1;min-height:auto}
.qa-sub{text-align:right;font-family:var(--mono);font-size:.92em}
.qa-del{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.3em;cursor:pointer;color:var(--muted)}
.qa-sum{align-items:end}
.qa-total{text-align:right;font-weight:700}
.qa-total b{display:block;font-size:1.6em}
.qa-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px}
.qa-stages div{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;background:var(--accent-soft)}
.qa-form-btns{display:flex;gap:10px}
.qa-list{display:grid;grid-gap:12px}
.qa-q{display:grid;grid-gap:10px;padding:16px;border-radius:14px;border:1px solid var(--line);scroll-margin-top:20px}
.qa-q.hl{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.qa-q-main{display:grid;grid-gap:2px}
.qa-badge{justify-self:start;padding:2px 10px;border-radius:999px;font-size:.78em;font-weight:800;background:var(--accent-soft);color:var(--accent)}
.s-signed .qa-badge{background:rgba(43,182,115,.15);color:#16834F}
.s-expired .qa-badge,.s-void .qa-badge{background:rgba(214,40,57,.1);color:var(--signal)}
.qa-due{color:#16834F}
.qa-link input{width:100%;min-height:40px;padding:0 10px;border-radius:10px;border:1px dashed var(--line);background:var(--bg);font-family:var(--mono);font-size:.82em;color:var(--ink)}
.qa-q-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qa-q-btns .btn{min-height:40px;padding:0 14px;font-size:.88em}
.qa-q-btns form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qa-paid label{display:flex;align-items:center;gap:6px;font-size:.88em;font-weight:700}
.qa-paid input{min-height:40px;padding:0 8px;border-radius:10px;border:1px solid var(--line)}
@media (max-width:760px){ .qa-item{grid-template-columns:1fr 1fr} .qa-item input:first-child{grid-column:1 / -1} .qa-stages{grid-template-columns:1fr} }
/* 報價單：低調模式、後台統計與跟進 */
.qt-calm{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:14px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.qt-calm .ic{width:28px;height:28px;color:var(--accent);flex:none}
.qt-calm p{margin:0}
.qa-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;margin-bottom:18px}
.qa-stats div{padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.qa-stats span{display:block;color:var(--muted);font-size:.85em}
.qa-stats b{display:block;font-size:1.6em;font-weight:900;margin:2px 0}
.qa-stats small{color:var(--muted);font-size:.78em}
.qa-todo{border-left:5px solid #F2B632}
.qa-todo-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-top:1px dashed var(--line)}
.qa-todo-row:first-of-type{border-top:0}
.qa-todo-row>div{display:grid;gap:2px}
.qa-todo-row form{display:flex;gap:8px}
.qa-todo-row .btn{min-height:40px;padding:0 14px;font-size:.88em}
.qa-todo-row.expiring b{color:var(--signal)}
.qa-check{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px!important}
.qa-check input{width:22px;height:22px;min-height:0!important}
.qa-check small{width:100%}
@media (max-width:760px){ .qa-stats{grid-template-columns:1fr 1fr} }
/* ===== 報價單精簡版＋小魔女引導 ===== */
.qt-deal{margin-bottom:14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,#FFF6DA,#FFE9B8);border:2px solid #F2B632;color:#3A2A00}
.qt-deal-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;font-size:1.05em}
.qt-deal-row b{font-size:1.15em}
.qt-deal-left strong{font-size:1.35em;color:#B5520B}
.qt-deal .qt-timer-bar{margin:10px 0 0}
.qt-deal-bonus{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.65);line-height:1.5}
.qt-deal-bonus .ic{flex:none;width:28px;height:28px;color:#B5520B}
.qt-deal.urgent{background:linear-gradient(135deg,#FFE7E9,#FFD3D7);border-color:#D62839;color:#4A0B12;animation:qtPulse 2s ease-in-out infinite}
.qt-deal.urgent .qt-deal-left strong{color:#D62839}
.qt-deal.calm{background:var(--surface);border-color:var(--line);color:var(--ink)}
.qt-deal.qt-deliver{background:linear-gradient(135deg,#E6F6EE,#D2F0E0);border-color:#2BB673;color:#0B3A22}
.qt-deal.qt-deliver .qt-deal-left strong{color:#16834F}
.qt-deal.qt-deliver .qt-timer-bar i{background:linear-gradient(90deg,#4FD1A5,#16834F)}
.qt-head2{padding-bottom:12px;border-bottom:3px solid var(--ink)}
.qt-head2 h1{margin:0;font-size:1.6em;font-weight:900;line-height:1.35}
.qt-head2 p{margin:6px 0 0;color:var(--muted);font-size:.92em}
.qt-head2 p b{color:var(--ink)}
.qt-doc .qt-slides{margin:16px 0}
.qt-doc .qt-slides b{font-size:1.1em}
.qt-tbl td small{margin-top:4px}
.qt-pay-sec{margin-top:18px}
.qt-stages>div{display:flex;flex-direction:column;align-items:flex-start;grid-template-columns:none}
.qt-stages small{font-size:.85em}
.qt-note{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--bg);line-height:1.7}
.qt-more{display:grid;grid-gap:8px;margin-top:18px}
.qt-fold{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.qt-fold summary{display:flex;align-items:center;min-height:48px;padding:0 16px;cursor:pointer;font-weight:800;list-style:none}
.qt-fold summary::-webkit-details-marker{display:none}
.qt-fold summary:after{content:"+";margin-left:auto;color:var(--accent);font-size:1.3em}
.qt-fold[open] summary:after{content:"−"}
.qt-fold .qt-feat,.qt-fold .qt-terms{margin:0;padding:0 16px 14px}
.qt-feat{list-style:none;display:grid;grid-gap:8px}
.qt-feat li{display:flex;gap:8px;line-height:1.6}
.qt-feat li .ic{flex:none;width:20px;height:20px;color:#16834F;margin-top:3px}
.qt-terms{font-size:.92em;color:var(--muted);line-height:1.8}
.qt-signed{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.qt-signed p{color:var(--muted);font-size:.9em}
.qt-signed p b{color:var(--ink)}
.qt-sign h2{margin:0 0 12px;font-size:1.4em;font-weight:900}
.qt-name{display:grid;gap:6px;margin-bottom:12px;font-weight:700}
.qt-name input{min-height:52px;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:1.1em}
.qt-next h2{margin:0 0 12px;font-size:1.3em}
.qt-next h2 span{color:#B5520B}
.qt-bank-dl{display:grid;grid-gap:8px;margin:0 0 10px;padding:14px 16px;border-radius:14px;background:var(--bg)}
.qt-bank-dl div{display:flex;gap:16px;align-items:center}
.qt-bank-dl dt{min-width:3em;color:var(--muted)}.qt-bank-dl dd{margin:0}
.qt-bank-dl dd b{font-size:1.2em;letter-spacing:.04em}
.qt-copy{margin-left:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:inherit;font-weight:700;font-size:.85em;cursor:pointer}
/* 小魔女引導 */
.qt-body.has-guide{padding-bottom:20px}
.qt-guide{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:flex-end;gap:8px;max-width:400px}
.qt-guide>img{flex:none;width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);cursor:pointer;order:2}
.qt-guide.talk>img{animation:mgTalk .6s ease}
.qt-guide-bub{position:relative;padding:14px 16px 12px;border-radius:18px 18px 4px 18px;background:var(--surface);border:2px solid var(--accent);box-shadow:var(--shadow-md)}
.qt-guide-steps{display:flex;gap:4px;list-style:none;margin:0 26px 8px 0;padding:0;counter-reset:g}
.qt-guide-steps li{counter-increment:g;font-size:.75em;font-weight:800;color:var(--muted);padding:3px 8px;border-radius:999px;background:var(--bg)}
.qt-guide-steps li:before{content:counter(g) " "}
.qt-guide-steps li.cur{background:var(--accent);color:#fff}
.qt-guide-steps li.done{background:rgba(43,182,115,.15);color:#16834F}
.qt-guide-steps li.done:before{content:"✓ "}
.qt-guide-bub p{margin:0 0 10px;font-weight:700;line-height:1.6}
.qt-guide-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.qt-guide-btns .btn{min-height:44px;padding:0 18px}
.qt-guide-btns a{font-size:.85em;color:var(--muted)}
.qt-guide-x{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--bg);font-weight:900;cursor:pointer;color:var(--muted)}
.qt-guide.min .qt-guide-bub{display:none}
.qt-guide.min>img{animation:none}
.qt-guide.min:after{content:"+";position:absolute;right:-2px;top:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.85em}
@media (min-width:1300px){ .qt-guide{right:calc(50% - 650px)} }
@media (max-width:640px){
  .qt-guide{left:10px;right:10px;bottom:10px;max-width:none}
  .qt-guide>img{width:58px;height:58px}
  .qt-guide-bub{flex:1;padding:12px 12px 10px}
  .qt-guide-bub p{font-size:.92em}
  .qt{padding-bottom:210px}
  .qt-guide.min{left:auto}
  .qt-head2 h1{font-size:1.3em}
}
@media print{ .qt-guide{display:none!important} .qt-fold summary:after{display:none} }

/* ===== 作品集頁 v2：整張卡可點、少一排按鈕、圖鑑縮成一行 ===== */
.works-hero{padding-bottom:6px}
.works-hero .lede{max-width:40em}
.card-c{padding-bottom:18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card-c:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.card-c .card-link:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;border-radius:inherit}
.card-c .card-link:focus-visible{outline:none}
.card-c:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.card-c h3{font-size:1.2em;margin-top:8px}
.card-c .pitch{margin:6px 0 12px}
.card-c-visit{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:800;font-size:.85em;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.card-c-visit:hover{background:#fff;color:var(--accent);text-decoration:none}
.card-c-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.card-c-foot .metric{border:0;padding:0;margin:0;min-width:0}
.card-c-foot .metric strong{font-size:1.3em}
.card-c-go{flex:none;font-weight:800;color:var(--accent);white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
.card-c:hover .card-c-go{text-decoration:underline}
/* 案例圖鑑：一行就好 */
.dex{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin:0 0 18px;padding:12px 18px}
.dex-top{display:contents}
.dex-top h2{font-size:1em;order:1}
.dex-bar{order:2;flex:1 1 160px;margin:0;height:10px}
.dex-n{order:3;font-size:.9em}
.dex-hint,.dex-cats{display:none}
@media (max-width:640px){ .card-c-visit{top:10px;right:10px} .card-c h3{font-size:1.12em} }

/* 任務本：書本圖示（小魔女只留給問小魔女按鈕，避免重複） */
.gq-ic{position:absolute;top:5px;left:5px;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.gq-ic .ic,.gq-ic svg{width:22px;height:22px}
@media (max-width:640px){ .gq-ic{width:30px;height:30px} .gq-ic .ic,.gq-ic svg{width:18px;height:18px} }
.ct-ok-ic{display:inline-flex;width:64px;height:64px;border-radius:50%;align-items:center;justify-content:center;background:rgba(43,182,115,.14);color:#16834F;margin-bottom:6px}
.ct-ok-ic .ic,.ct-ok-ic svg{width:34px;height:34px}
.works .dex{margin-bottom:8px}
/* 成果數字帶：拿掉與首屏重複的「已上線」，剩三格 */
.kband-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){ .kband-row{grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px 8px} .kband-row strong{font-size:1.8em} .kband-row span{font-size:.82em} }
.cta-in{grid-template-columns:1fr}
.cta-copy{max-width:760px}

/* ===== 行銷版首屏 mk-：好處標題＋優惠＋真實作品 ===== */
.mk-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:40px;padding:48px 0 40px}
.mk-hero h1{font-size:3em;line-height:1.18;margin:14px 0 16px}
.mk-hero .lede{font-size:1.15em;max-width:30em;margin:0 0 16px}
.mk-offer{display:inline-flex;align-items:center;margin:0 0 20px;padding:10px 16px;border-radius:12px;background:linear-gradient(90deg,#FFF4D6,#FFE6B0);border:1px solid #F5C451;color:#7A4A00;font-weight:800;line-height:1.5}
.mk-offer.is-dark{background:rgba(255,255,255,.12);border-color:rgba(255,214,102,.6);color:#FFE29A;margin:18px 0 6px}
.mk-hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.mk-hero .ctas .btn{margin:0}
.mk-proof{display:flex;flex-wrap:wrap;list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);gap:8px 34px}
.mk-proof li{display:flex;flex-direction:column}
.mk-proof strong{font:800 1.9em/1 var(--display);color:var(--accent-2)}
.mk-proof span{font-size:.85em;color:var(--muted);margin-top:4px}
.mk-art{position:relative;height:440px}
.mk-shot{position:absolute;display:block;width:78%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(30,20,80,.22);border:1px solid var(--line);transition:transform .35s ease}
.mk-shot .pthumb{border-radius:0}
.mk-bar{display:flex;gap:5px;padding:8px 10px;background:#F1F2F7;border-bottom:1px solid var(--line)}
.mk-bar i{width:8px;height:8px;border-radius:50%;background:#F2665E}.mk-bar i+i{background:#F5BE4F}.mk-bar i+i+i{background:#5BC466}
.mk-shot.s0{left:0;top:40px;z-index:3;transform:rotate(-2deg)}
.mk-shot.s1{right:0;top:0;z-index:2;width:62%;transform:rotate(3deg)}
.mk-shot.s2{right:4%;bottom:0;z-index:1;width:58%;transform:rotate(-1deg)}
.mk-art:hover .mk-shot.s0{transform:rotate(0) translateY(-6px)}
.mk-badge{position:absolute;left:-10px;bottom:30px;z-index:4;display:flex;flex-direction:column;padding:12px 18px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-md);border:2px solid var(--accent)}
.mk-badge b{font-size:1.15em;font-weight:900;color:var(--accent)}
.mk-badge small{font-size:.8em;color:var(--muted)}
/* 決定區 */
.mk-deal .cta-copy{max-width:820px}
.mk-deal-list{list-style:none;margin:18px 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk-deal-list li{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.mk-deal-list b{display:block;font-size:1.08em;margin-bottom:6px;color:#fff}
.mk-deal-list b:before{content:"✓ ";color:#5BE49B}
.mk-deal-list span{font-size:.9em;opacity:.85;line-height:1.6}
.mk-deal .cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (max-width:900px){
  .mk-hero{grid-template-columns:1fr;padding-top:28px}
  .mk-hero h1{font-size:2.2em}
  .mk-art{height:300px;max-width:520px;width:100%;margin:0 auto}
  .mk-deal-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mk-hero h1{font-size:1.85em}
  .mk-hero .ctas .btn{flex:1 1 100%}
  .mk-art{height:240px}
  .mk-badge{left:0;bottom:8px;padding:8px 12px}
  .mk-proof{gap:8px 22px}
  .mk-proof strong{font-size:1.6em}
}
.mk-deal .cta-copy{max-width:none}
.mk-hero .lede{margin-bottom:26px}
/* ===== 報價單收款紀錄 ===== */
.qa-pay{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.qa-pay-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:10px}
.qa-pay-head>b{font-size:1.05em}
.qa-pay-sum{font-size:.92em}
.qa-pay-sum em{font-style:normal;color:#B45309;font-weight:800}
.qa-pay-sum strong{color:#16834F}
.qa-pay-stages{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.qa-pay-stages li{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:.88em;font-weight:700}
.qa-pay-stages li small{font-weight:600;color:var(--muted)}
.qa-pay-stages li.ok{border-color:rgba(43,182,115,.5);background:rgba(43,182,115,.08)}
.qa-pay-stages li.ok small{color:#16834F}
.qa-pay-tbl{width:100%;border-collapse:collapse;font-size:.9em;margin-bottom:12px}
.qa-pay-tbl th,.qa-pay-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.qa-pay-tbl th{font-size:.85em;color:var(--muted)}
.qa-pay-tbl .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.qa-pm{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85em;font-weight:800;background:#E8F0FE;color:#1D4ED8}
.qa-pm.pm-linepay{background:#E7F8EE;color:#06A14A}
.qa-x{border:0;background:none;color:#B91C1C;font-weight:700;cursor:pointer;min-height:36px}
.qa-pay-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.qa-pay-form label{display:flex;flex-direction:column;gap:4px;font-size:.85em;font-weight:700}
.qa-pay-form input,.qa-pay-form select{min-height:42px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:1rem}
.qa-pay-form input[name=amount]{width:9em}
.qa-pay-note{flex:1 1 180px}
.qa-pay-done{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qa-q-btns2:empty{display:none}
/* 客戶頁：各期已收 */
.qt-stages .paid{border-color:rgba(43,182,115,.55);background:rgba(43,182,115,.07)}
.qt-stages em{display:block;font-style:normal;font-size:.82em;font-weight:800;color:#16834F;margin-top:4px}
.qt-paysum{margin:10px 0 0;font-size:.95em}
.qt-paysum b{color:#16834F}
@media (max-width:640px){ .qa-pay-form label,.qa-pay-form .btn{flex:1 1 100%} .qa-pay-form input[name=amount]{width:100%} }
.qa-q-btns2 form{display:inline-flex;flex-wrap:wrap;gap:8px}
.qa-del-btn{color:#B91C1C;border-color:rgba(185,28,28,.35)}
.qa-del-btn:hover{background:#FEF2F2;color:#991B1B}
/* ===== 報價單管理 v2：卡片整理、按鈕一排、收款可收合 ===== */
.qa>section,.qa>.qa-stats{margin:0 0 18px}
.qa-msg{margin:0 0 18px}
.qa-list{grid-gap:14px}
.qa-q{grid-gap:8px;padding:18px 20px;background:var(--surface)}
.qa-q-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qa-q-id{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.qa-no{font-family:var(--mono);font-size:.85em;color:var(--muted)}
.qa-chip{padding:2px 8px;border-radius:999px;font-size:.75em;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.qa-q-amt{font-size:1.35em;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.qa-q-title{margin:0;font-size:1.15em;font-weight:900;line-height:1.4}
.qa-q-meta{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;font-size:.88em;color:var(--muted)}
.qa-q-meta span+span:before{content:"・";margin:0 2px}
p.qa-due{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:.9em;font-weight:700}
p.qa-due .ic{width:1.1em;height:1.1em}
.qa-q-btns{margin-top:4px}
.qa-q-btns .btn{white-space:nowrap}
.qa-q-btns form{display:contents}
.qa-q-btns .qa-qdel{display:block;margin-left:auto}
.qa-del-btn{min-width:64px}
/* 收款面板 */
.qa-pay{margin-top:6px;padding:0;overflow:hidden}
.qa-pay>*:not(summary){margin-left:16px;margin-right:16px}
.qa-pay>*:last-child{margin-bottom:14px}
.qa-pay-head{list-style:none;cursor:pointer;margin:0;padding:12px 16px;position:relative;padding-right:40px}
.qa-pay-head::-webkit-details-marker{display:none}
.qa-pay-head:after{content:"+";position:absolute;right:14px;top:50%;margin-top:-.6em;font-weight:900;color:var(--accent)}
.qa-pay[open]>.qa-pay-head{border-bottom:1px solid var(--line);margin-bottom:12px}
.qa-pay[open]>.qa-pay-head:after{content:"−"}
.qa-pay-stages li{flex:1 1 150px}
.qa-pay-tbl{table-layout:fixed}
.qa-pay-tbl .c-d{width:7.2em}.qa-pay-tbl .c-m{width:7.5em}.qa-pay-tbl .c-a{width:8.5em}.qa-pay-tbl .c-x{width:4.5em}
.qa-pay-tbl td{overflow-wrap:anywhere}
.qa-pay-tbl td:last-child{text-align:right}
.qa-pay-tbl .n{padding-right:14px}
.qa-pay-done{margin-top:12px}
@media (max-width:640px){
  .qa-q{padding:14px}
  .qa-q-btns .qa-qdel{margin-left:0}
  .qa-pay-tbl .c-d{width:6.2em}.qa-pay-tbl .c-m{width:6.5em}.qa-pay-tbl .c-a{width:7em}
}
.qa>.qa-stats{padding:0}
.qa-pay-head,.qa-pay-head b{color:var(--ink)}
.qa-pay-tbl{width:calc(100% - 32px)}
.qa-pay-form .btn,.qa-pay-done .btn{width:auto;flex:0 0 auto;min-height:44px}
.qa-pay-form{align-items:flex-end}
@media (max-width:640px){ .qa-pay-form .btn{flex:1 1 100%;width:100%} }
p.qa-due{display:block}
p.qa-due .ic{vertical-align:-.15em;margin-right:4px}
@media (max-width:640px){
  .qa{padding-left:12px;padding-right:12px}
  .qa-card{padding:16px 12px}
  .qa-q{padding:14px 12px}
  .qa-q-meta{display:block}
  .qa-pay>*:not(summary){margin-left:10px;margin-right:10px}
  .qa-pay-head{padding:12px 34px 12px 12px}
  .qa-pay-head:after{right:10px}
  .qa-pay-tbl,.qa-pay-tbl tbody{display:block;width:auto}
  .qa-pay-tbl colgroup,.qa-pay-tbl thead{display:none}
  .qa-pay-tbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .qa-pay-tbl td{border:0;padding:0}
  .qa-pay-tbl td.n{margin-left:auto;padding:0}
  .qa-pay-tbl td:nth-child(4){order:5;width:100%;font-size:.85em;color:var(--muted)}
  .qa-pay-tbl td:nth-child(4):empty{display:none}
  .qa-pay-tbl td:last-child{order:4}
  .qa-stats{grid-gap:8px}
  .qa-stats div{padding:12px}
}
/* ===== 客戶報價單：進度卡（簽署→付款→交付）＋付款紀錄 ===== */
.qt-track{margin:0 0 16px;padding:20px 22px;border-radius:18px;background:var(--surface);border:2px solid rgba(43,182,115,.45);box-shadow:var(--shadow-sm)}
.qt-track.done{background:linear-gradient(135deg,#E9F8F0,#F4FBF7)}
.qt-track h2{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:1.2em;font-weight:900;color:#14532D}
.qt-track h2 .ic{width:1.5em;height:1.5em;color:#16834F;flex:none}
.qt-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;counter-reset:qs;position:relative}
.qt-steps li{position:relative;counter-increment:qs;padding:0 8px 0 0}
.qt-steps li:before{content:counter(qs);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:8px;border-radius:50%;background:var(--bg);border:2px solid var(--line);color:var(--muted);font-weight:900;position:relative;z-index:1}
.qt-steps li:after{content:"";position:absolute;left:34px;right:0;top:16px;height:3px;background:var(--line)}
.qt-steps li:last-child:after{display:none}
.qt-steps li.ok:before{content:"✓";background:#16A34A;border-color:#16A34A;color:#fff}
.qt-steps li.ok:after{background:#16A34A}
.qt-steps li.now:before{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.qt-steps b{display:block;font-size:1em}
.qt-steps span{display:block;font-size:.88em;color:var(--muted);line-height:1.5;margin-top:2px}
.qt-steps li.ok span{color:#16834F;font-weight:700}
.qt-track-cd{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.qt-track-cd span{font-size:.95em}
.qt-track-cd strong{font-size:1.15em;color:var(--accent)}
.qt-track-cd .qt-timer-bar{margin-top:8px}
.qt-paylog{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.qt-paylog h3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 0 8px;font-size:1em}
.qt-paylog h3 span{font-size:.9em;font-weight:700;color:#16834F}
.qt-paylog ul{list-style:none;margin:0;padding:0}
.qt-paylog li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.qt-paylog li:first-child{border-top:0}
.qt-pl-d{min-width:6.5em;font-variant-numeric:tabular-nums}
.qt-paylog li b{margin-left:auto;font-variant-numeric:tabular-nums}
.qt-pm{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85em;font-weight:800;background:#E8F0FE;color:#1D4ED8}
.qt-pm.pm-linepay{background:#E7F8EE;color:#06A14A}
@media (max-width:640px){
  .qt-track{padding:16px}
  .qt-steps li:before{width:30px;height:30px}
  .qt-steps li:after{left:30px;top:14px}
  .qt-steps span{font-size:.8em}
  .qt-paylog li{gap:8px;flex-wrap:nowrap;font-size:.92em}
  .qt-paylog li b{white-space:nowrap}
  .qt-pl-d{min-width:0}
}
@media print{ .qt-track{box-shadow:none} }
.qt-stages em.part{color:#B45309}

/* ===== 網站藍圖積木估價器 ===== */
.bp-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px;align-items:start;margin-top:8px}
.bp-step{margin:0 0 26px;padding:0}
.bp-step h2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:1.3em;margin:0 0 14px}
.bp-step h2 small{font-size:.65em;font-weight:600;color:var(--muted)}
.bp-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900}
.bp-bases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bp-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.bp-base,.bp-block{position:relative;display:block;cursor:pointer}
.bp-base input,.bp-block input{position:absolute;opacity:0;width:1px;height:1px}
.bp-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px;border-radius:16px;border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}
.bp-card:hover{transform:translateY(-2px)}
.bp-ic{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.bp-ic .ic{width:26px;height:26px}
.bp-card b{font-size:1.08em}
.bp-card small{color:var(--muted);line-height:1.6}
.bp-card em{font-style:normal;font-weight:800;color:var(--accent);margin-top:auto}
.bp-card em span{display:block;font-weight:600;font-size:.82em;color:var(--muted)}
.bp-base input:checked+.bp-card,.bp-block input:checked+.bp-card{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--surface));box-shadow:0 0 0 4px var(--glow)}
.bp-base input:focus-visible+.bp-card,.bp-block input:focus-visible+.bp-card{outline:3px solid var(--accent);outline-offset:2px}
.bp-block .bp-card{display:grid;grid-template-columns:44px 1fr;align-items:start;gap:4px 12px;padding:12px 14px}
.bp-block .bp-txt{display:flex;flex-direction:column;min-width:0}
.bp-block .bp-txt small{font-size:.82em}
.bp-block em{grid-column:2;margin:0;white-space:nowrap;font-size:.88em}
.bp-chk{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);background:var(--surface)}
.bp-block input:checked+.bp-card .bp-chk{background:var(--accent);border-color:var(--accent)}
.bp-block input:checked+.bp-card .bp-chk:after{content:"✓";display:block;color:#fff;font-weight:900;font-size:14px;line-height:18px;text-align:center}
.bp-block.fixed{cursor:default}.bp-block.fixed .bp-card{opacity:.85}
.bp-block .bp-card{padding-right:38px}
.bp-sum{position:sticky;top:90px;padding:20px;border-radius:20px;background:var(--surface);border:2px solid var(--accent);box-shadow:var(--shadow-md)}
.bp-sum h2{margin:0 0 12px;font-size:1.2em}
.bp-tower{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;min-height:120px;padding:10px 0 4px;border-bottom:3px solid #8B5E3C}
.bp-brick{max-width:100%;padding:7px 10px;border-radius:8px;color:#fff;font-weight:800;font-size:.82em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);box-sizing:border-box}
.bp-brick.base{width:100%!important;background:#334155;padding:10px}
.bp-brick.drop{animation:bpDrop .45s cubic-bezier(.3,1.4,.6,1)}
@keyframes bpDrop{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.bp-say{display:flex;gap:10px;align-items:flex-start;margin:14px 0}
.bp-say img{width:52px;height:52px;border-radius:50%;flex:none;background:var(--accent-soft)}
.bp-say p{margin:0;padding:10px 14px;border-radius:4px 14px 14px 14px;background:var(--accent-soft);font-weight:700;line-height:1.6;font-size:.95em}
.bp-total{margin:0 0 12px;display:grid;gap:8px}
.bp-total div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
.bp-total dt{color:var(--muted);font-weight:700}
.bp-total dd{margin:0;text-align:right;font-weight:900;font-size:1.15em}
.bp-total dd small{display:block;font-size:.7em;font-weight:600;color:var(--muted)}
#bpPrice{font-size:1.45em;color:var(--accent)}
.bp-cases h3{font-size:.92em;margin:6px 0 8px}
.bp-case-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bp-case-row a{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none;font-size:.75em;font-weight:700;line-height:1.35}
.bp-case-row img,.bp-noimg{display:block;width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--accent-soft)}
.bp-fine{font-size:.8em;color:var(--muted);margin:12px 0}
.bp-go{width:100%}
.bp-note{padding:12px 16px;border-radius:12px;background:#FFFBEB;border:1px solid #FCD34D}
.bp-send{max-width:760px;margin:40px auto 0;padding:26px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-md);border:1px solid var(--line);scroll-margin-top:90px}
.bp-form h2,.bp-done h2{margin:0 0 4px}
.bp-sub{color:var(--muted);margin:0 0 16px}
.bp-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bp-fields label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.bp-fields input,.bp-fields select,.bp-fields textarea,.hc-lead-f input{min-height:50px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);font:inherit;color:var(--ink)}
.bp-wide{grid-column:1 / -1}
.bp-via{display:flex;gap:10px;align-items:flex-end}
.bp-via label{flex-direction:row!important;align-items:center;gap:8px;min-height:50px;padding:0 16px;border-radius:12px;border:2px solid var(--line);font-weight:700;cursor:pointer;display:flex}
.bp-via input{width:20px;height:20px;min-height:0}
.bp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bp-err{color:var(--signal);font-weight:700}
.bp-form .btn{margin-top:14px;width:100%}
.bp-done{text-align:center}
.bp-done-ic{display:inline-flex;width:72px;height:72px;border-radius:50%;align-items:center;justify-content:center;background:rgba(43,182,115,.14);color:#16834F}
.bp-done-ic .ic{width:38px;height:38px}
@media (max-width:980px){ .bp-grid{grid-template-columns:1fr} .bp-sum{position:static} }
@media (max-width:640px){ .bp-bases,.bp-blocks,.bp-fields{grid-template-columns:1fr} .bp-block .bp-card{grid-template-columns:40px 1fr} .bp-block em{grid-column:2;grid-row:auto} .bp-send{padding:20px 16px} }

/* ===== 網站健檢小遊戲 ===== */
.hc-hero{text-align:center}
.hc-hero .lede{margin-left:auto;margin-right:auto}
.hc-form{display:flex;gap:10px;max-width:640px;margin:18px auto 8px}
.hc-form input{flex:1;min-width:0;min-height:58px;padding:0 18px;border-radius:14px;border:2px solid var(--accent);background:var(--surface);font:inherit;font-size:1.1em;color:var(--ink)}
.hc-form .btn{flex:none}
.hc-fine{font-size:.85em;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hc-load{display:flex;flex-direction:column;align-items:center;gap:14px;margin:30px auto;max-width:420px}
.hc-witch{width:110px;height:110px;border-radius:50%;background:var(--accent-soft);animation:hcCast 1.2s ease-in-out infinite}
@keyframes hcCast{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.05)}}
.hc-steps{list-style:none;margin:0;padding:0;width:100%}
.hc-steps li{padding:8px 14px;margin:4px 0;border-radius:10px;color:var(--muted);opacity:.45}
.hc-steps li.now{opacity:1;background:var(--accent-soft);color:var(--accent);font-weight:800}
.hc-steps li.done{opacity:1;color:#16834F}.hc-steps li.done:before{content:"✓ "}
.hc-err{max-width:640px;margin:16px auto;padding:14px 18px;border-radius:12px;background:#FFF1F2;border:1px solid #FDA4AF;color:#9F1239;font-weight:700;text-align:center}
.hc-res{max-width:900px;margin:20px auto 0;scroll-margin-top:80px}
.hc-top{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;padding:24px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.hc-ring{position:relative;width:200px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hc-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hc-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.hc-ring .bg{stroke:var(--bg)}
.hc-ring .fg{stroke:#22C55E;transition:stroke-dashoffset .05s linear}
.hc-ring .fg.g-B{stroke:#84CC16}.hc-ring .fg.g-C{stroke:#F59E0B}.hc-ring .fg.g-D{stroke:#EF4444}.hc-ring .fg.g-S{stroke:#8B5CF6}
.hc-ring b{position:relative;font-size:3.4em;font-weight:900;line-height:1}
.hc-ring small{position:relative;color:var(--muted);font-weight:700}
.hc-host{margin:0;color:var(--muted);font-family:var(--mono);word-break:break-all}
.hc-grade{display:flex;align-items:center;gap:12px;margin:6px 0 10px}
.hc-grade span{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;font-size:2em;font-weight:900;color:#fff;background:#22C55E}
.hc-grade span.g-S{background:linear-gradient(135deg,#8B5CF6,#EC4899)}.hc-grade span.g-B{background:#84CC16}.hc-grade span.g-C{background:#F59E0B}.hc-grade span.g-D{background:#EF4444}
.hc-grade b{font-size:1.25em}
.hc-hp{display:flex;align-items:center;gap:10px;font-weight:800}
.hc-hp i{flex:1;height:18px;border-radius:999px;background:var(--bg);border:2px solid var(--line);overflow:hidden}
.hc-hp em{display:block;height:100%;width:0;background:linear-gradient(90deg,#22C55E,#86EFAC);transition:width .05s linear}
.hc-hp em.g-C{background:linear-gradient(90deg,#F59E0B,#FCD34D)}.hc-hp em.g-D{background:linear-gradient(90deg,#EF4444,#FCA5A5)}.hc-hp em.g-S{background:linear-gradient(90deg,#8B5CF6,#EC4899)}
.hc-say{margin:12px 0 0;padding:12px 16px;border-radius:12px;background:var(--accent-soft);font-weight:700;line-height:1.7}
.hc-h2{font-size:1.2em;margin:28px 0 12px}.hc-h2 small{font-size:.75em;color:var(--muted)}
.hc-badges{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.hc-badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;background:var(--surface);border:2px dashed var(--line);text-align:center;font-size:.85em;color:var(--muted);filter:grayscale(1);opacity:.6;animation:hcPop .5s both}
.hc-badge span{display:inline-flex;width:52px;height:52px;border-radius:50%;align-items:center;justify-content:center;background:var(--bg)}
.hc-badge span .ic{width:28px;height:28px}
.hc-badge.ok{filter:none;opacity:1;border:2px solid #F59E0B;color:var(--ink);background:linear-gradient(180deg,#FFFBEB,var(--surface))}
.hc-badge.ok span{background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#fff}
@keyframes hcPop{from{transform:scale(.6);opacity:0}}
.hc-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hc-items li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.hc-items .ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:900;color:#fff;background:#22C55E}
.hc-items .st-warn .ic{background:#F59E0B}.hc-items .st-bad .ic{background:#EF4444}
.hc-items b{font-size:1.02em}
.hc-items p{margin:4px 0 0;color:var(--muted);line-height:1.6;font-size:.92em}
.hc-items p.fix{color:var(--ink);background:#F0F9FF;border-radius:10px;padding:8px 12px;margin-top:8px}
.hc-items p.fix em{display:block;font-style:normal;font-weight:800;color:var(--accent);font-size:.85em}
.hc-items p.fix.lock{background:var(--bg);color:var(--muted)}
.hc-items .pt{font-weight:800;color:var(--muted);white-space:nowrap;font-size:.88em}
.hc-unlock{margin:24px 0 0;padding:22px;border-radius:20px;border:2px solid var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--surface) 60%)}
.hc-unlock h3{margin:0 0 6px;font-size:1.25em}
.hc-lead-f{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin-top:12px}
.hc-lead-f label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.hc-unlock .btn{margin-top:12px}
.hc-unlocked{display:flex;align-items:center;gap:8px;font-weight:800;color:#16834F}
.hc-unlocked .ic{width:24px;height:24px}
.hc-more{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 0}
@media (max-width:760px){ .hc-form{flex-direction:column} .hc-form .btn{width:100%} .hc-top{grid-template-columns:1fr;justify-items:center;text-align:center} .hc-grade{justify-content:center} .hc-badges{grid-template-columns:repeat(3,minmax(0,1fr))} .hc-lead-f{grid-template-columns:1fr} .hc-more .btn{width:100%} .hc-items li{grid-template-columns:32px 1fr} .hc-items .pt{grid-column:2} }
/* 首頁：免費小工具（注意：.tools 是頁首按鈕群組，這裡用 .tool-grid） */
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
.tool-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:16px;align-items:center;min-height:250px;padding:26px 24px 26px 28px;border-radius:24px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 16px 40px -18px rgba(30,20,80,.45);transition:transform .2s ease,box-shadow .2s ease;box-sizing:border-box}
.tool-card:before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -18px rgba(30,20,80,.55)}
.tool-card:focus-visible{outline:4px solid var(--star);outline-offset:3px}
.tool-card.t-health{background:linear-gradient(135deg,#047857,#10B981 65%,#34D399)}
.tool-card.t-bp{background:linear-gradient(135deg,#4338CA,#7C3AED 60%,#DB2777)}
.tool-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%}
.tool-tag{display:inline-flex;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.22);font-size:.82em;font-weight:800;letter-spacing:.04em}
.tool-txt b{font-size:1.5em;line-height:1.3}
.tool-p{line-height:1.75;opacity:.96}
.tool-btn{display:inline-flex;align-items:center;min-height:50px;margin-top:auto;padding:0 22px;border-radius:999px;background:#fff;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .2s ease}
.t-health .tool-btn{color:#047857}.t-bp .tool-btn{color:#5B21B6}
.tool-card:hover .tool-btn{transform:translateX(4px)}
.tool-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.ta-ring{position:relative;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.15)}
.ta-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ta-ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ta-ring .bg{stroke:rgba(255,255,255,.25)}
.ta-ring .fg{stroke:#fff;stroke-dasharray:314;stroke-dashoffset:314;animation:taRing 1.6s .3s ease-out forwards}
@keyframes taRing{to{stroke-dashoffset:44}}
.ta-ring b{position:relative;font-size:2.4em;font-weight:900;line-height:1}
.ta-ring small{position:relative;margin-top:2px;padding:0 10px;border-radius:999px;background:#fff;color:#047857;font-weight:900}
.ta-badges{display:flex;gap:6px}
.ta-badges i{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;background:linear-gradient(135deg,#FCD34D,#F59E0B);color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.ta-badges i.off{background:rgba(255,255,255,.25)}
.ta-badges .ic{width:18px;height:18px}
.ta-tower{display:flex;flex-direction:column;align-items:center;gap:4px;width:140px;padding-bottom:6px;border-bottom:3px solid rgba(255,255,255,.6)}
.ta-tower i{display:block;padding:6px 8px;border-radius:7px;font-style:normal;font-weight:800;font-size:.78em;text-align:center;white-space:nowrap;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);animation:taDrop .5s both}
.ta-tower .b0{width:100%;background:#1E293B;animation-delay:.1s}
.ta-tower .b1{width:86%;background:#F59E0B;animation-delay:.35s}
.ta-tower .b2{width:76%;background:#10B981;animation-delay:.6s}
.ta-tower .b3{width:66%;background:#EC4899;animation-delay:.85s}
@keyframes taDrop{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
.ta-price{padding:4px 12px;border-radius:999px;background:#fff;color:#5B21B6;font-weight:900;font-size:.85em}
@media (prefers-reduced-motion:reduce){ .ta-ring .fg,.ta-tower i{animation:none;stroke-dashoffset:44} }
@media (max-width:980px){ .tool-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .tool-card{grid-template-columns:1fr;padding:22px 20px} .tool-art{flex-direction:row;justify-content:flex-start;order:-1} .ta-ring{width:96px;height:96px} .ta-ring b{font-size:1.9em} .ta-tower{width:130px} .tool-btn{width:100%;justify-content:center} }
/* 藍圖 v2：字少一點、積木變小方塊 */
.bp-hero .lede{margin-bottom:0}
.bp-step{margin-bottom:22px}
.bp-base .bp-card{gap:4px;padding:14px}
.bp-base .bp-card small{font-size:.88em}
.bp-incl{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-size:.9em;font-weight:700;color:#166534}
.bp-incl .ic{width:20px;height:20px;padding:2px;border-radius:50%;background:#DCFCE7}
.bp-blocks{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;gap:10px}
.bp-block .bp-card{grid-template-columns:40px 1fr!important;grid-template-rows:auto auto;align-items:center;gap:0 10px!important;padding:12px 34px 12px 12px!important;min-height:72px}
.bp-block .bp-ic{grid-row:1 / 3;width:40px;height:40px}
.bp-block b{font-size:.98em;line-height:1.35}
.bp-block em{grid-column:2!important;grid-row:2!important;font-size:.82em!important}
.bp-send{max-width:640px}
@media (max-width:640px){ .bp-fields{grid-template-columns:1fr} .bp-via{flex-wrap:wrap} }
@media (max-width:640px){ .bp-blocks{grid-template-columns:1fr 1fr!important} .bp-block .bp-card{grid-template-columns:1fr!important;padding:12px!important} .bp-block .bp-ic{grid-row:auto;width:34px;height:34px} .bp-block em{grid-column:1!important;grid-row:auto!important} }
/* ===== 報價單：讓客戶自己選方案 ===== */
.qt-plans{margin:0 0 18px;scroll-margin-top:16px}
.qt-plans h2{margin:0 0 10px;font-size:1.15em}
.qt-cycle{display:inline-flex;gap:4px;padding:4px;margin:0 0 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.qt-cycle a,.qt-cycle span{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;font-weight:800;color:var(--ink);text-decoration:none}
.qt-cycle .on{background:var(--accent);color:#fff}
.qt-plan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.qt-plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 16px 16px;border-radius:16px;border:2px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
a.qt-plan:hover{transform:translateY(-2px);border-color:var(--accent)}
.qt-plan.on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),var(--surface));box-shadow:0 0 0 4px var(--glow)}
.qt-plan b{font-size:1.15em}
.qt-plan-p{font-size:1.6em;font-weight:900;color:var(--accent)}
.qt-plan-p small{font-size:.5em;color:var(--muted);font-weight:700}
.qt-plan-y{font-size:.88em;font-weight:800;color:#16834F}
.qt-plan ul{margin:4px 0 0;padding-left:1.1em;font-size:.88em;line-height:1.7;color:var(--muted)}
.qt-plan-rec{position:absolute;top:-11px;right:14px;padding:2px 12px;border-radius:999px;background:linear-gradient(90deg,#F59E0B,#EF4444);color:#fff;font-size:.78em;font-weight:900}
.qt-plan-pick{margin-top:auto;padding-top:10px;text-align:center;font-weight:900;color:var(--accent)}
.qt-plan.on .qt-plan-pick{color:#16834F}
.qa-plan-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:2px 0 0;padding:8px 12px;border-radius:10px;background:var(--accent-soft);font-size:.9em}
@media print{ .qt-cycle a:not(.on),a.qt-plan:not(.on){display:none} }

/* ---------- 修改需求單（客戶頁 request.php ＋ 後台 reqs.php） ---------- */
.rq-eyebrow{margin:0;color:var(--accent);font-weight:900;letter-spacing:.1em;font-size:.85em}
.rq-sum h1{margin:2px 0 4px;font-size:1.7em;font-weight:900}
.rq-plan{margin:0;font-weight:800;color:var(--muted)}
.rq-note{margin:6px 0 12px}
.rq-meter{margin-top:14px;padding:16px;border-radius:16px;background:var(--accent-soft)}
.rq-meter.full{background:rgba(214,40,57,.08)}
.rq-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:800}
.rq-meter-top b{font-size:1.8em;font-weight:900;line-height:1}
.rq-meter-top small{font-size:.5em;color:var(--muted)}
.rq-meter p{margin:8px 0 0;font-size:.95em}
.rq-bar{height:12px;border-radius:999px;background:rgba(11,21,48,.10);overflow:hidden;margin-top:8px}
.rq-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.rq-meter.full .rq-bar i{background:var(--signal)}
.rq-done-line{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:rgba(43,182,115,.12);color:var(--ok);font-weight:700}
.rq-done-line b{font-size:1.15em}
.rq-new-btn{width:100%;margin-top:16px;font-size:1.1em;min-height:60px;border-radius:14px}
.rq-rules{margin-top:14px;border-top:1px dashed var(--line);padding-top:8px}
.rq-rules summary{cursor:pointer;font-weight:800;color:var(--accent);min-height:44px;display:flex;align-items:center}
.rq-rules ul{margin:6px 0 0;padding-left:1.2em;color:var(--muted);font-size:.95em}
.rq-rules li{margin:4px 0}
.rq-ok{margin:0 0 16px;padding:16px 18px;border-radius:16px;background:rgba(43,182,115,.12);border:2px solid #2BB673}
.rq-ok b{font-size:1.1em}.rq-ok p{margin:6px 0 0;font-size:.95em}
.rq-err{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(214,40,57,.08);border:2px solid var(--signal);color:var(--signal);font-weight:800}
.rq-form h2{margin:0 0 6px;font-size:1.4em;font-weight:900}
.rq-step{border:0;margin:18px 0 0;padding:0}
.rq-step legend{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.12em;padding:0;margin-bottom:10px}
.rq-step legend span{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-size:.9em;flex:none}
.rq-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rq-chip{position:relative;display:block;cursor:pointer}
.rq-chip input{position:absolute;opacity:0;width:1px;height:1px}
.rq-chip span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:8px 10px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-weight:800;line-height:1.3}
.rq-chip.bug span{border-style:dashed}
.rq-chip input:checked+span{border-color:var(--accent);background:var(--accent);color:#fff}
.rq-chip input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.rq-lbl{display:block;margin:12px 0 6px;font-weight:700;font-size:.95em;color:var(--muted)}
.rq-form textarea,.rq-form input[type=text],.rq-form input[type=date],.rq-more textarea{display:block;width:100%;font:inherit;font-size:max(16px,1em);padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);min-height:52px}
.rq-form textarea:focus,.rq-form input:focus,.rq-more textarea:focus{border-color:var(--accent);outline:none}
.rq-hint{margin:0 0 10px;color:var(--muted);font-size:.92em}
.rq-pick{display:block;cursor:pointer}
.rq-pick input{position:absolute;opacity:0;width:1px;height:1px}
.rq-pick span{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;border:2px dashed var(--accent);color:var(--accent);font-weight:900;font-size:1.05em;background:var(--accent-soft)}
.rq-pick input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.rq-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px}
.rq-th{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.rq-th img{display:block;width:100%;height:96px;object-fit:cover}
.rq-th button{display:block;width:100%;min-height:40px;border:0;background:var(--surface);color:var(--signal);font:800 .9em var(--body);cursor:pointer;border-top:1px solid var(--line)}
.rq-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rq-check{display:flex;align-items:center;gap:10px;margin-top:14px;min-height:48px;font-weight:700;cursor:pointer}
.rq-check input{width:24px;height:24px;flex:none}
.rq-est{margin:20px 0 0;padding:14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-weight:700}
.rq-est.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.rq-est.on.quote{background:rgba(224,165,27,.14);border-color:#E0A51B}
.rq-est.on.ok{background:rgba(43,182,115,.12);border-color:#2BB673}
.rq-est.on.warn{background:rgba(214,40,57,.08);border-color:var(--signal)}
.rq-send{width:100%;margin-top:14px;min-height:62px;font-size:1.2em;border-radius:14px}
.rq-send[disabled]{opacity:.6;cursor:wait}
.rq-cancel{display:block;text-align:center;margin-top:12px;color:var(--muted);min-height:44px;line-height:44px}
.rq-list h2{margin:24px 0 12px;font-size:1.3em;font-weight:900}
.rq-list h2 small{font-size:.65em;color:var(--muted);font-weight:700}
.rq-item.hl{border:2px solid #2BB673}
.rq-item h3,.rqa-req h3{margin:8px 0 6px;font-size:1.15em;font-weight:900}
.rq-item h3 small,.rqa-req h3 small{display:block;font-size:.72em;color:var(--muted);font-weight:600}
.rq-item-top{display:flex;flex-wrap:wrap;gap:6px}
.rq-st,.rq-kind,.rq-rush,.rqa-due{display:inline-block;padding:2px 12px;border-radius:999px;font-size:.82em;font-weight:900;background:var(--bg);border:1px solid var(--line)}
.st-new .rq-st{background:#1667C7;color:#fff;border-color:#1667C7}
.st-doing .rq-st{background:#E0A51B;color:#1A1200;border-color:#E0A51B}
.st-ask .rq-st{background:#D62839;color:#fff;border-color:#D62839}
.st-quote .rq-st{background:#6A4FD8;color:#fff;border-color:#6A4FD8}
.st-done .rq-st{background:#1B7A43;color:#fff;border-color:#1B7A43}
.st-no .rq-st{background:#5B6680;color:#fff;border-color:#5B6680}
.rq-kind.k-small{color:var(--accent)}
.rq-kind.k-fix{color:var(--ok)}
.rq-kind.k-big{color:#8A5A00;background:rgba(224,165,27,.14);border-color:#E0A51B}
.rq-rush,.rqa-due.late{background:var(--signal);color:#fff;border-color:var(--signal)}
.rq-what{margin:0;white-space:normal;overflow-wrap:anywhere}
.rq-page{margin:6px 0 0;font-size:.9em;color:var(--muted);overflow-wrap:anywhere}
.rq-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rq-imgs a{display:block;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.rq-imgs img{width:100%;height:100%;object-fit:cover;display:block}
.rq-meta{margin:8px 0 0;font-size:.9em;color:var(--ok);font-weight:700}
.rq-thread{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.rq-thread li{padding:10px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.rq-thread li.us{background:var(--accent-soft);border-color:transparent}
.rq-thread b{display:block;font-size:.85em}
.rq-thread span{display:block;overflow-wrap:anywhere}
.rq-thread small{color:var(--muted);font-size:.8em}
.rq-quote{margin-top:12px;width:100%}
.rq-more{margin-top:12px;border-top:1px dashed var(--line);padding-top:4px}
.rq-more summary{cursor:pointer;font-weight:800;color:var(--accent);min-height:48px;display:flex;align-items:center}
.rq-more form{display:grid;gap:8px}
.st-ask .rq-more summary{color:var(--signal)}
@media (max-width:560px){ .rq-row{grid-template-columns:1fr} .rq-chips{grid-template-columns:1fr 1fr} .rq-sum h1{font-size:1.45em} }
/* 後台 */
.rqa-clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rqa-client{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.rqa-c-head b{display:block;font-size:1.15em}
.rqa-c-head span{color:var(--muted);font-size:.9em}
.rqa-c-min{margin:6px 0 0}
.rqa-c-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.rqa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rqa-grid label,.rqa-wide{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.92em}
.rqa-wide{margin-top:12px}
.rqa-grid small{font-weight:400;color:var(--muted)}
.rqa-grid input,.rqa-grid select,.rqa-wide textarea{font:inherit;font-weight:400;min-height:48px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%}
.rqa-min{display:flex;gap:6px}.rqa-min input{flex:1;min-width:0}.rqa-min select{flex:1;min-width:0}
.rqa-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.rqa-del{margin-top:6px;text-align:right}
.rqa-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rqa-tabs a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;border:2px solid var(--line);text-decoration:none;font-weight:800}
.rqa-tabs a.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rqa-req{padding:16px 0;border-top:1px solid var(--line)}
.rqa-req:first-of-type{border-top:0}
.rqa-edit{margin-top:14px;padding:14px;border-radius:14px;background:var(--bg)}
.rqa-empty{padding:24px 0;text-align:center}
@media print{ .rq-form,.rq-more,.rq-new-btn{display:none} }

/* ---------- 修改需求單 v2：吸睛版 ---------- */
.rq-body{background:
  radial-gradient(900px 500px at 8% -10%,rgba(99,102,241,.16),transparent 60%),
  radial-gradient(800px 480px at 105% 10%,rgba(20,184,166,.14),transparent 60%),
  var(--bg);background-attachment:fixed}
main.rq{max-width:1120px}
.rq-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px 36px;border-radius:28px;color:#fff;
  background:linear-gradient(135deg,#0B1A4A 0%,#1E3A8A 45%,#4C1D95 100%);box-shadow:0 24px 60px -24px rgba(30,58,138,.55);margin-bottom:18px;isolation:isolate}
.rq-hero:before,.rq-hero:after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55}
.rq-hero:before{width:340px;height:340px;right:-80px;top:-120px;background:#14B8A6}
.rq-hero:after{width:300px;height:300px;left:-90px;bottom:-160px;background:#EC4899;opacity:.35}
.rq-hero.full{background:linear-gradient(135deg,#1F1147 0%,#6D28D9 55%,#BE185D 100%)}
.rq-pill{display:inline-block;margin:0 0 10px;padding:4px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:.82em;font-weight:800;letter-spacing:.08em;backdrop-filter:blur(6px)}
.rq-hero h1{margin:0;font-size:clamp(1.9em,4.4vw,2.7em);font-weight:900;letter-spacing:.02em;line-height:1.15}
.rq-hero-plan{margin:8px 0 0;font-weight:800;color:#C7D2FE}
.rq-hero-msg{margin:12px 0 0;font-size:1.05em;color:#E0E7FF;max-width:34em}
.rq-hero-msg b{color:#5EEAD4;font-size:1.3em}
.rq-hero-link{display:inline-block;margin-top:10px;color:#5EEAD4;font-weight:900}
.rq-hero-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rq-hero-stats span{display:flex;flex-direction:column;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
.rq-hero-stats b{font-size:1.25em;font-weight:900;line-height:1.2}
.rq-hero-stats small{color:#C7D2FE;font-size:.78em}
.rq-hero-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;min-height:58px;padding:0 28px;border-radius:16px;background:#fff;color:#1E3A8A;font-weight:900;font-size:1.08em;text-decoration:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);transition:transform .15s}
.rq-hero-cta:hover{transform:translateY(-2px)}
.rq-ring{position:relative;width:200px;height:200px;flex:none}
.rq-ring svg{width:100%;height:100%}
.rq-ring-bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:12}
.rq-ring-fg{fill:none;stroke:url(#rqG);stroke-width:12;stroke-linecap:round}
.rq-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rq-ring-in b{font-size:3.6em;font-weight:900;line-height:1;background:linear-gradient(135deg,#5EEAD4,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.rq-ring-in small{color:#C7D2FE;font-size:.82em;font-weight:700}
.rq-ring-quote{border-radius:50%;border:12px solid rgba(255,255,255,.14)}
.rq-ring-quote b{font-size:2em}
@media (prefers-reduced-motion:no-preference){
  .rq-ring-fg{animation:rqRing 1.1s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rqRing{from{stroke-dasharray:0 400}}
  .rq-hero,.rq-rule,.rq-card,.rq-side-card{animation:rqUp .5s ease both}
  .rq-rule.r2{animation-delay:.05s}.rq-rule.r3{animation-delay:.1s}.rq-rule.r4{animation-delay:.15s}
  @keyframes rqUp{from{opacity:0;transform:translateY(10px)}}
}
/* 規則：四張小卡 */
.rq-rules2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.rq-rule{position:relative;padding:16px 18px 16px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;font-size:.92em;color:var(--muted);line-height:1.6}
.rq-rule:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px}
.rq-rule.r1:before{background:#3B82F6}.rq-rule.r2:before{background:#10B981}.rq-rule.r3:before{background:#F59E0B}.rq-rule.r4:before{background:#A78BFA}
.rq-rule b{display:block;color:var(--ink);font-size:1.08em;margin-bottom:2px}
/* 版面：左表單、右邊摘要 */
.rq-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.rq-h2{margin:0 0 12px;font-size:1.5em;font-weight:900}
.rq-card{border:0;margin:0 0 16px;padding:24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.rq-card-h{display:flex;align-items:center;gap:14px;padding:0;margin:0 0 16px;font-weight:900;font-size:1.18em;width:100%}
.rq-card-h small{display:block;font-size:.72em;font-weight:600;color:var(--muted);margin-top:2px}
.rq-no{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-size:1em;box-shadow:0 6px 14px -4px rgba(79,70,229,.6)}
/* 哪裡要改：圖示磚 */
.rq-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rq-chip span{flex-direction:column;gap:6px;min-height:96px;padding:12px 8px;border-radius:18px;border:2px solid var(--line);background:var(--surface);transition:transform .15s,border-color .15s,box-shadow .15s}
.rq-chip em{font-style:normal;font-size:.9em;line-height:1.3}
.rq-ic{width:30px;height:30px;color:#4F46E5}
.rq-chip.c-bug .rq-ic{color:#E11D48}.rq-chip.c-new .rq-ic{color:#D97706}.rq-chip.c-photo .rq-ic,.rq-chip.c-event .rq-ic{color:#0D9488}
.rq-chip:hover span{transform:translateY(-2px);border-color:#A5B4FC;box-shadow:0 8px 18px -10px rgba(79,70,229,.5)}
.rq-chip.bug span{border-style:solid}
.rq-chip input:checked+span{border-color:transparent;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;box-shadow:0 12px 24px -10px rgba(79,70,229,.7);transform:translateY(-2px)}
.rq-chip input:checked+span .rq-ic{color:#fff}
.rq-chip input:checked+span:after{content:"✓";position:absolute;top:8px;right:10px;width:22px;height:22px;border-radius:50%;background:#fff;color:#4F46E5;font-size:.8em;font-weight:900;line-height:22px;text-align:center}
.rq-chip span{position:relative}
/* 拖曳上傳 */
.rq-drop{position:relative;border-radius:20px;border:2.5px dashed #A5B4FC;background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(20,184,166,.07));transition:border-color .15s,background .15s,transform .15s;padding:6px}
.rq-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.rq-drop-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-height:190px;padding:20px;cursor:pointer;border-radius:16px}
.rq-drop-ic{width:58px;height:58px;color:#4F46E5;margin-bottom:6px;transition:transform .2s}
.rq-drop-in b{font-size:1.2em;font-weight:900;color:var(--ink)}
.rq-drop-in span{color:var(--muted)}
.rq-drop-in u{color:#4F46E5;font-weight:800}
.rq-drop-in small{color:var(--muted);font-size:.82em;margin-top:4px}
.rq-drop:hover{border-color:#6366F1}
.rq-drop:hover .rq-drop-ic{transform:translateY(-3px)}
.rq-drop.over{border-color:#14B8A6;border-style:solid;background:linear-gradient(135deg,rgba(20,184,166,.16),rgba(99,102,241,.16));transform:scale(1.01)}
.rq-drop.over .rq-drop-ic{transform:translateY(-6px) scale(1.1);color:#0D9488}
.rq-drop input:focus-visible+.rq-drop-in{outline:3px solid var(--signal);outline-offset:2px}
.rq-drop.has .rq-drop-in{min-height:96px;flex-direction:row;flex-wrap:wrap;gap:4px 10px;padding:14px}
.rq-drop.has .rq-drop-ic{width:34px;height:34px;margin:0}
.rq-drop.has .rq-drop-in small,.rq-drop.has .rq-drop-in span{display:none}
.rq-d-touch{display:none}
@media (hover:none){ .rq-d-desk{display:none!important} .rq-d-touch{display:block} }
.rq-thumbs{padding:0 8px 8px;margin:0}
.rq-thumbs:empty{display:none}
.rq-th{border-radius:14px;box-shadow:var(--shadow-sm);animation:rqUp .3s ease both}
.rq-th img{height:110px}
.rq-th i{position:absolute;top:6px;left:6px;width:24px;height:24px;border-radius:50%;background:rgba(11,21,48,.75);color:#fff;font:900 .75em/24px var(--body);text-align:center;font-style:normal}
.rq-th button{position:absolute;top:6px;right:6px;width:32px;height:32px;min-height:0;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:#E11D48;font-size:1.1em;line-height:32px;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rq-card textarea,.rq-card input[type=text],.rq-card input[type=date]{display:block;width:100%;font:inherit;font-size:max(16px,1em);padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink);min-height:54px;transition:border-color .15s,background .15s,box-shadow .15s}
.rq-card textarea:focus,.rq-card input:focus{outline:none;border-color:#6366F1;background:var(--surface);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
.rq-check{padding:12px 14px;border-radius:14px;background:var(--bg)}
.rq-check input{accent-color:#E11D48}
/* 右側摘要 */
.rq-side{position:sticky;top:16px}
.rq-side-card{padding:22px;border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.rq-side-h{margin:0 0 10px;font-weight:900;font-size:1.1em}
.rq-side-list{list-style:none;margin:0;padding:0}
.rq-side-list li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.rq-side-list span{color:var(--muted)}
.rq-side-list b{text-align:right}
.rq-side .rq-est{margin-top:14px;font-size:.95em}
.rq-side .rq-send{margin-top:14px;min-height:64px;font-size:1.2em;border-radius:16px;border:0;background:linear-gradient(135deg,#2563EB,#7C3AED);box-shadow:0 14px 28px -12px rgba(79,70,229,.8);transition:transform .15s,box-shadow .15s}
.rq-side .rq-send:hover{transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(79,70,229,.9)}
.rq-list{max-width:820px}
@media (max-width:900px){
  .rq-layout{grid-template-columns:1fr}
  .rq-side{position:static}
  .rq-chips{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .rq-hero{grid-template-columns:1fr;padding:26px 20px;gap:18px;border-radius:24px}
  .rq-ring{width:150px;height:150px;justify-self:center;grid-row:2}
  .rq-ring-in b{font-size:2.8em}
  .rq-hero-cta{width:100%}
  .rq-card{padding:18px 14px;border-radius:18px}
  .rq-chips{grid-template-columns:1fr 1fr}
  .rq-chip span{min-height:84px}
  .rq-rules2{grid-template-columns:1fr;gap:8px}
}
@media print{ .rq-hero{background:none;color:var(--ink);box-shadow:none} .rq-side,.rq-drop{display:none} }
.rq-card-h{float:left}
.rq-card-h+*{clear:both}
.rq-body{background-attachment:scroll}
.rq-list{max-width:none}
.rq-hero,.rq-rules2,.rq-ok{padding-block:0}.rq-hero{padding:34px 36px}@media (max-width:620px){.rq-hero{padding:26px 20px}}.rq-ok{padding:16px 18px}.rq-rules2{margin-bottom:26px}
@media (min-width:901px){.rq-side{margin-top:50px}}

/* ---------- 小魔女幫手（修改需求單） ---------- */
.rq-guide{position:relative;display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.rq-g-av{position:relative;flex:none;width:72px;height:72px;padding:0;border:3px solid #fff;border-radius:50%;background:linear-gradient(135deg,#C4B5FD,#5EEAD4);box-shadow:0 8px 20px -6px rgba(79,70,229,.55);cursor:pointer}
.rq-g-av img{width:100%;height:100%;border-radius:50%;display:block}
.rq-g-dot{display:none;position:absolute;top:0;right:0;width:16px;height:16px;border-radius:50%;background:#E11D48;border:2px solid #fff}
.rq-guide.new .rq-g-dot{display:block}
.rq-g-bub{position:relative;flex:1;min-width:0;padding:14px 16px 14px;border-radius:6px 20px 20px 20px;background:linear-gradient(180deg,#F5F3FF,#fff);border:2px solid #C4B5FD;box-shadow:var(--shadow-md);color:#1E1B4B}
.rq-g-name{margin:0 30px 6px 0;font-size:.78em;font-weight:900;letter-spacing:.08em;color:#7C3AED}
.rq-g-say p{margin:0 0 6px;font-weight:700;line-height:1.65}
.rq-g-say b{color:#6D28D9}
.rq-g-quote{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px dashed #A78BFA;font-size:.95em;line-height:1.7;max-height:260px;overflow:auto}
.rq-g-sub{font-size:.9em}
.rq-g-ask{margin:4px 0 8px;padding-left:1.2em;font-size:.92em;font-weight:700}
.rq-g-ask li{margin:3px 0}
.rq-g-warn{padding:8px 10px;border-radius:10px;background:#FEF3C7;color:#92400E!important;font-size:.9em}
.rq-g-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rq-g-btns:empty{display:none}
.rq-g-main{min-height:46px;padding:0 18px;border-radius:12px;border:0;background:linear-gradient(135deg,#7C3AED,#2563EB);font-size:.95em}
.rq-g-ghost{min-height:46px;padding:0 14px;border-radius:12px;border:2px solid #DDD6FE;background:#fff;color:#4C1D95;font:800 .9em var(--body);cursor:pointer}
.rq-g-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:1px solid #DDD6FE;background:#fff;color:#7C3AED;font-weight:900;cursor:pointer}
.rq-guide.min .rq-g-bub{display:none}
.rq-g-think span{display:inline-block;width:7px;height:7px;margin-left:3px;border-radius:50%;background:#7C3AED;animation:rqDot 1s infinite}
.rq-g-think span:nth-child(2){animation-delay:.15s}.rq-g-think span:nth-child(3){animation-delay:.3s}
@keyframes rqDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:no-preference){ .rq-guide.talk .rq-g-av{animation:rqTalk .6s ease} .rq-guide.talk .rq-g-bub{animation:rqUp .35s ease both} }
@keyframes rqTalk{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
/* 「幫我寫清楚」按鈕 */
.rq-ai-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.rq-ai-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:4px 18px 4px 5px;border-radius:999px;border:2px solid #C4B5FD;background:linear-gradient(135deg,#F5F3FF,#ECFEFF);color:#5B21B6;font:900 1em var(--body);cursor:pointer;transition:transform .15s,box-shadow .15s}
.rq-ai-btn img{width:40px;height:40px;border-radius:50%;background:#fff}
.rq-ai-btn:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(124,58,237,.6)}
.rq-ai-btn[disabled]{opacity:.5;cursor:not-allowed}
.rq-ai-btn.busy{opacity:1;cursor:wait}
.rq-ai-btn.busy img{animation:rqTalk .8s infinite}
.rq-ai-row small{color:var(--muted);font-size:.85em}
/* 手機：縮成右下角小頭像，不擋送出按鈕 */
@media (max-width:900px){
  .rq-body main.rq{padding-bottom:110px}
  .rq-guide{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;margin:0;flex-direction:row-reverse;align-items:flex-end}
  .rq-guide.min{left:auto}
  .rq-g-av{width:62px;height:62px}
  .rq-g-bub{max-height:62vh;overflow:auto;border-radius:20px 20px 6px 20px}
}
@media print{ .rq-guide,.rq-ai-row{display:none!important} }
/* 需求文件連結（Notion／Google 文件） */
.rq-doc{margin-top:14px;padding:14px;border-radius:16px;border:2px dashed #CBD5E1;background:var(--bg);transition:border-color .15s,background .15s}
.rq-doc.on{border-style:solid;border-color:#14B8A6;background:rgba(20,184,166,.08)}
.rq-doc-h{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rq-doc-h label{display:flex;flex-direction:column;cursor:pointer}
.rq-doc-h b{font-size:1em}
.rq-doc-h small{color:var(--muted);font-size:.85em}
.rq-doc-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--line);color:#0F172A}
.rq-doc-ic svg{width:24px;height:24px}
.rq-card .rq-doc input[type=url]{display:block;width:100%;font:inherit;font-size:max(16px,1em);padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);min-height:52px}
.rq-card .rq-doc input[type=url]:focus{outline:none;border-color:#14B8A6;box-shadow:0 0 0 4px rgba(20,184,166,.15)}
.rq-doc-tip{display:none;margin:8px 0 0;font-size:.85em;color:#0F766E;font-weight:700}
.rq-doc.on .rq-doc-tip{display:block}
.rq-doclink{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink)}
.rq-doclink>span{grid-row:1/3;font-size:1.5em}
.rq-doclink small{grid-column:2;color:var(--muted);font-size:.8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-doclink em{grid-row:1/3;grid-column:3;font-style:normal;font-weight:900;color:var(--accent)}
.rq-doclink:hover{border-color:var(--accent)}

/* ---------- 後台：修改需求（reqs.php）版面 v2 ---------- */
.rqa-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.rqa-stat{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
a.rqa-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.rqa-stat i{grid-row:1/4;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px}
.rqa-stat i svg{width:24px;height:24px}
.rqa-stat.s1 i{background:#EFF6FF;color:#2563EB}.rqa-stat.s2 i{background:#FEF3C7;color:#B45309}.rqa-stat.s3 i{background:#ECFDF5;color:#059669}.rqa-stat.s4 i{background:#F5F3FF;color:#7C3AED}
.rqa-stat span{font-size:.85em;color:var(--muted);font-weight:700}
.rqa-stat b{font-size:1.7em;font-weight:900;line-height:1.15}
.rqa-stat b small{font-size:.5em;color:var(--muted)}
.rqa-stat em{font-style:normal;font-size:.78em;color:var(--muted)}
.rqa-stat.hot{border-color:transparent;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;box-shadow:0 12px 26px -12px rgba(79,70,229,.7)}
.rqa-stat.s2.hot{background:linear-gradient(135deg,#F59E0B,#EA580C);box-shadow:0 12px 26px -12px rgba(234,88,12,.6)}
.rqa-stat.hot i{background:rgba(255,255,255,.2);color:#fff}
.rqa-stat.hot span,.rqa-stat.hot em,.rqa-stat.hot b small{color:rgba(255,255,255,.85)}
.rqa-work-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.rqa-work-h h2{margin:0!important}
.rqa-work-h h2 small{font-size:.65em;color:var(--muted);font-weight:700}
.rqa-work .rqa-tabs{margin:0}
.rqa-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 10px 20px}
.rqa-empty-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#ECFDF5;color:#059669;font-size:1.8em;font-weight:900;margin-bottom:10px}
.rqa-empty b{font-size:1.1em}
.rqa-empty p{margin:4px 0 0;max-width:30em}
/* 客戶列 */
.rqa-crow{display:grid;grid-template-columns:auto minmax(0,1fr) 150px auto;align-items:center;gap:16px;padding:14px 12px;border-top:1px solid var(--line);border-radius:14px;transition:background .15s}
.rqa-crow:first-of-type{border-top:0}
.rqa-crow:hover{background:var(--bg)}
.rqa-crow.busy{background:linear-gradient(90deg,rgba(37,99,235,.06),transparent 60%)}
.rqa-av{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;color:#fff;font-weight:900;font-size:1.25em}
.rqa-av.h0{background:linear-gradient(135deg,#2563EB,#7C3AED)}.rqa-av.h1{background:linear-gradient(135deg,#0D9488,#22C55E)}.rqa-av.h2{background:linear-gradient(135deg,#F59E0B,#EF4444)}
.rqa-av.h3{background:linear-gradient(135deg,#DB2777,#9333EA)}.rqa-av.h4{background:linear-gradient(135deg,#0EA5E9,#2563EB)}.rqa-av.h5{background:linear-gradient(135deg,#65A30D,#0D9488)}
.rqa-cinfo b{display:block;font-size:1.08em;line-height:1.35}
.rqa-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rqa-tag{display:inline-flex;align-items:center;padding:1px 10px;border-radius:999px;font-style:normal;font-size:.78em;font-weight:800;text-decoration:none;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.rqa-tag.plan{background:#EEF2FF;color:#4338CA;border-color:#C7D2FE}
.rqa-tag.none{background:#FFF7ED;color:#C2410C;border-color:#FED7AA}
.rqa-tag.open{background:#2563EB;color:#fff;border-color:#2563EB}
.rqa-tag.soft{background:transparent;border-color:transparent;padding-left:2px}
.rqa-quota{display:flex;align-items:center;gap:10px}
.rqa-quota svg{width:40px;height:40px;flex:none}
.rqa-quota .bg{fill:none;stroke:var(--line);stroke-width:4}
.rqa-quota .fg{fill:none;stroke:#4F46E5;stroke-width:4;stroke-linecap:round}
.rqa-quota .fg.full{stroke:#E11D48}
.rqa-quota span{display:flex;flex-direction:column;line-height:1.25}
.rqa-quota b{font-size:1.15em;font-weight:900}
.rqa-quota b small{font-size:.7em;color:var(--muted);font-weight:700}
.rqa-quota span>small{font-size:.75em;color:var(--muted)}
.rqa-cact{display:flex;align-items:center;gap:6px}
.rqa-copy{white-space:nowrap}
.rqa-copy.copied{background:#059669;border-color:#059669}
.rqa-ib{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:58px;min-height:48px;padding:4px 0;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;font:inherit}
.rqa-ib svg{width:20px;height:20px;color:#4F46E5}
.rqa-ib span{font-size:.66em;font-weight:800;color:var(--muted);white-space:nowrap}
.rqa-ib:hover{border-color:#A5B4FC;background:#EEF2FF}
.rqa-ib.copied{border-color:#059669;background:#ECFDF5}
.rqa-ib.copied span{color:#059669}
@media (max-width:900px){
  .rqa-stats{grid-template-columns:1fr 1fr}
  .rqa-crow{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px}
  .rqa-cact{grid-column:1/-1}
  .rqa-copy{flex:1}
}
@media (max-width:480px){
  .rqa-stat{padding:12px;column-gap:10px}
  .rqa-stat i{width:38px;height:38px}
  .rqa-stat em{display:none}
  .rqa-stat b{font-size:1.4em}
  .rqa-crow{padding:14px 4px}
  .rqa-quota svg{width:34px;height:34px}
}
html.ad-mission .rqa-stat:not(.hot),html.ad-mission .rqa-ib{background:rgba(15,23,42,.6);color:#E2E8F0}
/* 需求卡片＋快速按鈕 */
.rqa-stats,.rqa-work,.rqa-cl{padding-block:0}
.rqa-work,.rqa-cl{padding:22px}
.rqa-req{position:relative;margin-top:12px;padding:18px 18px 14px 22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.rqa-req:first-of-type{border-top:1px solid var(--line)}
.rqa-req:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#CBD5E1}
.rqa-req.st-new:before{background:#2563EB}.rqa-req.st-doing:before{background:#F59E0B}.rqa-req.st-ask:before{background:#E11D48}.rqa-req.st-quote:before{background:#7C3AED}.rqa-req.st-done:before{background:#16A34A}
.rqa-req h3{margin-top:10px}
.rqa-quick{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.rqa-qbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rqa-qb{min-height:46px;padding:0 18px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:900 .95em var(--body);cursor:pointer;transition:transform .12s}
.rqa-qb:hover{transform:translateY(-1px)}
.rqa-qb.go{background:#2563EB;border-color:#2563EB;color:#fff}
.rqa-qb.ok{background:#16A34A;border-color:#16A34A;color:#fff}
.rqa-qb.ask{border-color:#FECDD3;color:#BE123C;background:#FFF1F2}
.rqa-qmin{display:inline-flex;align-items:center;gap:6px;font-size:.85em;font-weight:800;color:var(--muted)}
.rqa-qmin select{min-height:46px;padding:0 10px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700}
.rqa-qsp{flex:1}
.rqa-qlink{display:inline-flex;align-items:center;min-height:46px;padding:0 12px;border:0;background:none;color:var(--accent);font:800 .9em var(--body);text-decoration:none;cursor:pointer}
.rqa-qlink.copied{color:#059669}
.rqa-more{margin-top:8px}
.rqa-more>summary{cursor:pointer;color:var(--muted);font-weight:800;font-size:.9em;gap:8px}
.rqa-more>summary em{font-style:normal;padding:1px 10px;border-radius:999px;background:#F5F3FF;color:#6D28D9;font-size:.9em}
.rqa-more .rqa-edit{margin-top:6px}
.rqa-actions .qa-muted{font-size:.85em}
@media (max-width:620px){ .rqa-qsp{display:none} .rqa-qb{flex:1} .rqa-work,.rqa-cl{padding:16px 12px} .rqa-req{padding:16px 12px 12px 18px} }
.rqa-qb{white-space:nowrap}
@media (max-width:620px){
  .rqa-qb{flex:1 1 40%;padding:0 10px}
  .rqa-qmin{flex:1 1 100%}
  .rqa-qmin select{flex:1}
  .rqa-crow{grid-template-columns:auto minmax(0,1fr)}
  .rqa-quota{grid-column:2}
}

/* ---------- 報價單（客戶頁）v2：吸睛版 ---------- */
.qt-body .qt{max-width:960px}
.qt-doc{padding:0!important;overflow:hidden;border-radius:26px;box-shadow:0 20px 50px -28px rgba(30,58,138,.45)}
.qt-doc>*:not(.qt-hero2){margin-left:26px;margin-right:26px}
.qt-doc>*:last-child{margin-bottom:26px}
.qt-hero2{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;margin:0 0 22px!important;padding:30px 30px 26px!important;border:0!important;color:#fff;
  background:linear-gradient(135deg,#0B1A4A 0%,#1E3A8A 50%,#4C1D95 100%);isolation:isolate;overflow:hidden}
.qt-hero2:before{content:"";position:absolute;z-index:-1;width:320px;height:320px;right:-90px;top:-150px;border-radius:50%;background:#14B8A6;filter:blur(50px);opacity:.5}
.qt-hero2:after{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:-80px;bottom:-170px;border-radius:50%;background:#EC4899;filter:blur(50px);opacity:.3}
.qt-hero2-eb{margin:0 0 8px!important;display:inline-block;padding:3px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:.78em!important;font-weight:800;letter-spacing:.06em;color:#E0E7FF!important}
.qt-hero2 h1{color:#fff;font-size:clamp(1.4em,3.4vw,1.9em)!important;line-height:1.3}
.qt-hero2-to{margin:8px 0 0!important;color:#C7D2FE!important;font-size:1em!important}
.qt-hero2-to b{color:#fff!important}
.qt-hero2-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0!important;color:#C7D2FE!important;font-size:.88em!important}
.qt-hero2-chip{padding:3px 12px;border-radius:999px;background:#FDE68A;color:#78350F;font-weight:900}
.qt-hero2-chip.ok{background:#BBF7D0;color:#14532D}
.qt-hero2-r{text-align:right;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.qt-hero2-r small{display:block;color:#C7D2FE;font-size:.8em;font-weight:700}
.qt-hero2-r b{display:block;font-size:clamp(1.8em,4.4vw,2.4em);font-weight:900;line-height:1.15;background:linear-gradient(135deg,#fff,#A5F3FC);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
/* 項目表 */
.qt-tbl-wrap{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.qt-tbl th{padding:12px 16px;background:var(--bg);font-weight:800;letter-spacing:.05em}
.qt-tbl td{padding:16px}
.qt-tbl tbody tr:hover td{background:rgba(99,102,241,.04)}
.qt-tbl tbody td b{font-size:1.05em}
.qt-tbl tfoot td{padding:10px 16px;color:var(--muted)}
.qt-tbl .qt-total td{border-top:0;padding:16px;background:linear-gradient(135deg,#EEF2FF,#F5F3FF);color:var(--ink);font-size:1.3em}
.qt-tbl .qt-total td.n{color:#4338CA}
/* 付款 */
.qt-pay-sec{margin-top:18px}
.qt-stages{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;counter-reset:stg}
.qt-stages>div{position:relative;padding:16px 18px 14px 54px!important;border-radius:16px!important;background:var(--surface)!important;border:2px solid var(--line)!important;counter-increment:stg}
.qt-stages>div:before{content:counter(stg);position:absolute;left:14px;top:16px;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-weight:900;font-size:.85em;display:flex;align-items:center;justify-content:center}
.qt-stages>div:only-child{padding-left:18px!important}
.qt-stages>div:only-child:before{display:none}
.qt-stages strong{font-size:1.35em!important;font-weight:900}
.qt-stages>div.paid{border-color:#86EFAC!important;background:#F0FDF4!important}
.qt-stages>div.paid:before{background:#16A34A;content:"✓"}
/* 摺疊區 */
.qt-more{display:grid;gap:10px;margin-top:18px}
.qt-fold{border-radius:14px!important}
/* 簽名 */
.qt-sign{border-radius:26px;padding:28px!important;border:2px solid #C7D2FE;box-shadow:0 20px 50px -30px rgba(79,70,229,.6)}
.qt-sign h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:1.5em!important}
.qt-sign h2 small{font-size:.55em;color:var(--muted);font-weight:700}
.qt-sn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;margin-right:8px;border-radius:10px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-size:.85em;font-weight:900;vertical-align:middle}
.qt-name{display:block;font-weight:900}
.qt-name input{margin-top:8px}
.qt-pad-lbl{margin:18px 0 8px;font-weight:900}
.qt-pad-wrap{border:2px dashed #818CF8!important;border-radius:18px!important;background:
  linear-gradient(#fff,#fff) padding-box,
  repeating-linear-gradient(0deg,transparent 0 29px,rgba(99,102,241,.07) 29px 30px)!important}
.qt-pad-wrap:after{content:"";position:absolute;left:8%;right:8%;bottom:22%;border-bottom:2px solid #E0E7FF;pointer-events:none}
.qt-agree{align-items:center!important;padding:14px 16px;border-radius:14px;background:var(--bg)}
.qt-agree .qt-sn{margin-right:0}
.qt-submit{min-height:64px!important;font-size:1.2em!important;border-radius:16px!important;border:0!important;color:#fff!important;background:linear-gradient(135deg,#2563EB,#7C3AED)!important;box-shadow:0 14px 28px -12px rgba(79,70,229,.8);transition:transform .15s}
.qt-submit:hover{transform:translateY(-2px)}
@media (max-width:640px){
  .qt-doc>*:not(.qt-hero2){margin-left:14px;margin-right:14px}
  .qt-doc>*:last-child{margin-bottom:18px}
  .qt-hero2{grid-template-columns:1fr;padding:24px 18px 20px!important}
  .qt-hero2-r{text-align:left}
  .qt-tbl td,.qt-tbl th{padding:12px}
  .qt-sign{padding:20px 14px!important}
}
@media print{
  .qt-doc{box-shadow:none;border-radius:0}
  .qt-hero2{background:none!important;color:#000;padding:0 0 12px!important;border-bottom:3px solid #000!important}
  .qt-hero2:before,.qt-hero2:after{display:none}
  .qt-hero2 h1,.qt-hero2-to b{color:#000!important}
  .qt-hero2-eb,.qt-hero2-to,.qt-hero2-meta,.qt-hero2-r small{color:#333!important;background:none;border:0}
  .qt-hero2-r{background:none;border:0}
  .qt-hero2-r b{color:#000;background:none;-webkit-text-fill-color:#000}
  .qt-doc>*:not(.qt-hero2){margin-left:0;margin-right:0}
}
.qt-name input{display:block;width:100%;margin-top:8px}
.qt-name{display:block!important}
.qt-tbl .qt-total td{background:#EEF2FF}
.qt-stages>div:only-child{flex-direction:row!important;align-items:center!important;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:14px 18px!important}
.qt-stages>div:only-child small{font-size:.95em;font-weight:800;color:var(--ink)}
.qt-stages>div:only-child small:before{content:"付款方式：";color:var(--muted);font-weight:700}
.qt-doc .qt-plans{padding-block:0;margin-bottom:22px}
.qt-tbl .qt-total td{white-space:nowrap}
@media (max-width:640px){ .qt-pad-hint{font-size:1em;white-space:nowrap} .qt-tbl .qt-total td{font-size:1.1em} }

/* ---------- 後台：報價單列表 v3（一目瞭然） ---------- */
.qb-wrap{padding:22px}
.qb{position:relative;margin-top:12px;padding:18px 20px 14px 26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:box-shadow .15s}
.qb:hover{box-shadow:var(--shadow-md)}
.qb:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:18px 0 0 18px;background:#CBD5E1}
.qb.ph-open:before{background:#2563EB}.qb.ph-unpaid:before{background:#F59E0B}.qb.ph-making:before{background:#7C3AED}.qb.ph-done:before{background:#16A34A}
.qb.ph-closed{opacity:.72}
.qb.hl{box-shadow:0 0 0 3px #A5B4FC}
.qb-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start}
.qb-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.qb-st{padding:2px 12px;border-radius:999px;font-size:.8em;font-weight:900;color:#fff;background:#64748B}
.ph-open .qb-st{background:#2563EB}.ph-unpaid .qb-st{background:#D97706}.ph-making .qb-st{background:#7C3AED}.ph-done .qb-st{background:#16A34A}
.qb-no{font-family:ui-monospace,Menlo,monospace;font-size:.8em;color:var(--muted)}
.qb-chip{padding:1px 8px;border-radius:999px;font-size:.75em;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.qb-title{margin:6px 0 2px;font-size:1.18em;font-weight:900;line-height:1.35}
.qb-who{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;font-size:.88em;color:var(--muted)}
.qb-who b{color:var(--ink)}
.qb-r{min-width:180px;text-align:right}
.qb-amt{display:block;font-size:1.55em;font-weight:900;line-height:1.1;white-space:nowrap}
.qb-bar{height:8px;margin-top:10px;border-radius:999px;background:#FDE68A;overflow:hidden}
.qb-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22C55E,#16A34A)}
.ph-done .qb-bar{background:#BBF7D0}
.qb-paid{display:block;margin-top:4px;font-size:.8em;color:var(--muted);font-weight:700;white-space:nowrap}
.qb-paid em{font-style:normal;color:#B45309}
.qb-next{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--bg);font-size:.95em;line-height:1.6}
.qb-next b{color:var(--ink)}
.ph-open .qb-next{background:#EFF6FF}.ph-unpaid .qb-next{background:#FFFBEB}.ph-making .qb-next{background:#F5F3FF}.ph-done .qb-next{background:#F0FDF4}
.qb-next-ic{flex:none;font-size:1.1em}
.qb .qa-plan-pick{margin-top:10px}
.qb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.qb-inl{display:inline;margin:0}
.qb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:800 .9em var(--body);text-decoration:none;cursor:pointer;list-style:none}
.qb-btn::-webkit-details-marker{display:none}
.qb-btn:hover{border-color:#A5B4FC;background:#EEF2FF}
.qb-btn.line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.qb-more{position:relative;margin-left:auto}
.qb-more[open] .qb-btn{border-color:#A5B4FC;background:#EEF2FF}
.qb-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.qb-menu a,.qb-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--ink);font:700 .95em var(--body);text-decoration:none;text-align:left;cursor:pointer}
.qb-menu a:hover,.qb-menu button:hover{background:var(--bg)}
.qb-menu form{margin:0}
.qb-menu .danger{color:#DC2626}
.qb .qa-pay{margin-top:12px}
.qb .qa-pay-head b{font-size:.95em}
@media (max-width:700px){
  .qb-wrap{padding:16px 12px}
  .qb{padding:16px 14px 12px 20px}
  .qb-main{grid-template-columns:1fr}
  .qb-r{text-align:left;min-width:0}
  .qb-acts .qb-btn{flex:1 1 30%}
  .qb-more{flex:1 1 30%;margin-left:0}
  .qb-more .qb-btn{width:100%}
}
.qb-more>summary:after{content:none!important}
.qb-more>summary{display:inline-flex!important}
.qb-btn{white-space:nowrap}
@media (max-width:700px){ .qb-acts .qb-btn{padding:0 8px} .qb-acts{gap:6px} }

/* ---------- 交付檔案（後台上傳、客戶下載） ---------- */
.rqa-files{margin-top:14px;padding:14px;border-radius:14px;background:#F8FAFF;border:1px solid #E0E7FF}
.rqa-files-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-weight:900}
.rqa-files-h span{font-size:.8em;font-weight:700;color:var(--muted)}
.rqa-files-h a{margin-left:auto;font-size:.85em;color:var(--accent);font-weight:800}
.rqa-flist,.rq-flist{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.rqa-flist li{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.rqa-flist img,.rq-flist img{width:44px;height:44px;flex:none;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--line)}
.rqa-fic,.rq-fic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:10px;background:#EEF2FF;font-size:1.4em}
.rqa-fn{flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.rqa-fn b,.rq-fn b{display:block;font-size:.92em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rqa-fn small,.rq-fn small{color:var(--muted);font-size:.78em}
.rqa-flist form{margin:0}
.rqa-fx{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#DC2626;font-size:1.1em;font-weight:900;cursor:pointer}
.rqa-drop{position:relative;border:2px dashed #A5B4FC;border-radius:14px;background:#fff;transition:background .15s,border-color .15s}
.rqa-drop input{position:absolute;width:1px;height:1px;opacity:0}
.rqa-drop label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:12px;text-align:center;cursor:pointer;color:var(--ink)}
.rqa-drop label u{color:var(--accent);font-weight:800}
.rqa-drop label small{color:var(--muted);font-size:.78em}
.rqa-drop input:focus-visible+label{outline:3px solid var(--signal);outline-offset:2px;border-radius:12px}
.rqa-drop.over{border-style:solid;border-color:#14B8A6;background:#F0FDFA}
.rqa-up{list-style:none;margin:0;padding:0 10px}
.rqa-up:empty{display:none}
.rqa-up li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px dashed var(--line);font-size:.88em}
.rqa-up li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.rqa-up li .s{color:var(--muted)}
.rqa-up li i{grid-column:1/-1;height:6px;border-radius:999px;background:#E0E7FF;overflow:hidden}
.rqa-up li i b{display:block;height:100%;width:0;background:linear-gradient(90deg,#2563EB,#7C3AED);transition:width .2s}
.rqa-up li.ok .s{color:#16A34A;font-weight:800}.rqa-up li.ok i b{width:100%!important;background:#16A34A}
.rqa-up li.err .s{color:#DC2626;font-weight:800}.rqa-up li.err i{display:none}
.rqa-up li.all{display:block;color:#16A34A;font-weight:900}
/* 客戶頁 */
.rq-files{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(135deg,#EEF2FF,#F0FDFA);border:1px solid #C7D2FE}
.rq-files-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.rq-files-h span{font-size:.85em;color:var(--muted);font-weight:700}
.rq-zip{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-weight:900;text-decoration:none}
.rq-flist{margin:0}
.rq-flist a{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px 8px 8px;border-radius:12px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.rq-flist a:hover{border-color:#818CF8;transform:translateY(-1px)}
.rq-fn{flex:1;min-width:0}
.rq-flist em{font-style:normal;font-weight:900;color:var(--accent);font-size:.9em;white-space:nowrap}
.rq-flist em:before{content:"⬇ "}
/* 交付檔案：大預覽卡片 */
.fgrid{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fcard{display:flex;flex-direction:column;border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .15s,transform .15s}
.fcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.fprev{position:relative;display:flex;align-items:center;justify-content:center;height:180px;padding:14px;text-decoration:none;
  background-color:#fff;background-image:linear-gradient(45deg,#F1F5F9 25%,transparent 25%,transparent 75%,#F1F5F9 75%),linear-gradient(45deg,#F1F5F9 25%,transparent 25%,transparent 75%,#F1F5F9 75%);background-size:20px 20px;background-position:0 0,10px 10px;border-bottom:1px solid var(--line)}
.fprev img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.fic{font-size:3.4em;line-height:1}
.fext{position:absolute;left:10px;top:10px;padding:1px 9px;border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font-style:normal;font-size:.72em;font-weight:900;letter-spacing:.04em}
.fmeta{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px}
.fname{flex:1;min-width:0;text-decoration:none;color:var(--ink)}
.fname b{display:block;font-size:.92em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fname small{color:var(--muted);font-size:.78em}
.fmeta form{margin:0}
.fdel{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#DC2626;font-size:1.1em;font-weight:900;cursor:pointer}
.fdl{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:12px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;font-weight:900;font-size:.9em;text-decoration:none;white-space:nowrap}
@media (max-width:520px){ .fgrid{grid-template-columns:1fr 1fr;gap:8px} .fprev{height:130px;padding:8px} .fmeta{flex-wrap:wrap} .fdl{width:100%;justify-content:center} }
@media (min-width:521px){ .fgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .fprev{height:210px} }
.fmeta{flex-wrap:wrap}
.fname{flex:1 1 120px}