/* ============================================================
   WURA P01 CRO 視覺層  20260910
   🔴 全部 scoped 在 #p1-intro-view 與 .topbar 內，不污染其他 view。
   🔴 rollback = 移除 index.html 裡這支 <link> 一行即可。
   ============================================================ */
:root{
  --p01-paper:#FBF8F3; --p01-ink:#1B1A17; --p01-ink2:#4A473F; --p01-ink3:#7A7568;
  --p01-gold:#C9A227; --p01-green:#1E5B45; --p01-orange:#E07B2C;
  --p01-ruby:#C0243C; --p01-citrine:#E0A020; --p01-emerald:#1E7A52; --p01-sapphire:#1E5AA8;
}

/* ---------- 頁首 ---------- */
.topbar .p01-logo{width:38px;height:38px;border-radius:0;background:none;display:block;flex:0 0 auto}
.topbar .p01-tagline{color:var(--p01-green);font-weight:700}

/* ---------- 背景：只在首頁顯示（其他 view 時本區塊為 hidden） ---------- */
#p1-intro-view.p01-home::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--p01-paper);
}
#p1-intro-view.p01-home::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 88% 6%,  rgba(201,162,39,.16), transparent 62%),
    radial-gradient(52% 38% at 6% 92%,  rgba(201,162,39,.13), transparent 64%),
    radial-gradient(38% 26% at 12% 14%, rgba(192,36,60,.055), transparent 66%),
    radial-gradient(34% 24% at 92% 40%, rgba(224,160,32,.075), transparent 66%),
    radial-gradient(34% 24% at 8% 58%,  rgba(30,122,82,.055), transparent 66%),
    radial-gradient(40% 26% at 90% 84%, rgba(30,90,168,.06), transparent 66%),
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(201,162,39,.5), transparent),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(201,162,39,.42), transparent),
    radial-gradient(1.8px 1.8px at 86% 62%, rgba(201,162,39,.38), transparent),
    radial-gradient(1.2px 1.2px at 32% 74%, rgba(201,162,39,.38), transparent),
    radial-gradient(1.4px 1.4px at 58% 44%, rgba(201,162,39,.3), transparent);
}

/* ---------- 第一屏 ---------- */
#p1-intro-view .p01-eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:.16em;color:var(--p01-green);
  border:1px solid rgba(30,91,69,.3);border-radius:999px;padding:5px 12px;margin:0 0 18px;background:none}
#p1-intro-view .p01-h1{
  font-size:29px;line-height:1.42;font-weight:800;color:var(--p01-ink);margin:0}
#p1-intro-view .p01-h1 em{font-style:normal;color:var(--p01-ruby)}
#p1-intro-view .p01-diag{
  margin:16px 0 0;font-size:20px;line-height:1.6;font-weight:800;color:var(--p01-ruby)}
#p1-intro-view .p01-stakes{
  margin:26px 0 0;padding:16px 16px 16px 18px;font-size:16.5px;line-height:1.95;color:var(--p01-ink2);
  background:rgba(255,255,255,.6);border-left:3px solid var(--p01-ruby);border-radius:0 10px 10px 0}
#p1-intro-view .p01-stakes strong{color:var(--p01-ink);font-weight:800}
#p1-intro-view .p01-turn{
  margin:24px 0 0;font-size:20px;line-height:1.65;font-weight:800;color:var(--p01-green)}

/* ---------- 三大陷阱 ---------- */
#p1-intro-view .p01-traps{margin-top:38px}
#p1-intro-view .p01-sec-h{font-size:21px;font-weight:800;line-height:1.5;margin:0 0 18px;color:var(--p01-ink)}
#p1-intro-view .p01-trap{
  position:relative;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06);
  border-radius:14px;padding:18px 18px 18px 22px;margin-bottom:14px;
  box-shadow:0 2px 10px rgba(120,100,40,.05)}
#p1-intro-view .p01-trap::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px}
#p1-intro-view .p01-t1::before{background:var(--p01-ruby)}
#p1-intro-view .p01-t2::before{background:var(--p01-citrine)}
#p1-intro-view .p01-t3::before{background:var(--p01-emerald)}
#p1-intro-view .p01-no{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--p01-ink3)}
#p1-intro-view .p01-tt{display:block;font-size:18px;font-weight:800;margin:5px 0 9px;color:var(--p01-ink)}
#p1-intro-view .p01-trap p{font-size:15.5px;line-height:1.8;color:var(--p01-ink2);margin:0}
#p1-intro-view .p01-sol{
  margin-top:12px !important;padding-top:11px;border-top:1px dashed rgba(0,0,0,.1);
  font-size:15.5px;font-weight:800;color:var(--p01-green) !important}

