/* 全站互動式高科技層(owner 2026-10-19:「把所有頁面都改成這風格」)。
   建在淺藍系統(2026-10-15 選 C)上,與首頁 landing.css 同一套色:
   c1 #1E6FE0 小言藍、c2 #22B8F0 青、c3 #7C5CFF 紫。動態只在 html.has-motion 下才開。 */
:root{--t-c1:#1E6FE0;--t-c2:#22B8F0;--t-c3:#7C5CFF;--t-edge:rgba(30,111,224,.16);--t-glass:rgba(255,255,255,.82)}

/* ground: blueprint grid + soft glows behind every page, a particle field over it (site.js) */
html{background:#EEF5FF}
body{background:transparent;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(1000px 520px at 85% -5%,rgba(34,184,240,.14),transparent 60%),
             radial-gradient(900px 520px at -5% 105%,rgba(124,92,255,.08),transparent 60%),
             linear-gradient(rgba(30,111,224,.055) 1px,transparent 1px) 0 0/44px 44px,
             linear-gradient(90deg,rgba(30,111,224,.055) 1px,transparent 1px) 0 0/44px 44px,#EEF5FF}
#site-field{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* promo bar + nav */
.promo-bar{background:linear-gradient(100deg,var(--t-c1),var(--t-c2) 55%,var(--t-c3));background-size:200% 100%}
.has-motion .promo-bar{animation:t-shine 10s ease-in-out infinite}
@keyframes t-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.nav{background:rgba(255,255,255,.78);border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(30,111,224,.35),rgba(124,92,255,.3),transparent) 1}
.logo .mark{background:linear-gradient(135deg,var(--t-c1),var(--t-c2));box-shadow:0 4px 14px rgba(30,111,224,.35)}

/* type */
.kicker{display:inline-block;font:800 12px/1 Manrope,"Noto Sans TC",sans-serif;letter-spacing:2px;color:var(--t-c1);
  padding:7px 12px;border-radius:8px;background:rgba(30,111,224,.08);border:1px solid var(--t-edge)}
.dl-hero h1,.page-head h1,.install-guide h1,.guide h1,.sk-wrap h1,.sup-wrap h1,.lesson-hero h1,.chat-wrap h1,
.section-head h2{background:linear-gradient(100deg,#0C2A4D 0%,var(--t-c1) 55%,var(--t-c3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.6px}
.page-head h1{font-size:clamp(28px,3vw,40px)}

/* buttons */
.btn-primary{background:linear-gradient(110deg,var(--t-c1),var(--t-c2));color:#fff;
  box-shadow:0 8px 24px rgba(30,111,224,.30),inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-primary:hover{background:linear-gradient(110deg,#1659B8,#1AA3D9);transform:translateY(-1px);box-shadow:0 12px 30px rgba(30,111,224,.40)}
.btn-line{background:var(--t-glass);border:1px solid var(--t-edge);backdrop-filter:blur(8px)}
.btn-line:hover{border-color:var(--t-c1);color:var(--t-c1);box-shadow:0 8px 22px rgba(30,111,224,.14)}

/* cards: glass, and light that follows the pointer (site.js sets --mx / --my) */
.card,.plan,.release-box,.auth-card,.guide-panel,.lesson,.step,.sup-box,.note-box,.note-box2,.spec,.sk-way,
.check,.ok-box,.warn-box,.tip,.pick{
  --mx:50%;--my:-40%;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(34,184,240,.10),transparent 60%),var(--t-glass);
  border-color:var(--t-edge);backdrop-filter:blur(10px);transition:box-shadow .25s,border-color .25s,transform .2s}
.card:hover,.release-box:hover,.guide-panel:hover,.lesson:hover,.step:hover,.spec:hover,.sk-way:hover,.check:hover,.plan:hover{
  border-color:rgba(34,184,240,.55);box-shadow:0 0 0 1px rgba(34,184,240,.25),0 18px 44px rgba(12,42,77,.12)}
.plan.feat-plan{border:2px solid transparent;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(34,184,240,.10),transparent 60%) padding-box,
             linear-gradient(#fff,#fff) padding-box,linear-gradient(130deg,var(--t-c1),var(--t-c2),var(--t-c3)) border-box;
  box-shadow:0 24px 60px rgba(30,111,224,.18)}
.plan .tag{background:linear-gradient(90deg,var(--t-c1),var(--t-c3))}

/* sign-in / sign-up: the card on a glowing field, a gradient edge */
.auth-wrap{background:radial-gradient(600px 400px at 50% 30%,rgba(34,184,240,.16),transparent 70%)}
.auth-card{border:1.5px solid transparent;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(34,184,240,.10),transparent 60%) padding-box,
             linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,
             linear-gradient(130deg,rgba(30,111,224,.55),rgba(34,184,240,.45),rgba(124,92,255,.45)) border-box;
  box-shadow:0 30px 70px rgba(12,42,77,.16)}
.field input,.field select,.field textarea{background:rgba(241,245,251,.9)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--t-c2);
  box-shadow:0 0 0 3px rgba(34,184,240,.18),0 0 18px rgba(34,184,240,.18)}

/* the AI-key note beside the plan: from the top, as a card (it was centred in a tall
   row and read as half empty) */
.byo-note{justify-content:flex-start;background:var(--t-glass);border:1px solid var(--t-edge);backdrop-filter:blur(10px);
  box-shadow:inset 3px 0 0 var(--t-c2)}

/* member: device names were white (left from the dark theme) and unreadable */
body .device-item{background:var(--t-glass);border-color:var(--t-edge)}
body .device-name{color:#0C2A4D}
/* support conversation: the cream ground of the old design */
body .sup-log{background:rgba(241,245,251,.75)}

/* small pieces */
.badge,.pill{border-radius:999px}
.foot{border-top:1px solid transparent;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);
  border-image:linear-gradient(90deg,transparent,rgba(30,111,224,.3),rgba(124,92,255,.25),transparent) 1}

/* scroll reveal (site.js marks what to reveal) */
.has-motion [data-srv]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.has-motion [data-srv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.promo-bar{animation:none}}