/* ---------- A1 主 CTA 區塊（第一屏內） ---------- */
#p1-intro-view .p01-cta-block{margin-top:26px}
#p1-intro-view .p01-cta-block .message{margin-top:10px}

/* ---------- A3 35+ 時間主張 ---------- */
#p1-intro-view .p01-time{margin-top:38px;text-align:center;
  padding:24px 18px;background:rgba(255,255,255,.5);
  border-top:1px solid rgba(201,162,39,.25);border-bottom:1px solid rgba(201,162,39,.25)}
#p1-intro-view .p01-time-h{font-size:24px;font-weight:800;line-height:1.5;color:var(--p01-ink);margin:0}
#p1-intro-view .p01-time p{font-size:16px;line-height:1.9;color:var(--p01-ink2);margin:14px 0 0}
#p1-intro-view .p01-time-list{color:var(--p01-ink) !important;font-weight:700}
#p1-intro-view .p01-time-close{margin-top:18px !important;font-size:20px !important;
  font-weight:800;color:var(--p01-green) !important;line-height:1.6}

/* ---------- 路徑主張 ＋ 寶石預告 ---------- */
#p1-intro-view .p01-route{margin-top:38px;text-align:center}
#p1-intro-view .p01-route p{font-size:19px;line-height:1.8;color:var(--p01-ink2);margin:0}
#p1-intro-view .p01-route-b{margin-top:10px !important;font-size:21px;font-weight:800;color:var(--p01-ink) !important;line-height:1.65}
#p1-intro-view .p01-loop{
  margin-top:22px;padding:22px 18px;text-align:center;
  background:rgba(255,255,255,.6);border:1px solid rgba(201,162,39,.28);border-radius:16px}
#p1-intro-view .p01-gems{display:flex;justify-content:center;align-items:center;gap:2px;margin-bottom:14px}
#p1-intro-view .p01-gems img{width:82px;height:60px;display:block;filter:drop-shadow(0 3px 8px rgba(120,100,40,.22))}
#p1-intro-view .p01-gem-extra{
  margin-left:10px;padding-left:14px;border-left:1px dashed rgba(0,0,0,.16);display:flex;align-items:center}
#p1-intro-view .p01-gem-extra img{width:66px;height:48px;opacity:.92}
#p1-intro-view .p01-loop p{font-size:16.5px;line-height:1.75;font-weight:700;color:var(--p01-ink2);margin:0}
#p1-intro-view .p01-loop b{display:inline-block;margin-top:8px;color:var(--p01-sapphire);font-weight:800}

/* ---------- CTA（兩行按鈕） ---------- */
#p1-intro-view .p01-login{margin-top:26px;background:none;border:0;box-shadow:none;padding:0}
#p1-intro-view .p01-cta{
  display:block;width:100%;min-height:72px;padding:12px 10px;
  background:var(--p01-orange);color:#fff;border:0;border-radius:12px;cursor:pointer;
  box-shadow:0 6px 18px rgba(224,123,44,.32);text-align:center}
#p1-intro-view .p01-cta-top{
  display:block;font-size:13px;font-weight:700;letter-spacing:.14em;opacity:.92;margin-bottom:4px}
#p1-intro-view .p01-cta-main{display:block;font-size:17px;font-weight:800;line-height:1.35}
#p1-intro-view .p01-cta-note{
  margin:11px 0 0;font-size:12.5px;color:var(--p01-ink3);text-align:center;letter-spacing:.02em}
#p1-intro-view .link-btn{margin-top:14px}

/* ---------- 手機 ---------- */
@media (max-width:400px){
  #p1-intro-view .p01-h1{font-size:26px}
  #p1-intro-view .p01-cta-main{font-size:16px}
  #p1-intro-view .p01-gems img{width:72px;height:53px}
  #p1-intro-view .p01-gem-extra img{width:58px;height:42px}
}

/* ============================================================
   結果頁 .p01-res-*  （對應 GPT RESULTS PATCH 的 CSS Contract）
   🔴 全部 scoped 在 #p2-result-view 內，不動 .card / .cta 等全域 selector
   ============================================================ */

/* 背景：結果頁與首頁同一個世界（其他 view 時本區塊為 hidden） */
#p2-result-view::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--p01-paper);
}
#p2-result-view::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 42% at 88% 6%, rgba(201,162,39,.14), transparent 62%),
    radial-gradient(52% 38% at 6% 92%, rgba(201,162,39,.11), transparent 64%);
}

#p2-result-view .p01-res-page{max-width:430px;margin:0 auto;padding:8px 0 44px}

/* ---------- 等級 Hero ---------- */
#p2-result-view .p01-res-hero{text-align:center;margin-bottom:22px}
#p2-result-view .p01-res-kicker{
  display:inline-block;font-size:12.5px;letter-spacing:.14em;color:var(--p01-ink3);
  border:0;background:none;padding:0;margin:0 0 8px}
#p2-result-view .p01-res-level{
  font-size:32px;font-weight:800;letter-spacing:.02em;color:var(--p01-ink);margin:0;line-height:1.3}
#p2-result-view .p01-res-sub{
  margin:14px 0 0;font-size:15.5px;line-height:1.8;color:var(--p01-ink2)}
#p2-result-view .p01-res-sub strong{color:var(--p01-ink);font-weight:800}

/* ---------- 寶石卡 ---------- */
#p2-result-view .p01-res-cardlabel{
  font-size:12px;letter-spacing:.12em;color:var(--p01-ink3);margin:0 0 8px 2px}
#p2-result-view .p01-res-card{
  border-radius:16px;overflow:hidden;margin:0 0 16px;
  box-shadow:0 8px 26px rgba(120,100,40,.16)}
#p2-result-view .p01-res-card img{display:block;width:100%;height:auto}

/* ---------- 分析 ／ 建議路徑 ---------- */
#p2-result-view .p01-res-analysis,
#p2-result-view .p01-res-route{
  background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.07);
  border-radius:14px;padding:16px 18px;margin:0 0 14px}
#p2-result-view .p01-res-analysis h2,
#p2-result-view .p01-res-route h2{
  font-size:13px;letter-spacing:.1em;color:var(--p01-green);margin:0 0 10px;font-weight:800}
#p2-result-view .p01-res-analysis p{
  font-size:15.5px;line-height:1.9;color:var(--p01-ink2);margin:0 0 8px}
#p2-result-view .p01-res-analysis p:last-child{margin-bottom:0}
#p2-result-view .p01-res-route ul{margin:0;padding-left:18px}
#p2-result-view .p01-res-route li{
  font-size:15px;line-height:1.85;color:var(--p01-ink2);margin-bottom:4px}

/* ---------- W1 減負卡（綠色，不用警示色） ---------- */
#p2-result-view .p01-res-relief{
  margin:18px 0 4px;padding:16px 18px;
  background:rgba(30,91,69,.06);border:0;border-left:3px solid var(--p01-green);
  border-radius:0 10px 10px 0}
#p2-result-view .p01-res-relief p{
  font-size:16.5px;line-height:1.9;color:var(--p01-ink2);margin:0 0 6px}
#p2-result-view .p01-res-relief p:last-child{margin-bottom:0}
#p2-result-view .p01-res-relief strong{color:var(--p01-green);font-weight:800}

/* ---------- W2／W3 藍寶石揭曉（層級低於主寶石） ---------- */
#p2-result-view .p01-res-reveal{
  margin:24px 0 10px;font-size:17px;font-weight:800;line-height:1.6;color:var(--p01-sapphire)}
#p2-result-view .p01-res-reveal + .p01-res-card{
  box-shadow:0 4px 16px rgba(30,90,168,.14);opacity:.97}

/* ---------- 成交區 ---------- */
#p2-result-view .p01-res-cta{margin-top:28px;text-align:left}
#p2-result-view .p01-res-close{
  font-size:23px;font-weight:800;line-height:1.55;color:var(--p01-ink);margin:0}
#p2-result-view .p01-res-close-sub{
  margin:8px 0 0;font-size:17px;font-weight:700;line-height:1.6;color:var(--p01-ink2)}
#p2-result-view .p01-res-primary{
  display:block;width:100%;margin-top:20px;min-height:56px;padding:16px 10px;
  background:var(--p01-orange);color:#fff;border:0;border-radius:12px;
  font-size:17px;font-weight:800;text-align:center;text-decoration:none;
  box-shadow:0 6px 18px rgba(224,123,44,.32)}
#p2-result-view .p01-res-note{
  margin:11px 0 0;font-size:12.5px;color:var(--p01-ink3);text-align:center}
#p2-result-view .p01-res-secondary{
  display:block;margin-top:16px;text-align:center;font-size:15px;
  color:var(--p01-green);text-decoration:underline;text-underline-offset:4px;background:none;border:0}
#p2-result-view .p01-res-disclaimer{
  margin:26px 0 0;font-size:11.5px;line-height:1.8;color:#9a9588;text-align:center}

@media (max-width:400px){
  #p2-result-view .p01-res-level{font-size:29px}
  #p2-result-view .p01-res-close{font-size:21px}
  #p2-result-view .p01-res-primary{font-size:16px}
}