/* * Preserved legacy cascade extracted from the prototype HTML (FRE-002). * Keep this stylesheet before the progressively migrated UI-system layers. */ /* ═══════════════════════════════════════════════════════════ UI SYSTEM · Token 層 規則:元件裡不准出現裸色碼、不准出現裸字級。 全部走 token —— 這是「主題可切換」與「字級可放大」的唯一前提。 ═══════════════════════════════════════════════════════════ */ /* ── 字級階梯(rem)── 原本有 33 種字級、505 處裸 px —— 那不是階梯,是失控。 收斂成 11 階。用 rem 是為了讓根字級一動,全站文字跟著動。 */ html{ font-size:16px } /* 正常 */ html[data-ts="lg"]{ font-size:18px } /* 大(+12.5%) */ :root{ --fs-3xs:.625rem; /* 10 · 極小標記 */ --fs-2xs:.6875rem; /* 11 · 註腳、來源行 */ --fs-xs:.75rem; /* 12 · 次要說明 */ --fs-sm:.8125rem; /* 13 · 表格內文 */ --fs-md:.875rem; /* 14 · 輔助文字 */ --fs-base:.9375rem; /* 15 · 內文基準 */ --fs-lg:1.0625rem; /* 17 · 卡片標題、手機輸入框(≥16px 才不會被 iOS 放大) */ --fs-xl:1.25rem; /* 20 · 區塊標題 */ --fs-2xl:1.5rem; /* 24 · 頁面標題 */ --fs-3xl:1.875rem; /* 30 · Hero */ --fs-4xl:2.375rem; /* 38 · 數字展示 */ /* ── 版面 ── */ --radius:10px; --radius-sm:7px; --radius-lg:14px; --shadow:0 1px 2px rgba(38,48,59,.04), 0 6px 20px rgba(38,48,59,.06); --shadow-lift:0 4px 10px rgba(38,48,59,.08), 0 14px 40px rgba(38,48,59,.10); /* ── 字體 ── */ --mono:'IBM Plex Mono',ui-monospace,monospace; --disp:'Poppins','Noto Sans TC',sans-serif; --body:'Noto Sans TC',system-ui,sans-serif; --disp-w:600; --tracking:0; /* ── 表面 ── */ --bg:#EDEFF1; --card:#FFFFFF; --surface-2:#FAFBFC; /* 微填色 */ --surface-3:#F2F4F6; /* 標籤底 */ --surface-4:#F0F2F4; --on-accent:#FFFFFF; /* 疊在主色上的文字 */ /* ── 文字 ── ⚠ --ink-faint 原本是 #8A96A3,在白底上對比只有 2.85:1, 遠低於 WCAG AA 的 4.5:1。手機在戶外根本看不到。已提高。 */ --ink:#26303B; --ink-soft:#5B6875; --ink-faint:#666D76; /* WCAG AA:白底 5.23:1 · 頁底 4.54:1 · 標籤底 4.74:1 (原本 #8A96A3 只有 2.85:1 —— 手機在戶外根本看不到) */ --ink-dim:#9AA6B2; /* 僅供非文字用途(圖示描邊、分隔) */ --line:#E2E6EA; --line-2:#E8EBEE; --line-3:#CFD5DB; /* ── 主色(鋼藍)── */ --steel:#46699E; /* WCAG AA:頁底 4.83:1 · 白底 5.56:1(原本 #4A6FA5 在頁底只有 4.43:1) */ --steel-dark:#3A5A88; --steel-deep:#2E4A73; --steel-tint:#EAF0F7; --steel-tint-2:#F4F7FA; --steel-tint-3:#EDF1F6; --steel-line:#D4DEEC; --steel-line-2:#CBD9EC; --steel-line-3:#DDE7F2; --steel-soft:#9FBBDC; /* ── 語意色 ── */ --ok:#4F7B64; --ok-ink:#3D6650; /* 4.83:1 vs 白(原 #5B8A72 只有 3.94) */ --ok-ink-2:#4D7862; --ok-tint:#EAF3EE; --ok-tint-2:#F2F8F4; --ok-line:#CBE0D4; --warn:#B57F3D; --warn-ink:#8A5E1E; --warn-ink-2:#9C6C2F; --warn-ink-3:#8A5C25; --warn-deep:#7A6440; --warn-deep-2:#5E4A28; --warn-tint:#F6EFE3; --warn-tint-2:#FDF8EF; --warn-tint-3:#F8F0E2; --warn-tint-4:#FCF6EA; --warn-tint-5:#FDF3E0; --warn-line:#EAD9BF; --risk:#B84A42; /* 5.13:1 vs 白。對比是對稱的 —— 過了就兩邊都能用(原 #C0564E 只有 4.48) */ --risk-ink:#9E3E37; --risk-deep:#8A2E27; --risk-soft:#D98B84; --risk-tint:#FBEAE8; --risk-tint-2:#FDF6F5; --risk-tint-3:#FDFAFA; --risk-line:#EFD3D0; --gold:#E0A72B; --gold-2:#E08A2B; --gold-deep:#C89A4E; /* 產業鏈上中下游(沿用) */ --up:var(--ok); --up-tint:var(--ok-tint); --mid:var(--steel); --mid-tint:var(--steel-tint); --down:var(--warn); --down-tint:var(--warn-tint); --paper:#FCFDFE; --paper-2:#FFFDF9; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--ink); font-family:var(--body);font-size:var(--fs-base);line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--steel);outline-offset:2px;border-radius:4px} /* ---------- Header ---------- 設計原則:層級 > 平權。 舊版八顆同權重膠囊按鈕平鋪,使用者掃視時沒有任何落點。 改成:品牌 | 四個語意群組(結構/關係/風險/查詢台) | 搜尋 | 工具與狀態 導覽列不用邊框膠囊,改用純文字 + hover 底色,把視覺重量讓給內容。 */ .top{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .top-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:8px} /* 品牌 */ .site-brand{display:flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0;padding-right:20px;margin-right:4px;border-right:1px solid var(--line);height:36px} .site-brand .mark{ width:82px;height:30px;border-radius:0;background:transparent; display:grid;place-items:center;box-shadow:none;flex-shrink:0; } .site-brand .mark img{width:82px;height:30px;display:block} .site-brand .txt{display:flex;flex-direction:column;justify-content:center;gap:1px;width:8.4375rem} .site-brand .txt b{font-family:var(--disp);font-weight:600;font-size:var(--fs-base);letter-spacing:.1px;display:block;line-height:1.08;white-space:nowrap} .site-brand .txt .brand-sub{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:var(--disp);font-size:var(--fs-3xs);font-weight:500;line-height:1.1;color:var(--ink-faint);white-space:nowrap} .site-brand .txt .brand-sub .brand-word-start{margin-left:.22em} @media(max-width:1180px){.site-brand .txt{display:none}.site-brand{padding-right:14px}} /* 主導覽 */ .nav{display:flex;align-items:center;gap:2px;flex-shrink:0} .nv{position:relative} .nv-b{ display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 13px; border:none;background:none;border-radius:8px; font-family:var(--body);font-size:var(--fs-md);font-weight:500;color:var(--ink-soft); cursor:pointer;transition:background .12s,color .12s;white-space:nowrap; } .nv-b:hover{background:var(--steel-tint);color:var(--steel-deep)} .nv-x{width:13px;height:13px;opacity:.5;transition:transform .16s} .nv.open .nv-b{background:var(--steel-tint);color:var(--steel-deep)} .nv.open .nv-x{transform:rotate(180deg)} /* 目前所在區塊:底線標示,不用整顆變色 */ .nv.active .nv-b, .nv-b.solo.active{color:var(--steel-deep);font-weight:600} .nv.active::after, .nv-b.solo.active::after{ content:'';position:absolute;left:13px;right:13px;bottom:-13px;height:2px;background:var(--steel);border-radius:2px; } .nv-b.solo{position:relative} .nav-insights{margin-left:2px} @media(max-width:1120px){.nav-insights{display:none}} /* 胖選單(mega menu):滿版下拉,一次攤開所有入口 */ .mega{ position:absolute;left:0;right:0;top:100%; background:var(--card);border-bottom:1px solid var(--line); box-shadow:0 16px 40px rgba(38,48,59,.13); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .16s ease,transform .16s ease,visibility .16s; z-index:55;max-height:calc(100vh - 60px);overflow:auto; } .mega.show{opacity:1;visibility:visible;transform:none} .mg-inner{ max-width:1240px;margin:0 auto;padding:18px 24px 20px; display:grid;grid-template-columns:repeat(4,minmax(170px,1fr)) minmax(220px,250px);gap:18px;align-items:start;justify-content:center;grid-auto-flow:row dense; } .mg-inner.mg-global{grid-template-columns:repeat(5,minmax(150px,1fr)) minmax(220px,250px)} .mg-inner.mg-risk,.mg-inner.mg-find{grid-template-columns:repeat(3,minmax(190px,1fr)) minmax(220px,250px)} .mg-inner > .mg-feat{grid-column:-2 / -1;grid-row:1} @media(max-width:1150px){ .mg-inner,.mg-inner.mg-global,.mg-inner.mg-risk,.mg-inner.mg-find{grid-template-columns:repeat(3,minmax(170px,1fr)) minmax(210px,240px)} } .mg-col{min-width:0} .mg-h{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line)} .mg-h b{display:block;font-size:var(--fs-sm);font-weight:750;color:var(--ink);line-height:1.35;margin-bottom:0} .mg-h span{display:none} .mg-links{display:grid;gap:4px} .mg-l{ display:flex;align-items:center;width:100%;min-height:32px;text-align:left; background:none;border:1px solid transparent;border-radius:7px;padding:6px 8px;cursor:pointer; font-family:var(--body);transition:background .1s; } .mg-l:hover{background:var(--steel-tint);border-color:var(--steel-line)} .mgl-t{font-size:var(--fs-sm);font-weight:650;color:var(--ink-soft);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mg-l:hover .mgl-t{color:var(--steel-deep)} .mgl-m{display:none} .mg-all{ margin-top:8px;width:100%;text-align:left;background:none;border:none; padding:6px 8px;border-radius:7px;cursor:pointer;font-family:var(--body); font-size:var(--fs-xs);font-weight:600;color:var(--steel);transition:background .1s; } .mg-all:hover{background:var(--steel-tint)} .mg-note p{margin:0 0 11px;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.5} .mg-note p b{color:var(--ink);font-size:var(--fs-sm)} .mg-note p span{color:var(--ink-faint);font-size:var(--fs-2xs)} .mg-note button{ display:block;width:100%;margin:0 0 8px;padding:8px 10px;border:0;border-radius:12px; background:transparent;text-align:left;font:inherit;color:var(--ink-soft);line-height:1.5;cursor:pointer; transition:background .14s var(--ui-ease),transform .14s var(--ui-ease),color .14s var(--ui-ease); } .mg-note button:hover{background:var(--ui-primary-tint);transform:translateX(2px)} .mg-note button:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px} .mg-note button b{color:var(--ink);font-size:var(--fs-sm)} .mg-note button span{color:var(--ink-faint);font-size:var(--fs-2xs)} .mg-note button:hover b{color:var(--ui-primary)} /* 精選卡 */ .mg-feat{ background:var(--ui-primary-tint); width:100%;max-width:250px;min-height:210px;justify-self:end; display:flex;flex-direction:column; border:1px solid var(--steel-line);border-radius:13px;padding:17px; } .mg-feat.warn{background:linear-gradient(160deg,var(--warn-tint-2),var(--warn-tint-3));border-color:var(--warn-line)} .mgf-tag{font-size:var(--fs-2xs);font-weight:700;color:var(--steel);letter-spacing:.5px;margin-bottom:8px} .mg-feat.warn .mgf-tag{color:var(--warn-ink)} .mgf-n{font-family:var(--disp);font-weight:700;font-size:var(--fs-3xl);color:var(--steel);line-height:1;margin-bottom:8px} .mg-feat.warn .mgf-n{color:var(--risk)} .mgf-k{font-family:var(--mono);font-size:var(--fs-lg);background:var(--card);border:1px solid var(--steel-line);border-radius:6px;padding:2px 9px;color:var(--steel)} .mgf-l{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.6;margin-bottom:13px} .mgf-l b{color:var(--ink)} /* 搜尋 */ .searchbar{margin-left:auto;position:relative;flex:0 0 auto;width:44px;max-width:44px;min-width:44px;transition:width var(--motion-base) var(--motion-enter),max-width var(--motion-base) var(--motion-enter)} .searchbar:focus-within{width:clamp(190px,24vw,280px);max-width:280px} .searchbar input{ width:100%;height:44px;padding:0;border:1px solid var(--line);box-sizing:border-box; border-radius:8px;background:var(--surface-2);font-family:var(--body);font-size:var(--fs-sm);color:var(--ink); cursor:pointer;caret-color:transparent;transition:border-color .15s,box-shadow .15s,background .15s,padding var(--motion-fast) ease,color var(--motion-fast) ease; } .searchbar:focus-within input{padding:0 34px 0 40px;cursor:text;caret-color:auto} .searchbar input::placeholder{color:var(--ink-faint)} .searchbar:not(:focus-within) input{color:transparent} .searchbar:not(:focus-within) input::placeholder{color:transparent} .searchbar input:focus{outline:none;background:var(--card);border-color:var(--steel);box-shadow:0 0 0 3px rgba(74,111,165,.12)} .searchbar svg{position:absolute;z-index:1;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-faint);pointer-events:none} /* 工具與狀態 */ .util{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-left:10px;margin-left:6px;border-left:1px solid var(--line);height:32px} .ut-b{ position:relative;display:inline-grid;place-items:center;width:34px;height:34px; border:none;background:none;border-radius:8px;color:var(--ink-faint);cursor:pointer;transition:.12s; } .ut-b:hover{background:var(--steel-tint);color:var(--steel-deep)} .ut-b svg{width:17px;height:17px} .ut-b b{ position:absolute;top:2px;right:1px;font-family:var(--mono);font-size:var(--fs-3xs); background:var(--steel);color:var(--on-accent);border-radius:20px;padding:0 4px;min-width:14px; text-align:center;line-height:14px;font-weight:600; } /* ============ 手機版 ============ 設計決策:不用漢堡選單。 漢堡在手機上是反模式 —— 它把功能藏起來,而且點擊區在螢幕最頂端(拇指最難到的地方)。 改用「底部分頁列」:四大能力永遠可見、永遠在拇指可及範圍。 點分頁列 → 從底部彈出面板(不是從頂端掉下來的下拉選單)。 */ /* 底部分頁列(桌機隱藏) */ .tabbar{display:none} @media(max-width:900px){ .nav{display:none} .mega{display:none} .tabbar{ display:grid;grid-template-columns:repeat(5,1fr); position:fixed;left:0;right:0;bottom:0;z-index:80; overflow:visible; background:rgba(255,255,255,.96);backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); /* iPhone 底部安全區 */ box-shadow:0 -2px 14px rgba(38,48,59,.05); } .tb{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; height:56px;border:none;background:none;cursor:pointer;position:relative; color:var(--ink-faint);font-family:var(--body);transition:color .12s; -webkit-tap-highlight-color:transparent; } .tb svg{width:21px;height:21px} .tb span{font-size:var(--fs-2xs);font-weight:500} .tb.on{color:var(--steel)} .tb.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:2.5px;background:var(--steel);border-radius:0 0 3px 3px} .tb i{ position:absolute;top:5px;right:calc(50% - 20px);font-style:normal;font-family:var(--mono); font-size:var(--fs-3xs);background:var(--steel);color:var(--on-accent);border-radius:20px;padding:0 4px;min-width:14px; text-align:center;line-height:14px;font-weight:600; } .tb-main{overflow:visible;background:transparent!important;color:var(--ui-primary)} .tb-main::before{display:none!important} .tb-main-disc{ position:absolute;left:50%;top:-28px;transform:translateX(-50%); display:grid;place-items:center;width:62px;height:62px;border-radius:50%; background:var(--ui-primary);color:var(--on-accent);border:4px solid var(--ui-surface); box-shadow:0 10px 28px color-mix(in srgb,var(--ui-primary) 35%,transparent),0 0 0 1px color-mix(in srgb,var(--ui-primary) 18%,transparent); } .tb-main-disc svg{width:27px;height:27px;stroke-width:2.2} .tb-main-label{margin-top:32px;color:var(--ui-primary-strong);font-weight:700!important} .tb-main:active{transform:none!important} .tb-main:active .tb-main-disc{transform:translateX(-50%) scale(.94);background:var(--ui-primary-hover)} .tb-main:focus-visible{outline:0} .tb-main:focus-visible .tb-main-disc{outline:3px solid var(--ui-focus);outline-offset:3px} /* 內容不被分頁列蓋住 */ body{padding-bottom:calc(68px + env(safe-area-inset-bottom))} .foot{margin-bottom:20px} } /* 底部彈出面板 */ .sheet-host{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden} .sheet-host.show{pointer-events:auto;visibility:visible} .sh-bg{position:absolute;inset:0;background:rgba(38,48,59,.45);opacity:0;animation:mdFade .16s ease-out forwards} .sh-panel{ position:absolute;left:0;right:0;bottom:0;background:var(--card); border-radius:20px 20px 0 0;padding:8px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -8px 34px rgba(38,48,59,.2); transform:translate3d(0,100%,0);animation:shUp .26s cubic-bezier(.2,.85,.3,1) forwards; will-change:transform;max-height:82vh;overflow:auto; } @keyframes shUp{to{transform:translate3d(0,0,0)}} .sh-grip{width:38px;height:4px;border-radius:3px;background:var(--ui-border);margin:4px auto 12px} .sh-hd{position:relative;padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:8px} .sh-hd b{display:block;font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);color:var(--ink)} .sh-hd span{font-size:var(--fs-xs);color:var(--ink-faint)} .sh-x{position:absolute;right:0;top:-2px;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);cursor:pointer;font-size:var(--fs-md)} .sh-i{ display:grid;grid-template-columns:1fr 20px;align-items:center;gap:8px; width:100%;text-align:left;background:none;border:none;border-radius:12px; padding:14px 12px;cursor:pointer;font-family:var(--body); -webkit-tap-highlight-color:transparent;transition:background .12s; min-height:60px; /* 拇指友善的點擊區 */ } .sh-i:active{background:var(--steel-tint)} .shi-q{display:block;font-size:var(--fs-base);font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:3px} .shi-d{display:block;font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.5} .sh-i.hot .shi-q::after{content:''} .shi-a{width:18px;height:18px;color:var(--ink-faint)} .sh-more{ width:100%;margin-top:8px;padding:13px;border-radius:11px;border:1px solid var(--line); background:var(--surface-2);color:var(--steel-deep);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:var(--body); } /* 中央主入口：保留全站 Header，以下內容改為可捲動的全頁分類總覽。 */ @media(max-width:900px){ .sheet-host.full-menu{top:56px;background:var(--ui-canvas)} .sheet-host.full-menu .sh-bg{display:none} .sh-full-panel{ position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain; padding:0 var(--space-4) calc(28px + env(safe-area-inset-bottom)); background:var(--ui-canvas);animation:fullMenuIn .2s var(--motion-enter) both; } @keyframes fullMenuIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} .sh-full-top{ position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px; margin:0 calc(-1 * var(--space-4)) 18px;padding:18px var(--space-4) 14px; background:color-mix(in srgb,var(--ui-canvas) 92%,transparent);backdrop-filter:blur(14px); border-bottom:1px solid var(--ui-border) } .sh-full-top b{display:block;color:var(--ui-text-strong);font-family:var(--disp);font-size:var(--fs-xl);line-height:1.25} .sh-full-top span{display:block;margin-top:3px;color:var(--ui-text-muted);font-size:var(--fs-xs)} .sh-full-close{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--ui-border);border-radius:50%;background:var(--ui-surface);color:var(--ui-text);font-size:var(--fs-lg)} .sh-full-groups{max-width:720px;margin:0 auto} .sh-full-group{margin:0 0 24px} .sh-full-group h2{margin:0 0 10px;color:var(--ui-text-muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em} .sh-full-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sh-full-item{ display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:center;gap:8px; min-width:0;min-height:72px;padding:13px 12px;text-align:left; border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text); box-shadow:var(--ui-shadow-1) } .sh-full-group:first-child .sh-full-item{min-height:88px;border-color:var(--ui-selection-border);background:var(--ui-selection-bg)} .sh-full-item b{display:block;color:var(--ui-text-strong);font-size:var(--fs-sm);line-height:1.4;overflow-wrap:anywhere} .sh-full-item small{display:block;margin-top:4px;color:var(--ui-text-muted);font-size:var(--fs-3xs);line-height:1.45} .sh-full-item svg{width:18px;height:18px;color:var(--ui-primary)} .sh-full-item:active{background:var(--ui-primary-tint);border-color:var(--ui-selection-border)} } /* 手機版 header 精簡 */ @media(max-width:900px){ .top-inner{height:56px;padding:0 14px;gap:10px} .site-brand{gap:10px;max-width:218px;min-width:0;padding-right:0;margin-right:0;border-right:none} .site-brand .mark,.site-brand .mark img{width:82px;height:30px} .site-brand .txt{display:flex;width:126px;height:30px;min-width:0;justify-content:center;gap:1px} .site-brand .txt b{width:126px;font-size:14px;font-weight:700;line-height:16px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis} .site-brand .txt .brand-sub{display:flex;justify-content:space-between;width:126px;font-size:8px;font-weight:500;letter-spacing:0;line-height:10px;overflow:hidden} .site-brand .txt .brand-sub .brand-word-start{margin-left:.18em} .site-brand .txt .brand-sub span{margin:0} .searchbar{margin-left:auto} .top-inner:has(.searchbar:focus-within) .site-brand{max-width:82px} .top-inner:has(.searchbar:focus-within) .site-brand .txt{display:none} .searchbar:focus-within{width:min(212px,calc(100vw - 178px));max-width:212px} .searchbar input{height:44px;font-size:var(--fs-lg)} /* 16px 防止 iOS 自動放大 */ .util{border-left:none;padding-left:0;margin-left:0} body.is-home .top .searchbar{display:none} body.is-home .top .util{margin-left:auto} } @media(max-width:360px){ .site-brand{gap:7px;max-width:172px} .site-brand .mark,.site-brand .mark img{width:66px;height:24px} .site-brand .txt{display:flex;width:99px;height:24px} .site-brand .txt b{width:99px;font-size:11px;line-height:13px} .site-brand .txt .brand-sub{display:flex;width:99px;font-size:6px;line-height:8px} .top-inner:has(.searchbar:focus-within) .site-brand{max-width:66px} .top-inner:has(.searchbar:focus-within) .site-brand .txt{display:none} } /* 手機版:Modal 改為全螢幕(桌機是置中卡片) */ @media(max-width:760px){ .at-modal{ top:auto;left:0;right:0;bottom:0;width:100%;max-height:92vh; border-radius:20px 20px 0 0;grid-template-columns:1fr; transform:translate3d(0,100%,0);animation:shUp .26s cubic-bezier(.2,.85,.3,1) forwards; } .at-m-left{display:none} .at-m-right{padding:26px 20px calc(24px + env(safe-area-inset-bottom))} .at-mx{position:sticky;float:right;top:8px;right:8px;background:var(--card);box-shadow:var(--shadow)} } /* 手機版:內容密度調整 */ @media(max-width:760px){ .wrap{padding:0 14px} .hero h1,.sp-hero h1,.ab-hero h1{font-size:var(--fs-2xl);line-height:1.45} .stats,.sp-stats,.ab-stats{grid-template-columns:repeat(2,1fr)} .sec-head h2{font-size:var(--fs-lg)} .sec-head .hint{display:none} /* 手機不放次要說明 */ .at-layout{grid-template-columns:1fr} .at-side{position:static} .at-topbar{flex-direction:column;align-items:stretch;gap:10px} .at-switch{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px} .ats-btn{flex-shrink:0} /* 表格類改為卡片式堆疊 */ .gp-row,.mx-wrap{font-size:var(--fs-xs)} .mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* 所有可點元素至少 44px 高 */ .st-btn,.ats-btn,.att{min-height:38px;display:inline-flex;align-items:center} } @media(max-width:560px){.grid{grid-template-columns:1fr}} /* ---------- Layout ---------- */ .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .breadcrumb{font-size:var(--fs-sm);color:var(--ink-faint);padding:18px 0 4px;font-family:var(--mono);letter-spacing:.3px} .breadcrumb a{color:var(--steel);cursor:pointer} .breadcrumb a:hover{text-decoration:underline} .breadcrumb .sep{margin:0 8px;color:var(--ink-faint)} /* ---------- Hero ---------- */ .hero{padding:44px 0 30px} .hero .eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:3px;color:var(--steel);text-transform:uppercase} .hero h1{font-family:var(--disp);font-weight:700;font-size:var(--fs-3xl);margin:12px 0 6px;letter-spacing:1px;line-height:1.2} .hero .sub{font-size:var(--fs-base);color:var(--ink-soft);max-width:640px} .hero .stats{display:flex;gap:36px;margin-top:26px;flex-wrap:wrap} .hero .stat b{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);color:var(--steel-deep);display:block;line-height:1} .hero .stat span{font-size:var(--fs-xs);color:var(--ink-faint);letter-spacing:.5px} /* ---------- Section head ---------- */ .sec-head{display:flex;align-items:baseline;gap:12px;margin:34px 0 16px} .sec-head h2{font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);margin:0;letter-spacing:.4px} .sec-head .hint{font-size:var(--fs-sm);color:var(--ink-faint)} .sec-head .rule{flex:1;height:1px;background:var(--line)} /* ---------- Chain grid ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .chain-tile{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:18px 16px;box-shadow:var(--shadow);cursor:pointer;position:relative;overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s; } .chain-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .chain-tile .ico{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--steel-tint);color:var(--steel);margin-bottom:12px} .chain-tile .ico svg{width:21px;height:21px} .chain-tile h3{font-size:var(--fs-base);font-weight:700;margin:0 0 3px} .chain-tile .meta{font-size:var(--fs-xs);color:var(--ink-faint);font-family:var(--mono)} .chain-tile .arrow{position:absolute;right:14px;top:18px;color:var(--ink-faint);opacity:0;transform:translateX(-4px);transition:.16s} .chain-tile:hover .arrow{opacity:1;transform:translateX(0)} .chain-tile.wip{opacity:.62;cursor:default} .chain-tile.wip:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)} .chain-tile .wip-tag{position:absolute;right:12px;top:14px;font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint);border:1px solid var(--line);padding:2px 6px;border-radius:5px} /* ---------- Chain detail ---------- */ .chain-hd{display:flex;align-items:flex-start;gap:18px;padding:6px 0 4px} .chain-hd .big-ico{width:56px;height:56px;border-radius:12px;background:var(--steel-tint);color:var(--steel-deep);display:grid;place-items:center;flex-shrink:0;border:1px solid var(--steel-line);box-shadow:none} .chain-hd .big-ico svg{width:30px;height:30px} .chain-hd h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);margin:0 0 4px;letter-spacing:.5px} .chain-hd p{margin:0;color:var(--ink-soft);font-size:var(--fs-md);max-width:720px} .layout2{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:22px;align-items:start} @media(max-width:900px){.layout2{grid-template-columns:1fr}} /* ===== value chain diagram ===== */ .vc-legend{display:flex;gap:14px;margin:18px 0 14px;flex-wrap:wrap} .vc-legend span{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink-soft);font-weight:500} .vc-legend i{width:8px;height:8px;border-radius:50%;display:inline-block} .vc-diagram{display:flex;align-items:stretch;gap:14px} @media(max-width:820px){.vc-diagram{flex-direction:column}} .vc-zone{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card)} .vc-zone-hd{padding:13px 15px;color:var(--ink);background:var(--surface-2);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px} .vc-zone[data-s="up"] .vc-zone-hd{background:var(--up-tint);border-bottom-color:var(--ok-line)} .vc-zone[data-s="mid"] .vc-zone-hd{background:var(--mid-tint);border-bottom-color:var(--steel-line)} .vc-zone[data-s="down"] .vc-zone-hd{background:var(--down-tint);border-bottom-color:var(--warn-line)} .vc-zone-hd b{font-family:var(--disp);font-weight:700;font-size:var(--fs-md);letter-spacing:0;display:inline-flex;align-items:center;gap:9px} .vc-zone-hd b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel);box-shadow:0 0 0 3px var(--steel-tint)} .vc-zone[data-s="up"] .vc-zone-hd b::before{background:var(--up);box-shadow:0 0 0 3px var(--up-tint)} .vc-zone[data-s="down"] .vc-zone-hd b::before{background:var(--down);box-shadow:0 0 0 3px var(--down-tint)} .vc-zone-hd small{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.4px;color:var(--ink-faint);text-align:right} .vc-zone-body{flex:1;padding:12px;display:flex;flex-direction:column;gap:9px;background:var(--card)} .vc-conn{flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);position:relative} .vc-conn::before{display:none} .vc-conn svg{width:18px;height:18px;position:relative;z-index:1;background:transparent;padding:0} @media(max-width:820px){ .vc-conn{flex:0 0 24px;width:100%;height:24px} .vc-conn svg{transform:rotate(90deg)} } .seg-box{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 12px;box-shadow:none;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:8px;transition:background .12s,border-color .12s} .sb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .sb-main{display:flex;flex-direction:column;gap:2px;min-width:0} .sb-lead{font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px} .sb-right{display:flex;align-items:center;gap:6px;flex-shrink:0} .sb-theme{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--warn-ink);background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:20px;padding:2px 7px;font-weight:600} .heat{height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden} .heat i{display:block;height:100%;border-radius:3px} .heat[data-s="up"] i,.heat[data-s="mid"] i,.heat[data-s="down"] i{background:var(--steel)} .seg-box.active .sb-lead{color:var(--ink-soft)} .seg-box.active .heat{background:var(--steel-line)} .seg-box.active .heat i{background:var(--steel)} .seg-box.theme-hit{box-shadow:none;background:color-mix(in srgb,var(--steel-tint) 62%,var(--card));border-color:var(--steel-line)} .seg-box.theme-dim{opacity:.5} .leaf.theme-hit{box-shadow:0 0 0 2px var(--steel)} .leaf.theme-dim{opacity:.5} .seg-box:hover{background:var(--surface-2);border-color:var(--line-3)} .seg-box .seg-name{font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.35} .seg-box .cnt{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);flex-shrink:0;border:1px solid var(--line);border-radius:20px;padding:2px 9px;background:var(--surface-2)} .seg-box.active[data-s="up"],.seg-box.active[data-s="mid"],.seg-box.active[data-s="down"]{background:color-mix(in srgb,var(--steel-tint) 72%,var(--card));border-color:var(--steel-line)} .seg-box.active .seg-name{color:var(--steel-deep)} .seg-box.active .cnt{background:var(--card);border-color:var(--steel-line);color:var(--steel-deep)} .seg-box.static{cursor:default;box-shadow:none} .seg-box.static:hover{transform:none;box-shadow:none} .seg-box.static .cnt{background:transparent;border:none;color:var(--ink-faint)} .group-box{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:11px} .vc-zone[data-s="up"] .group-box{background:var(--surface-2);border-color:var(--line)} .group-box .g-label{font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-align:center;margin-bottom:10px;letter-spacing:.5px} .group-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .leaf{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 8px;text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--ink);cursor:pointer;box-shadow:none;transition:background .12s,border-color .12s;display:flex;align-items:center;justify-content:center;gap:5px} .leaf:hover{background:var(--steel-tint);border-color:var(--steel-line)} .leaf .lc{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint)} .leaf.active[data-s="up"],.leaf.active[data-s="mid"],.leaf.active[data-s="down"]{background:var(--steel-tint);color:var(--steel-deep);border-color:var(--steel)} .leaf.active .lc{color:var(--steel-deep)} .co-panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-lift);margin-top:18px} .cp-hd{font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);color:var(--ink);margin-bottom:4px} .cp-close{position:absolute;right:16px;top:16px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);font-size:var(--fs-md);display:grid;place-items:center;cursor:pointer;transition:.13s} .cp-close:hover{background:var(--ink);color:var(--on-accent);border-color:var(--ink)} .cp-note{color:var(--ink-faint);font-size:var(--fs-sm);padding:6px 0} .co-group{display:flex;gap:14px;padding:13px 0;border-top:1px dashed var(--line);align-items:flex-start;flex-wrap:wrap} .co-group:first-of-type{border-top:none;padding-top:8px} .co-group .glabel{font-weight:700;font-size:var(--fs-sm);color:var(--steel-deep);flex:0 0 150px;padding-top:5px} .co-group .gchips{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:200px} .cp-total{margin-top:14px;font-family:var(--disp);font-weight:600;font-size:var(--fs-md);color:var(--steel-deep)} .chain-info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px} @media(max-width:700px){.chain-info{grid-template-columns:1fr}} /* ===== v0.2 components ===== */ /* home theme row */ .theme-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px} .theme-pill{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;display:flex;flex-direction:column;gap:5px} .theme-pill:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .tp-name{font-weight:700;font-size:var(--fs-base);color:var(--steel-deep)} .tp-desc{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.5} .tp-n{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel);margin-top:2px} /* chain theme bar */ .theme-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 4px} .tb-label{font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);margin-right:2px} .tb-chip{font-size:var(--fs-sm);padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:.13s} .tb-chip:hover{background:var(--steel-tint)} .tb-chip.on{background:color-mix(in srgb,var(--steel-tint) 72%,var(--card));border-color:var(--steel-line);color:var(--steel-deep)} .tb-clear{font-size:var(--fs-xs);padding:5px 10px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--ink-faint);cursor:pointer} /* company page: stat strip */ .stat-strip{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow);margin-top:14px} .ss-item{display:flex;flex-direction:column;gap:2px;padding-right:20px;border-right:1px solid var(--line);min-width:0} .ss-item:last-of-type{border-right:none} .ss-k{font-size:var(--fs-2xs);color:var(--ink-faint)} .ss-v{font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);color:var(--steel-deep)} .ss-demo{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint);letter-spacing:.5px} @media(max-width:820px){ .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:16px} .ss-item{border-right:0;border-bottom:1px solid var(--line);padding:0 12px 12px 0} .ss-item:nth-child(odd){border-right:1px solid var(--line);padding-right:14px} .ss-item:nth-child(even){padding-left:14px;padding-right:0} .ss-item:nth-child(n+3){border-bottom:0;padding-top:12px;padding-bottom:0} } @media(max-width:560px){ .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .ss-v{font-size:var(--fs-lg)} } .co-themes{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px} .th-chip{font-size:var(--fs-xs);background:var(--warn-tint);color:var(--warn-ink);border:1px solid var(--warn-line);border-radius:20px;padding:4px 11px;cursor:pointer;transition:.13s} .th-chip:hover{background:var(--warn-ink);color:var(--on-accent)} /* cross-chain position map */ .chain-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 12px} .chain-readout article{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);padding:12px 13px;box-shadow:0 8px 18px rgba(45,55,95,.04)} .chain-readout b{display:block;color:var(--ui-text-strong);font-size:var(--fs-xs);font-weight:800;margin-bottom:4px} .chain-readout span{display:block;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.6} .graph-lens{margin:0 0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);overflow:hidden} .graph-lens-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:13px 15px;border-bottom:1px solid var(--ui-border)} .graph-lens-head b{display:block;color:var(--ui-text-strong);font-size:var(--fs-sm);font-weight:850} .graph-lens-head span{display:block;margin-top:3px;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.5} .graph-lens-head em{font-style:normal;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-3xs);font-weight:800;padding:4px 8px;white-space:nowrap} .graph-lens-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0} .graph-lens-item{padding:13px 14px;border-left:1px solid var(--ui-border);min-height:118px} .graph-lens-item:first-child{border-left:0} .graph-lens-item small{display:block;color:var(--ui-text-muted);font-size:var(--fs-3xs);font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .graph-lens-item b{display:block;color:var(--ui-text-strong);font-size:var(--fs-sm);line-height:1.35;margin-bottom:5px} .graph-lens-item span{display:block;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.55} .graph-lens-item.core b{color:var(--steel-deep)} .graph-lens-item.demand b{color:var(--ok-ink)} .graph-lens-item.extension b{color:var(--warn-ink)} .graph-lens-item.gap b{color:var(--risk-ink)} @media(max-width:900px){.graph-lens-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.graph-lens-item:nth-child(odd){border-left:0}.graph-lens-item:nth-child(n+3){border-top:1px solid var(--ui-border)}} @media(max-width:520px){.graph-lens-head{flex-direction:column}.graph-lens-grid{grid-template-columns:1fr}.graph-lens-item{border-left:0;border-top:1px solid var(--ui-border)}.graph-lens-item:first-child{border-top:0}} .company-source-summary{margin:22px 0 0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);padding:16px 18px} .company-source-summary h3{margin:0 0 7px;font-family:var(--disp);font-size:var(--fs-base);color:var(--ui-text-strong)} .company-source-summary p{margin:0;color:var(--ui-text-muted);font-size:var(--fs-xs);line-height:1.65} .company-source-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .company-source-links a{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:800;text-decoration:none;padding:6px 10px} .company-source-links a:hover{background:var(--steel);color:var(--on-accent)} .company-page :where(.graph-lens-item span,.pos-why,.cms-note,.facility-item p,.company-source-summary p){font-size:var(--fs-xs);line-height:1.62} .company-page :where(.graph-lens-item b,.pos-chain,.facility-item b){font-size:var(--fs-sm)} .cross-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;min-width:0} .pos-card{text-align:left;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);padding:15px;box-shadow:var(--ui-shadow-1);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;min-height:174px;min-width:0} .pos-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-2);border-color:color-mix(in srgb,var(--ui-primary) 34%,var(--ui-border))} .pos-top{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;flex-wrap:wrap} .pos-chain{display:flex;align-items:flex-start;gap:7px;font-weight:750;font-size:var(--fs-sm);color:var(--ui-text-strong);flex:1 1 12rem;min-width:0;line-height:1.35;overflow-wrap:anywhere} .pos-chain svg{width:16px;height:16px;color:var(--ui-primary);flex-shrink:0} .pos-stage{flex-shrink:0;max-width:100%;margin-left:auto;border:1px solid transparent;border-radius:999px;padding:4px 8px;font-size:var(--fs-2xs);font-weight:750;white-space:normal;overflow-wrap:anywhere;line-height:1.38;text-align:left} .pos-stage.up{background:var(--up-tint);color:var(--ok-ink);border-color:var(--ok-line)} .pos-stage.mid{background:var(--ui-primary-tint);color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border))} .pos-stage.down{background:var(--down-tint);color:var(--warn-ink-3);border-color:var(--warn-line)} .pos-stage.multi{background:var(--ui-surface-muted);color:var(--ui-text);border-color:var(--ui-border)} .pos-detail{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);border:1px solid var(--ui-border)} .pos-detail span{font-size:var(--fs-3xs);font-weight:700;letter-spacing:.08em;color:var(--ui-text-muted)} .pos-detail strong{font-size:var(--fs-sm);line-height:1.45;color:var(--ui-text-strong);overflow-wrap:anywhere} .pos-why{margin:-3px 0 0;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.55} .pos-link{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xs);font-weight:700;color:var(--ui-primary-strong)} .pos-link span{font-size:var(--fs-base);transition:transform .14s} .pos-card:hover .pos-link span{transform:translateX(3px)} /* theme detail page */ .theme-hero{display:flex;align-items:flex-start;gap:16px;padding:6px 0 4px} .th-badge{width:52px;height:52px;border-radius:14px;background:var(--warn-ink);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-2xl);font-family:var(--disp);flex-shrink:0} .theme-hero h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);margin:0 0 4px} .theme-hero p{margin:0;color:var(--ink-soft);font-size:var(--fs-md)} .th-meta{margin-top:6px;font-family:var(--mono);font-size:var(--fs-xs);color:var(--steel)} .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .theme-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)} .tc-hd{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-md);margin-bottom:10px} .tc-hd svg{width:17px;height:17px;color:var(--steel)} .tc-hd a{color:var(--steel-deep);cursor:pointer}.tc-hd a:hover{text-decoration:underline} .tc-n{margin-left:auto;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);background:var(--surface-3);border-radius:20px;padding:2px 9px} .tc-chips{display:flex;flex-wrap:wrap;gap:7px} /* theme-highlighted company chip */ /* ===== v0.3 workbench ===== */ /* preview card */ .preview{position:fixed;z-index:200;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;background:var(--card);border:1px solid var(--steel-line);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-2);padding:14px 16px;max-width:270px;font-size:var(--fs-sm)} .preview.show{opacity:1;transform:none} .pv-hd{display:flex;align-items:baseline;gap:8px} .pv-hd b{font-size:var(--fs-base);font-weight:700} .pv-hd span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel)} .pv-sub{color:var(--ink-faint);font-size:var(--fs-xs);margin-top:2px} .pv-stats{display:flex;gap:10px;margin-top:8px;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-soft)} .pv-themes{margin-top:7px;color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:600} .pv-demo{margin-top:7px;font-size:var(--fs-3xs);color:var(--ink-faint);font-family:var(--mono)} /* screener filters */ .scr-filters{ display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px; align-items:stretch;background:var(--card);border:1px solid var(--line); border-radius:12px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px } .scr-field{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:10px 12px} .scr-sel{position:relative;display:grid;gap:7px;font-size:var(--fs-sm);color:var(--ink-soft);font-weight:650} .scr-sel span,.scr-mkt > span{font-size:var(--fs-2xs);font-weight:750;letter-spacing:.04em;color:var(--ink-faint)} .scr-sel select{ width:100%;min-height:36px;font-family:var(--body);font-size:var(--fs-sm);font-weight:650; padding:0 30px 0 0;border:0;border-radius:0;background:transparent;color:var(--ink);cursor:pointer; appearance:none } .scr-sel::after{ content:"";position:absolute;right:2px;bottom:11px;width:8px;height:8px;border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint);transform:rotate(45deg);pointer-events:none } .scr-mkt{display:grid;gap:8px;font-size:var(--fs-sm);color:var(--ink-soft);font-weight:650} .scr-chip-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .screen-secondary-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 14px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-subtle)} .screen-secondary-links span{font-size:var(--fs-xs);font-weight:800;color:var(--ui-text-muted);margin-right:2px} .mchip{ min-height:34px;font-size:var(--fs-xs);font-weight:700;padding:0 12px;border-radius:9px; border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:.13s } .mchip:hover{background:var(--steel-tint);border-color:var(--steel-line);color:var(--steel-deep)} .mchip.on{background:var(--steel);border-color:var(--steel);color:var(--on-accent)} @media(max-width:980px){.scr-filters{grid-template-columns:1fr 1fr}.scr-mkt{grid-column:1/-1}} @media(max-width:620px){.scr-filters{grid-template-columns:1fr}} .star-btn{width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:none;color:var(--ink-faint);font-size:var(--fs-base);cursor:pointer;line-height:1;transition:.12s} .star-btn:hover{background:var(--warn-tint);color:var(--gold-deep)} .star-btn.on{color:var(--gold)} .cmp-check{width:26px;height:26px;border-radius:7px;border:1px solid var(--steel-line);background:var(--card);color:var(--ink-faint);font-size:var(--fs-sm);cursor:pointer;line-height:1;transition:.12s} .cmp-check:hover{border-color:var(--steel);color:var(--steel)} .cmp-check.on{background:var(--steel);border-color:var(--steel);color:var(--on-accent)} .co-actions{display:flex;flex-direction:column;gap:7px;flex-shrink:0;align-self:flex-start} @media(max-width:560px){.co-actions{flex-direction:row;width:100%;margin-top:8px}} /* compare floating bar */ .cmp-bar{position:sticky;bottom:14px;margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ui-surface);color:var(--ui-text-strong);border:1px solid var(--ui-border);border-radius:12px;padding:12px 16px;box-shadow:var(--ui-shadow-2);z-index:40} .cb-txt{font-size:var(--fs-sm)}.cb-txt b{font-family:var(--disp)} .cb-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1} .cb-chip{font-size:var(--fs-xs);background:rgba(255,255,255,.14);border-radius:6px;padding:3px 8px;display:inline-flex;align-items:center;gap:6px} .cb-chip i{cursor:pointer;opacity:.7;font-style:normal}.cb-chip i:hover{opacity:1} .cb-clear{background:none;border:1px solid rgba(255,255,255,.3);color:var(--on-accent);border-radius:8px;padding:6px 12px;font-size:var(--fs-sm);cursor:pointer} .cb-go{background:var(--card);color:var(--ink);border:none;border-radius:8px;padding:6px 16px;font-size:var(--fs-sm);font-weight:700;cursor:pointer} .cb-go:disabled{opacity:.4;cursor:not-allowed} /* compare matrix */ .cmp-grid{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow-x:auto} .cmp-line{display:grid;grid-template-columns:130px repeat(var(--cols),minmax(140px,1fr));border-top:1px solid var(--line)} .cmp-line:first-child{border-top:none} .cmp-linehd{border-bottom:2px solid var(--line)} .cmp-col{padding:11px 14px;font-size:var(--fs-sm);color:var(--ink);border-left:1px solid var(--line);display:flex;align-items:center} .cmp-col:first-child{border-left:none} .cmp-attr{background:var(--surface-2);font-size:var(--fs-xs);color:var(--ink-faint);font-weight:600;position:sticky;left:0} .cmp-hd{flex-direction:column;align-items:flex-start;gap:4px;position:relative;padding-top:16px} .cmp-logo{width:34px;height:34px;border-radius:9px;background:var(--steel-tint);color:var(--steel-deep);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:var(--fs-sm)} .cmp-name{font-weight:700;font-size:var(--fs-md);color:var(--ink);cursor:pointer}.cmp-name:hover{color:var(--steel)} .cmp-code{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel)} .cmp-x{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink-faint);font-size:var(--fs-2xs);cursor:pointer} .cmp-x:hover{background:var(--ink);color:var(--on-accent)} .cmp-line[class]:nth-of-type(even) .cmp-col:not(.cmp-attr){background:rgba(38,48,59,.015)} .cmp-line .cmp-col:nth-child(n+2):last-child{} /* demo rows tint */ .cmp-line .cmp-attr{white-space:nowrap} @media print{ .top,.nav,.searchbar,.util,.tabbar,.sheet-host,.breadcrumb,.cmp-bar,.co-actions,.theme-bar,.modal-host,.preview{display:none!important} body{padding-bottom:0!important} body{background:var(--card)} .wrap{max-width:none} .co-panel,.side-card,.cmp-grid,.chain-tile,.stat-strip,.pos-card,.sp-card,.fl-row{box-shadow:none!important;break-inside:avoid} } /* ===== v0.4 special chains ===== */ .tn-hot{border-color:var(--steel-line);color:var(--steel-deep);background:var(--steel-tint)} .tn-hot:hover{background:var(--steel);color:var(--on-accent);border-color:var(--steel)} /* home special row */ .sp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px} .sp-pill{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;display:flex;flex-direction:column;gap:5px} .sp-pill:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .spp-ico{color:var(--steel)}.spp-ico svg{width:20px;height:20px} .spp-nm{font-weight:700;font-size:var(--fs-base);color:var(--ink)} .spp-tag{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.5} .spp-cap{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-soft);margin-top:2px} .spp-cap b{color:var(--steel-deep);font-size:var(--fs-sm)} .more-btn{margin-top:12px;width:100%;padding:11px;border-radius:10px;border:1px dashed var(--steel-line);background:transparent;color:var(--steel);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:.13s;font-family:var(--body)} .more-btn:hover{background:var(--steel-tint);border-style:solid} /* specials overview */ .sp-hero{padding:26px 0 22px} .sp-hero h1{font-family:var(--disp);font-weight:700;font-size:var(--fs-3xl);margin:10px 0 8px;letter-spacing:.5px} .sp-hero .sub{font-size:var(--fs-md);color:var(--ink-soft);max-width:720px;line-height:1.75} .sp-hero .sub b{color:var(--steel-deep)} .sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .sp-card{text-align:left;display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s} .sp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .sp-ico{width:44px;height:44px;border-radius:11px;background:var(--steel);color:var(--on-accent);display:grid;place-items:center;flex-shrink:0} .sp-ico svg{width:23px;height:23px} .sp-body{min-width:0;flex:1} .sp-body h3{margin:0 0 3px;font-size:var(--fs-lg);font-weight:700} .sp-tag{margin:0 0 10px;font-size:var(--fs-sm);color:var(--ink-faint)} .sp-metrics{display:flex;gap:16px;margin-bottom:9px} .spm{display:flex;flex-direction:column} .spm b{font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);color:var(--steel-deep);line-height:1.1} .spm i{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint)} .sp-choke{font-size:var(--fs-xs);color:var(--steel-deep);background:var(--steel-tint);border:1px solid var(--steel-line);border-radius:7px;padding:5px 9px;display:inline-block} /* overlap ranking */ .ov-table{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .ov-row{display:grid;grid-template-columns:44px minmax(120px,1fr) 2.4fr;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .ov-row:first-child{border-top:none} .ov-row:hover{background:var(--steel-tint)} .ov-n{font-family:var(--disp);font-weight:700;font-size:var(--fs-lg);color:var(--on-accent);background:var(--steel);border-radius:8px;text-align:center;padding:3px 0} .ov-nm{font-weight:700;font-size:var(--fs-md);display:flex;align-items:baseline;gap:7px} .ov-nm em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} .ov-sps{display:flex;flex-wrap:wrap;gap:5px} .ov-sps i{font-style:normal;font-size:var(--fs-2xs);background:var(--steel-tint);color:var(--steel-deep);border:1px solid var(--steel-line);border-radius:6px;padding:2px 8px} /* special detail: flow */ .sp-badge{font-size:var(--fs-2xs);font-family:var(--mono);background:var(--steel-tint);color:var(--steel-deep);border:1px solid var(--steel-line);border-radius:999px;padding:4px 10px;margin-left:9px;vertical-align:middle;letter-spacing:.4px;font-weight:700} .flow-list{display:flex;flex-direction:column;gap:9px} .fl-row{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);transition:border-color .14s} .fl-row.is-choke{border-color:var(--steel-line);background:var(--card);box-shadow:inset 3px 0 0 var(--steel),var(--shadow)} .fl-idx{width:26px;height:26px;border-radius:8px;background:var(--surface-3);color:var(--ink-faint);font-family:var(--mono);font-size:var(--fs-xs);display:grid;place-items:center;flex-shrink:0} .fl-row.is-choke .fl-idx{background:var(--steel);color:var(--on-accent)} .fl-main{flex:1;min-width:0} .fl-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px} .fl-name{font-weight:700;font-size:var(--fs-md);display:flex;align-items:center;gap:8px} .choke-tag{font-style:normal;font-size:var(--fs-2xs);background:var(--steel-tint);color:var(--steel-deep);border:1px solid var(--steel-line);border-radius:999px;padding:2px 8px;font-weight:700} .fl-right{display:flex;align-items:center;gap:9px;flex-shrink:0} .tw-pill{font-size:var(--fs-2xs);border-radius:20px;padding:3px 10px;font-weight:600;white-space:nowrap} .tw-pill.high{background:var(--ok-tint);color:var(--ok-ink);border:1px solid var(--ok-line)} .tw-pill.mid{background:var(--steel-tint);color:var(--steel-deep);border:1px solid var(--steel-line)} .tw-pill.low{background:var(--warn-tint);color:var(--warn-ink);border:1px solid var(--warn-line)} .tw-pill.none{background:var(--surface-3);color:var(--ink-faint);border:1px solid var(--line)} .fl-src{font-size:var(--fs-xs);color:var(--steel);cursor:pointer;white-space:nowrap} .fl-src:hover{text-decoration:underline} .fl-val{display:flex;align-items:center;gap:10px;margin-bottom:8px} .fv-bar{flex:1;height:8px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .fv-bar i{display:block;height:100%;border-radius:4px} .fv-bar i.high{background:var(--up)} .fv-bar i.mid{background:var(--steel)} .fv-bar i.low{background:var(--down)} .fv-bar i.none{background:var(--ink-dim)} .fv-num{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);width:34px;text-align:right;flex-shrink:0} .fl-note{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:9px;line-height:1.6} .fl-cos{display:flex;flex-wrap:wrap;gap:6px} .fl-none{font-size:var(--fs-xs);color:var(--ink-faint);font-style:italic} .an-item{margin-bottom:13px} .an-t{font-size:var(--fs-sm);font-weight:700;margin-bottom:5px} .an-bar{display:flex;align-items:center;gap:8px;height:9px;margin-bottom:4px} .an-bar i{display:block;height:9px;background:var(--steel);border-radius:5px} .an-bar span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} .an-d{font-size:var(--fs-xs);color:var(--ink-faint)} .donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .dn-num{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);fill:var(--steel-deep)} .dn-lbl{font-size:var(--fs-3xs);fill:var(--ink-faint)} .dn-side{flex:1;min-width:110px} .dn-row{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink-soft);padding:4px 0} .dn-row b{margin-left:auto;font-family:var(--mono);color:var(--ink)} .tw-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0} .tw-dot.high{background:var(--up)} .tw-dot.mid{background:var(--steel)} .tw-dot.low{background:var(--down)} .tw-dot.none{background:var(--ink-dim)} .src-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px dashed var(--line);cursor:pointer} .src-row:first-of-type{border-top:none} .src-row:hover .src-nm{color:var(--steel)} .src-ico{color:var(--steel);display:flex}.src-ico svg{width:15px;height:15px} .src-nm{font-size:var(--fs-sm);font-weight:600;width:74px;flex-shrink:0} .src-bar{flex:1;height:7px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .src-bar i{display:block;height:100%;background:var(--steel);border-radius:4px} .src-v{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-faint);width:32px;text-align:right} /* ===== v0.5 primary chain + advanced screener ===== */ .pri-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);border-radius:20px;padding:5px 11px;font-weight:700;white-space:nowrap} .pri-badge.pb-solid{background:var(--steel);color:var(--on-accent)} .pri-badge.pb-infer{background:var(--ui-primary-tint);color:var(--ui-primary-strong);border:1px solid color-mix(in srgb,var(--ui-primary) 26%,var(--ui-border))} .pri-badge i{font-style:normal;font-size:var(--fs-3xs);opacity:.8;font-weight:400} .pri-card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);padding:18px;box-shadow:var(--ui-shadow-1);margin-bottom:14px} .pri-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .pri-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pri-label{font-size:var(--fs-2xs);font-weight:750;letter-spacing:.08em;color:var(--ui-text-muted)} .pri-meta{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap} .pri-basis{display:block;margin:10px 0 0;font-size:var(--fs-xs);line-height:1.55;color:var(--ui-text-muted)} .dv-tag{font-size:var(--fs-xs);border-radius:6px;padding:3px 9px;font-weight:600} .dv-tag.focus{background:var(--ok-tint);color:var(--ok-ink)} .dv-tag.dual{background:var(--steel-tint);color:var(--steel-deep)} .dv-tag.diverse{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .grp-tag{font-size:var(--fs-xs);background:var(--surface-3);color:var(--ink-soft);border-radius:6px;padding:3px 9px} .pri-nomix{margin-top:13px;font-size:var(--fs-sm);color:var(--ui-text-muted);background:var(--ui-surface-subtle);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);padding:11px 12px} .pri-warn{margin-top:10px;font-size:var(--fs-sm);color:var(--warn-ink);background:var(--warn-tint-2);border:1px solid var(--warn-line);border-radius:8px;padding:9px 12px} .rev-mix{margin-top:13px} .rm-title{font-size:var(--fs-xs);color:var(--ink-faint);margin-bottom:7px;font-family:var(--mono)} .rm-row{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer} .rm-row:hover .rm-nm{color:var(--steel)} .rm-nm{width:100px;flex-shrink:0;font-size:var(--fs-sm);font-weight:600;display:flex;align-items:center;gap:5px} .rm-pri{font-style:normal;font-size:var(--fs-3xs);background:var(--steel);color:var(--on-accent);border-radius:4px;padding:1px 5px;font-weight:500} .rm-bar{flex:1;height:9px;background:rgba(38,48,59,.06);border-radius:5px;overflow:hidden} .rm-bar i{display:block;height:100%;background:var(--ink-dim);border-radius:5px} .rm-bar i.pri{background:var(--steel)} .rm-v{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);width:34px;text-align:right} .semi-role-row{cursor:default} .semi-role-row:hover .rm-nm{color:var(--ui-text-strong)} .semi-role-row .rm-nm{width:min(220px,32%)} .semi-role-row .rm-bar i{width:100%;opacity:.72} .semi-role-row .rm-bar i.pri{opacity:1} .semi-role-row .rm-v{width:52px;font-family:var(--sans);font-weight:750} .cross-map + .profile-note{margin-top:12px} @media(max-width:560px){ .pri-card{padding:16px} .pri-summary{display:grid;gap:10px} .pri-main{display:grid;justify-items:start;gap:8px} .pri-badge{max-width:100%;white-space:normal;line-height:1.45} .pri-meta{justify-content:flex-start} .pri-basis{margin-top:14px;padding-top:12px;border-top:1px solid var(--ui-border)} .rev-mix{margin-top:16px} .rm-title{margin-bottom:5px;font-family:var(--sans)} .rev-mix .semi-role-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px; min-height:0;padding:10px 0;border-top:1px solid var(--ui-border) } .rm-title + .semi-role-row{border-top:0} .semi-role-row .rm-nm{ width:auto;min-width:0;font-size:var(--fs-xs);line-height:1.45;flex-wrap:wrap } .semi-role-row .rm-bar{display:none} .semi-role-row .rm-v{ width:auto;align-self:center;text-align:right;white-space:nowrap; font-size:var(--fs-2xs);color:var(--ui-text-muted) } } .pri-readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px} .pri-readout article{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);padding:12px;min-width:0} .pri-readout small{display:block;margin-bottom:5px;font-size:var(--fs-3xs);font-weight:800;letter-spacing:.08em;color:var(--ui-text-muted)} .pri-readout b{display:block;font-size:var(--fs-sm);line-height:1.35;color:var(--ui-text-strong)} .pri-readout span{display:block;margin-top:5px;font-size:var(--fs-2xs);line-height:1.55;color:var(--ui-text-muted)} @media(max-width:980px){.pri-readout{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.pri-readout{grid-template-columns:1fr}} /* screener tabs */ .scr-tabs{display:inline-flex;gap:3px;background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:4px} .st-btn{min-height:36px;font-size:var(--fs-sm);padding:0 16px;border-radius:8px;border:none;background:none;color:var(--ink-soft);cursor:pointer;font-weight:700;transition:.13s} .st-btn.on{background:var(--card);color:var(--steel-deep);box-shadow:0 3px 10px rgba(23,32,51,.07)} /* advanced panel */ .scr-adv{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden} .scr-adv-overview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--ui-surface-subtle);border-bottom:1px solid var(--ui-border)} .scr-adv-overview b{display:block;font-size:var(--fs-sm);color:var(--ui-text-strong)} .scr-adv-overview span{display:block;margin-top:2px;font-size:var(--fs-2xs);color:var(--ui-text-muted)} .sa-disclosure{border-top:1px solid var(--ui-border)} .sa-disclosure:first-of-type{border-top:0} .sa-disclosure-head{width:100%;min-height:58px;padding:10px 16px;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:10px;text-align:left;border:0;background:var(--ui-surface);color:var(--ui-text)} .sa-disclosure-head:hover,.sa-disclosure.open .sa-disclosure-head{background:var(--ui-surface-subtle)} .sa-disclosure-copy{min-width:0} .sa-disclosure-copy b{display:block;font-size:var(--fs-sm);color:var(--ui-text-strong);line-height:1.35} .sa-disclosure-copy small{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2xs);color:var(--ui-text-muted);line-height:1.4} .sa-disclosure-x{width:18px;height:18px;color:var(--ui-text-muted);transition:transform var(--motion-fast) var(--ui-ease)} .sa-disclosure.open .sa-disclosure-x{transform:rotate(180deg);color:var(--ui-primary)} .sa-disclosure-body{padding:4px 16px 16px;background:var(--ui-surface)} .sa-section-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:var(--fs-2xs);color:var(--ui-text-muted)} .sa-row{display:grid;grid-template-columns:142px minmax(0,1fr);gap:18px;padding:14px 18px;border-top:1px solid var(--line);align-items:start} .sa-row:first-child{border-top:none} .sa-k{min-width:0;font-size:var(--fs-sm);font-weight:750;color:var(--ink);padding-top:6px} .sa-v{min-width:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center} .sa-logic{display:flex;gap:3px;margin-top:7px;background:var(--surface-3);border-radius:7px;padding:2px;width:fit-content} .lg{font-size:var(--fs-2xs);padding:3px 8px;border:none;background:none;border-radius:5px;color:var(--ink-faint);cursor:pointer;font-weight:600} .lg.on{background:var(--steel);color:var(--on-accent)} .sa-input{width:100%;max-width:520px;padding:8px 12px;border:1px solid var(--steel-line);border-radius:8px;font-family:var(--body);font-size:var(--fs-sm);color:var(--ink)} .sa-input:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(74,111,165,.13)} .sa-select{padding:7px 11px;border:1px solid var(--steel-line);border-radius:8px;font-family:var(--body);font-size:var(--fs-sm);background:var(--card);cursor:pointer} .sa-check{font-size:var(--fs-xs);color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-left:6px} .sa-check.off{opacity:.4;cursor:not-allowed} .sa-div{width:1px;height:20px;background:var(--line);margin:0 4px} .sa-reset{margin-left:auto;font-size:var(--fs-xs);padding:6px 12px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--ink-faint);cursor:pointer} .sa-reset:hover{border-color:var(--ink-faint);color:var(--ink)} @media(max-width:760px){.sa-row{grid-template-columns:1fr;gap:8px}.sa-k{padding-top:0}.sa-reset{margin-left:0}} @media(max-width:820px){ .sa-row{flex-direction:column;gap:8px} .sa-k{width:auto} } /* ===== v1.0 industry chain atlas ===== */ .at-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 18px;box-shadow:var(--shadow);margin-bottom:16px} .at-brand{display:flex;align-items:center;gap:11px} .atb-ico{width:36px;height:36px;border-radius:9px;background:var(--steel);color:var(--on-accent);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:var(--fs-sm)} .at-brand b{display:block;font-size:var(--fs-base);font-weight:700;line-height:1.2} .at-brand em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);letter-spacing:.5px} .at-switch{display:flex;gap:6px;flex-wrap:wrap} .ats-btn{font-size:var(--fs-sm);padding:6px 14px;border-radius:8px;border:1px solid var(--steel-line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:.13s} .ats-btn:hover{background:var(--steel-tint)} .ats-btn.on{background:var(--steel-tint);border-color:var(--steel);color:var(--steel-deep);font-weight:700} .at-layout{display:grid;grid-template-columns:270px 1fr;gap:18px;align-items:start} @media(max-width:900px){.at-layout{grid-template-columns:1fr}} .at-side{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow);position:sticky;top:78px} @media(max-width:900px){.at-side{position:static}} .ats-eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:2px;color:var(--ink-faint)} .at-side h1{font-family:var(--disp);font-weight:700;font-size:var(--fs-xl);margin:8px 0 8px;line-height:1.3} .ats-desc{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.7;margin:0} .ats-sec{font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:700;margin:16px 0 7px;padding-top:14px;border-top:1px solid var(--line)} .ats-long{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.75;margin:0} .ats-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ats-st{border:1px solid var(--line);border-radius:9px;padding:11px 12px;background:var(--surface-2)} .ats-st b{display:block;font-family:var(--disp);font-weight:700;font-size:var(--fs-xl);color:var(--ink);line-height:1} .ats-st span{font-size:var(--fs-2xs);color:var(--ink-faint)} .ats-btn2{width:100%;margin-top:7px;padding:10px;border-radius:9px;border:1px solid var(--steel-line);background:var(--card);color:var(--steel-deep);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:var(--body);transition:.13s} .ats-btn2:hover{background:var(--steel-tint)} .ats-btn2.primary{background:var(--steel);border-color:var(--steel);color:var(--on-accent)} .ats-btn2.primary:hover{background:var(--steel-dark)} .at-tabs{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:4px;margin-bottom:14px;box-shadow:var(--shadow)} .att{font-size:var(--fs-sm);padding:8px 20px;border-radius:8px;border:none;background:none;color:var(--ink-soft);cursor:pointer;font-weight:600;transition:.13s;font-family:var(--body)} .att.on{background:var(--steel-tint);color:var(--steel-deep)} /* atlas map */ .at-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start} .at-axis{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow)} .at-axis-hd{font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);color:var(--ink);padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)} .at-group{margin-bottom:14px} .at-group-hd{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);margin-bottom:9px} .at-group-hd b{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .at-node{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:9px;background:var(--paper)} .at-node-hd{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:0;cursor:pointer;text-align:left;font-family:var(--body)} .an-t{font-size:var(--fs-md);font-weight:700;color:var(--ink);flex:1} .an-c{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);background:var(--surface-3);border-radius:20px;padding:1px 7px} .an-x{font-size:var(--fs-3xs);color:var(--ink-faint);transition:transform .15s} .an-x.open{transform:rotate(180deg)} .at-node-desc{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6;margin:7px 0 9px} .at-items{display:flex;flex-wrap:wrap;gap:6px} .at-item{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);padding:5px 10px;border-radius:7px;border:1px solid transparent;background:var(--steel-tint);color:var(--steel-deep);cursor:pointer;transition:.13s;font-family:var(--body)} .at-item:hover{background:var(--steel);color:var(--on-accent)} .at-item.has-co{border-color:var(--steel-line)} .at-item i{font-style:normal;font-family:var(--mono);font-size:var(--fs-3xs);background:var(--steel);color:var(--on-accent);border-radius:20px;padding:0 5px} .at-item.has-co:hover i{background:var(--card);color:var(--steel)} .at-item.is-gap{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn-line)} .at-item.is-gap:hover{background:var(--warn-ink);color:var(--on-accent)} .at-item b{font-size:var(--fs-3xs);font-weight:700;background:var(--warn-ink);color:var(--on-accent);border-radius:4px;padding:0 4px} .at-item.is-gap:hover b{background:var(--card);color:var(--warn-ink)} .at-m-gap{font-size:var(--fs-sm);color:var(--warn-ink);background:var(--warn-tint-2);border:1px solid var(--warn-line);border-radius:9px;padding:11px 13px;margin:14px 0;line-height:1.7} .at-hint{margin-top:14px;font-size:var(--fs-xs);color:var(--ink-faint)} /* five forces */ .honest-line{margin-top:22px;font-size:var(--fs-sm);color:var(--ink-faint)} /* ═══════════ 搜尋結果(分組)═══════════ */ .sr-group{margin-bottom:18px} .sr-kind{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-faint); letter-spacing:.5px;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid var(--line)} .sr-kind span{font-family:var(--mono);font-size:var(--fs-2xs);background:var(--surface-3);border-radius:20px;padding:1px 7px;font-weight:600} .sr-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:var(--card);border:1px solid var(--line);border-radius:10px; padding:12px 14px;margin-bottom:5px;box-shadow:var(--shadow);cursor:pointer; font-family:var(--body);transition:.12s} .sr-row:hover{transform:translateX(2px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .sr-row.is-candidate{cursor:default;border-color:color-mix(in srgb,var(--steel) 28%,var(--line));background:linear-gradient(180deg,var(--card),var(--steel-tint))} .sr-row.is-candidate:hover{transform:none;box-shadow:var(--shadow);border-color:var(--steel-line)} .sr-n{font-size:var(--fs-md);font-weight:600;color:var(--ink);flex-shrink:0} .sr-s{font-size:var(--fs-xs);color:var(--ink-faint);flex:1;text-align:right; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-a{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0} .sr-more{font-size:var(--fs-xs);color:var(--ink-faint);padding:4px 2px} .es-hint{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center; font-size:var(--fs-sm);color:var(--ink-faint)} .es-try{background:var(--steel-tint);border:1px solid var(--steel-line);color:var(--steel-deep); border-radius:20px;padding:5px 12px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:var(--body)} .es-try:hover{background:var(--steel);color:var(--on-accent)} .es-note{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.7} /* ===== v2.1 mismatch + signals + origin stress ===== */ .dm-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px;margin-bottom:22px} .dmt{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:.14s;font-family:var(--body)} .dmt:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .dmt.gap{background:var(--risk-tint-3)} .dmt b{display:block;font-size:var(--fs-md);margin-bottom:5px;color:var(--ink)} .dmt.gap b{color:var(--risk-ink)} .dmt span{display:block;font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.7} /* 錯配地圖 */ .mm-svg{width:100%;height:auto;display:block} .mm-dot:hover circle{opacity:1 !important} .mm-note{margin-top:10px;font-size:var(--fs-xs);color:var(--ink-faint);text-align:center} .mm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:12px} .mm-c{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:.14s} .mm-c:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .mmc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} .mmc-h b{font-size:var(--fs-md)} .mmc-g{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-faint)} .mmc-v{display:flex;align-items:center;gap:8px;font-size:var(--fs-2xs);color:var(--ink-faint)} .mmc-v b{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink)} .mmc-bar{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden} .mmc-bar i{display:block;height:100%;border-radius:4px} .mmc-note{margin-top:9px;font-size:var(--fs-2xs);color:var(--ink-faint);line-height:1.6;font-style:italic} .mmc-weak{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)} .mmc-weak b{font-size:var(--fs-2xs);color:var(--risk-ink);display:block;margin-bottom:5px} .mmc-weak span{display:block;font-size:var(--fs-2xs);color:var(--ink-soft);line-height:1.7} /* 領先指標 */ .sg-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px} .sgh{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 19px;box-shadow:var(--shadow)} .sgh b{font-family:var(--disp);font-weight:700;font-size:var(--fs-3xl);color:var(--steel);line-height:1} .sgh span{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6} .sgh span b{display:inline;font-size:var(--fs-xs);color:var(--ink);font-family:var(--body)} .sg-list{display:flex;flex-direction:column;gap:8px} .sg-row{display:grid;grid-template-columns:96px 1fr 168px;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px;box-shadow:var(--shadow);cursor:pointer;transition:.13s} @media(max-width:760px){.sg-row{grid-template-columns:1fr;gap:7px}} .sg-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .sgr-lag{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;text-align:center;border-radius:20px;padding:4px 8px;white-space:nowrap} .sgr-lag.far{background:var(--ok-tint);color:var(--ok-ink)} .sgr-lag.mid{background:var(--steel-tint);color:var(--steel-deep)} .sgr-lag.live{background:var(--risk-tint);color:var(--risk-ink)} .sgr-n{font-size:var(--fs-sm);font-weight:600;color:var(--ink)} .sgr-w{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6;margin-top:3px} .sgr-o{text-align:right} .sgr-tag{display:inline-block;font-size:var(--fs-2xs);font-weight:600;color:var(--on-accent);border-radius:20px;padding:2px 9px} .sgr-co{display:block;font-size:var(--fs-2xs);color:var(--ink-faint);margin-top:4px} /* 源頭壓力測試 */ .os-ctrl{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 19px;box-shadow:var(--shadow)} @media(max-width:760px){.os-ctrl{grid-template-columns:1fr}} .osc label{display:block;font-size:var(--fs-xs);color:var(--ink-faint);margin-bottom:6px} .osc label b{color:var(--steel);font-family:var(--mono);font-size:var(--fs-sm)} .osc select{width:100%;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-family:var(--body);font-size:var(--fs-sm)} .osc input[type=range]{width:100%;accent-color:var(--steel)} .osc-sum{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-2xs);color:var(--ink-faint);text-align:right} .os-hops{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow)} .osh{display:grid;grid-template-columns:64px 1fr 62px 52px;gap:11px;align-items:center;margin-bottom:9px} .osh-d{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--steel)} .osh-bar{height:20px;background:var(--surface-4);border-radius:5px;overflow:hidden} .osh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--risk-soft),var(--risk));border-radius:5px} .osh-v{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;color:var(--risk);text-align:right} .osh-n{font-size:var(--fs-2xs);color:var(--ink-faint);text-align:right} .osh-note{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.9} .osh-note b{color:var(--ink);font-family:var(--mono)} .os-list{display:flex;flex-direction:column;gap:5px} .os-row{display:grid;grid-template-columns:120px 150px 1fr 62px 68px 84px;gap:11px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:11px 14px;box-shadow:var(--shadow);cursor:pointer;transition:.12s} @media(max-width:900px){.os-row{grid-template-columns:1fr 1fr;gap:7px}.osr-bar{grid-column:1/-1}} .os-row:hover{transform:translateX(2px);box-shadow:var(--shadow-lift)} .osr-n{font-size:var(--fs-sm);font-weight:600;display:flex;align-items:baseline;gap:5px} .osr-n em{font-style:normal;font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint);font-weight:400} .osr-s{font-size:var(--fs-2xs);color:var(--ink-faint)} .osr-bar{height:8px;background:var(--surface-4);border-radius:4px;overflow:hidden} .osr-bar i{display:block;height:100%;background:var(--risk);border-radius:4px} .osr-v{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--risk);text-align:right} .osr-b{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);text-align:right} .osr-r{font-size:var(--fs-2xs);color:var(--ink-faint);text-align:right} .osr-r .ok{color:var(--ok-ink);font-weight:600} .dmc-d.bull b{color:var(--risk)} /* ===== v2.0 demand origin ===== */ .dm-eq{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:var(--fs-sm);background:var(--steel-tint);border:1px solid var(--steel-line);border-radius:7px;padding:6px 12px;color:var(--steel-deep)} .dm-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:13px;margin-bottom:22px} .dmw{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 19px;box-shadow:var(--shadow)} .dmw b{display:block;font-size:var(--fs-md);margin-bottom:8px;color:var(--steel-deep)} .dmw p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.9} .dmw p b{display:inline;color:var(--ink)} .dm-list{display:flex;flex-direction:column;gap:9px} .dm-row{display:grid;grid-template-columns:44px minmax(200px,1.7fr) 170px 78px;gap:14px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);cursor:pointer;transition:.14s} @media(max-width:860px){.dm-row{grid-template-columns:36px 1fr;gap:10px}.dmr-m,.dmr-r{grid-column:2}} .dm-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .dmr-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--steel-tint);color:var(--steel)} .dmr-ico svg{width:20px;height:20px} .dmr-nm{font-size:var(--fs-base);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dmr-heat{font-size:var(--fs-3xs);font-weight:700;color:var(--on-accent);border-radius:20px;padding:2px 8px} .dmr-what{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6;margin-top:4px} .dmr-gate{font-size:var(--fs-2xs);color:var(--ink-soft);margin-top:5px} .dmr-gate b{color:var(--warn-ink)} .dmr-direct{color:var(--ok-ink);font-weight:600} .dmr-m{display:flex;flex-direction:column;gap:3px} .dmr-k{display:flex;justify-content:space-between;font-size:var(--fs-2xs);gap:8px} .dmr-k span{color:var(--ink-faint)} .dmr-k b{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink)} .dmr-r{text-align:center} .dmr-n{font-family:var(--disp);font-weight:700;font-size:var(--fs-2xl);color:var(--steel);line-height:1} .dmr-nl{font-size:var(--fs-3xs);color:var(--ink-faint);line-height:1.35;margin-top:3px} .dm-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)} .dm-hd h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);margin:6px 0 5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dm-hd p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);max-width:560px;line-height:1.7} .dh-r{display:flex;flex-direction:column;gap:5px;flex-shrink:0} .dh-k{display:flex;justify-content:space-between;gap:14px;font-size:var(--fs-xs)} .dh-k span{color:var(--ink-faint)} .dh-k b{font-family:var(--mono);color:var(--ink)} .dm-truth{background:linear-gradient(160deg,var(--steel-tint-2),var(--steel-tint-3));border:1px solid var(--steel-line);border-radius:12px;padding:18px 20px;margin-top:13px} .dm-truth b{display:block;font-size:var(--fs-xs);color:var(--steel);letter-spacing:.5px;margin-bottom:7px} .dm-truth p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.95} .dm-truth strong{color:var(--ink);font-weight:700} .dm-svg{width:100%;height:auto;display:block} .dm-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:11px} .dml{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px 17px;box-shadow:var(--shadow)} .dml-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px} .dml-h b{font-size:var(--fs-sm)} .dml-lag{font-family:var(--mono);font-size:var(--fs-3xs);background:var(--ok-tint);color:var(--ok-ink);border-radius:20px;padding:2px 8px;white-space:nowrap;font-weight:600} .dml p{margin:0;font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.7} .dm-hop{display:grid;grid-template-columns:100px 130px 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 16px;box-shadow:var(--shadow);margin-bottom:8px} @media(max-width:700px){.dm-hop{grid-template-columns:1fr;gap:8px}} .dmh-d{font-family:var(--mono);font-size:var(--fs-xs);font-weight:700;color:var(--steel)} .dmh-d em{display:block;font-style:normal;font-family:var(--body);font-size:var(--fs-3xs);color:var(--ink-faint);font-weight:400;margin-top:2px} .dmh-t{font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft)} .dmh-co{display:flex;flex-wrap:wrap;gap:6px} /* 公司頁:需求從哪來 */ .dm-co{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px} .dmc-sum{grid-column:1/-1;display:flex;align-items:center;gap:18px;background:linear-gradient(160deg,var(--steel-tint-2),var(--steel-tint-3));border:1px solid var(--steel-line);border-radius:12px;padding:17px 20px} .dmc-d{text-align:center;flex-shrink:0} .dmc-d b{display:block;font-family:var(--disp);font-weight:700;font-size:var(--fs-3xl);color:var(--steel);line-height:1} .dmc-d span{font-size:var(--fs-3xs);color:var(--ink-faint);line-height:1.35;display:block;margin-top:4px} .dmc-sum p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.9} .dmc-sum p b{color:var(--ink)} .dmc-o{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 15px;box-shadow:var(--shadow);cursor:pointer;transition:.13s} .dmc-o:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .dmco-h{display:flex;align-items:center;gap:7px;margin-bottom:6px} .dmco-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--steel-tint);color:var(--steel);flex-shrink:0} .dmco-ic svg{width:13px;height:13px} .dmco-h b{font-size:var(--fs-sm);flex:1} .dmco-hop{font-family:var(--mono);font-size:var(--fs-3xs);background:var(--steel);color:var(--on-accent);border-radius:20px;padding:1px 7px;font-weight:600} .dmco-seg{font-size:var(--fs-xs);color:var(--ink-soft);margin-bottom:5px} .dmco-gate{font-size:var(--fs-2xs);color:var(--ink-faint);margin-bottom:4px} .dmco-lead{font-size:var(--fs-2xs);color:var(--ink-faint);line-height:1.6} .dmco-lead b{color:var(--steel-deep)} .demand-profile{display:grid;gap:14px} .demand-profile-summary{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:linear-gradient(160deg,var(--steel-tint-2),var(--steel-tint-3));border:1px solid var(--steel-line);border-radius:14px;padding:18px 20px} .demand-profile-kpis{display:flex;gap:12px;flex-wrap:wrap} .demand-profile-kpis span{min-width:92px;text-align:center;border-radius:12px;background:rgba(255,255,255,.58);border:1px solid rgba(109,93,211,.18);padding:10px 12px} .demand-profile-kpis b{display:block;font-family:var(--disp);font-size:var(--fs-2xl);line-height:1;color:var(--steel)} .demand-profile-kpis em{display:block;margin-top:4px;font-style:normal;color:var(--ink-faint);font-size:var(--fs-3xs);line-height:1.35} .demand-profile-summary p{margin:0;color:var(--ink-soft);font-size:var(--fs-sm);line-height:1.8} .demand-profile-summary p b{color:var(--ink)} .demand-driver-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} .demand-driver-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)} .demand-driver-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px} .demand-driver-head b{font-size:var(--fs-md);color:var(--ink)} .demand-driver-head span{font-family:var(--mono);font-size:var(--fs-3xs);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);padding:3px 8px;white-space:nowrap} .demand-driver-card p{margin:0 0 10px;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.65} .demand-signal-list{display:grid;gap:6px;margin-top:10px} .demand-signal-list div{display:flex;gap:8px;align-items:flex-start;color:var(--ink-faint);font-size:var(--fs-2xs);line-height:1.55} .demand-signal-list i{font-style:normal;color:var(--steel);font-weight:800} .demand-driver-meaning{margin-top:11px;border-top:1px dashed var(--line);padding-top:10px;color:var(--ink-soft);font-size:var(--fs-2xs);line-height:1.6} .demand-profile-note{border-radius:12px;background:var(--surface-2);border:1px solid var(--line);padding:11px 13px;color:var(--ink-faint);font-size:var(--fs-2xs);line-height:1.65} @media(max-width:780px){.demand-profile-summary{grid-template-columns:1fr}.demand-profile-kpis span{text-align:left}} .company-map-profile,.company-power-profile{display:grid;gap:14px} .profile-summary-card{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)} .profile-score{border-radius:14px;background:linear-gradient(160deg,var(--steel-tint-2),var(--steel-tint-3));border:1px solid var(--steel-line);padding:13px 15px;min-width:180px} .profile-score b{display:block;color:var(--steel-deep);font-size:var(--fs-lg);font-weight:800} .profile-score span{display:block;margin-top:4px;color:var(--ink-faint);font-size:var(--fs-3xs);line-height:1.4} .profile-summary-card p{margin:0;color:var(--ink-soft);font-size:var(--fs-sm);line-height:1.75} .profile-summary-card p b{color:var(--ink)} .mapping-card-grid,.power-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .mapping-card,.power-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow);min-width:0} .mapping-head,.power-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:9px} .mapping-head small,.power-head small{display:block;color:var(--ink-faint);font-size:var(--fs-3xs);line-height:1.5} .mapping-head b,.power-head b{display:block;color:var(--ink);font-size:var(--fs-md);line-height:1.35} .mapping-status,.power-status{flex-shrink:0;border-radius:999px;background:var(--steel-tint);border:1px solid var(--steel-line);color:var(--steel-deep);font-size:var(--fs-3xs);font-family:var(--mono);font-weight:700;padding:3px 8px;white-space:nowrap} .mapping-card p,.power-card p{margin:0;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.65} .mapping-meta,.power-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px} .mapping-meta span,.power-meta span{border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-faint);font-size:var(--fs-3xs);padding:3px 8px} .mapping-action{margin-top:12px} .mapping-action button{border:none;border-radius:10px;background:var(--steel);color:var(--on-accent);font-weight:800;font-size:var(--fs-xs);padding:8px 11px;cursor:pointer;box-shadow:var(--shadow)} .profile-note{border-radius:12px;background:var(--surface-2);border:1px solid var(--line);padding:11px 13px;color:var(--ink-faint);font-size:var(--fs-2xs);line-height:1.65} @media(max-width:780px){.profile-summary-card{grid-template-columns:1fr}.profile-score{min-width:0}} /* ===== v1.9 global arena + demand sovereignty ===== */ .ar-legend{display:flex;flex-wrap:wrap;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 16px;box-shadow:var(--shadow);margin-bottom:14px;font-size:var(--fs-xs);color:var(--ink-soft)} .ar-legend span{display:inline-flex;align-items:center;gap:5px} .ar-legend i{width:11px;height:11px;border-radius:3px} .ar-bar{display:flex;border-radius:6px;overflow:hidden;background:var(--line);width:100%} .ar-bar i{display:block;height:100%} .ar-list{display:flex;flex-direction:column;gap:9px} .ar-row{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1.6fr) 132px;gap:16px;align-items:center; background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);cursor:pointer;transition:.14s} @media(max-width:820px){.ar-row{grid-template-columns:1fr;gap:10px}} .ar-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .ar-row.dominant{border-left-color:var(--up)} .ar-row.strong{border-left-color:var(--steel)} .ar-row.mid{border-left-color:var(--down)} .ar-row.weak,.ar-row.declining{border-left-color:var(--risk)} .ar-row.absent{border-left-color:var(--risk-deep);background:var(--risk-tint-3)} .arr-nm{font-size:var(--fs-base);font-weight:700;display:flex;align-items:baseline;gap:7px} .arr-nm em{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400;background:var(--surface-3);border-radius:4px;padding:1px 6px} .arr-why{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6;margin-top:4px} .arr-tags{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap} .arr-tags span{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} .arr-tags span.tw{color:var(--steel);font-weight:600} .arr-r{text-align:right} .arr-pos{display:inline-block;font-size:var(--fs-xs);font-weight:700;border-radius:20px;padding:3px 11px;margin-bottom:5px} .arr-pos.p4{background:var(--ok-tint);color:var(--ok-ink)} .arr-pos.p3{background:var(--steel-tint);color:var(--steel-deep)} .arr-pos.p2{background:var(--warn-tint);color:var(--warn-ink)} .arr-pos.p1{background:var(--risk-tint);color:var(--risk-ink)} .arr-pos.p0{background:var(--risk-deep);color:var(--on-accent)} .arr-tw{font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;color:var(--ink)} .arr-top{font-size:var(--fs-2xs);color:var(--ink-faint);margin-top:2px} .ar-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow)} .ah-eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase} .ar-hd h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);margin:6px 0 5px} .ar-hd p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);max-width:560px;line-height:1.7} .ah-r{text-align:right;flex-shrink:0} .ah-pos{display:inline-block;font-size:var(--fs-md);font-weight:700;border-radius:20px;padding:5px 15px} .ah-pos.p4{background:var(--ok-tint);color:var(--ok-ink)} .ah-pos.p3{background:var(--steel-tint);color:var(--steel-deep)} .ah-pos.p2{background:var(--warn-tint);color:var(--warn-ink)} .ah-pos.p1{background:var(--risk-tint);color:var(--risk-ink)} .ah-pos.p0{background:var(--risk-deep);color:var(--on-accent)} .ah-d{font-size:var(--fs-2xs);color:var(--ink-faint);margin-top:5px} .ah-tw{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);margin-top:6px} .ah-tw b{font-size:var(--fs-base);color:var(--ink)} .ar-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow)} .ar-cty{margin-top:16px;display:flex;flex-direction:column;gap:2px} .arc{padding:11px 12px;border-radius:9px;transition:.12s} .arc.tw{background:var(--steel-tint);border:1px solid var(--steel-line)} .arc-h{display:flex;align-items:center;gap:8px;margin-bottom:6px} .arc-f{font-size:var(--fs-base)} .arc-n{font-size:var(--fs-sm);font-weight:700} .arc-p{margin-left:auto;font-family:var(--mono);font-size:var(--fs-md);font-weight:700} .arc-co{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .arc-note{font-size:var(--fs-2xs);color:var(--ink-faint);font-style:italic} .ar-txt{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.85;margin:0} .ar-txt.strong{font-size:var(--fs-sm);color:var(--ink)} .ar-mini{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:var(--fs-xs);color:var(--ink-faint)} .ar-mini b{color:var(--ink);font-family:var(--mono)} .ar-insight{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow);margin-top:26px} .ar-insight h3{font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);margin:0 0 16px} .ari-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .ari{border:1px solid var(--line);border-radius:11px;padding:15px 17px;background:var(--surface-2)} .ari.warn{background:var(--warn-tint-2);border-color:var(--warn-line)} .ari b{display:block;font-size:var(--fs-sm);margin-bottom:7px;color:var(--ink)} .ari.warn b{color:var(--warn-ink)} .ari p{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.85} .ari p b{display:inline;color:var(--ink)} /* 需求主權 */ .sv-bar-wrap{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow)} .sv-t{font-size:var(--fs-sm);font-weight:700;margin-bottom:12px} .sv-bar{display:flex;height:34px;border-radius:9px;overflow:hidden;background:var(--line)} .svb{display:grid;place-items:center;height:100%;transition:.2s} .svb b{color:var(--on-accent);font-family:var(--mono);font-size:var(--fs-sm);font-weight:700} .svb.brand{background:var(--up)} .svb.spec{background:var(--steel)} .svb.order{background:var(--ink-dim)} .sv-legend{display:flex;flex-direction:column;gap:7px;margin-top:14px} .sv-legend span{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ink-soft)} .sv-legend i{width:11px;height:11px;border-radius:3px;flex-shrink:0} .sv-legend i.brand{background:var(--up)} .sv-legend i.spec{background:var(--steel)} .sv-legend i.order{background:var(--ink-dim)} .sv-legend b{color:var(--ink)} .sv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:9px} .sv-c{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 13px;box-shadow:var(--shadow);cursor:pointer;transition:.13s} .sv-c:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .svc-n{font-size:var(--fs-sm);font-weight:700;display:flex;align-items:baseline;gap:5px} .svc-n em{font-style:normal;font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint);font-weight:400} .svc-m{font-size:var(--fs-2xs);color:var(--ink-faint);line-height:1.5} .sv-more{margin-top:9px;font-size:var(--fs-xs);color:var(--ink-faint)} .sv-badge{display:inline-block;font-size:var(--fs-sm);font-weight:700;border-radius:20px;padding:5px 14px} .sv-badge.brand{background:var(--ok-tint);color:var(--ok-ink)} .sv-badge.spec{background:var(--steel-tint);color:var(--steel-deep)} .sv-badge.order{background:var(--surface-3);color:var(--ink-faint)} .stat.r3 b{color:var(--risk)} /* ===== v1.8 report builder ===== */ .rp-grid{display:grid;grid-template-columns:370px 1fr;gap:16px;align-items:start} @media(max-width:900px){.rp-grid{grid-template-columns:1fr}} .rp-left{display:flex;flex-direction:column;gap:13px;position:sticky;top:78px} @media(max-width:900px){.rp-left{position:static}} .rp-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow)} .rp-card.tall{padding:0;overflow:hidden} .rp-h{font-family:var(--disp);font-weight:600;font-size:var(--fs-base);margin-bottom:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .rp-card.tall .rp-h{padding:16px 18px;margin:0;border-bottom:1px solid var(--line);background:var(--surface-2)} .rp-sub{font-size:var(--fs-xs);color:var(--ink-faint);font-weight:400;font-family:var(--body)} .rp-h .rp-b.sm{margin-left:auto} .rp-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--surface-3);border-radius:9px;padding:3px;margin-bottom:10px} .rp-t{padding:7px 4px;border:none;background:none;border-radius:7px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-faint);cursor:pointer;font-family:var(--body);transition:.13s} .rp-t.on{background:var(--card);color:var(--steel-deep);box-shadow:var(--shadow)} .rp-sel{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-family:var(--body);font-size:var(--fs-sm);color:var(--ink);cursor:pointer} .rp-sel:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(74,111,165,.12)} .rp-meta{margin-top:9px;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} .rp-way{padding:14px 0;border-top:1px dashed var(--line)} .rp-way:first-of-type{border-top:none;padding-top:0} .rw-t{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap} .rw-t b{font-size:var(--fs-sm)} .rw-tag{font-size:var(--fs-3xs);font-weight:600;border-radius:20px;padding:2px 8px;background:var(--surface-3);color:var(--ink-faint)} .rw-tag.ok{background:var(--ok-tint);color:var(--ok-ink)} .rw-tag.warn{background:var(--warn-tint);color:var(--warn-ink)} .rp-way p{margin:0 0 10px;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.75} .rp-way p b{color:var(--ink)} .rw-btns{display:flex;gap:6px;flex-wrap:wrap} .rp-b{padding:8px 14px;border-radius:8px;border:1px solid var(--steel-line);background:var(--card);color:var(--steel-deep);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:var(--body);transition:.13s} .rp-b:hover{background:var(--steel-tint)} .rp-b.primary{background:var(--steel);border-color:var(--steel);color:var(--on-accent)} .rp-b.primary:hover{background:var(--steel-dark)} .rp-b:disabled{opacity:.6;cursor:wait} .rp-b.sm{padding:5px 11px;font-size:var(--fs-xs)} .rp-b.lg{width:100%;padding:13px;font-size:var(--fs-md)} .rp-ai-jump{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px} .rp-ai-jump .rp-b{min-height:38px;text-align:center} .rp-way.main{background:var(--steel-tint);border:1px solid var(--steel-line);border-radius:11px;padding:15px;margin-bottom:14px} .rp-way.main + .rp-way{border-top:none} /* 三步驟提示 */ .rp-steps{display:grid;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)} .rp-step-flow{display:flex;align-items:center;justify-content:center;gap:10px} .rs{display:flex;flex-direction:column;align-items:center;gap:4px} .rs b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--steel);color:var(--on-accent);font-family:var(--mono);font-size:var(--fs-xs);font-weight:600} .rs span{font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600} .rs-a{color:var(--ink-faint);font-size:var(--fs-md);margin-bottom:14px} .rp-after-copy{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:10px;border-top:1px dashed var(--line)} /* 預覽切換 */ .rp-vt{display:inline-flex;gap:2px;background:var(--surface-3);border-radius:8px;padding:2px} .rp-v{padding:5px 11px;border:none;background:none;border-radius:6px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-faint);cursor:pointer;font-family:var(--body);transition:.12s} .rp-v.on{background:var(--card);color:var(--steel-deep);box-shadow:var(--shadow)} .rp-pre{ margin:0;padding:20px;max-height:calc(100vh - 220px);overflow:auto; font-family:var(--mono);font-size:var(--fs-xs);line-height:1.85;color:var(--ink-soft); white-space:pre-wrap;word-break:break-word;background:var(--card); } @media(max-width:900px){.rp-pre{max-height:460px}} .rp-honest{background:var(--warn-tint-2);border:1px solid var(--warn-line);border-radius:12px;padding:18px 20px;margin-top:16px} .rp-honest b{display:block;font-size:var(--fs-sm);color:var(--warn-ink);margin-bottom:7px} .rp-honest p{margin:0;font-size:var(--fs-sm);color:var(--warn-deep);line-height:1.85} .rp-honest p b{display:inline;color:var(--warn-deep-2)} .rp-toast{ position:fixed;left:50%;bottom:32px;transform:translate(-50%,12px); background:var(--ink);color:var(--on-accent);font-size:var(--fs-sm);padding:10px 20px;border-radius:22px; box-shadow:0 8px 24px rgba(38,48,59,.3);opacity:0;pointer-events:none; transition:opacity .18s,transform .18s;z-index:400; } .rp-toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:900px){.rp-toast{bottom:80px}} /* ===== v1.4 about page ===== */ .ab .sec-head{margin-top:34px} .ab-hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:38px 40px;box-shadow:var(--shadow)} @media(max-width:700px){.ab-hero{padding:26px 22px}} .ab-hero h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-3xl);line-height:1.42;margin:10px 0 20px;letter-spacing:0} @media(max-width:700px){.ab-hero h1{font-size:var(--fs-2xl)}} .ab-lead{font-size:var(--fs-base);line-height:2;color:var(--ink-soft);margin:0 0 14px;max-width:760px} .ab-lead b{color:var(--ink);font-weight:600} .ab-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .ab-stats div{text-align:center} .ab-stats b{display:block;font-family:var(--disp);font-weight:700;font-size:var(--fs-2xl);color:var(--steel);line-height:1} .ab-stats span{font-size:var(--fs-2xs);color:var(--ink-faint)} .ab-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow)} .ab-card.sm{padding:20px 22px} .ab-p{font-size:var(--fs-md);line-height:1.95;color:var(--ink-soft);margin:0 0 14px} .ab-p b{color:var(--ink)} .ab-svg{width:100%;height:auto;display:block;margin:18px 0} .ab-axis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:12px} .ab-ax{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--surface-2)} .ab-ax b{display:block;font-size:var(--fs-sm);margin-bottom:5px;color:var(--steel-deep)} .ab-ax span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.75} .ab-ax span b{display:inline;color:var(--ink);font-size:var(--fs-xs)} .ab-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px} .ab-num{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel);letter-spacing:1px;margin-bottom:7px} .ab-card.sm h3{font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);margin:0 0 10px} .ab-card.sm p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink-soft);margin:0} .ab-card.sm p b{color:var(--ink)} .ab-card.sm p b.warn{color:var(--warn-ink)} .ab-feat{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 30px;box-shadow:var(--shadow);margin-bottom:13px} @media(max-width:860px){.ab-feat{grid-template-columns:1fr;padding:22px}} .ab-feat.rev .abf-txt{order:2} .ab-feat.rev .abf-img{order:1} @media(max-width:860px){.ab-feat.rev .abf-txt{order:1}.ab-feat.rev .abf-img{order:2}} .abf-tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;background:var(--steel-tint);color:var(--steel-deep);border-radius:20px;padding:4px 12px;margin-bottom:11px} .abf-txt h3{font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);margin:0 0 13px;line-height:1.45} .abf-txt p{font-size:var(--fs-sm);line-height:1.95;color:var(--ink-soft);margin:0 0 11px} .abf-txt p b{color:var(--ink)} .abf-hi{background:var(--warn-tint-2);border-left:3px solid var(--gold);border-radius:0 9px 9px 0;padding:12px 15px !important;margin:14px 0 !important} .abf-hi b{color:var(--warn-ink) !important} .ab-sub{font-size:var(--fs-sm) !important;color:var(--ink-faint) !important} .abf-img{display:flex;align-items:center;justify-content:center} .ab-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:3px} .ab-dot.ok{background:var(--up)} .ab-dot.gap{background:var(--gold)} .ab-dot.none{background:var(--risk)} .ab-quote{flex-direction:column;align-items:flex-start;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:24px;width:100%} .abq-n{font-family:var(--disp);font-weight:700;font-size:var(--fs-4xl);color:var(--steel);line-height:1} .abq-n.r3{color:var(--risk)} .abq-l{font-size:var(--fs-sm);color:var(--ink-soft);margin:4px 0 8px} .abq-bar{width:100%;height:8px;background:var(--line);border-radius:4px;overflow:hidden} .abq-bar i{display:block;height:100%;background:var(--risk);border-radius:4px} .abq-bar i.low{background:var(--up)} .abq-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .abq-tags span{font-size:var(--fs-xs);background:var(--risk-tint);color:var(--risk-ink);border-radius:6px;padding:3px 9px} .abq-note{font-size:var(--fs-xs);color:var(--ink-faint);margin-top:10px} .ab-use{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:13px} .ab-u{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px 22px;box-shadow:var(--shadow)} .abu-n{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel);letter-spacing:1px;margin-bottom:7px} .ab-u h4{margin:0 0 9px;font-family:var(--disp);font-weight:600;font-size:var(--fs-lg)} .ab-u p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink-soft);margin:0 0 8px} .ab-u p b{color:var(--ink)} .ab-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px} .ab-t{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:15px 17px;box-shadow:var(--shadow)} .ab-t b{display:block;font-size:var(--fs-sm);margin-bottom:5px} .ab-t span{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.75} .ab-honest{background:var(--warn-tint-2);border:1px solid var(--warn-line);border-radius:14px;padding:26px 28px;margin-top:34px} .ab-honest h3{font-family:var(--disp);font-weight:600;font-size:var(--fs-xl);color:var(--warn-ink);margin:0 0 13px} .ab-honest p{font-size:var(--fs-sm);line-height:1.95;color:var(--warn-deep);margin:0 0 11px} .ab-honest p b{color:var(--warn-deep-2)} .ab-h-last{padding-top:12px;border-top:1px solid var(--warn-line);font-size:var(--fs-md) !important} .ab-foot{text-align:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .ab-foot p{font-size:var(--fs-sm);color:var(--ink-faint);margin:0 0 12px} /* ===== v1.2 gap map + reverse link ===== */ .gap-sum{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow);margin-bottom:14px} .gs-hd b{display:block;font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);margin-bottom:4px} .gs-hd span{font-size:var(--fs-sm);color:var(--ink-faint);line-height:1.6} .gs-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:14px 0 10px;background:var(--surface-3)} .gsb{display:block;height:100%} .gsb.ok{background:var(--up)} .gsb.gap{background:var(--gold)} .gsb.none{background:var(--risk)} .gs-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--ink-soft);align-items:center} .gs-legend span{display:inline-flex;align-items:center;gap:5px} .gs-legend i{width:10px;height:10px;border-radius:3px} .gs-legend i.ok{background:var(--up)} .gs-legend i.gap{background:var(--gold)} .gs-legend i.none{background:var(--risk)} .gs-legend b{font-family:var(--mono);color:var(--ink)} .gs-tot{margin-left:auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-faint)} .gap-list{display:flex;flex-direction:column;gap:9px} .gap-node{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)} .gn-hd{display:grid;grid-template-columns:minmax(130px,1.3fr) minmax(120px,1.6fr) 84px;gap:12px;align-items:center;margin-bottom:10px} @media(max-width:700px){.gn-hd{grid-template-columns:1fr;gap:6px}} .gn-nm{font-size:var(--fs-md);font-weight:700;display:flex;flex-direction:column} .gn-nm em{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .gn-bar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--surface-3)} .gn-bar i{display:block;height:100%} .gn-bar i.ok{background:var(--up)} .gn-bar i.gap{background:var(--gold)} .gn-bar i.none{background:var(--risk)} .gn-x{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600;text-align:right;border-radius:6px;padding:3px 8px} .gn-x.r1{background:var(--ok-tint);color:var(--ok-ink)} .gn-x.r2{background:var(--warn-tint);color:var(--warn-ink)} .gn-x.r3{background:var(--risk-tint);color:var(--risk-ink)} .gn-items{display:flex;flex-wrap:wrap;gap:5px} .gn-i{font-size:var(--fs-xs);padding:4px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-family:var(--body);transition:.13s} .gn-i.ok{background:var(--ok-tint);color:var(--ok-ink);border-color:var(--ok-line)} .gn-i.gap{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn-line)} .gn-i.none{background:var(--risk-tint);color:var(--risk-ink);border-color:var(--risk-line)} .gn-i:hover{border-color:var(--steel)} .ca-block{padding:11px 0;border-top:1px dashed var(--line)} .ca-block:first-child{border-top:none;padding-top:0} .ca-hd{display:flex;align-items:center;gap:8px;margin-bottom:9px} .ca-hd svg{width:16px;height:16px;color:var(--steel)} .ca-hd b{font-size:var(--fs-sm)} .ca-go{margin-left:auto;font-size:var(--fs-xs);padding:4px 10px;border-radius:7px;border:1px solid var(--steel-line);background:var(--card);color:var(--steel);cursor:pointer;font-family:var(--body)} .ca-go:hover{background:var(--steel);color:var(--on-accent)} .ca-items{display:flex;flex-wrap:wrap;gap:6px} .ca-i{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;font-size:var(--fs-xs);padding:6px 11px;border-radius:8px;border:1px solid var(--steel-line);background:var(--steel-tint);color:var(--steel-deep);cursor:pointer;font-family:var(--body);transition:.13s;position:relative} .ca-i em{font-style:normal;font-size:var(--fs-3xs);color:var(--ink-faint)} .ca-i:hover{background:var(--steel);color:var(--on-accent);border-color:var(--steel)} .ca-i:hover em{color:rgba(255,255,255,.75)} .ca-i.gap{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn-line)} .ca-i.gap:hover{background:var(--warn-ink);color:var(--on-accent)} .ca-i b{position:absolute;right:-3px;top:-5px;font-size:var(--fs-3xs);background:var(--warn-ink);color:var(--on-accent);border-radius:4px;padding:0 4px;font-weight:700} .fv-note{background:var(--paper-2);border:1px solid var(--warn-line);border-radius:11px;padding:13px 16px;margin-bottom:14px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.75} .fv-note b{color:var(--warn-ink)} .at-five{display:grid;grid-template-columns:225px 1fr 265px;gap:16px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow)} @media(max-width:1000px){.at-five{grid-template-columns:1fr}} /* node picker (fills the empty left space) */ .fv-nodes{border-right:1px solid var(--line);padding-right:14px} @media(max-width:1000px){.fv-nodes{border-right:none;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}} .fvn-hd{font-size:var(--fs-xs);font-weight:700;color:var(--ink)} .fvn-sub{font-size:var(--fs-2xs);color:var(--ink-faint);margin:3px 0 11px;line-height:1.5} .fvn-b{display:grid;grid-template-columns:1fr 42px 24px;gap:7px;align-items:center;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:7px 9px;cursor:pointer;transition:.13s;font-family:var(--body);margin-bottom:2px} .fvn-b:hover{background:var(--steel-tint)} .fvn-b.on{background:var(--steel-tint);border-color:var(--steel-line)} .fvn-n{font-size:var(--fs-sm);font-weight:600;color:var(--ink)} .fvn-b.on .fvn-n{color:var(--steel-deep)} .fvn-m{height:5px;background:var(--line);border-radius:3px;overflow:hidden} .fvn-m i{display:block;height:100%;background:var(--steel);border-radius:3px} .fvn-m i.hot{background:var(--gold)} .fvn-v{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);text-align:right} .fv-stage{position:relative;width:100%;max-width:430px;margin:0 auto} .fv-cap{text-align:center;margin-top:2px;font-size:var(--fs-md);font-weight:700;color:var(--ink)} .fv-cap em{display:block;font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400;margin-top:2px} .fv-lb .fvl-n{font-size:var(--fs-2xs);font-weight:700;fill:var(--ink-soft)} .fv-lb .fvl-v{font-size:var(--fs-3xs);fill:var(--ink-faint);font-family:var(--mono)} .fv-lb.hot .fvl-n{fill:var(--warn-ink)} .fv-lb.hot .fvl-v{fill:var(--warn-ink)} .fv-svg{width:100%;height:auto;display:block} .fv-grid{fill:none;stroke:var(--line);stroke-width:1} .fv-spoke{stroke:var(--line);stroke-width:1} .fv-shape{fill:rgba(74,111,165,.14);stroke:var(--steel);stroke-width:2} .fv-dot{fill:var(--steel)} .fv-core{fill:var(--card);stroke:var(--line);stroke-width:1} .fv-cl{text-anchor:middle;font-size:var(--fs-3xs);fill:var(--ink-faint)} .fv-cv{text-anchor:middle;font-family:var(--disp);font-weight:700;font-size:var(--fs-xl);fill:var(--steel)} .fv-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:14px} .fvp-hd{font-size:var(--fs-xs);color:var(--ink-faint);margin-bottom:11px} .fvp-hd b{color:var(--ink);font-size:var(--fs-sm)} .fvp-row{display:flex;align-items:center;gap:9px;padding:5px 0} .fvp-l{width:86px;flex-shrink:0;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.3} .fvp-bar{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden} .fvp-bar i{display:block;height:100%;background:var(--steel);border-radius:4px} .fvp-bar i.hot{background:var(--gold)} .fvp-v{font-size:var(--fs-2xs);color:var(--ink-faint);width:26px;text-align:right} .fvp-foot{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)} .fvp-src{font-size:var(--fs-2xs);color:var(--ink-faint);margin-bottom:8px;line-height:1.5} .fvp-co{display:flex;flex-wrap:wrap;gap:5px} .fvp-none{font-size:var(--fs-xs);color:var(--warn-ink);background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:7px;padding:8px 10px;line-height:1.5} .fvc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;margin-top:14px} .fvc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)} .fvc-hd{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px} .fvc-hd h4{margin:0;font-size:var(--fs-sm);font-weight:700} .fvc-lv{font-size:var(--fs-2xs);border-radius:20px;padding:3px 10px;background:var(--steel-tint);color:var(--steel-deep);font-weight:600;white-space:nowrap} .fvc-lv.hot{background:var(--warn-tint);color:var(--warn-ink)} .fvc p{margin:0;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.7} .fvc-src-l{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-faint);margin-bottom:7px} .fvc-src{display:flex;flex-wrap:wrap;gap:6px} .fvc-src span{font-size:var(--fs-2xs);background:var(--steel-tint);color:var(--steel-deep);border-radius:6px;padding:3px 9px} /* item modal */ /* Modal 住在 #modal 獨立容器,不在 #app 內 —— 開關時只動這一小塊 DOM。 ⚠ 不使用 backdrop-filter:blur():它會強迫瀏覽器在每一幀重新合成整個背景圖層, 在有數百個節點的圖譜頁上是明確的掉幀來源。改用純色半透明遮罩。 */ .modal-host{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden} .modal-host.show{pointer-events:auto;visibility:visible} .at-modal-bg{position:absolute;inset:0;background:rgba(38,48,59,.45);opacity:0;animation:mdFade .16s ease-out forwards;will-change:opacity} .at-modal{position:absolute;top:50%;left:50%;width:min(880px,92vw);max-height:86vh;overflow:auto;background:var(--card);border-radius:16px;box-shadow:0 24px 70px rgba(38,48,59,.3);display:grid;grid-template-columns:300px 1fr; opacity:0;transform:translate3d(-50%,-46%,0);animation:mdPop .2s cubic-bezier(.2,.8,.3,1) forwards;will-change:transform,opacity} @keyframes mdFade{to{opacity:1}} @keyframes mdPop{to{opacity:1;transform:translate3d(-50%,-50%,0)}} @media(prefers-reduced-motion:reduce){ .at-modal-bg,.at-modal{animation-duration:.01ms} } @media(max-width:760px){.at-modal{grid-template-columns:1fr}.at-m-left{display:none}} .at-mx{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);cursor:pointer;font-size:var(--fs-md);z-index:2} .at-mx:hover{background:var(--ink);color:var(--on-accent)} .at-m-left{background:var(--steel-tint-2);display:grid;place-items:center;padding:30px} .at-m-card{background:var(--card);border-radius:14px;padding:26px 20px;text-align:center;box-shadow:var(--shadow);width:100%} .at-m-ico{width:62px;height:62px;border-radius:50%;background:var(--steel-tint);color:var(--steel);display:grid;place-items:center;margin:0 auto 14px} .at-m-ico svg{width:30px;height:30px} .at-m-nm{font-size:var(--fs-base);font-weight:700;margin-bottom:3px} .at-m-node{font-size:var(--fs-xs);color:var(--ink-faint)} .at-m-tag{margin-top:14px;font-size:var(--fs-2xs);color:var(--ink-faint)} .at-m-right{padding:30px 32px} .at-m-eyebrow{font-size:var(--fs-xs);color:var(--ink-faint);margin-bottom:6px} .at-m-right h2{font-family:var(--disp);font-weight:700;font-size:var(--fs-2xl);margin:0 0 6px} .at-m-path{font-size:var(--fs-sm);color:var(--steel);margin-bottom:16px} .at-m-right p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.8;margin:0 0 13px} .at-m-right p b{color:var(--ink)} .at-m-co-hd{font-size:var(--fs-sm);font-weight:700;margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line)} .at-m-co{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:var(--card);cursor:pointer;transition:.13s;font-family:var(--body)} .at-m-co:hover{border-color:var(--steel);background:var(--steel-tint);transform:translateX(3px)} .amc-n{font-size:var(--fs-md);font-weight:700;margin-bottom:2px} .amc-d{font-size:var(--fs-xs);color:var(--ink-soft)} .amc-m{font-size:var(--fs-2xs);color:var(--steel);margin-top:5px} .at-m-noco{font-size:var(--fs-sm);color:var(--ink-faint);background:var(--surface-2);border:1px dashed var(--line);border-radius:9px;padding:12px;margin-top:16px} .shk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px} .shk-pick{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s;display:flex;flex-direction:column;gap:5px} .shk-pick:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .sk-nm{font-weight:700;font-size:var(--fs-base);display:flex;align-items:baseline;gap:6px} .sk-nm em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .sk-n{font-size:var(--fs-xs);color:var(--ink-faint)} .sk-sev{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;margin-top:4px;width:max-content;border-radius:999px;padding:3px 8px} .sk-sev.r1{color:var(--steel-deep);background:var(--steel-tint)} .sk-sev.r2{color:var(--warn-ink);background:var(--warn-tint)} .sk-sev.r3{color:var(--risk-ink);background:var(--risk-tint)} .shk-hd{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--card),var(--steel-tint-2));border:1px solid var(--steel-line);border-radius:var(--ui-radius-lg);padding:24px 26px;box-shadow:var(--ui-shadow-1)} .sh-eyebrow{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:2px;color:var(--ink-faint);text-transform:uppercase} .shk-hd h1{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);margin:6px 0 3px} .shk-hd p{margin:0;font-size:var(--fs-sm);color:var(--ink-faint)} .sh-r{text-align:right;flex-shrink:0} .sh-sev{font-weight:700;font-size:var(--fs-sm);border-radius:999px;padding:6px 13px;display:inline-block;border:1px solid transparent} .sh-sev.r1{background:var(--steel-tint);color:var(--steel-deep);border-color:var(--steel-line)} .sh-sev.r2{background:var(--warn-tint);color:var(--warn-ink);border-color:var(--warn-line)} .sh-sev.r3{background:var(--risk-tint);color:var(--risk-ink);border-color:var(--risk-line)} .sh-num{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-faint);margin-top:5px} .sh-fx{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ink-faint);margin-top:3px;opacity:.8} .pg-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px} @media(max-width:820px){.pg-flow{grid-template-columns:1fr}} .pg-col{background:var(--card);border:1px solid var(--line);border-radius:var(--ui-radius-lg);padding:18px;box-shadow:var(--ui-shadow-1)} .pg-hd{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)} .pg-step{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 26px;background:var(--steel-tint);color:var(--steel-deep);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700} .pg-hd b{display:block;font-family:var(--disp);font-weight:600;font-size:var(--fs-md);color:var(--ink);line-height:1.3} .pg-hd > div > span{font-size:var(--fs-xs);color:var(--ink-faint)} .pg-item{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:var(--ui-radius-sm);background:var(--surface-2);border:1px solid var(--line);margin-bottom:8px;cursor:pointer;transition:background .13s,border-color .13s,box-shadow .13s;position:relative} .pg-item:hover{background:var(--steel-tint-2);border-color:var(--steel-line)} .pg-item.high{background:var(--steel-tint-2);border-color:var(--steel-line);box-shadow:none} .pg-item.good{background:var(--steel-tint-2);border-color:var(--steel-line)} .pg-nm{font-weight:700;font-size:var(--fs-sm)} .pg-w{font-size:var(--fs-xs);color:var(--ink-faint)} .pg-tag{position:absolute;right:9px;top:9px;font-size:var(--fs-3xs);background:var(--risk-tint);color:var(--risk-ink);border:1px solid var(--risk-line);border-radius:999px;padding:2px 7px;font-weight:700} .rv-block{padding:9px 0;border-top:1px dashed var(--line)} .rv-block:first-of-type{border-top:none;padding-top:0} .rv-seg{font-size:var(--fs-sm);font-weight:700;margin-bottom:3px} .rv-note{font-size:var(--fs-xs);color:var(--ink-faint);line-height:1.6;margin-bottom:7px} .rv-others{display:flex;flex-wrap:wrap;gap:6px} /* geopolitical */ .gp-table{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .gp-head,.gp-row{display:grid;grid-template-columns:minmax(100px,1fr) minmax(100px,1.1fr) 92px 76px minmax(150px,2.2fr);gap:11px;align-items:center;padding:11px 15px} .gp-head{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-faint);font-weight:700} .gp-row{border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .gp-row:hover{background:var(--steel-tint)} .gp-nm{font-weight:700;font-size:var(--fs-sm);display:flex;align-items:baseline;gap:6px} .gp-nm em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .gp-bar{display:flex;align-items:center;gap:7px;height:8px} .gp-bar i{display:block;height:8px;border-radius:4px} .gp-bar i.high{background:var(--risk)} .gp-bar i.mid{background:var(--down)} .gp-bar i.low{background:var(--up)} .gp-bar em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-soft)} .gp-pill{font-size:var(--fs-2xs);font-weight:600;border-radius:5px;padding:3px 7px;text-align:center;white-space:nowrap} .gp-pill.high{background:var(--risk-tint);color:var(--risk-ink)} .gp-pill.mid{background:var(--warn-tint);color:var(--warn-ink)} .gp-pill.low{background:var(--surface-3);color:var(--ink-faint)} .gp-pill.t-high{background:var(--risk-tint);color:var(--risk-ink)} .gp-pill.t-mid{background:var(--warn-tint);color:var(--warn-ink)} .gp-pill.t-low{background:var(--surface-3);color:var(--ink-faint)} .gp-note{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.55} .gp-pills{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} @media(max-width:880px){.gp-head{display:none}.gp-row{grid-template-columns:1fr;gap:6px}} /* ===== v0.8 geography ===== */ .geo-wrap{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start} @media(max-width:880px){.geo-wrap{grid-template-columns:1fr}} .geo-map{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)} .gm-tabs{display:flex;gap:3px;background:var(--surface-3);border-radius:8px;padding:3px;margin-bottom:12px} .gm-tb{flex:1;font-size:var(--fs-xs);padding:5px 4px;border:none;background:none;border-radius:6px;color:var(--ink-soft);cursor:pointer;font-weight:600;transition:.13s} .gm-tb.on{background:var(--card);color:var(--steel-deep);box-shadow:var(--shadow)} .tw-map{width:100%;height:auto;display:block} .tw-outline{fill:var(--line-2);stroke:var(--line-3);stroke-width:1.5} .pin{cursor:pointer} .pin-halo{opacity:.16} .pin.r1 .pin-halo,.pin.r1 .pin-dot{fill:var(--steel)} .pin.r2 .pin-halo,.pin.r2 .pin-dot{fill:var(--down)} .pin.r3 .pin-halo,.pin.r3 .pin-dot{fill:var(--risk)} .pin-dot{transition:r .15s} .pin:hover .pin-dot{stroke:var(--ink);stroke-width:2} .pin-n{fill:var(--card);font-size:var(--fs-3xs);font-weight:700;text-anchor:middle;font-family:var(--mono);pointer-events:none} .pin-lb{fill:var(--ink-soft);font-size:var(--fs-3xs);font-weight:600;pointer-events:none} .gm-legend{display:flex;align-items:center;gap:11px;margin-top:10px;font-size:var(--fs-2xs);color:var(--ink-faint);flex-wrap:wrap} .gm-legend span{display:inline-flex;align-items:center;gap:4px} .gm-legend i{width:9px;height:9px;border-radius:50%} .gm-legend i.r1{background:var(--steel)} .gm-legend i.r2{background:var(--down)} .gm-legend i.r3{background:var(--risk)} .gm-hint{color:var(--ink-faint);font-size:var(--fs-2xs);flex-basis:100%;margin-top:2px} .geo-list{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .gc-head,.gc-row{display:grid;grid-template-columns:minmax(110px,1.2fr) 44px minmax(120px,1.6fr) minmax(90px,1fr);gap:11px;align-items:center;padding:11px 15px} .gc-head{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-faint);font-weight:700} .gc-row{border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .gc-row:hover{background:var(--steel-tint)} .gc-nm{font-weight:700;font-size:var(--fs-sm);display:flex;flex-direction:column} .gc-nm em{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .gc-n{font-family:var(--mono);font-size:var(--fs-sm);color:var(--steel-deep);text-align:center;font-weight:600} .gc-ch{display:flex;flex-wrap:wrap;gap:4px} .gc-ch i{font-style:normal;font-size:var(--fs-2xs);background:var(--surface-3);color:var(--ink-soft);border-radius:5px;padding:2px 6px} .gc-risk{display:flex;align-items:center;gap:7px;height:8px} .gc-risk i{display:block;height:8px;border-radius:4px} .gc-risk i.r1{background:var(--steel)} .gc-risk i.r2{background:var(--down)} .gc-risk i.r3{background:var(--risk)} .gc-risk em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} @media(max-width:700px){.gc-head{display:none}.gc-row{grid-template-columns:1fr;gap:5px}} .rb-row{display:flex;align-items:center;gap:9px;padding:6px 0} .rb-l{width:34px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-soft);flex-shrink:0} .rb-bar{flex:1;height:8px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .rb-bar i{display:block;height:100%;border-radius:4px} .rb-bar i.r1{background:var(--steel)} .rb-bar i.r2{background:var(--down)} .rb-bar i.r3{background:var(--risk)} .rb-v{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-faint);width:22px;text-align:right} .st-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 1fr 42px auto;gap:9px;align-items:center;padding:7px 0;border-top:1px dashed var(--line);cursor:pointer} .st-row:first-of-type{border-top:none} .st-row:hover .st-nm{color:var(--steel)} .st-nm{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600} .st-nm svg{width:14px;height:14px;color:var(--steel);flex-shrink:0} .st-bar{height:8px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .st-bar i{display:block;height:100%;border-radius:4px} .st-bar i.r1,.st-bar i.r2{background:var(--steel)} .st-bar i.r3{background:var(--risk)} .st-v{font-family:var(--mono);font-size:var(--fs-xs);text-align:right;font-weight:600} .st-v.r1,.st-v.r2{color:var(--steel-deep)} .st-v.r3{color:var(--risk-ink)} .st-d{font-size:var(--fs-2xs);color:var(--ink-faint);white-space:nowrap} .gs-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px} .gs-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);background:var(--warn-tint-2);color:var(--warn-ink);border:1px solid var(--warn-line);border-radius:20px;padding:5px 12px;cursor:pointer;transition:.13s} .gs-chip svg{width:13px;height:13px} .gs-chip:hover{background:var(--warn-ink);color:var(--on-accent)} .gs-chip:hover svg{stroke:var(--card)} .gs-chip.os{background:var(--surface-3);color:var(--ink-soft);border-color:var(--line)} .gs-chip.os:hover{background:var(--ink);color:var(--on-accent)} .gs-bars{border-top:1px dashed var(--line);padding-top:11px} .sp-stats{display:flex;gap:34px;margin-top:22px;flex-wrap:wrap} .sp-stats .stat b{font-family:var(--disp);font-weight:600;font-size:var(--fs-2xl);color:var(--steel-deep);display:block;line-height:1} .sp-stats .stat span{font-size:var(--fs-xs);color:var(--ink-faint)} .dm-block{margin-top:28px} .dm-hd{display:flex;align-items:baseline;gap:11px;margin-bottom:13px;padding-bottom:9px;border-bottom:2px solid var(--steel-line)} .dm-hd h3{margin:0;font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);color:var(--steel-deep)} .dm-hd span{font-size:var(--fs-sm);color:var(--ink-faint);flex:1} .dm-hd b{font-family:var(--mono);font-size:var(--fs-2xs);background:var(--steel-tint);color:var(--steel-deep);border-radius:20px;padding:2px 10px} .sp-capbar{display:flex;align-items:center;gap:8px;margin-bottom:9px} .scb-track{flex:1;height:7px;background:rgba(38,48,59,.07);border-radius:4px;overflow:hidden} .scb-track i{display:block;height:100%;border-radius:4px} .scb-track i.good{background:var(--up)} .scb-track i.mid{background:var(--steel)} .scb-track i.weak{background:var(--down)} .scb-v{font-family:var(--mono);font-size:var(--fs-xs);font-weight:600} .scb-v.good{color:var(--ok-ink)} .scb-v.mid{color:var(--steel-deep)} .scb-v.weak{color:var(--warn-ink)} /* panorama table */ .pt-table{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .pt-head,.pt-row{display:grid;grid-template-columns:minmax(130px,1.2fr) minmax(110px,1.3fr) minmax(100px,1.1fr) 50px minmax(120px,1.4fr);gap:12px;align-items:center;padding:11px 16px} .pt-head{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-faint);font-weight:700} .pt-row{border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .pt-row:hover{background:var(--steel-tint)} .pt-nm{display:flex;align-items:center;gap:8px;font-weight:700;font-size:var(--fs-md)} .pt-nm svg{width:16px;height:16px;color:var(--steel);flex-shrink:0} .pt-bar,.pt-gap{display:flex;align-items:center;gap:8px;height:8px;position:relative} .pt-bar i,.pt-gap i{display:block;height:8px;border-radius:4px;background:rgba(38,48,59,.08)} .pt-bar i.good{background:var(--up)} .pt-bar i.mid{background:var(--steel)} .pt-bar i.weak{background:var(--down)} .pt-gap i{background:var(--risk);opacity:.75} .pt-bar em,.pt-gap em{font-style:normal;font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);white-space:nowrap} .pt-n{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-soft);text-align:center} .pt-ck{font-size:var(--fs-xs);color:var(--steel-deep);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:820px){.pt-head{display:none}.pt-row{grid-template-columns:1fr;gap:6px}} /* ===== v0.6 buyer / customer axis ===== */ .by-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px} .by-card{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s} .by-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--steel-line)} .by-hd{display:flex;align-items:center;gap:10px;margin-bottom:11px} .by-logo{width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--on-accent);display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:var(--fs-sm);flex-shrink:0} .by-hd h3{margin:0;font-size:var(--fs-base);font-weight:700} .by-cat{font-size:var(--fs-xs);color:var(--ink-faint)} .by-metrics{display:flex;gap:16px;margin-bottom:9px} .bym{display:flex;flex-direction:column} .bym b{font-family:var(--disp);font-weight:600;font-size:var(--fs-lg);color:var(--steel-deep);line-height:1.1} .bym i{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-faint)} .by-chains{display:flex;flex-wrap:wrap;gap:4px} .by-chains i{font-style:normal;font-size:var(--fs-2xs);background:var(--steel-tint);color:var(--steel-deep);border-radius:5px;padding:2px 7px} /* common supplier matrix */ .mx-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px} .mx{border-collapse:separate;border-spacing:3px;font-size:var(--fs-xs);width:100%;table-layout:fixed} .mx th:first-child{width:78px} .mx th{font-weight:600;color:var(--ink-soft);font-size:var(--fs-2xs);padding:5px;white-space:nowrap} .mx .mx-rh{text-align:right;padding-right:9px} .mx td{height:40px;text-align:center;border-radius:7px;font-family:var(--mono);font-size:var(--fs-sm);cursor:pointer;transition:.12s} .mx td.mx-self{background:var(--surface-3);color:var(--ink-faint);cursor:default} .mx td.l0{background:var(--surface-2);color:var(--ink-faint);cursor:default} .mx td.l1{background:var(--steel-line-3);color:var(--steel-deep)} .mx td.l2{background:var(--steel-soft);color:var(--on-accent)} .mx td.l3{background:var(--steel);color:var(--on-accent);font-weight:700} .mx td:not(.mx-self):not(.l0):hover{outline:2px solid var(--ink);outline-offset:1px} /* supplier list */ .sup-list{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .sup-head,.sup-row{display:grid;grid-template-columns:48px minmax(110px,1.1fr) minmax(150px,1.6fr) minmax(90px,1.4fr) 44px 70px;gap:10px;align-items:center;padding:11px 16px} .sup-head{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-faint);font-weight:700} .sup-row{border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .sup-row:hover{background:var(--steel-tint)} .sup-tier{font-size:var(--fs-2xs);font-weight:700;border-radius:5px;padding:2px 6px;text-align:center} .sup-tier.t1{background:var(--steel);color:var(--on-accent)} .sup-tier.t2{background:var(--surface-3);color:var(--ink-soft)} .sup-nm{font-weight:700;font-size:var(--fs-md);display:flex;align-items:baseline;gap:6px} .sup-nm em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint)} .sup-what{font-size:var(--fs-sm);color:var(--ink-soft)} .sup-bar{height:8px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .sup-bar i{display:block;height:100%;border-radius:4px} .sup-bar i.high{background:var(--risk)} .sup-bar i.mid{background:var(--down)} .sup-bar i.low{background:var(--steel)} .sup-sh{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);text-align:right} .sup-risk{font-size:var(--fs-2xs);font-weight:600;text-align:center;border-radius:5px;padding:2px 0} .sup-risk.high{background:var(--risk-tint);color:var(--risk-ink)} .sup-risk.mid{background:var(--warn-tint);color:var(--warn-ink)} @media(max-width:820px){.sup-head{display:none}.sup-row{grid-template-columns:48px 1fr 60px}.sup-what,.sup-bar,.sup-risk{grid-column:2}} .risk-badge{font-size:var(--fs-xs);font-weight:700;border-radius:20px;padding:4px 12px} .risk-badge.high{background:var(--risk-tint);color:var(--risk-ink)} .risk-badge.mid{background:var(--warn-tint);color:var(--warn-ink)} .risk-badge.low{background:var(--ok-tint);color:var(--ok-ink)} /* company customer exposure */ .cx-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)} .cx-hd{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:12px} .cx-note{font-size:var(--fs-sm);color:var(--ink-soft)} .cx-note b{color:var(--ink)} .cx-row{display:grid;grid-template-columns:minmax(110px,1fr) minmax(130px,1.5fr) minmax(80px,1.2fr) 42px;gap:11px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);cursor:pointer} .cx-row:hover .cx-b{color:var(--steel)} .cx-b{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:700} .cx-logo{width:24px;height:24px;border-radius:6px;background:var(--ink);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-3xs);font-style:normal;font-family:var(--disp);flex-shrink:0} .cx-what{font-size:var(--fs-sm);color:var(--ink-soft)} .cx-bar{height:8px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .cx-bar i{display:block;height:100%;border-radius:4px} .cx-bar i.high{background:var(--risk)} .cx-bar i.mid{background:var(--down)} .cx-bar i.low{background:var(--steel)} .cx-sh{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-soft);text-align:right} .cx-demo{margin-top:11px;font-size:var(--fs-2xs);color:var(--ink-faint)} .ov2-row{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px dashed var(--line);cursor:pointer} .ov2-row:first-of-type{border-top:none} .ov2-row:hover .ov2-nm{color:var(--steel)} .ov2-nm{width:80px;flex-shrink:0;font-size:var(--fs-sm);font-weight:600} .ov2-bar{flex:1;height:7px;background:rgba(38,48,59,.06);border-radius:4px;overflow:hidden} .ov2-bar i{display:block;height:100%;background:var(--steel);border-radius:4px} .ov2-n{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);white-space:nowrap} /* common suppliers page */ .cm-list{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden} .cm-row{display:grid;grid-template-columns:minmax(110px,1fr) 1.5fr 1.5fr 90px;gap:12px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .12s} .cm-row:first-child{border-top:none} .cm-row:hover{background:var(--steel-tint)} .cm-nm{font-weight:700;font-size:var(--fs-md);display:flex;flex-direction:column} .cm-nm em{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:400} .cm-side{font-size:var(--fs-xs);color:var(--ink-soft);display:flex;flex-direction:column;gap:2px} .cm-side b{font-size:var(--fs-2xs);color:var(--ink-faint);font-weight:600} .cm-side i{font-style:normal;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel)} .cm-tot{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink);text-align:right;font-weight:600} @media(max-width:760px){.cm-row{grid-template-columns:1fr;gap:6px}} .co-sps{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px} .sp-chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);background:var(--steel-tint);color:var(--steel-deep);border:1px solid var(--steel-line);border-radius:20px;padding:4px 11px;cursor:pointer;transition:.13s} .sp-chip svg{width:13px;height:13px} .sp-chip:hover{background:var(--steel);color:var(--on-accent)} .sp-chip:hover svg{stroke:var(--card)} /* sidebar */ .side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px} .side-card h4{margin:0 0 10px;font-size:var(--fs-sm);letter-spacing:1px;color:var(--steel-deep);font-family:var(--disp);font-weight:600;display:flex;align-items:center;gap:8px} .side-card h4 svg{width:15px;height:15px;color:var(--steel)} .side-card p{margin:0 0 8px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.7} .policy-item{display:flex;gap:9px;padding:8px 0;border-top:1px dashed var(--line);font-size:var(--fs-sm)} .policy-item:first-of-type{border-top:none} .policy-item .yr{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--steel);flex-shrink:0;padding-top:1px} /* ---------- Company page ---------- */ .co-hd{display:flex;align-items:flex-start;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)} .co-hd-main{flex:1;min-width:0} .co-hd-identity{min-width:0} .co-logo{width:56px;height:56px;border-radius:12px;background:var(--steel-tint);color:var(--steel-deep);display:grid;place-items:center;font-family:var(--mono);font-weight:900;font-size:var(--fs-sm);letter-spacing:.02em;flex-shrink:0} .co-logo-code{display:block;line-height:1} .co-hd h1{font-size:var(--fs-2xl);margin:0 0 4px;font-weight:700} .co-hd .code{font-family:var(--mono);color:var(--steel);font-size:var(--fs-sm)} .co-hd .co-meta{margin-top:6px;display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-faint)} .co-hd .co-meta b{color:var(--ink-soft);font-weight:500} .co-taxonomy{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:980px} .co-tax-row{display:flex;align-items:flex-start;align-content:flex-start;gap:7px;flex-wrap:wrap;border:1px solid var(--ui-border);border-radius:14px;background:var(--surface-2);padding:10px 11px;min-width:0} .co-tax-label{width:100%;color:var(--ink-faint);font-size:var(--fs-2xs);font-weight:750;letter-spacing:.08em;text-transform:uppercase} .co-tax-chip{display:inline-flex;align-items:center;min-height:32px;border-radius:999px;padding:5px 12px;font-size:var(--fs-xs);font-weight:720;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft)} .co-tax-chip.core{border-color:var(--steel-line);background:var(--steel-tint);color:var(--steel-deep)} .co-tax-chip.role{border-color:var(--ok-line);background:var(--ok-tint);color:var(--ok-ink)} .co-tax-chip.extension{border-color:var(--warn-line);background:var(--warn-tint);color:var(--warn-ink)} .co-tax-note{grid-column:1/-1;margin-top:0;color:var(--ink-faint);font-size:var(--fs-2xs);line-height:1.5} @media(max-width:1180px){.co-taxonomy{grid-template-columns:1fr}.co-tax-row{align-items:center}.co-tax-label{width:auto;min-width:5em}} .relationship-strip{margin-top:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .relationship-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--card),var(--surface-2));padding:13px 14px;min-height:112px;display:flex;flex-direction:column;gap:6px} .relationship-card small{display:block;color:var(--ink-faint);font-size:var(--fs-3xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase} .relationship-card b{font-size:var(--fs-sm);font-weight:780;color:var(--steel-deep);line-height:1.35} .relationship-card span{color:var(--ink-soft);font-size:var(--fs-2xs);line-height:1.55} .market-role-sources{margin-top:14px} .semi-position-panel{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(0,1.5fr);gap:18px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1)} .semi-position-lead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--steel) 10%,var(--card)),var(--card))} .semi-position-lead small,.semi-evidence-card small{color:var(--ink-faint);font-size:var(--fs-3xs);font-weight:800;letter-spacing:.06em} .semi-position-lead b{font-family:var(--disp);font-size:var(--fs-lg);line-height:1.35;color:var(--steel-deep)} .semi-position-lead p,.semi-evidence-card p{margin:0;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.62} .semi-position-grid,.semi-evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .semi-position-grid{align-content:start} .semi-evidence-card{min-width:0;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:9px} .semi-evidence-card.wide{grid-column:1/-1} .semi-evidence-card h3{margin:0;font-family:var(--disp);font-size:var(--fs-sm);color:var(--ink)} .semi-chip-row{display:flex;flex-wrap:wrap;gap:7px} .semi-chip{display:inline-flex;align-items:center;min-height:31px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--steel) 20%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--steel) 6%,var(--card));color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:700;line-height:1.35} .semi-chip.muted{border-color:var(--line);background:var(--surface-2);color:var(--ink-faint);font-weight:650} .semi-evidence-note{margin-top:10px;padding:11px 13px;border-left:3px solid color-mix(in srgb,var(--steel) 42%,transparent);background:var(--surface-2);color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.6} .semi-source-scope{display:block;margin-top:5px;color:var(--ink-faint);font-size:var(--fs-3xs);line-height:1.5} .semi-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px} .semi-source-card{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)} .semi-source-card b{display:block;color:var(--ink);font-size:var(--fs-xs);line-height:1.45} .semi-source-card p{margin:5px 0 0;font-size:var(--fs-2xs);line-height:1.55} @media(max-width:1100px){.relationship-strip{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.semi-position-panel{grid-template-columns:1fr}.semi-position-grid,.semi-evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.relationship-strip,.semi-position-grid,.semi-evidence-grid,.semi-source-grid{grid-template-columns:1fr}.relationship-card{min-height:0}.semi-position-panel{padding:14px;gap:12px}.semi-position-lead,.semi-evidence-card{padding:13px}} .company-details{margin-top:26px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);overflow:hidden} .company-details-head{display:flex;align-items:baseline;gap:12px;padding:18px 20px 0;flex-wrap:wrap} .company-details-head h2{margin:0;font-size:var(--fs-lg);font-family:var(--disp);font-weight:650;color:var(--ui-text-strong)} .company-details-head span{font-size:var(--fs-xs);color:var(--ui-text-muted)} .platform-data-card{margin-top:22px;border:1px solid color-mix(in srgb,var(--steel) 22%,var(--ui-border));border-radius:var(--ui-radius-md);background:linear-gradient(180deg,var(--ui-surface),var(--ui-surface-subtle));box-shadow:var(--ui-shadow-1);overflow:hidden} .pd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--ui-border)} .pd-head h2{margin:0 0 4px;font-size:var(--fs-base);font-family:var(--disp);font-weight:700;color:var(--ui-text-strong)} .pd-head p{margin:0;font-size:var(--fs-sm);color:var(--ui-text-muted);line-height:1.6} .pd-body{padding:16px 20px 18px} .pd-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 9px;font-size:var(--fs-xs);font-weight:800;color:var(--ui-text-muted);letter-spacing:.04em;text-transform:uppercase} .pd-section-title button{border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:700;padding:4px 9px;cursor:pointer} .pd-section-title button:hover{background:var(--steel-tint)} .pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:8px 0 9px} .pd-mini{display:grid;gap:3px;border:1px solid var(--ui-border);border-radius:12px;background:linear-gradient(180deg,var(--steel-tint),var(--ui-surface));padding:9px 10px} .pd-mini b{font-size:var(--fs-xs);color:var(--ui-text-strong)} .pd-mini span{font-size:var(--fs-2xs);color:var(--ui-text-muted);font-family:var(--mono)} body:not(.is-data-governance) .pd-governance-only, body:not(.is-data-governance) .kg-evidence-entry, body:not(.is-data-governance) .kg-evidence-scrim{display:none!important} .pd-candidate-row{cursor:default;background:linear-gradient(180deg,var(--ui-surface),var(--steel-tint))} .pd-candidate-row.can-open{cursor:pointer} .candidate-badge{display:inline-flex;width:max-content;border:1px solid var(--steel-line);border-radius:999px;padding:2px 7px;background:var(--ui-surface);color:var(--steel-deep);font-size:var(--fs-3xs);font-weight:800;letter-spacing:.03em} .market-panel-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--ui-border)} .market-table{margin-top:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);overflow:hidden} .market-head,.market-row{display:grid;grid-template-columns:78px minmax(200px,1fr) 110px minmax(320px,1.12fr) 44px;gap:14px;align-items:center} .market-head{padding:11px 16px;background:var(--ui-surface-subtle);border-bottom:1px solid var(--ui-border);font-size:var(--fs-2xs);font-weight:800;color:var(--ui-text-muted);letter-spacing:.04em} .market-head span:last-child{justify-self:end} .market-row{width:100%;min-height:64px;padding:13px 16px;border:0;border-top:1px solid var(--ui-border);background:var(--ui-surface);color:inherit;text-align:left;font:inherit;cursor:pointer;transition:background .13s,transform .13s} .market-row:first-of-type{border-top:0} .market-row:hover{background:var(--steel-tint)} .market-row:focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 28%,transparent);outline-offset:-3px} .market-code{font-family:var(--mono);font-size:var(--fs-xs);font-weight:800;color:var(--ui-primary)} .market-company{display:flex;flex-direction:column;gap:3px;min-width:0} .market-company b{font-size:var(--fs-sm);font-weight:800;color:var(--ui-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .market-company em{font-style:normal;font-size:var(--fs-2xs);color:var(--ui-text-muted)} .market-return{justify-self:start;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);padding:4px 10px;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:900} .market-return.up{border-color:color-mix(in srgb,var(--ok) 28%,var(--steel-line));background:var(--ok-tint);color:var(--ok-ink)} .market-return.down{border-color:color-mix(in srgb,var(--risk) 28%,var(--steel-line));background:var(--risk-tint);color:var(--risk-ink)} .market-metrics{display:flex;flex-wrap:wrap;gap:7px;min-width:0;color:var(--ui-text-muted);font-size:var(--fs-xs)} .market-metrics i{font-style:normal;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface-subtle);padding:3px 8px;white-space:nowrap} .market-arrow{justify-self:end;color:var(--ui-text-muted);font-size:var(--fs-lg);line-height:1} .company-market-snapshot{margin:16px 0 20px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);overflow:hidden} .cms-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--ui-border)} .cms-head h2{margin:0;font-family:var(--disp);font-size:var(--fs-lg);color:var(--ui-text-strong)} .cms-head p{margin:4px 0 0;color:var(--ui-text-muted);font-size:var(--fs-sm);line-height:1.55} .cms-badge{display:inline-flex;align-items:center;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:800;padding:5px 10px;white-space:nowrap} .cms-body{display:grid;grid-template-columns:minmax(420px,1.35fr) minmax(310px,.85fr);gap:16px;padding:18px 20px} .cms-chart{position:relative;border:1px solid var(--ui-border);border-radius:12px;background:#fff;padding:16px 18px;min-width:0} .cms-chart-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px} .cms-chart-title{display:flex;flex-direction:column;gap:3px;min-width:0} .cms-chart-title b{font-size:var(--fs-base);font-weight:800;color:var(--ui-text-strong)} .cms-chart-title span{color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.45} .cms-chart-price{min-width:88px;font-family:var(--mono);font-size:var(--fs-lg);font-weight:900;color:var(--ui-text-strong);text-align:center;white-space:nowrap} .cms-chart svg{display:block;width:100%;height:230px;overflow:visible} .cms-chart .grid{stroke:rgba(100,116,139,.22);stroke-width:1;stroke-dasharray:none} .cms-chart .axis{stroke:rgba(100,116,139,.45);stroke-width:1} .cms-chart .line{fill:none;stroke:#334155;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .cms-chart.is-up .line{stroke:#0f766e} .cms-chart.is-down .line{stroke:#b42318} .cms-chart .dot{fill:#fff;stroke:#334155;stroke-width:1.8;opacity:.72} .cms-chart.is-up .dot{stroke:#0f766e} .cms-chart.is-down .dot{stroke:#b42318} .cms-chart .cms-crosshair{opacity:0;transition:opacity .12s ease;pointer-events:none} .cms-chart.is-scrubbing .cms-crosshair{opacity:1} .cms-chart .cms-crosshair-line{stroke:#475569;stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke} .cms-chart .cms-crosshair-dot{fill:#fff;stroke:#334155;stroke-width:2.4;vector-effect:non-scaling-stroke} .cms-chart.is-up .cms-crosshair-dot{stroke:#0f766e} .cms-chart.is-down .cms-crosshair-dot{stroke:#b42318} .cms-chart .cms-chart-hit{fill:transparent;cursor:crosshair;pointer-events:all;touch-action:pan-y} .cms-chart svg:focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 30%,transparent);outline-offset:4px;border-radius:6px} .cms-chart-tooltip{ position:absolute;z-index:3;display:flex;align-items:center;gap:10px;min-width:0; max-width:calc(100% - 20px);padding:7px 10px;border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm);background:var(--ui-surface);box-shadow:var(--ui-shadow-2); color:var(--ui-text-strong);text-align:center;pointer-events:none;transform:translate(-50%,calc(-100% - 9px)); white-space:nowrap } .cms-chart-tooltip[hidden]{display:none} .cms-chart-tooltip b{ display:inline-flex;align-items:baseline;font-family:var(--mono);font-size:var(--fs-xs); font-weight:800;line-height:1.2;color:var(--ui-text-strong) } .cms-chart-tooltip b small{ margin-left:3px;font-family:var(--body);font-size:var(--fs-3xs);font-weight:600;color:var(--ui-text-muted) } .cms-chart-tooltip span{ padding-right:10px;border-right:1px solid var(--ui-border);font-family:var(--mono); font-size:var(--fs-3xs);line-height:1.2;color:var(--ui-text-muted) } .cms-chart.is-pinned .cms-chart-tooltip{ border-color:var(--ui-selection-border);box-shadow:var(--ui-shadow-2) } .cms-scrubber{display:grid;gap:7px;margin-top:7px} .cms-scrubber input[type="range"]{width:100%;height:34px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:grab;touch-action:pan-y} .cms-scrubber input[type="range"]:active{cursor:grabbing} .cms-scrubber input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:var(--ui-border)} .cms-scrubber input[type="range"]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8.5px;border:3px solid var(--ui-surface);border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-primary) 55%,var(--ui-border)),0 3px 8px rgba(15,23,42,.2);appearance:none;-webkit-appearance:none} .cms-scrubber input[type="range"]::-moz-range-track{height:5px;border:0;border-radius:999px;background:var(--ui-border)} .cms-scrubber input[type="range"]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--ui-surface);border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-primary) 55%,var(--ui-border)),0 3px 8px rgba(15,23,42,.2)} .cms-scrubber input[type="range"]:focus-visible{outline:3px solid color-mix(in srgb,var(--ui-primary) 30%,transparent);outline-offset:2px;border-radius:999px} .cms-scrubber output{display:block;min-height:20px;color:var(--ui-text-strong);font-size:var(--fs-xs);font-weight:800;line-height:1.45;text-align:center} .cms-chart-labels{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:var(--ui-text-muted);font-size:var(--fs-3xs);font-family:var(--mono)} .cms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .cms-metric{border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface-subtle);padding:11px 12px;min-width:0} .cms-metric span{display:block;color:var(--ui-text-muted);font-size:var(--fs-2xs);margin-bottom:4px} .cms-metric b{display:block;color:var(--ui-text-strong);font-size:var(--fs-lg);font-family:var(--mono);line-height:1.2;overflow-wrap:anywhere} .cms-metric em{display:block;margin-top:4px;color:var(--ui-text-muted);font-size:var(--fs-3xs);font-style:normal;line-height:1.4} .cms-metric.is-down b{color:var(--risk-ink)} .cms-metric.is-up b{color:var(--ok-ink)} .cms-note{margin:12px 0 0;color:var(--ui-text-muted);font-size:var(--fs-xs);line-height:1.6} .market-source-footnotes{ margin:12px 18px 16px;padding:11px 13px;border-top:1px solid var(--ui-border); color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.55 } .market-source-footnotes b{color:var(--ui-text-strong)} .market-source-footnotes ol{margin:7px 0 0;padding-left:20px} .market-source-footnotes li+li{margin-top:5px} .market-source-footnotes a{color:var(--ui-primary-strong);font-weight:700;text-underline-offset:2px} .market-source-footnotes .market-source-scope{display:block;margin-top:3px;color:var(--ui-text-muted)} .cms-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px} @media(max-width:780px){ .market-head{display:none} .market-row{grid-template-columns:64px 1fr;gap:6px 12px;align-items:start} .market-return,.market-metrics{grid-column:2} .market-arrow{display:none} .company-market-snapshot .cms-head{flex-direction:column} .cms-body{grid-template-columns:1fr} .cms-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .cms-chart{padding:14px} .cms-chart-top{flex-direction:column} .cms-chart-title{width:100%;align-items:center;text-align:center} .cms-chart-price{width:100%} .cms-chart svg{height:190px} } .home-universe-bridge{margin:12px 0 18px} .home-universe-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px} .home-universe-actions button{border:1px solid var(--steel-line);border-radius:10px;background:var(--steel);color:var(--on-accent);font-weight:800;font-size:var(--fs-xs);padding:9px 13px;cursor:pointer} .home-universe-actions button.secondary{background:var(--ui-surface);color:var(--steel-deep)} .home-universe-samples{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .home-universe-samples span{display:inline-flex;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface-subtle);color:var(--ui-text-muted);font-size:var(--fs-2xs);padding:4px 9px} .tabs{display:flex;gap:6px;margin:14px 14px 0;padding:5px;background:var(--ui-surface-subtle);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ flex:0 0 auto;padding:8px 13px;font-size:var(--fs-sm);color:var(--ui-text-muted);border:1px solid transparent;background:transparent; margin:0;transition:.13s;white-space:nowrap; } .tab:hover{color:var(--ui-primary-strong);background:var(--ui-surface)} .tab.active{color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border));background:var(--ui-surface);box-shadow:0 2px 8px rgba(23,32,51,.07);font-weight:700} .tab-body{background:var(--ui-surface);border:0;padding:22px 20px 24px;box-shadow:none;min-height:0} .tab-body h3{font-size:var(--fs-base);margin:0 0 12px;color:var(--steel-deep);font-family:var(--disp);font-weight:600} .tab-body h3:not(:first-child){margin-top:24px} .tab-body p{margin:0 0 12px;color:var(--ink-soft);font-size:var(--fs-md)} .kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .kv-item{display:flex;flex-direction:column;gap:5px;min-width:0;padding:13px 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle)} .kv-item .k{color:var(--ui-text-muted);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em} .kv-item .v{color:var(--ui-text-strong);font-size:var(--fs-sm);font-weight:650;overflow-wrap:anywhere} .data-note{margin:14px 0 0!important;padding-top:12px;border-top:1px solid var(--ui-border);font-size:var(--fs-xs)!important;color:var(--ui-text-muted)!important} .public-data-profile{display:grid;gap:14px} .public-data-summary{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);padding:15px 16px} .public-data-summary b{display:block;margin-bottom:5px;color:var(--ui-text-strong);font-size:var(--fs-sm)} .public-data-summary p{margin:0!important;color:var(--ui-text-muted)!important;font-size:var(--fs-sm)!important;line-height:1.65} .public-data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .public-data-card{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);padding:15px 16px;box-shadow:0 8px 18px rgba(45,55,95,.035)} .public-data-card small{display:inline-flex;margin-bottom:7px;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-3xs);font-weight:800;letter-spacing:.05em;padding:3px 8px} .public-data-card b{display:block;color:var(--ui-text-strong);font-size:var(--fs-sm);margin-bottom:6px} .public-data-card p{margin:0 0 8px!important;color:var(--ui-text-muted)!important;font-size:var(--fs-xs)!important;line-height:1.65} .public-data-card ul{margin:8px 0 0;padding-left:18px;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.7} .public-data-card a{display:inline-flex;margin-top:9px;color:var(--steel-deep);font-size:var(--fs-xs);font-weight:750} .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px} .prod{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);padding:14px;background:var(--ui-surface-subtle)} .prod b{font-size:var(--fs-sm);display:block;margin-bottom:4px} .prod span{font-size:var(--fs-sm);color:var(--ink-faint)} .award{display:flex;gap:12px;padding:11px 0;border-top:1px dashed var(--line);font-size:var(--fs-sm)} .award:first-child{border-top:none} .award .yr{font-family:var(--mono);color:var(--steel);flex-shrink:0} @media(max-width:900px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){ .company-details-head{padding:16px 15px 0} .tabs{margin:12px 10px 0} .tab-body{padding:18px 15px 20px} .kv{grid-template-columns:1fr} .cross-map{grid-template-columns:1fr} } .in-chains{margin-top:18px} .in-chains a{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);background:var(--steel-tint);color:var(--steel-deep);padding:5px 11px;border-radius:7px;margin:0 6px 6px 0;cursor:pointer;border:1px solid var(--steel-line)} .in-chains a:hover{background:var(--steel);color:var(--on-accent)} /* search results */ .result-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow);cursor:pointer;transition:.14s} .result-row:hover{transform:translateX(3px);border-color:var(--steel-line);box-shadow:var(--shadow-lift)} .result-row .code{font-family:var(--mono);color:var(--steel);font-size:var(--fs-sm);width:56px;flex-shrink:0} .result-row .nm{font-weight:700;font-size:var(--fs-base)} .result-row .chs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap} .result-row .chs span{font-size:var(--fs-xs);background:var(--steel-tint);color:var(--steel-deep);padding:3px 9px;border-radius:6px} .empty-state{text-align:center;padding:60px 20px;color:var(--ink-faint)} .empty-state svg{width:40px;height:40px;margin-bottom:12px;opacity:.5} /* footer */ .foot{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 46px;color:var(--ink-faint);font-size:var(--fs-xs);line-height:1.7} .foot .disc{max-width:820px} .foot b{color:var(--ink-soft)} .fade{animation:pageIn var(--motion-slow,.36s) var(--motion-enter,ease-out) both} .fade > *{animation:sectionIn var(--motion-slow,.36s) var(--motion-enter,ease-out) both} .fade > *:nth-child(2){animation-delay:35ms} .fade > *:nth-child(3){animation-delay:70ms} .fade > *:nth-child(4){animation-delay:105ms} .fade > *:nth-child(n+5){animation-delay:140ms} @keyframes pageIn{from{opacity:0}to{opacity:1}} @keyframes sectionIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:var(--fs-3xl)}} @media(max-width:560px){.grid{grid-template-columns:1fr}} /* ═══════════ 手機操作體驗(由手機版 harness 驅動)═══════════ */ @media(max-width:900px){ /* ① ★ iOS 的坑:輸入框 font-size < 16px,Safari 會自動放大整頁, 使用者打完字版面就歪了,而且不會自己縮回去。 */ .searchbar input, .scr-sel, .scr-sel select, .sa-input, .sa-select, .osc select, .rp-sel, .rp-key, input, select, textarea{ font-size:var(--fs-lg) } /* ② 觸控目標下限。手指接觸面約 44px;低於 32px 的東西按不到、或按到隔壁。 */ .sp-chip,.th-chip,.tb-clear,.cb-clear,.cb-go,.ca-go,.ca-i,.sa-reset, .cmp-x,.cmp-check,.at-item,.rm-row,.lg,.st-btn,.ats-btn,.ats-btn2,.att, .gm-tb,.gn-i,.gs-chip,.mchip,.cp-close,.at-mx,.mg-l,.ut-b,.sh-x,.brand, .rp-t,.rp-b,.sh-x,.ut-b,.fvn-b,.tab,.es-try{ min-height:40px; display:inline-flex;align-items:center;justify-content:center; } .at-item,.rm-row,.src-row,.ov2-row{ justify-content:flex-start } /* 方形圖示鈕:寬高都要夠。星號、勾選框、移除鈕這種東西最容易被做得太小, 但它們往往是使用者最常按的（加入關注、加入比較）。 */ .star-btn,.cmp-check,.cmp-x,.cp-close,.at-mx,.sh-x,.rp-v{ min-width:40px;min-height:40px; display:inline-flex;align-items:center;justify-content:center; } .tb-chip{ min-height:40px;display:inline-flex;align-items:center } .tb,.sh-i{ -webkit-tap-highlight-color:transparent } /* ③ 客戶暴險列在手機收成一欄(4 個固定欄共 362px,會橫向溢出) */ .cx-row{ grid-template-columns:1fr; gap:5px; padding:11px 0 } .cx-row > *{ text-align:left !important } /* ④ ★ hover 預覽卡在手機必須關掉。 iOS 的「黏著 hover」:第一次點擊會觸發 mouseenter,卡片閃出來, 使用者要再點一次才會真的跳頁。這是手機上最惱人的反模式之一。 */ .preview{ display:none !important } /* ⑤ 手機的點擊回饋:沒有 hover,只有 :active。 沒有回饋的話,使用者會以為沒點到,然後連點好幾下。 */ .sr-row:active,.sp-chip:active,.th-chip:active, .st-btn:active,.more-btn:active,.dmt:active,.mm-c:active{ background:var(--steel-tint); } } /* ═══════════════════════════════════════════════════════════ 三版風格提案 · 全部只覆寫 token,不動任何元件 ═══════════════════════════════════════════════════════════ */ /* ── ① Clarity(參考 Apple Human Interface)── 內容優先、留白、大圓角、柔和陰影、標題大而重。 取捨:密度下降,一屏看到的資料變少 —— 換來的是好讀、不緊張。 */ html[data-theme="clarity"]{ --bg:#F2F2F7; --card:#FFFFFF; --surface-2:#FAFAFC; --surface-3:#EFEFF4; --surface-4:#E9E9EE; --ink:#1C1C1E; --ink-soft:#4A4A4F; --ink-faint:#6C6C72; --ink-dim:#AEAEB2; --line:#E5E5EA; --line-2:#EBEBF0; --line-3:#D1D1D6; --steel:#2A66C4; --steel-dark:#265CB0; /* clarity 頁底 4.96:1(原 #2F6FD0 只有 4.37) */ --steel-deep:#1E4A90; --steel-tint:#EAF1FC; --steel-tint-2:#F5F8FD; --steel-tint-3:#EFF4FC; --steel-line:#CFE0F7; --steel-line-2:#C3D7F3; --steel-line-3:#DEEAFA; --ok:#2F7D53; --ok-ink:#256340; --warn:#A96A18; --warn-ink:#8A5510; --risk:#C8443C; --risk-ink:#A0322B; --radius:16px; --radius-sm:11px; --radius-lg:22px; --shadow:0 1px 3px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); --shadow-lift:0 6px 16px rgba(0,0,0,.07), 0 22px 56px rgba(0,0,0,.10); --disp:'Poppins','Noto Sans TC',-apple-system,sans-serif; --disp-w:700; --tracking:-.01em; } /* ⚠ 不要對中文標題用負字距。拉丁字母有側邊空隙,收緊會變好看; 中文字身本來就是滿版的方塊 —— 收緊就是「字疊在一起」。 */ html[data-theme="clarity"] h1, html[data-theme="clarity"] h2{ letter-spacing:0 } html[data-theme="clarity"] .card, html[data-theme="clarity"] .sh-panel{ border:none } /* ── ② Structure(參考 IBM Carbon)── 2x 網格、方角、以 1px 線取代陰影、IBM Plex 全面、密度高。 取捨:偏工具感、偏冷;但一屏能塞進最多資料,專業感最強。 */ html[data-theme="structure"]{ --bg:#F4F4F4; --card:#FFFFFF; --surface-2:#F9F9F9; --surface-3:#EFEFEF; --surface-4:#E8E8E8; --ink:#161616; --ink-soft:#525252; --ink-faint:#6C6C6C; --ink-dim:#A8A8A8; --line:#E0E0E0; --line-2:#E8E8E8; --line-3:#C6C6C6; --steel:#4B6B88; --steel-dark:#3D5870; --steel-deep:#2F465B; --steel-tint:#EEF2F5; --steel-tint-2:#F5F7F8; --steel-tint-3:#E8EDF1; --steel-line:#CED8E0; --steel-line-2:#B8C6D1; --steel-line-3:#DEE5EA; --ok:#198038; --ok-ink:#0E6027; --ok-tint:#DEFBE6; --ok-line:#A7F0BA; --warn:#7A643F; --warn-ink:#5F4D31; --warn-tint:#F6F3ED; --warn-line:#D9CFBE; --risk:#DA1E28; --risk-ink:#A2191F; --risk-tint:#FFF1F1; --risk-line:#FFD7D9; --radius:0px; --radius-sm:0px; --radius-lg:0px; --shadow:none; --shadow-lift:0 2px 6px rgba(0,0,0,.10); --disp:'IBM Plex Sans','Noto Sans TC',sans-serif; --body:'IBM Plex Sans','Noto Sans TC',system-ui,sans-serif; --disp-w:600; --tracking:0; } html[data-theme="structure"] .card, html[data-theme="structure"] .sr-row, html[data-theme="structure"] .sh-i{ border:1px solid var(--line) } html[data-theme="structure"] .tabbar{ border-top:2px solid var(--ink) } /* ── ③ Ledger(參考金融時報 × 經濟學人的資料新聞排版)── ★ 這是我依「我們的內容」給的第三個參考。 平台的核心價值不是儀表板,是「把結構講清楚」—— 那是資料新聞的活。 而且平台到處都是誠實邊界註腳,編輯排版天生把 source line 當一等公民。 暖紙底、襯線標題、單色階圖表、註腳升格。 取捨:襯線中文在小字級要小心;暖底在強光下對比略降。 */ html[data-theme="ledger"]{ --bg:#F7F1E8; --card:#FFFDF8; --surface-2:#FBF7F0; --surface-3:#F2EBE0; --surface-4:#EDE4D6; --ink:#1A1A18; --ink-soft:#55524C; --ink-faint:#6B665E; --ink-dim:#A39C90; --line:#E3DACB; --line-2:#EDE6DA; --line-3:#CDC2AE; --steel:#1F4E79; --steel-dark:#173C5E; --steel-deep:#0F2B45; --steel-tint:#E9EFF5; --steel-tint-2:#F2F5F9; --steel-tint-3:#E4ECF3; --steel-line:#C6D4E2; --steel-line-2:#AFC3D6; --steel-line-3:#DAE4EC; --ok:#3F6B4E; --ok-ink:#2E5139; --ok-tint:#E8F0E9; --ok-line:#C2D6C8; --warn:#9A6A20; --warn-ink:#7A5217; --warn-tint:#F6EDDC; --warn-line:#E2CBA1; --risk:#A8332B; --risk-ink:#872720; --risk-tint:#F6E4E1; --risk-line:#E0BDB8; --radius:3px; --radius-sm:2px; --radius-lg:5px; --shadow:0 1px 2px rgba(60,45,25,.05); --shadow-lift:0 3px 10px rgba(60,45,25,.10); --disp:'Noto Serif TC','Times New Roman',serif; --disp-w:700; --tracking:0; --paper:#FFFDF8; --paper-2:#FFFCF4; } html[data-theme="ledger"] h1, html[data-theme="ledger"] h2, html[data-theme="ledger"] h3{ font-family:var(--disp); letter-spacing:0 } html[data-theme="ledger"] .card{ border:1px solid var(--line) } /* 註腳升格:來源行不是附屬品,是內容的一部分 */ html[data-theme="ledger"] .honest-line, html[data-theme="ledger"] .hint{ border-top:1px solid var(--line); padding-top:8px; font-style:italic; color:var(--ink-soft); } /* ═══════════════════════════════════════════════════════════ ★ 手機的 :active 回饋 桌機有 94 條 :hover。手機沒有 hover —— 沒有這一段, 使用者按下去毫無反應,會以為沒點到,然後連點好幾下。 ═══════════════════════════════════════════════════════════ */ @media(max-width:900px){ .tile,.card,.sp-chip,.th-chip,.tb-chip,.sr-row,.sh-i,.st-btn,.more-btn, .ats-btn,.ats-btn2,.att,.at-item,.leaf,.mchip,.gs-chip,.gn-i,.gm-tb, .rp-t,.rp-b,.rp-v,.es-try,.ca-i,.ca-go,.cb-go,.cb-clear,.tb-clear, .sa-reset,.star-btn,.cmp-check,.cmp-x,.cp-close,.ut-b,.fvn-b,.tab, .pg-item,.src-row,.rm-row,.ov-row,.ov2-row,.sup-row,.st-row,.cx-row, .os-row,.pt-row,.gc-row,.gp-row,.ar-row,.dm-row,.result-row,.lg,.brand, .at-mx,.sh-x,.sh-more,.dmt,.mm-c,.tb{ -webkit-tap-highlight-color:transparent; transition:background .08s ease-out, transform .08s ease-out; } .tile:active,.card:active,.sp-chip:active,.th-chip:active, .tb-chip:active,.sr-row:active,.sh-i:active,.st-btn:active,.more-btn:active, .ats-btn:active,.ats-btn2:active,.att:active,.at-item:active, .leaf:active,.mchip:active,.gs-chip:active,.gn-i:active,.gm-tb:active, .rp-t:active,.rp-b:active,.rp-v:active,.es-try:active, .ca-i:active,.ca-go:active,.cb-go:active,.cb-clear:active,.tb-clear:active, .sa-reset:active,.star-btn:active,.cmp-check:active,.cmp-x:active,.cp-close:active, .ut-b:active,.fvn-b:active,.tab:active,.pg-item:active, .src-row:active,.rm-row:active,.ov-row:active,.ov2-row:active, .sup-row:active,.st-row:active,.cx-row:active,.os-row:active,.pt-row:active, .gc-row:active,.gp-row:active,.ar-row:active,.dm-row:active,.result-row:active, .lg:active,.site-brand:active,.at-mx:active,.sh-x:active,.sh-more:active, .dmt:active,.mm-c:active,.tb:active{ background:var(--steel-tint); transform:scale(.985); } } /* ═══════════════════════════════════════════════════════════ 外觀面板(文字尺寸 · 風格) ═══════════════════════════════════════════════════════════ */ .lk-sec{margin-bottom:16px} .lk-t{font-size:var(--fs-2xs);font-weight:700;letter-spacing:1px;color:var(--ink-faint); text-transform:uppercase;margin-bottom:8px} .lk-ts{display:grid;grid-template-columns:1fr 1fr;gap:8px} .lk-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px; min-height:56px;padding:10px 14px;border:1.5px solid var(--line);border-radius:var(--radius); background:var(--card);cursor:pointer;font-family:var(--body);text-align:left;transition:.14s} .lk-b:hover{border-color:var(--steel-line)} .lk-b.on{border-color:var(--steel);background:var(--steel-tint);box-shadow:0 0 0 3px rgba(74,111,165,.10)} .lk-b b{font-size:var(--fs-base);font-weight:700;color:var(--ink)} .lk-b span{font-size:var(--fs-2xs);color:var(--ink-faint);line-height:1.4} .lk-b .lk-a{font-size:var(--fs-lg);font-weight:700;color:var(--ink)} .lk-b .lk-a.big{font-size:var(--fs-2xl)} .lk-th{display:grid;gap:8px} .lk-sw{display:flex;gap:4px;margin-top:5px} .lk-sw i{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.08);display:block} .aa-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px; min-width:40px;min-height:34px;padding:0 9px;border:1px solid var(--line);border-radius:8px; background:var(--card);color:var(--ink-soft);cursor:pointer;font-family:var(--disp); font-weight:600;flex-shrink:0} .aa-btn:hover{border-color:var(--steel-line);color:var(--steel)} .aa-btn s{text-decoration:none;font-size:var(--fs-xs)} .aa-btn b{font-size:var(--fs-lg)} /* U5 補完:這 16 個元件有 :hover 卻沒有 :active —— 手機按下去毫無回饋 */ @media(max-width:900px){ .nv-b,.chain-tile,.theme-pill,.pos-card,.cmp-name,.sp-pill,.sp-card,.fl-src, .sg-row,.dmc-o,.at-m-co,.shk-pick,.by-card,.cm-row,.aa-btn{ -webkit-tap-highlight-color:transparent; transition:background .08s ease-out, transform .08s ease-out; } .nv-b:active,.chain-tile:active,.theme-pill:active,.pos-card:active,.cmp-name:active, .sp-pill:active,.sp-card:active,.fl-src:active,.sg-row:active,.dmc-o:active, .at-m-co:active,.shk-pick:active,.by-card:active,.cm-row:active, .aa-btn:active{ background:var(--steel-tint); transform:scale(.985); } } /* ═══════════════════════════════════════════════════════════ 排版硬傷修正(由 Chromium 實測 harness 抓出) 全部是同一種病:**CJK 文字被塞進一個比一個字還窄的格子,於是一字一行。** CSS 解析器看不出來 —— 它只看得到規則,看不到寬度。 ═══════════════════════════════════════════════════════════ */ /* ① 底部面板:.sh-i 是 grid(1fr 20px),但有三個子元素。 自動排版把 .shi-d(說明文字)丟進 20px 的箭頭欄 —— 每一項的說明都變直式。 這是全站最嚴重的一個:20 個面板項目,個個中招。 */ .sh-i{ grid-template-rows:auto auto } .shi-q{ grid-column:1; grid-row:1 } .shi-d{ grid-column:1; grid-row:2; min-width:0 } .shi-a{ grid-column:2; grid-row:1 / span 2; align-self:center } /* ② 公司頁 header:.co-hd 是 flex,但手機規則給 .co-actions width:100%, 而它又是 flex-shrink:0 —— 於是 56px logo + 342px 按鈕 = 430px, 中間的標題欄被擠成 0px,「玉山金」變成三行,整頁橫向溢出 41px。 */ /* ⚠ 我第一版的修法是 `.co-hd > div:not(.co-actions){flex:1 1 200px}` —— 但 .co-logo 也是一個 div,於是 logo 被撐到 240px,真正的內容欄剩 40px。 教訓:用 > div 這種寬鬆選擇器去「修」flex,只會製造新的 flex 問題。 正確做法:只讓 .co-actions 換行,其餘維持原本的 flex 行為。 */ .co-hd{ flex-wrap:wrap } .co-logo{ flex-shrink:0 } .co-hd h1{ min-width:0; word-break:keep-all } @media(max-width:560px){ .co-actions{ flex-direction:row; width:100%; flex:0 0 100%; margin-top:10px; align-self:stretch } .co-actions > *{ flex:1 } } /* 由「實測 harness」抓出:CSS 估算看不到的東西 */ .aa-btn{ min-height:40px } @media(max-width:900px){ /* 麵包屑是連結,不是裝飾。實測只有 15px 高 —— 手指按不到。 */ .crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px } .crumb a{ min-height:40px; display:inline-flex; align-items:center; padding:0 5px; margin-left:-5px } /* 大字模式下「簡易 / 進階」會被擠成直式 */ .st-btn,.mchip,.tab{ white-space:nowrap; flex-shrink:0 } .scr-tabs{ flex-shrink:0 } } /* 由實測 harness 抓出的權重問題: .dm-hd span{color:var(--ink-faint)} 的權重(0,1,1)蓋過 .dmr-heat{color:var(--on-accent)}(0,1,0) → 白字變灰字疊在紅底上,對比 1.17:1,幾乎隱形。 */ .dm-hd .dmr-heat{ color:var(--on-accent) } /* 麵包屑的 class 是 .breadcrumb,不是 .crumb —— 我第一版打空了。 實測只有 15px 高,手指按不到。 */ @media(max-width:900px){ .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:1px } .breadcrumb a{ min-height:40px; display:inline-flex; align-items:center; padding:0 5px; margin-left:-5px } .breadcrumb .sep{ display:inline-flex; align-items:center; min-height:40px } .fl-src{ min-height:40px; display:inline-flex; align-items:center } } /* 實測 harness 抓出的觸控目標(CSS 估算完全看不到這些) */ @media(max-width:900px){ .at-node-hd{ min-height:40px } /* 技術圖譜節點:實測 23px */ .cmp-name{ min-height:40px; display:inline-flex; align-items:center } /* 比較矩陣:22px */ #app a[onclick]{ min-height:40px; display:inline-flex; align-items:center } /* 內文連結:13px */ } /* ── ④ Bright(參考 wellobiz · 韓系 B2B SaaS)── 訊號很明確:純白、藍紫、大圓角、藥丸分頁、線幾乎消失、留白負責分區。 它跟 Clarity(Apple)的差別在「密度」—— Apple 用留白製造呼吸,wellobiz 用留白製造「乾淨的工作台」: 卡片無邊框但排得緊,資料表照樣塞得滿。 取捨:純白底在資料密集頁會少一層「頁 vs 卡」的層次,全靠陰影撐。 */ html[data-theme="bright"]{ /* IVIPS canonical palette:霧灰 canvas × 深墨文字 × 低彩度藍紫操作 */ --bg:#F3F5F9; --card:#FFFFFF; --surface-2:#F8FAFC; --surface-3:#EEF2F7; --surface-4:#E7ECF3; --ink:#172033; --ink-soft:#344054; --ink-faint:#667085; --ink-dim:#98A2B3; --line:#DDE3EC; --line-2:#E8EDF4; --line-3:#C7D0DE; --steel:#5B55C7; --steel-dark:#4D47AE; --steel-deep:#3A357F; --steel-tint:#F1F0FC; --steel-tint-2:#F8F7FE; --steel-tint-3:#E8E6F8; --steel-line:#D7D3F0; --steel-line-2:#C4BEE7; --steel-line-3:#E3E0F6; --steel-soft:#9D96DD; --ok:#247A52; --ok-ink:#1C6342; --ok-ink-2:#247A52; --ok-tint:#EAF5EF; --ok-tint-2:#F4FAF7; --ok-line:#C8E3D4; --warn:#A65C16; --warn-ink:#85480F; --warn-ink-2:#974F10; --warn-ink-3:#85480F; --warn-tint:#FFF4E8; --warn-tint-2:#FFF9F2; --warn-tint-3:#FBEBD9; --warn-line:#EED1B0; --risk:#B23C46; --risk-ink:#92313A; --risk-deep:#78262E; --risk-soft:#D9878D; --risk-tint:#FCEDEF; --risk-tint-2:#FEF7F8; --risk-tint-3:#FFFBFB; --risk-line:#EEC9CD; --radius:12px; --radius-sm:8px; --radius-lg:20px; --shadow:0 1px 2px rgba(23,32,51,.04), 0 6px 18px rgba(23,32,51,.05); --shadow-lift:0 8px 28px rgba(23,32,51,.11); --disp:'Pretendard','Poppins','Noto Sans TC',system-ui,sans-serif; --body:'Pretendard','Noto Sans TC',system-ui,sans-serif; --disp-w:700; --tracking:0; --paper:#FFFFFF; --paper-2:#FBFCFD; } /* 外觀層(不動版面結構): ① 卡片無邊框,只靠陰影浮起 ② 分頁是藥丸,不是底線 ③ 主要按鈕是實心藍紫 */ html[data-theme="bright"] .card, html[data-theme="bright"] .sh-panel, html[data-theme="bright"] .co-hd{ border-color:transparent } html[data-theme="bright"] h1, html[data-theme="bright"] h2{ letter-spacing:0 } html[data-theme="bright"] .tab.on, html[data-theme="bright"] .st-btn.on, html[data-theme="bright"] .mchip.on{ background:var(--steel-tint); color:var(--steel); border-color:transparent; border-radius:999px; font-weight:700; } html[data-theme="bright"] .tab, html[data-theme="bright"] .st-btn, html[data-theme="bright"] .mchip{ border-radius:999px } html[data-theme="bright"] .more-btn{ border-radius:10px; font-weight:700 } /* ── Bright 補完:截圖裡最關鍵的一件事 ── wellobiz 的底不是純色,是「有空氣的白」—— 兩層極淡的藍色徑向洗光,讓白色卡片有東西可以浮起來。 沒有這一層,無邊框 + 淺陰影的卡片會直接融進背景裡,層級就消失了。 */ html[data-theme="bright"] body{background:var(--bg)} /* 底部分頁列在 bright 上要跟著透氣 */ html[data-theme="bright"] .tabbar{ background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px); border-top:1px solid var(--line); } /* ═══════════════════════════════════════════════════════════ IVIPS UI SYSTEM v1 · semantic layer 主題只能換 token；核心尺寸、狀態、觸控與資訊層級固定。 ═══════════════════════════════════════════════════════════ */ :root{ --ui-canvas:var(--bg); --ui-surface:var(--card); --ui-surface-subtle:var(--surface-2); --ui-surface-muted:var(--surface-3); --ui-surface-raised:var(--card); --ui-text-strong:var(--ink); --ui-text:var(--ink-soft); --ui-text-muted:var(--ink-faint); --ui-border:var(--line); --ui-border-strong:var(--line-3); --ui-control-border:#808B9C; --ui-primary:var(--steel); --ui-primary-hover:var(--steel-dark); --ui-primary-strong:var(--steel-deep); --ui-primary-tint:var(--steel-tint); --ui-success:var(--ok); --ui-success-strong:var(--ok-ink); --ui-success-tint:var(--ok-tint); --ui-warning:var(--warn); --ui-warning-strong:var(--warn-ink); --ui-warning-tint:var(--warn-tint); --ui-danger:var(--risk); --ui-danger-strong:var(--risk-ink); --ui-danger-tint:var(--risk-tint); --ui-focus:#7B70E3; --ui-selection-border:color-mix(in srgb,var(--ui-primary) 42%,var(--ui-border)); --ui-selection-ring:color-mix(in srgb,var(--ui-primary) 16%,transparent); --ui-selection-bg:color-mix(in srgb,var(--ui-primary-tint) 72%,var(--ui-surface)); --ui-selection-shadow:0 0 0 3px var(--ui-selection-ring); --ui-accent:#167D8D; --ui-media-surface:#15213A; --ui-data-chain:#5B7FA3; --ui-data-product:#2F7D75; --ui-data-step:#6E8E63; --ui-data-cluster:#8A6A3A; --ui-data-buyer:#8A5B9C; --ui-country-us:#6F7C95; --ui-country-eu:#4E698A; --ui-country-jp:#717D90; --ui-country-kr:#6C61C6; --ui-country-cn:#707C8E; --ui-country-other:#7C8798; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --ui-weight-regular:500; --ui-weight-medium:600; --ui-weight-strong:750; --control-sm:36px; --control-md:44px; --control-lg:52px; --ui-radius-sm:8px; --ui-radius-md:12px; --ui-radius-lg:16px; --ui-radius-overlay:20px; --ui-radius-pill:999px; --ui-shadow-1:0 1px 2px rgba(23,32,51,.04),0 6px 18px rgba(23,32,51,.05); --ui-shadow-2:0 8px 28px rgba(23,32,51,.11); --ui-shadow-3:0 18px 56px rgba(23,32,51,.18); --ui-ease:cubic-bezier(.2,.8,.2,1); --motion-fast:140ms; --motion-base:220ms; --motion-slow:360ms; --motion-enter:cubic-bezier(.22,1,.36,1); } html,body{max-width:100%;overflow-x:clip} body{background:var(--ui-canvas);color:var(--ui-text)} h1,h2,h3,h4,h5,h6,strong,b{color:var(--ui-text-strong)} button,input,select,textarea{color:var(--ui-text)} input,select,textarea{border-color:var(--ui-control-border)} button{min-height:var(--control-sm)} button:disabled,[aria-disabled="true"]{opacity:.48;cursor:not-allowed;filter:saturate(.6)} :focus-visible{outline:2px solid var(--ui-selection-border);outline-offset:2px} .top{ background:color-mix(in srgb,var(--ui-surface) 94%,transparent); border-bottom-color:var(--ui-border);box-shadow:0 1px 0 rgba(23,32,51,.03) } .site-brand .mark{background:var(--ui-primary);box-shadow:0 4px 12px color-mix(in srgb,var(--ui-primary) 28%,transparent)} .searchbar input, .scr-sel,.scr-sel select,.sa-input,.sa-select,.osc select,.rp-sel,.rp-key{ min-height:var(--control-md);background:var(--ui-surface);border:1px solid var(--ui-control-border); border-radius:var(--ui-radius-sm);color:var(--ui-text-strong) } .searchbar input:focus, .scr-sel:focus,.scr-sel select:focus,.sa-input:focus,.sa-select:focus, .osc select:focus,.rp-sel:focus,.rp-key:focus,.kg-search input:focus{ outline:none;border-color:var(--ui-selection-border);box-shadow:var(--ui-selection-shadow) } .card,.chain-tile,.pos-card,.sp-card,.by-card,.co-hd,.result-row{ background:var(--ui-surface);border-color:var(--ui-border); border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-1) } .card:hover,.chain-tile:hover,.pos-card:hover,.sp-card:hover,.by-card:hover,.result-row:hover{ border-color:color-mix(in srgb,var(--ui-primary) 34%,var(--ui-border)); box-shadow:var(--ui-shadow-2) } .sr-row,.sh-i,.lk-b,.at-m-co{ border-radius:var(--ui-radius-sm);transition:background .12s var(--ui-ease),border-color .12s var(--ui-ease),transform .12s var(--ui-ease) } .sr-row:hover,.sh-i:hover,.lk-b:hover,.at-m-co:hover{background:var(--ui-primary-tint)} .cb-go,.ca-go{ min-height:var(--control-md);background:var(--ui-primary);border-color:var(--ui-primary); color:var(--on-accent);border-radius:var(--ui-radius-sm);font-weight:700; box-shadow:0 3px 10px color-mix(in srgb,var(--ui-primary) 20%,transparent) } .cb-go:hover,.ca-go:hover{ background:var(--ui-primary-hover);border-color:var(--ui-primary-hover) } .cb-go:active,.ca-go:active{transform:translateY(1px)} /* 公司頁 CTA：保留可操作性，但從「大型紫色按鈕」降成輕量工具列，避免搶走公司本體資訊。 */ .co-hd .co-actions{ margin-left:auto;padding:6px;gap:7px;border:1px solid var(--ui-border); border-radius:16px;background:var(--ui-surface-subtle);box-shadow:0 8px 22px rgba(23,32,51,.06) } @media(max-width:760px){ .co-hd{display:grid;grid-template-columns:auto minmax(0,1fr);padding:18px 16px;gap:14px;border-radius:18px} .co-hd-main{display:contents} .co-hd-identity{grid-column:2} .co-logo{width:64px;height:64px;border-radius:16px;font-size:var(--fs-base)} .co-hd h1{font-size:var(--fs-2xl);line-height:1.15} .co-hd .co-meta{gap:10px;font-size:var(--fs-xs);line-height:1.45} .co-taxonomy{grid-column:1/-1;width:100%;max-width:none;margin-top:0;gap:8px} .co-tax-row{align-items:flex-start;padding:9px 10px;border-radius:13px;gap:6px} .co-tax-label{width:100%;min-width:0;margin-bottom:3px;font-size:var(--fs-3xs)} .co-tax-chip{ min-width:0;max-width:100%;min-height:30px;padding:4px 10px; font-size:var(--fs-2xs);line-height:1.45;white-space:normal;overflow-wrap:anywhere } .co-tax-note{font-size:var(--fs-3xs)} .co-hd .co-actions{ grid-column:1/-1;flex:0 0 100%;width:100%;margin:4px 0 0;padding:0;border:0;background:transparent; box-shadow:none;display:grid;grid-template-columns:1fr 1fr;gap:10px } } @media(max-width:420px){ .co-logo{width:56px;height:56px;font-size:var(--fs-sm)} .co-hd h1{font-size:var(--fs-xl)} .co-tax-row{display:block} .co-tax-label{display:block;margin-bottom:7px} .co-tax-chip{margin:0 5px 6px 0} } .more-btn{ min-height:var(--control-md);background:transparent;border:1px solid var(--ui-border-strong); color:var(--ui-primary-strong);border-radius:var(--ui-radius-sm);font-weight:700; box-shadow:none; } .more-btn:hover{background:var(--ui-primary-tint);border-color:var(--ui-primary);color:var(--ui-primary-strong)} .more-btn:active{background:var(--ui-surface-muted)} .tab,.st-btn,.mchip,.sp-chip,.th-chip,.tb-chip{ border-radius:var(--ui-radius-pill);min-height:var(--control-sm) } .tab.on,.tab.active,.st-btn.on,.mchip.on,.sp-chip.on,.th-chip.on,.tb-chip.on{ background:var(--ui-selection-bg);border-color:var(--ui-selection-border); color:var(--ui-primary-strong);font-weight:700;box-shadow:var(--ui-selection-shadow) } /* 查詢台：篩選工具列使用一致的 field / segmented control，不套用全站 pill 過度重量。 */ .screen-view .sec-head{align-items:center;margin-top:30px} .screen-view .scr-tabs{ display:inline-flex;gap:3px;padding:4px;border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm);background:var(--ui-surface-subtle);box-shadow:none } .screen-view .st-btn{ min-height:36px;border:0;border-radius:7px;padding:0 16px;background:transparent; color:var(--ui-text-muted);font-size:var(--fs-sm);font-weight:750;box-shadow:none } .screen-view .st-btn.on{background:var(--ui-surface);color:var(--ui-primary-strong);box-shadow:0 4px 12px rgba(23,32,51,.06)} .screen-view .scr-filters,.screen-view .scr-adv{ background:var(--ui-surface);border-color:var(--ui-border); border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-1) } .screen-view .scr-sel{ min-height:0;background:var(--ui-surface-subtle);border:1px solid var(--ui-border); border-radius:var(--ui-radius-sm);color:var(--ui-text);box-shadow:none } .screen-view .scr-sel select{min-height:36px;border:0;background:transparent;box-shadow:none} .screen-view .scr-field{border-color:var(--ui-border);background:var(--ui-surface-subtle);border-radius:var(--ui-radius-sm)} .screen-view .mchip{ min-height:34px;border-radius:8px;border-color:var(--ui-border);background:var(--ui-surface); color:var(--ui-text-muted);font-size:var(--fs-xs);font-weight:750;box-shadow:none } .screen-view .mchip:hover{background:var(--ui-primary-tint);border-color:var(--steel-line);color:var(--ui-primary-strong)} .screen-view .mchip.on{ background:var(--ui-primary);border-color:var(--ui-primary);color:var(--on-accent) } .screen-view .sa-row{border-color:var(--ui-border)} .screen-view .sa-k{color:var(--ui-text-strong)} .screen-view .sa-logic{background:var(--ui-surface-subtle);border:1px solid var(--ui-border);border-radius:8px} .screen-view .lg.on{background:var(--ui-primary);color:var(--on-accent)} .screen-view .sa-input,.screen-view .sa-select{border-color:var(--ui-control-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface)} .screen-view .sa-check{min-height:34px;margin-left:0;padding:0 10px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface);color:var(--ui-text-muted)} .screen-view .sa-reset{min-height:34px;border-radius:8px;border-color:var(--ui-border);color:var(--ui-text-muted)} html[data-theme="bright"] .screen-view .st-btn, html[data-theme="bright"] .screen-view .mchip{border-radius:8px} /* 實心深色狀態一律反白，避免圖示與縮寫沿用一般紫色文字。 */ :where(.solid-icon,.solid-badge,.by-logo,.cx-logo,.sup-tier.t1,.pri-badge.pb-solid,.rm-pri){color:var(--on-accent)!important} :where(.solid-icon,.solid-badge) svg{color:var(--on-accent)!important;stroke:currentColor} .solid-icon,.solid-badge{background:var(--ui-text-strong)!important;border-color:var(--ui-text-strong)!important} .gp-head,.pt-head,.cmp-head,.ar-head{background:var(--ui-surface-subtle);color:var(--ui-text-muted)} .honest-line,.cx-demo,.rp-honest{border-color:var(--ui-border);background:var(--ui-surface-subtle);color:var(--ui-text-muted)} .breadcrumb{color:var(--ui-text-muted)} .breadcrumb a{color:var(--ui-primary-strong)} .foot{ color:rgba(255,255,255,.74);border-top:0; background:linear-gradient(135deg,color-mix(in srgb,var(--ui-text-strong) 88%,var(--ui-primary)) 0%,color-mix(in srgb,var(--ui-text-strong) 76%,var(--ui-primary)) 100%); box-shadow:none;padding:22px 0;margin-top:54px; } .foot-simple{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center} .foot-simple-brand{display:flex;align-items:center;gap:12px;min-width:0;color:var(--on-accent);text-decoration:none} .foot-simple-brand svg{width:76px;height:auto;flex-shrink:0} .foot-simple-brand .logo-purple{fill:var(--ui-primary)} .foot-simple-brand .logo-white{fill:var(--on-accent)} .foot-simple-brand b,.foot-simple-brand span{display:block;line-height:1.3} .foot-simple-brand b{font-size:var(--fs-sm);font-weight:800;color:var(--on-accent)} .foot-simple-brand span{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:.12em;color:rgba(255,255,255,.58)} .foot-simple-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap} .foot-simple-links a{min-height:34px;display:inline-flex;align-items:center;border-radius:999px;padding:0 10px;color:rgba(255,255,255,.7);font-size:var(--fs-2xs);font-weight:700;text-decoration:none} .foot-simple-links a:hover{background:rgba(255,255,255,.1);color:var(--on-accent)} .foot-simple-note{margin:0;text-align:right;max-width:360px;color:rgba(255,255,255,.52);font-size:var(--fs-3xs);line-height:1.55} .foot-inner{display:grid;grid-template-columns:minmax(260px,1.55fr) repeat(3,minmax(140px,1fr));gap:40px} .foot-brand{max-width:390px} .foot-brand-mark{display:flex;align-items:center;margin-bottom:14px} .foot-logo{width:96px;height:auto;display:block;flex-shrink:0} .foot-logo .logo-purple{fill:var(--ui-primary)} .foot-logo .logo-white{fill:var(--on-accent)} .foot-kicker{font-family:var(--disp);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;color:color-mix(in srgb,var(--on-accent) 72%,var(--ui-primary-tint));margin:-2px 0 14px} .foot-brand h2{font-family:var(--disp);font-size:var(--fs-lg);font-weight:600;line-height:1.4;color:var(--on-accent);margin:0 0 4px} .foot-brand p{font-size:var(--fs-sm);line-height:1.8;color:rgba(255,255,255,.68);margin:0} .foot-nav{display:flex;flex-direction:column;align-items:flex-start;gap:9px} .foot-nav b{color:var(--on-accent);font-size:var(--fs-sm);font-weight:700;margin-bottom:4px} .foot-nav a{color:rgba(255,255,255,.7);font-size:var(--fs-xs);text-decoration:none;line-height:1.5;transition:color .12s var(--ui-ease),transform .12s var(--ui-ease)} .foot-nav a:hover{color:var(--on-accent);transform:translateX(2px)} .foot-nav a:focus-visible{outline-color:color-mix(in srgb,var(--on-accent) 72%,var(--ui-primary-tint))} .foot-bottom{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} .foot-disclaimer{max-width:850px;margin:0;font-size:var(--fs-2xs);line-height:1.75;color:rgba(255,255,255,.58)} .foot-disclaimer b{color:rgba(255,255,255,.9)} .foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;white-space:nowrap} .foot-meta span{font-family:var(--mono);font-size:var(--fs-3xs);color:rgba(255,255,255,.46)} .foot-meta b{font-family:var(--body);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.62)} @media(max-width:900px){ .foot-simple{grid-template-columns:1fr;justify-items:start} .foot-simple-links{justify-content:flex-start} .foot-simple-note{text-align:left;max-width:680px} .foot-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px} .foot-brand{grid-column:1 / -1;max-width:560px} .foot-nav a{min-height:44px;display:flex;align-items:center} .foot-bottom{align-items:flex-start;flex-direction:column} .foot-meta{align-items:flex-start;text-align:left} } @media(max-width:560px){ .foot{padding:18px 0;margin-top:36px} .foot-simple{gap:10px} .foot-simple-brand svg{width:60px} .foot-simple-links{gap:2px} .foot-simple-links a{min-height:32px;padding:0 8px;font-size:var(--fs-3xs)} .foot-simple-note{font-size:var(--fs-3xs)} .foot-inner{grid-template-columns:1fr;gap:0} .foot-brand{grid-column:auto} .foot-brand-mark{margin-bottom:10px} .foot-logo{width:78px} .foot-brand h2{font-size:var(--fs-md);line-height:1.25;margin-bottom:2px} .foot-kicker{font-size:var(--fs-3xs);letter-spacing:.12em;margin:0} .foot-brand p,.foot-nav,.foot-disclaimer,.foot-meta span{display:none} .foot-bottom{display:block;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)} .foot-meta{display:block;text-align:left;white-space:normal} .foot-meta b{font-size:var(--fs-3xs);line-height:1.6;color:rgba(255,255,255,.62)} } .insights-view{padding-bottom:64px} .insights-hero{display:flex;justify-content:space-between;align-items:end;gap:36px;padding:8px 0 28px;border-bottom:1px solid var(--ui-border)} .insights-kicker{font-family:var(--disp);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;color:var(--ui-primary);text-transform:uppercase;margin-bottom:9px} .insights-hero h1{font-family:var(--disp);font-size:clamp(34px,4vw,54px);font-weight:600;line-height:1.08;margin:0;color:var(--ui-text)} .insights-hero p{max-width:680px;margin:12px 0 0;color:var(--ui-text-muted);font-size:var(--fs-md);line-height:1.8} .insights-count{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;padding-bottom:5px;color:var(--ui-text-muted);font-size:var(--fs-xs);white-space:nowrap} .insights-count strong{font-family:var(--disp);font-size:var(--fs-2xl);line-height:1;color:var(--ui-primary)} .insights-toolbar{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:18px 2px 12px;scrollbar-width:thin} .insights-filter{flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-text-muted);font-size:var(--fs-sm);font-weight:650;transition:background .14s var(--ui-ease),border-color .14s var(--ui-ease),color .14s var(--ui-ease)} .insights-filter:hover{background:var(--ui-primary-tint);border-color:var(--ui-selection-border);color:var(--ui-primary-strong)} .insights-filter.on{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--on-accent)} .insights-lead-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:26px;margin:16px 0 42px} .insights-feature{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(270px,.88fr);min-height:390px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-xl);overflow:hidden;background:var(--ui-surface);box-shadow:var(--ui-shadow-1);transition:transform .16s var(--ui-ease),box-shadow .16s var(--ui-ease),border-color .16s var(--ui-ease)} .insights-feature:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-2);border-color:var(--ui-selection-border)} .insights-feature-media,.article-media{position:relative;overflow:hidden;background:var(--ui-surface-subtle)} .insights-feature-media img,.article-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .32s var(--ui-ease)} .insights-feature-media.contain img,.article-media.contain img{object-fit:contain;padding:28px;background:var(--ui-surface-subtle)} .insights-feature:hover img,.article-card:hover img{transform:scale(1.025)} .insights-feature-copy{display:flex;flex-direction:column;padding:32px} .article-category{display:inline-flex;align-items:center;gap:7px;color:var(--ui-primary);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.04em} .article-category::before{content:'';width:18px;height:2px;border-radius:2px;background:currentColor} .insights-feature h2{font-family:var(--disp);font-size:clamp(23px,2.1vw,32px);font-weight:600;line-height:1.35;margin:14px 0 13px;color:var(--ui-text)} .insights-feature p{margin:0;color:var(--ui-text-muted);font-size:var(--fs-sm);line-height:1.8} .article-byline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:auto;padding-top:22px;color:var(--ui-text-muted);font-size:var(--fs-2xs)} .article-byline span+span::before,.article-byline time::before{content:'·';margin-right:10px;color:var(--ui-border-strong)} .article-read{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--ui-primary);font-size:var(--fs-sm);font-weight:750} .article-read svg{width:16px;height:16px;transition:transform .14s var(--ui-ease)} a:hover .article-read svg{transform:translateX(3px)} .insights-latest{padding-top:0} .insights-latest-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 0 12px;border-bottom:2px solid var(--ui-text)} .insights-latest-head h2{font-family:var(--disp);font-size:var(--fs-lg);margin:0} .insights-latest-head span{color:var(--ui-text-muted);font-size:var(--fs-2xs)} .insights-latest-list{display:grid} .insights-latest-item{display:grid;grid-template-columns:1fr 76px;gap:16px;align-items:center;min-height:108px;padding:16px 0;border-bottom:1px solid var(--ui-border)} .insights-latest-item h3{font-family:var(--disp);font-size:var(--fs-base);font-weight:600;line-height:1.5;margin:5px 0;color:var(--ui-text)} .insights-latest-item time{color:var(--ui-text-muted);font-size:var(--fs-2xs)} .insights-latest-thumb{width:76px;height:72px;border-radius:var(--ui-radius-sm);object-fit:cover;background:var(--ui-surface-subtle)} .insights-latest-thumb.contain{object-fit:contain;padding:6px} .insights-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:18px} .insights-section-head h2{font-family:var(--disp);font-size:var(--fs-2xl);font-weight:600;line-height:1.3;margin:0} .insights-section-head p{margin:0;color:var(--ui-text-muted);font-size:var(--fs-xs)} .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .article-card{display:flex;flex-direction:column;min-height:100%;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);overflow:hidden;background:var(--ui-surface);box-shadow:var(--ui-shadow-1);transition:transform .16s var(--ui-ease),box-shadow .16s var(--ui-ease),border-color .16s var(--ui-ease)} .article-card:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-2);border-color:var(--ui-selection-border)} .article-media{aspect-ratio:16 / 9} .article-card-body{display:flex;flex-direction:column;flex:1;padding:21px} .article-card h3{font-family:var(--disp);font-size:var(--fs-lg);font-weight:600;line-height:1.45;margin:12px 0 9px;color:var(--ui-text)} .article-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--ui-text-muted);font-size:var(--fs-sm);line-height:1.75} .article-card .article-byline{padding-top:18px} .insights-more{display:flex;justify-content:center;margin-top:28px} .insights-more button{min-width:180px;min-height:46px;padding:0 24px;border:1px solid var(--ui-selection-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-primary);font-size:var(--fs-sm);font-weight:750;transition:background .14s var(--ui-ease),border-color .14s var(--ui-ease)} .insights-more button:hover{background:var(--ui-primary-tint);border-color:var(--ui-primary)} .insights-empty{grid-column:1 / -1;padding:46px 24px;border:1px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);text-align:center;background:var(--ui-surface);color:var(--ui-text-muted)} .insights-empty b{display:block;margin-bottom:7px;color:var(--ui-text);font-size:var(--fs-lg)} @media(max-width:1100px){ .insights-lead-grid{grid-template-columns:1fr} .insights-feature{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr)} .insights-latest-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .insights-latest-item{grid-template-columns:1fr;align-content:start} .insights-latest-thumb{width:100%;height:auto;aspect-ratio:16 / 9;grid-row:1} .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:720px){ .insights-view{padding-bottom:40px} .insights-hero{display:block;padding-top:0} .insights-hero p{font-size:var(--fs-sm)} .insights-count{margin-top:16px} .insights-toolbar{padding-right:14px} .insights-lead-grid{margin-top:10px;margin-bottom:34px} .insights-feature{grid-template-columns:1fr;min-height:0} .insights-feature-media{aspect-ratio:16 / 10} .insights-feature-copy{padding:22px} .insights-feature h2{font-size:var(--fs-xl)} .insights-latest-list{grid-template-columns:1fr;gap:0} .insights-latest-item{grid-template-columns:1fr 88px;min-height:104px} .insights-latest-thumb{width:88px;height:76px;aspect-ratio:auto;grid-row:auto} .insights-section-head{display:block} .insights-section-head p{margin-top:5px} .article-grid{grid-template-columns:1fr} } .mega{border-bottom-color:var(--ui-border);box-shadow:var(--ui-shadow-3)} .sh-panel{border-radius:var(--ui-radius-overlay) var(--ui-radius-overlay) 0 0;box-shadow:var(--ui-shadow-3)} .at-modal{border-radius:var(--ui-radius-overlay);box-shadow:var(--ui-shadow-3)} .sh-bg,.modal-bg{background:rgba(23,32,51,.54)} .aa-btn,.ut-b,.sh-x,.at-mx{border-radius:var(--ui-radius-sm)} /* TASK-014 · 特殊產業鏈與衝擊傳導視覺契約 藍紫只表示資訊與互動；綠色表示台廠主導；橙／紅只留給注意與高風險。 */ .special-detail .chain-hd{ gap:20px;padding:24px;background:var(--ui-surface);border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1) } .special-detail .chain-hd .big-ico{ width:60px;height:60px;border-radius:var(--ui-radius-md);background:var(--ui-primary-tint); color:var(--ui-primary-strong);border-color:var(--steel-line) } .special-detail .chain-hd h1{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .special-detail .chain-hd p{max-width:960px;line-height:1.75} .special-detail .flow-list{gap:12px} .special-detail .fl-row{ gap:14px;padding:17px 18px;border-radius:var(--ui-radius-md);border-color:var(--ui-border); box-shadow:var(--ui-shadow-1) } .special-detail .fl-row:hover{border-color:var(--steel-line)} .special-detail .fl-idx{width:30px;height:30px;border-radius:9px} .special-detail .fl-hd{margin-bottom:10px} .special-detail .fl-note{margin-bottom:11px} .shock-index .shk-grid{gap:14px} .shock-index .shk-pick{ padding:16px;border-radius:var(--ui-radius-md);border-color:var(--ui-border);box-shadow:var(--ui-shadow-1) } .shock-index .shk-pick:hover{border-color:var(--steel-line);box-shadow:var(--ui-shadow-2)} .shock-detail .shock-alert{ margin-top:14px;padding:12px 14px;color:var(--risk-ink);background:var(--risk-tint-2); border-color:var(--risk-line);border-radius:var(--ui-radius-md) } .shock-detail .pg-col{min-width:0} .shock-detail .pg-step{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .shock-detail .st-row,.shock-detail .cx-row{padding-block:10px;border-top-style:solid} .shock-detail .st-row:first-of-type,.shock-detail .cx-row:first-of-type{border-top:none} .shock-detail .cp-note{ padding:12px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-sm); background:var(--ui-surface-subtle) } /* TASK-015 · 剩餘舊介面收旂：錯配頁與產業圖譜 */ .mismatch-view .ar-card,.mismatch-view .mm-c{ border-color:var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1) } .mismatch-view .mm-c:hover{border-color:var(--steel-line);box-shadow:var(--ui-shadow-2)} .mismatch-view .mm-sec h2{display:flex;align-items:center;gap:9px;color:var(--ui-primary-strong)} .mismatch-view .mm-sec h2 i{width:9px;height:9px;border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 4px var(--ui-primary-tint)} .mismatch-view .mm-sec.q-gap h2 i{background:var(--ui-danger);box-shadow:0 0 0 4px var(--risk-tint)} .mismatch-view .mm-sec.q-hold h2 i{background:var(--ui-success);box-shadow:0 0 0 4px var(--ok-tint)} .mismatch-view .mmc-g{padding:3px 8px;border-radius:999px;background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .mismatch-view .mmc-bar{background:var(--ui-surface-muted)} .mismatch-view .mmc-bar i{background:var(--ui-primary)} .mismatch-view .mmc-v b{color:var(--ui-primary-strong)} .mismatch-view .mmc-weak{border-top-style:solid} .mismatch-view .mmc-weak b{color:var(--ui-danger)} .mismatch-view .ari.warn{background:var(--ui-surface);border-color:var(--ui-border);box-shadow:var(--ui-shadow-1)} .mismatch-view .ari.warn > b{color:var(--ui-primary-strong)} .atlas-view{ --atlas-ok:var(--ui-primary); --atlas-gap:var(--ui-accent); --atlas-none:color-mix(in srgb,var(--ui-primary) 48%,var(--ink) 52%); --atlas-ok-tint:var(--ui-primary-tint); --atlas-gap-tint:color-mix(in srgb,var(--ui-accent) 11%,var(--ui-surface)); --atlas-none-tint:color-mix(in srgb,var(--ui-primary) 12%,var(--ui-surface)); --atlas-ok-line:color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border)); --atlas-gap-line:color-mix(in srgb,var(--ui-accent) 26%,var(--ui-border)); --atlas-none-line:color-mix(in srgb,var(--ui-primary) 28%,var(--ui-border)); } .atlas-view .at-topbar,.atlas-view .at-side,.atlas-view .at-axis,.atlas-view .at-five{ border-color:var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1) } .atlas-view .at-topbar{padding:16px 18px} .atlas-view .ats-btn,.atlas-view .att{border-radius:var(--ui-radius-pill)} .atlas-view .at-tabs{border-color:var(--ui-border);border-radius:var(--ui-radius-pill);box-shadow:none} .atlas-view .at-node{background:var(--ui-surface-subtle);border-color:var(--ui-border);border-radius:var(--ui-radius-md)} .atlas-view .at-item{background:var(--ui-primary-tint);color:var(--ui-primary-strong);border-color:transparent} .atlas-view .at-item.is-gap{background:var(--ui-surface);color:var(--ui-primary-strong);border-color:var(--atlas-gap-line)} .atlas-view .at-item.is-gap:hover{background:var(--atlas-gap-tint);color:var(--ui-primary-strong)} .atlas-view .at-item b{background:var(--atlas-gap-tint);color:var(--ui-accent);border:1px solid var(--atlas-gap-line);border-radius:999px;padding:1px 6px} .atlas-view .at-item.is-gap:hover b{background:var(--ui-surface);color:var(--ui-accent)} .atlas-view .at-item i{ width:auto;height:18px;min-width:18px;padding:0 5px;border-radius:999px; display:inline-grid;place-items:center;line-height:1;background:var(--ui-surface); color:var(--ui-text-muted);border:1px solid var(--ui-border);font-weight:650;font-size:var(--fs-3xs); } .atlas-view .at-item-name{min-width:0;flex:1 1 auto;font-weight:700;line-height:1.45;white-space:normal;overflow-wrap:anywhere} .atlas-view .at-item.has-co:hover i{background:var(--ui-surface);color:var(--ui-text-muted);border-color:var(--ui-border)} .atlas-view .ats-actions{display:grid;gap:8px;margin-top:16px} .atlas-view .gap-sum,.atlas-view .gap-node{border-color:var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1)} .atlas-view .gsb.ok,.atlas-view .gn-bar i.ok,.atlas-view .gs-legend i.ok{background:var(--atlas-ok)} .atlas-view .gsb.gap,.atlas-view .gn-bar i.gap,.atlas-view .gs-legend i.gap{background:var(--atlas-gap)} .atlas-view .gsb.none,.atlas-view .gn-bar i.none,.atlas-view .gs-legend i.none{background:var(--atlas-none)} .atlas-view .gn-x{font-family:var(--body);font-size:var(--fs-xs);font-weight:800;text-align:center;border-radius:999px;padding:6px 12px;white-space:nowrap} .atlas-view .gn-x.r1{background:var(--atlas-ok-tint);color:var(--ui-primary-strong);border:1px solid var(--atlas-ok-line)} .atlas-view .gn-x.r2{background:var(--atlas-gap-tint);color:var(--ui-accent);border:1px solid var(--atlas-gap-line)} .atlas-view .gn-x.r3{background:var(--atlas-none-tint);color:var(--atlas-none);border:1px solid var(--atlas-none-line)} .atlas-view .gn-i{border-radius:9px;border-width:1px;font-weight:700} .atlas-view .gn-i.ok{background:var(--atlas-ok-tint);color:var(--ui-primary-strong);border-color:var(--atlas-ok-line)} .atlas-view .gn-i.gap{background:var(--atlas-gap-tint);color:var(--ui-accent);border-color:var(--atlas-gap-line)} .atlas-view .gn-i.none{background:var(--atlas-none-tint);color:var(--atlas-none);border-color:var(--atlas-none-line)} .atlas-view .gn-i:hover{border-color:var(--ui-primary);background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .at-modal{border:1px solid var(--steel-line);overflow:hidden} .at-m-left{background:var(--ui-primary-tint)} .at-m-card{border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-1)} .at-mx{width:40px;height:40px;background:var(--ui-surface);border-color:var(--ui-border)} .at-mx:hover{background:var(--ui-primary-tint);color:var(--ui-primary-strong);border-color:var(--steel-line)} .at-m-path{color:var(--ui-primary-strong)} .at-m-gap{color:var(--ui-text);background:var(--ui-primary-tint);border-color:var(--steel-line);border-radius:var(--ui-radius-md)} .at-m-gap b{color:var(--ui-primary-strong)} .at-m-co{border-color:var(--ui-border);border-radius:var(--ui-radius-md)} .at-m-co:hover{border-color:var(--steel-line);background:var(--ui-primary-tint);transform:none} @media(max-width:820px){ .special-detail .chain-hd{padding:18px;gap:14px} .special-detail .chain-hd .big-ico{width:50px;height:50px} .special-detail .fl-row{padding:14px;gap:10px} .shock-detail .sh-r{text-align:left;width:100%} .shock-detail .sh-fx{line-height:1.65} } @media(max-width:900px){ button,#app a[onclick]{min-height:var(--control-md)} .top-inner{padding-inline:var(--space-4)} .wrap{padding-inline:var(--space-4)} .aa-btn,.ut-b,.sh-x,.at-mx{min-width:var(--control-md);min-height:var(--control-md)} .util .ut-b:first-child{display:inline-grid} .util .ut-b:nth-child(2){display:none} .tb{height:60px;min-height:60px} body{padding-bottom:calc(60px + env(safe-area-inset-bottom))} } /* ===== v2.2 landing page + persistent navigation ===== */ .top{ position:fixed;left:0;right:0;top:0; box-shadow:0 1px 0 rgba(23,32,51,.04),0 10px 30px rgba(23,32,51,.05); transform:translateY(0);will-change:transform; transition:transform var(--motion-base) var(--motion-enter),box-shadow var(--motion-fast) ease; } body.header-hidden .top{transform:translateY(calc(-100% - 2px));box-shadow:none} body.header-locked .top{transform:translateY(0)} #app{padding-top:60px} /* 全站 Motion System：內容進場、資料成長與操作回饋使用同一組節奏。 */ :where(.card,.chain-tile,.pos-card,.sp-card,.by-card,.mm-c,.shk-pick,.fl-row,.pg-item,.at-node,.result-row){ transition:transform var(--motion-fast) var(--ui-ease),box-shadow var(--motion-base) var(--ui-ease),border-color var(--motion-fast) ease,background-color var(--motion-fast) ease; } :where(button,a[onclick],[role="button"]){transition-duration:var(--motion-fast);transition-timing-function:var(--ui-ease)} :where(button,a[onclick],[role="button"]):active{transform:scale(.98)} :where(.fv-bar,.an-bar,.src-bar,.pt-bar,.pt-gap,.sup-bar,.cx-bar,.st-bar,.mmc-bar,.rb-bar,.fvp-bar,.gn-bar) > i{ transform-origin:left center;animation:barGrow 520ms var(--motion-enter) both; } @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} .landing-hero{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); position:relative;isolation:isolate;overflow:hidden;gap:44px;align-items:center;padding:56px 0 26px; } .landing-hero::before{ content:"";position:absolute;z-index:0;inset:-50px -4vw -10px;pointer-events:none;opacity:.62;filter:blur(22px); background:radial-gradient(circle at 78% 28%,color-mix(in srgb,var(--ui-primary) 13%,transparent),transparent 31%),radial-gradient(circle at 58% 76%,color-mix(in srgb,var(--ui-accent) 9%,transparent),transparent 28%); animation:landingAura 14s ease-in-out infinite alternate } .landing-hero > .landing-copy,.landing-hero > .landing-visual{position:relative;z-index:1} .landing-world-map{position:absolute;z-index:0;left:50%;bottom:-8px;width:min(1040px,90vw);height:auto;transform:translateX(-50%);opacity:.16;filter:brightness(0) saturate(100%) invert(42%) sepia(12%) saturate(1350%) hue-rotate(193deg) brightness(93%) contrast(87%);pointer-events:none;user-select:none} .landing-world-map[hidden]{display:none} @keyframes landingAura{from{transform:translate3d(-2%,1%,0) scale(.96);opacity:.42}to{transform:translate3d(2%,-1%,0) scale(1.05);opacity:.72}} /* 首頁敘事進場：由品牌定位一路帶到搜尋、實景與資料範圍。 */ .home-view .landing-copy .eyebrow{animation:landingRise 620ms var(--motion-enter) 70ms both} .landing-copy > .eyebrow{font-family:var(--body);font-size:var(--fs-base);font-weight:700;letter-spacing:.08em;color:color-mix(in srgb,var(--ink-faint) 50%,transparent)} .home-view .landing-copy h1{animation:landingRise 760ms var(--motion-enter) 140ms both} .home-view .landing-copy h1 span{animation:landingAccent 760ms var(--motion-enter) 270ms both} .home-view .landing-copy .lead{animation:landingRise 680ms var(--motion-enter) 250ms both} .home-view .landing-search{animation:landingSearchIn 760ms var(--motion-enter) 350ms both} .home-view .landing-examples{animation:landingRise 580ms var(--motion-enter) 460ms both} .home-view .landing-actions{animation:landingRise 580ms var(--motion-enter) 530ms both} .home-view .landing-photo{animation:landingNetworkIn 920ms var(--motion-enter) 190ms both} .home-view .landing-signal{animation:landingSignalIn 680ms var(--motion-enter) 650ms both} .home-view .landing-stat{animation:landingStatIn 620ms var(--motion-enter) both} .home-view .landing-stat:nth-child(1){animation-delay:620ms}.home-view .landing-stat:nth-child(2){animation-delay:690ms}.home-view .landing-stat:nth-child(3){animation-delay:760ms}.home-view .landing-stat:nth-child(4){animation-delay:830ms} @keyframes landingRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}} @keyframes landingAccent{from{opacity:0;transform:translate3d(-18px,0,0);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes landingSearchIn{from{opacity:0;transform:translate3d(0,18px,0) scale(.97);box-shadow:none}to{opacity:1;transform:none}} @keyframes landingNetworkIn{from{opacity:0;transform:translate3d(30px,0,0) scale(.97);clip-path:inset(0 0 0 18% round 24px)}to{opacity:1;transform:none;clip-path:inset(0 round 24px)}} @keyframes landingSignalIn{from{opacity:0;transform:translate3d(-18px,18px,0) scale(.94)}to{opacity:1;transform:none}} @keyframes landingStatIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}} .landing-copy h1{ margin:12px 0 18px;max-width:720px;font-family:var(--disp);font-size:clamp(2.5rem,5vw,4.6rem); font-weight:600;line-height:1.08;letter-spacing:-.035em;color:var(--ui-text-strong); } .landing-copy h1 span{display:block;color:var(--ui-primary)} .landing-copy .lead{margin:0;max-width:650px;font-size:var(--fs-lg);line-height:1.8;color:var(--ui-text-muted)} .landing-search{ display:grid;grid-template-columns:1fr auto;gap:8px;margin:28px 4px 0;padding:8px;position:relative;overflow:hidden; width:calc(100% - 8px);box-sizing:border-box; background:var(--ui-surface);border:1px solid var(--ui-border-strong);border-radius:999px; box-shadow:0 8px 24px rgba(23,32,51,.06); } .landing-search::after{content:"";position:absolute;z-index:0;left:7%;bottom:0;width:28%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--ui-primary),var(--ui-accent),transparent);opacity:0;transform:translateX(-180%);animation:landingSearchSweep 7s var(--ui-ease) infinite} .landing-search > *{position:relative;z-index:1} @keyframes landingSearchSweep{0%,18%{opacity:0;transform:translateX(-180%)}26%{opacity:.75}58%{opacity:.75;transform:translateX(350%)}64%,100%{opacity:0;transform:translateX(350%)}} .landing-search-field{position:relative;min-width:0} .landing-search input{ width:100%;height:52px;padding:0 16px;border:0;background:transparent;color:var(--ui-text-strong); font:600 var(--fs-lg)/1 var(--body);outline:0; } .landing-search input::placeholder{color:var(--ui-text-muted);font-weight:400;opacity:.68} .landing-search:focus-within{border-color:var(--ui-selection-border);box-shadow:var(--ui-selection-shadow),0 10px 28px rgba(23,32,51,.08)} .landing-search input:focus-visible{outline:0;box-shadow:none} .landing-search button{ width:52px;height:52px;min-width:52px;align-self:center;display:grid;place-items:center;padding:0; position:relative;overflow:hidden;border:0;border-radius:50%; background:var(--ui-primary); color:var(--on-accent); box-shadow:0 8px 20px color-mix(in srgb,var(--ui-primary) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.22); transition:transform .15s var(--ui-ease),box-shadow .15s var(--ui-ease),background .15s var(--ui-ease); } .landing-search button:hover{transform:translateY(-1px);background:var(--ui-primary-hover);box-shadow:0 10px 24px color-mix(in srgb,var(--ui-primary) 30%,transparent)} .landing-search button:active{transform:translateY(0) scale(.96)} .landing-search button .search-bolt{width:23px;height:23px;display:block;color:var(--on-accent);filter:drop-shadow(0 1px 1px rgba(23,32,51,.16))} .landing-examples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;color:var(--ui-text-muted);font-size:var(--fs-xs)} .landing-examples button{min-height:32px;padding:5px 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-primary-strong);font-size:var(--fs-xs)} .landing-examples button:hover{border-color:var(--ui-primary);background:var(--ui-primary-tint)} .landing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .landing-actions button{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--ui-border-strong);background:var(--ui-surface);color:var(--ui-text);font-weight:700} .landing-actions button:first-child{border-color:var(--ui-primary);color:var(--ui-primary)} .landing-actions button:hover{background:var(--ui-surface-subtle);border-color:var(--ui-primary)} .landing-visual{position:relative;min-height:460px} .landing-visual::before{content:"";position:absolute;z-index:0;inset:28px -12px 8px 18px;border-radius:38px;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 24%,color-mix(in srgb,var(--ui-primary) 22%,transparent) 32%,transparent 42% 72%,color-mix(in srgb,var(--ui-accent) 16%,transparent) 82%,transparent 92%);filter:blur(24px);opacity:.42;animation:landingVisualOrbit 20s linear infinite} .landing-photo{position:absolute;inset:0 0 28px 36px;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--on-accent) 12%,transparent);border-radius:24px;background:linear-gradient(145deg,var(--ui-text-strong),color-mix(in srgb,var(--ui-text-strong) 82%,var(--ui-primary)));box-shadow:0 28px 70px rgba(23,32,51,.22)} .landing-photo::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 68% 28%,color-mix(in srgb,var(--ui-primary) 20%,transparent),transparent 34%),radial-gradient(circle at 28% 76%,color-mix(in srgb,var(--ui-accent) 12%,transparent),transparent 30%);opacity:.82} .landing-photo::after{content:"";position:absolute;z-index:2;left:0;right:0;top:-24%;height:18%;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ui-primary) 14%,transparent),transparent);opacity:0;animation:landingNetworkScan 8s ease-in-out infinite} .landing-network{position:absolute;z-index:1;inset:-4%;width:108%;height:108%;display:block;color:var(--on-accent);pointer-events:none} .landing-network .network-field{transform-box:fill-box;transform-origin:center;animation:networkDrift 18s ease-in-out infinite alternate} .network-link{fill:none;stroke:currentColor;stroke-width:1;opacity:.2;vector-effect:non-scaling-stroke} .network-link.strong{stroke:var(--ui-accent);opacity:.36} .network-pulse{fill:none;stroke:var(--ui-primary-tint);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:4 118;opacity:.8;vector-effect:non-scaling-stroke;animation:networkTravel 7s linear infinite} .network-pulse.delay-1{animation-delay:-2.1s}.network-pulse.delay-2{animation-delay:-4.7s} .network-node rect{fill:color-mix(in srgb,var(--ui-text-strong) 88%,transparent);stroke:currentColor;stroke-width:1.2;rx:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:networkNodeBreath 5.4s ease-in-out infinite} .network-node.core rect{fill:color-mix(in srgb,var(--ui-primary) 42%,var(--ui-text-strong));stroke:var(--ui-primary-tint);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ui-primary) 58%,transparent))} .network-node:nth-of-type(3n) rect{animation-delay:-1.7s}.network-node:nth-of-type(4n) rect{animation-delay:-3.2s}.network-node:nth-of-type(5n) rect{animation-delay:-4.4s} .network-label{fill:color-mix(in srgb,var(--on-accent) 68%,transparent);font:600 10px/1 var(--mono);letter-spacing:.08em} .network-index{fill:color-mix(in srgb,var(--on-accent) 34%,transparent);font:500 8px/1 var(--mono)} .landing-signal{position:absolute;z-index:3;left:0;bottom:0;width:260px;max-width:calc(100% - 20px);padding:13px 14px;border:1px solid var(--ui-border);border-radius:14px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent);box-shadow:0 12px 30px rgba(23,32,51,.13)} .landing-signal small{display:block;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.4;margin-bottom:4px} .landing-signal b{display:block;color:var(--ui-text-strong);font-size:var(--fs-md);line-height:1.35} .landing-signal span{display:block;margin-top:6px;color:var(--ui-primary);font-size:var(--fs-2xs);font-weight:700;line-height:1.4} @keyframes landingVisualOrbit{to{transform:rotate(360deg)}} @keyframes landingNetworkScan{0%,15%{opacity:0;transform:translateY(0)}24%{opacity:.68}55%{opacity:.28;transform:translateY(690%)}60%,100%{opacity:0;transform:translateY(690%)}} @keyframes networkDrift{0%{transform:translate3d(-4px,4px,0) rotate(-.35deg) scale(1.01)}50%{transform:translate3d(5px,-3px,0) rotate(.25deg) scale(1.025)}100%{transform:translate3d(-2px,-6px,0) rotate(-.15deg) scale(1.015)}} @keyframes networkTravel{to{stroke-dashoffset:-244}} @keyframes networkNodeBreath{0%,100%{opacity:.62;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}} .landing-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 68px;border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);overflow:hidden;box-shadow:var(--ui-shadow-1)} .landing-stat{padding:22px 24px;border-left:1px solid var(--ui-border)} .landing-stat:first-child{border-left:0} .landing-stat b{display:block;color:var(--ui-primary);font-family:var(--disp);font-size:var(--fs-2xl);line-height:1.15} .landing-stat span{display:block;margin-top:6px;color:var(--ui-text-strong);font-size:var(--fs-sm);font-weight:600;line-height:1.45} .landing-stat small{display:block;margin-top:5px;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.5} .landing-section{padding:34px 0 58px} .landing-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px} .landing-section-head h2{margin:8px 0 0;color:var(--ui-text-strong);font-family:var(--disp);font-size:var(--fs-2xl)} .landing-section-head p{max-width:520px;margin:0;color:var(--ui-text-muted);font-size:var(--fs-sm);line-height:1.7} .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .industry-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .industry-card{position:relative;min-height:350px;margin:0;overflow:hidden;border-radius:18px;background:var(--ui-media-surface);box-shadow:var(--ui-shadow-2)} .industry-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .4s ease} .industry-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,42,.04) 28%,rgba(10,20,42,.88) 100%)} .industry-card:hover img{transform:scale(1.025)} .industry-card figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:20px;color:var(--on-accent)} .industry-card figcaption small{display:block;margin-bottom:6px;color:color-mix(in srgb,var(--on-accent) 76%,var(--ui-primary-tint));font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .industry-card figcaption b{display:block;color:var(--on-accent);font-size:var(--fs-xl);line-height:1.35;text-shadow:0 1px 8px rgba(5,12,26,.55)} .industry-card figcaption span{display:block;margin-top:6px;color:rgba(255,255,255,.9);font-size:var(--fs-xs);line-height:1.55;text-shadow:0 1px 6px rgba(5,12,26,.5)} .asset-note{margin:12px 0 0;color:var(--ui-text-muted);font-size:var(--fs-2xs)} .asset-note a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px} .map-credit{margin-top:10px;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.6} .map-credit a{color:var(--ui-primary);text-decoration:underline;text-underline-offset:2px} .site-brand .mark{background:transparent;box-shadow:none;border-radius:0} .mega .mg-h{padding-bottom:10px;border-bottom:2px solid var(--ui-primary)} .mega button.mg-h{width:100%;border-top:0;border-right:0;border-left:0;background:transparent;text-align:left;font-family:var(--body);cursor:default} .mega .mg-h.clickable{cursor:pointer} .mega .mg-h.clickable:hover b{color:var(--ui-primary)} .mega .mg-h b{color:var(--ui-primary-strong);font-size:var(--fs-base);line-height:1.35} .mega .mg-h span{color:var(--ui-text);font-weight:500} .mg-feat.warn{background:linear-gradient(160deg,var(--ui-primary-tint),var(--ui-surface-subtle));border-color:var(--steel-line)} .mg-feat.warn .mgf-tag{color:var(--ui-primary)} .mg-feat.warn .mgf-n{color:var(--ui-danger)} .mg-feat.warn .mgf-l{font-size:var(--fs-2xs);line-height:1.55} .chain-view .tb-chip,.chain-view .tb-clear{border-radius:var(--ui-radius-sm)} .chain-view .tb-chip.on{background:color-mix(in srgb,var(--ui-primary-tint) 72%,var(--ui-surface));border-color:var(--steel-line);color:var(--ui-primary-strong)} .chain-view .vc-zone{box-shadow:none} .chain-view .breadcrumb{padding-bottom:10px} .chain-overview{ margin-top:6px;padding:20px 22px 0;background:var(--ui-surface); border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-1);overflow:hidden } .chain-overview .chain-hd{padding:0 0 18px;gap:14px;align-items:center} .chain-overview .chain-hd .big-ico{width:50px;height:50px;border-radius:11px} .chain-overview .chain-hd .big-ico svg{width:26px;height:26px} .chain-overview .chain-copy{min-width:0} .chain-overview .chain-hd h1{font-size:var(--fs-xl);line-height:1.3;margin-bottom:5px} .chain-overview .chain-hd p{max-width:920px;font-size:var(--fs-sm);line-height:1.65} .chain-overview .theme-bar{ margin:0 -22px;padding:11px 22px;gap:7px;flex-wrap:nowrap;overflow-x:auto; background:var(--ui-surface-subtle);border-top:1px solid var(--ui-border); scrollbar-width:none;overscroll-behavior-inline:contain } .chain-overview .theme-bar::-webkit-scrollbar{display:none} .chain-overview .tb-label{flex:0 0 auto;padding-right:11px;border-right:1px solid var(--ui-border);white-space:nowrap} .chain-overview .tb-chip,.chain-overview .tb-clear{flex:0 0 auto;min-height:34px;padding:6px 12px;white-space:nowrap} .chain-view .vc-guide{ display:flex;align-items:center;justify-content:space-between;gap:8px 16px; margin:11px 2px 9px;color:var(--ui-text-muted);font-size:var(--fs-xs) } .chain-view .vc-guide span{display:inline-flex;align-items:center;gap:6px} .chain-view .vc-guide span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ui-primary);opacity:.65} .chain-view .vc-guide .guide-note::before{background:var(--ui-text-muted);opacity:.45} .chain-view .vc-diagram{gap:10px} .chain-view .vc-zone-hd{padding:11px 13px} .chain-view .vc-zone-body{padding:10px;gap:8px} .chain-view .seg-box{padding:10px 11px;gap:7px} @media(max-width:760px){ .chain-view .breadcrumb{padding:13px 0 8px;white-space:nowrap;overflow-x:auto;scrollbar-width:none} .chain-view .breadcrumb::-webkit-scrollbar{display:none} .chain-overview{margin-top:3px;padding:15px 15px 0;border-radius:var(--ui-radius-md)} .chain-overview .chain-hd{ display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center; column-gap:11px;row-gap:0;padding-bottom:14px } .chain-overview .chain-hd .big-ico{width:44px;height:44px;border-radius:10px;grid-column:1} .chain-overview .chain-hd .big-ico svg{width:23px;height:23px} .chain-overview .chain-copy{display:contents} .chain-overview .chain-hd h1{grid-column:2;font-size:var(--fs-lg);line-height:1.3;margin:0} .chain-overview .chain-hd p{grid-column:1 / -1;margin-top:10px;font-size:var(--fs-xs);line-height:1.65} .chain-overview .theme-bar{margin:0 -15px;padding:9px 15px;gap:6px} .chain-overview .tb-label{ position:sticky;left:0;z-index:2;margin-left:-2px;padding:7px 10px 7px 2px; background:var(--ui-surface-subtle) } .chain-overview .tb-chip,.chain-overview .tb-clear{min-height:32px;padding:5px 10px;font-size:var(--fs-xs)} .chain-view .vc-guide{flex-wrap:wrap;margin:9px 2px 7px;gap:4px 12px;font-size:var(--fs-2xs)} .chain-view .vc-diagram{gap:6px} .chain-view .vc-conn{flex-basis:16px;height:16px} .chain-view .vc-zone-hd{padding:10px 12px} .chain-view .vc-zone-body{padding:9px;gap:7px} } .geo-wrap{grid-template-columns:minmax(400px,440px) minmax(0,1fr)} .geo-map{padding:18px} .tw-map{max-height:650px} .tw-base{opacity:.96} .pin{outline:none} .pin:focus-visible .pin-dot{stroke:var(--ui-selection-border);stroke-width:9} .pin-n{font-size:34px;font-weight:800} .pin-lb{font-size:32px;font-weight:700;paint-order:stroke;stroke:rgba(255,255,255,.96);stroke-width:9px;stroke-linejoin:round} /* Geography workspace：完整地圖與資料同步對照。 */ .geo-view{max-width:1480px} .geo-view .sp-hero{display:grid;grid-template-columns:minmax(0,.72fr) minmax(360px,1.28fr);gap:48px;align-items:end;padding-bottom:26px} .geo-view .sp-hero .sub{max-width:none;margin:0} .geo-workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.75fr);gap:20px;align-items:stretch} .geo-map-panel,.geo-data-panel{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1)} .geo-map-panel{display:flex;min-width:0;flex-direction:column;padding:18px} .geo-map-stage{display:grid;place-items:center;min-height:640px;flex:1;overflow:hidden;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle)} .geo-map-stage .tw-map{width:100%;height:min(68vh,760px);min-height:640px;max-height:none;display:block} .pin.selected .pin-halo{opacity:.24} .pin.selected .pin-dot{stroke:var(--on-accent);stroke-width:9;filter:drop-shadow(0 7px 12px rgba(23,32,51,.24))} .pin.selected .pin-lb{fill:var(--ui-primary-strong)} .geo-data-panel{display:flex;min-height:0;max-height:calc(min(68vh,760px) + 128px);flex-direction:column;overflow:hidden;position:sticky;top:78px} .geo-data-head{padding:20px 20px 16px;border-bottom:1px solid var(--ui-border)} .geo-data-head small{display:block;color:var(--ui-primary);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase} .geo-data-head h2{margin:5px 0 3px;color:var(--ui-text-strong);font-size:var(--fs-xl);line-height:1.35} .geo-data-head p{margin:0;color:var(--ui-text-muted);font-size:var(--fs-xs)} .geo-focus{padding:18px 20px;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-subtle)} .geo-focus p{margin:0 0 14px;color:var(--ui-text);font-size:var(--fs-sm);line-height:1.65} .geo-focus-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px} .geo-focus-metrics span{padding:10px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface)} .geo-focus-metrics b{display:block;color:var(--ui-primary);font:700 var(--fs-lg)/1.2 var(--mono)} .geo-focus-metrics small{display:block;margin-top:3px;color:var(--ui-text-muted);font-size:var(--fs-3xs)} .geo-risk-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;margin-bottom:14px} .geo-risk-mini span{display:grid;grid-template-columns:32px 1fr 24px;gap:6px;align-items:center;color:var(--ui-text-muted);font-size:var(--fs-2xs)} .geo-risk-mini i{height:6px;overflow:hidden;border-radius:999px;background:var(--ui-surface-muted)} .geo-risk-mini i::before{content:'';display:block;width:var(--risk-w);height:100%;border-radius:inherit;background:var(--ui-primary)} .geo-risk-mini em{font-style:normal;text-align:right;font-family:var(--mono);color:var(--ui-text)} .geo-detail-btn{width:100%;min-height:42px;border:1px solid var(--ui-primary);border-radius:var(--ui-radius-sm);background:var(--ui-primary);color:var(--on-accent);font-weight:700} .geo-detail-btn:hover{background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)} .geo-list-title{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px;color:var(--ui-text-strong);font-size:var(--fs-sm);font-weight:700} .geo-list-title span{color:var(--ui-text-muted);font:500 var(--fs-2xs)/1 var(--mono)} .geo-cluster-list{min-height:0;overflow:auto;padding:4px 12px 14px;overscroll-behavior:contain} .geo-cluster-card{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:12px;margin-top:7px;text-align:left;border:1px solid transparent;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text)} .geo-cluster-card:hover{border-color:var(--ui-border);background:var(--ui-surface-subtle)} .geo-cluster-card.active{border-color:var(--steel-line);background:var(--ui-primary-tint)} .geo-cluster-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-strong);font-size:var(--fs-sm)} .geo-cluster-card .gcc-risk{font:700 var(--fs-sm)/1 var(--mono);color:var(--ui-primary)} .geo-cluster-card small{color:var(--ui-text-muted);font-size:var(--fs-2xs)} .geo-cluster-card .gcc-chains{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap} .geo-cluster-card .gcc-chains i{padding:2px 6px;border-radius:5px;background:var(--ui-surface-muted);color:var(--ui-text);font-size:var(--fs-3xs);font-style:normal} .geo-map-panel .gm-tabs{margin-bottom:14px} .geo-map-panel .gm-legend{margin-bottom:2px} .geo-view > .geo-note{margin:14px 0 0;color:var(--ui-text-muted);font-size:var(--fs-xs);line-height:1.65} @media(max-width:1024px){ .landing-hero{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:28px;padding-top:48px} .landing-copy h1{font-size:clamp(2.4rem,5.8vw,3.8rem)} .landing-visual{min-height:430px} .landing-photo{inset:0 0 34px 24px} .geo-workspace{grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:14px} .geo-map-stage{min-height:560px} .geo-map-stage .tw-map{height:600px;min-height:560px} } @media(max-width:920px){ .geo-view .sp-hero{grid-template-columns:1fr;gap:12px} .geo-workspace{grid-template-columns:1fr} .geo-data-panel{position:static;max-height:none} .geo-cluster-list{max-height:420px} } @media(max-width:760px){ #app{padding-top:56px} .landing-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:38px 0 28px} .landing-copy,.landing-visual{width:100%;min-width:0;margin-inline:auto} .landing-copy h1{font-size:2.55rem;letter-spacing:-.025em} .landing-copy .lead{font-size:var(--fs-md)} .landing-hero::before{opacity:.38} .landing-search{grid-template-columns:minmax(0,1fr) auto;width:100%;margin:28px 0 0;padding:6px} .landing-search button{width:52px} .landing-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin:18px 0 0} .landing-actions button{width:100%;min-height:52px;border-radius:14px} .landing-visual{min-height:330px} .landing-photo{inset:0 0 24px;border-radius:18px} .landing-world-map{top:76px;bottom:auto;width:148vw;max-width:none;opacity:.1} .landing-signal{display:none} .landing-stats{grid-template-columns:repeat(2,1fr);margin-bottom:44px} .landing-stat:nth-child(3){border-left:0;border-top:1px solid var(--ui-border)} .landing-stat:nth-child(4){border-top:1px solid var(--ui-border)} .landing-section{padding:26px 0 42px} .landing-section-head{display:block} .landing-section-head p{margin-top:10px} .how-grid,.industry-gallery{grid-template-columns:1fr} .industry-card{min-height:300px} .geo-wrap{grid-template-columns:1fr} .tw-map{max-height:560px} .geo-map-panel{padding:10px} .geo-map-stage{min-height:480px} .geo-map-stage .tw-map{height:520px;min-height:480px} .geo-focus-metrics{grid-template-columns:repeat(3,1fr)} .geo-risk-mini{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ── 國際對局詳情：市場圓餅與首屏核心判斷 ── */ .arena-workspace{ display:grid;grid-template-columns:minmax(0,1.16fr) minmax(390px,.84fr);gap:18px; margin-top:22px;align-items:stretch } .arena-market,.arena-core,.arena-support-card{ background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-1) } .arena-market{padding:22px} .arena-block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px} .arena-block-head h2{margin:0;font-family:var(--disp);font-size:var(--fs-xl);font-weight:650;color:var(--ui-text-strong)} .arena-block-head p{margin:0;max-width:430px;text-align:right;font-size:var(--fs-xs);line-height:1.55;color:var(--ui-text-muted)} .arena-market-body{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:26px;align-items:center} .arena-pie-figure{margin:0;display:grid;justify-items:center;gap:13px} .arena-pie{ width:min(100%,250px);aspect-ratio:1;border-radius:50%;background:var(--pie); border:8px solid var(--ui-surface);box-shadow:0 0 0 1px var(--ui-border),0 14px 34px rgba(23,32,51,.12); animation:arenaPieIn .58s var(--motion-enter) both } @keyframes arenaPieIn{from{opacity:0;transform:scale(.9) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}} .arena-pie-figure figcaption{text-align:center;font-size:var(--fs-xs);line-height:1.55;color:var(--ui-text-muted)} .arena-pie-figure figcaption b{display:block;font-family:var(--mono);font-size:var(--fs-2xl);line-height:1.15;color:var(--ui-primary-strong)} .arena-country-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .arena-country{ min-width:0;padding:11px 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md); background:var(--ui-surface-subtle) } .arena-country.tw{background:var(--ui-primary-tint);border-color:var(--steel-line)} .arena-country-head{display:flex;align-items:center;gap:7px;min-width:0} .arena-country-flag{font-size:var(--fs-sm);line-height:1} .arena-country-name{font-size:var(--fs-xs);font-weight:700;color:var(--ui-text-strong)} .arena-country-pct{margin-left:auto;font-family:var(--mono);font-size:var(--fs-md);font-weight:750} .arena-country-players{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:7px;min-height:25px} .arena-country-players .arc-note{font-size:var(--fs-3xs)} .arena-analysis{display:grid;grid-template-rows:minmax(0,1.25fr) minmax(0,.75fr);gap:12px} .arena-core{ position:relative;overflow:hidden;padding:22px; background:linear-gradient(145deg,var(--ui-primary-tint),var(--ui-surface) 72%); border-color:var(--steel-line) } .arena-core::after{ content:"";position:absolute;right:-58px;top:-70px;width:190px;height:190px;border-radius:50%; background:color-mix(in srgb,var(--ui-primary) 10%,transparent);pointer-events:none } .arena-core-kicker{position:relative;z-index:1;display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:750;color:var(--ui-primary-strong)} .arena-core-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-primary) 13%,transparent)} .arena-core h2{position:relative;z-index:1;margin:17px 0 8px;font-family:var(--disp);font-size:var(--fs-xl);font-weight:650;color:var(--ui-text-strong)} .arena-core p{position:relative;z-index:1;margin:0;font-size:var(--fs-base);line-height:1.8;color:var(--ui-text-strong)} .arena-core-action{position:relative;z-index:1;margin-top:18px} .arena-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .arena-support-card{padding:16px 17px} .arena-support-card h3{margin:0 0 4px;font-size:var(--fs-sm);color:var(--ui-primary-strong)} .arena-support-card .ar-txt{font-size:var(--fs-xs);line-height:1.7} .arena-detail .ar-legend{background:var(--ui-surface);border-color:var(--ui-border);box-shadow:var(--ui-shadow-1)} .arena-detail .ar-row{ background:var(--ui-surface);border-color:var(--ui-border);border-left-color:var(--ui-border); box-shadow:var(--ui-shadow-1);grid-template-columns:minmax(210px,1.2fr) minmax(260px,1.4fr) 126px } .arena-detail .ar-row.absent,.arena-detail .ar-row.weak,.arena-detail .ar-row.declining{background:var(--ui-surface)} .arena-detail .ar-row.dominant,.arena-detail .ar-row.strong{border-left-color:var(--ui-primary)} .arena-detail .ar-row.mid{border-left-color:color-mix(in srgb,var(--ui-primary) 42%,var(--ui-border))} .arena-detail .arr-pos,.arena-detail .ah-pos{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .arena-detail .arr-pos.p0,.arena-detail .arr-pos.p1,.arena-detail .ah-pos.p0,.arena-detail .ah-pos.p1{ background:var(--ui-surface-subtle);color:var(--ui-primary-strong);border:1px solid var(--steel-line) } .arena-detail .arr-tags span{color:var(--ui-text-muted)} .arena-detail .arr-tags span.tw{color:var(--ui-primary);font-weight:750} .arena-detail .ar-bar{height:12px;border-radius:999px;background:var(--ui-surface-subtle)} .arena-detail .ar-bar i{filter:saturate(.72);opacity:.95} .dm-path{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:stretch} .dm-step{ position:relative;min-height:132px;background:var(--ui-surface);border:1px solid var(--ui-border); border-radius:var(--ui-radius-md);padding:16px 17px;box-shadow:var(--ui-shadow-1) } .dm-step::after{ content:"";position:absolute;right:-9px;top:50%;width:18px;height:18px;transform:translateY(-50%) rotate(45deg); background:var(--ui-surface);border-top:1px solid var(--ui-border);border-right:1px solid var(--ui-border);z-index:1 } .dm-step:last-child::after{display:none} .dm-step.origin,.dm-step.gate{background:var(--ui-primary-tint);border-color:var(--steel-line)} .dm-step.gate{background:var(--ui-surface-subtle)} .dm-step-k{font-size:var(--fs-2xs);font-weight:750;color:var(--ui-primary);letter-spacing:.02em} .dm-step h3{margin:8px 0 4px;font-family:var(--disp);font-size:var(--fs-base);font-weight:700;color:var(--ui-text-strong);line-height:1.35} .dm-step-sub{font-size:var(--fs-2xs);color:var(--ui-text-muted);line-height:1.5} .dm-step-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} .dm-step-list span,.dm-step-list button{ min-height:28px;border-radius:7px;border:1px solid var(--ui-border);background:var(--ui-surface); padding:4px 8px;font-family:var(--body);font-size:var(--fs-2xs);font-weight:650;color:var(--ui-text);box-shadow:none } .dm-step-list button{cursor:pointer} .dm-step-list button:hover{border-color:var(--steel-line);color:var(--ui-primary-strong)} @media(max-width:760px){.dm-step::after{display:none}.dm-path{grid-template-columns:1fr}} /* 國際對局詳情：台廠卡片。之前只有 markup 沒有元件樣式，會退化成原生 button。 */ .co-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px; margin-top:14px } .co-card{ position:relative;min-width:0;min-height:132px;padding:16px 44px 15px 16px; display:flex;flex-direction:column;align-items:stretch;text-align:left; border:1px solid var(--ui-border);border-radius:var(--ui-radius-md); background:var(--ui-surface);box-shadow:var(--ui-shadow-1); transition:transform var(--motion-fast) var(--ui-ease),border-color var(--motion-fast) var(--ui-ease),box-shadow var(--motion-fast) var(--ui-ease),background var(--motion-fast) var(--ui-ease) } .co-card::after{ content:"↗";position:absolute;right:16px;top:15px;color:var(--ui-primary); font-size:var(--fs-sm);font-weight:750;line-height:1 } .co-card:hover{ transform:translateY(-2px);border-color:color-mix(in srgb,var(--ui-primary) 38%,var(--ui-border)); background:color-mix(in srgb,var(--ui-primary-tint) 34%,var(--ui-surface));box-shadow:var(--ui-shadow-2) } .co-card:active{transform:translateY(0)} .co-card .cc-n{ display:flex;align-items:baseline;gap:7px;min-width:0;color:var(--ui-text-strong); font-family:var(--disp);font-size:var(--fs-md);font-weight:700;line-height:1.35 } .co-card .cc-n em{ flex:none;color:var(--ui-text-muted);font-family:var(--mono);font-size:var(--fs-2xs); font-style:normal;font-weight:650;letter-spacing:.02em } .co-card .cc-c{ display:block;margin-top:7px;color:var(--ui-text);font-size:var(--fs-xs);line-height:1.5 } .co-card .cc-m{ display:block;margin-top:auto;padding-top:12px;color:var(--ui-primary-strong); font-family:var(--mono);font-size:var(--fs-2xs);font-weight:700;line-height:1.35 } .co-card .cc-m:empty{display:none} @media(max-width:1080px){ .arena-workspace{grid-template-columns:1fr} .arena-analysis{grid-template-rows:auto auto} } @media(max-width:700px){ .arena-market{padding:17px} .arena-block-head{display:block} .arena-block-head p{text-align:left;margin-top:6px} .arena-market-body{grid-template-columns:1fr;gap:20px} .arena-pie{width:min(72vw,235px)} .arena-support{grid-template-columns:1fr} .co-grid{grid-template-columns:1fr} .co-card{min-height:112px} } @media(max-width:480px){.arena-country-grid{grid-template-columns:1fr}} /* 知識關係圖譜：來源治理留在資料層，使用者介面只呈現探索任務。 */ .kg-view{padding-bottom:64px} .kg-view .breadcrumb{padding-bottom:6px} .kg-head{display:flex;gap:16px;align-items:center;margin:0 0 12px} .kg-head h1{margin:0;font-family:var(--disp);font-size:var(--fs-xl);line-height:1.3;color:var(--ui-text-strong)} .kg-toolbar{margin:0 0 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1);overflow:hidden} .kg-picker-bar{min-height:64px;padding:9px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center} .kg-picker-toggle{min-width:190px;min-height:44px;padding:5px 8px 5px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) 32px;gap:8px;align-items:center;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);text-align:left;color:var(--ui-text-muted)} .kg-picker-toggle:hover{border-color:var(--ui-selection-border);background:var(--ui-selection-bg)} .kg-picker-kicker{font-size:var(--fs-2xs);font-weight:700;color:var(--ui-primary-strong);white-space:nowrap} .kg-picker-toggle b{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);color:var(--ui-text-strong)} .kg-picker-chevron{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--ui-surface-subtle);color:var(--ui-primary);transition:transform var(--motion-fast) var(--ui-ease)} .kg-picker-chevron svg{width:16px;height:16px;display:block} .kg-picker.is-open .kg-picker-chevron{transform:rotate(180deg)} .kg-quick-picks{min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;padding:3px;scrollbar-width:none;overscroll-behavior-inline:contain} .kg-quick-picks::-webkit-scrollbar{display:none} .kg-quick-label{flex:0 0 auto;margin-right:2px;font-size:var(--fs-3xs);font-weight:700;color:var(--ui-text-muted)} .kg-quick{flex:0 0 auto;min-height:34px;padding:0 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-text);font-size:var(--fs-2xs);font-weight:700;white-space:nowrap} .kg-quick:hover{border-color:var(--ui-selection-border);background:var(--ui-selection-bg);color:var(--ui-primary-strong)} .kg-picker-count{display:inline-flex;align-items:center;gap:8px;justify-self:end;min-height:36px;padding:0 12px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface-subtle);font-size:var(--fs-3xs);white-space:nowrap;color:var(--ui-text-muted)} .kg-picker-count b{font-family:var(--body);font-weight:850;color:var(--ui-primary-strong)} .kg-picker-count em{font-style:normal;font-family:var(--mono);font-weight:750;color:var(--ui-text-muted)} .kg-picker-panel{padding:12px 14px 14px;border-top:1px solid var(--ui-border);background:var(--ui-surface-subtle)} .kg-picker-panel[hidden]{display:none} .kg-toolbar-top{display:block;max-width:620px} .kg-workspace{display:grid;grid-template-columns:minmax(520px,1fr) minmax(260px,310px);gap:14px;align-items:stretch} .kg-panel,.kg-stage,.kg-detail{min-width:0;border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background:var(--ui-surface);box-shadow:var(--ui-shadow-1)} .kg-panel,.kg-detail{padding:14px} .kg-panel{display:flex;flex-direction:column} .kg-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px} .kg-search input{width:100%;height:40px;min-width:0;padding:0 11px;border:1px solid var(--ui-control-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);color:var(--ui-text-strong);font:600 var(--fs-xs)/1 var(--body)} .kg-search input:focus{outline:none;border-color:var(--ui-selection-border);box-shadow:var(--ui-selection-shadow)} .kg-search button{height:40px;padding:0 12px;border:0;border-radius:var(--ui-radius-sm);background:var(--ui-primary);color:var(--on-accent);font-size:var(--fs-2xs);font-weight:750} .kg-types{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;border:0} .kg-types legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .kg-type{flex:0 0 auto;min-height:32px;padding:0 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-text-muted);font-size:var(--fs-3xs);font-weight:750;white-space:nowrap} .kg-type.on{border-color:var(--steel-line);background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .kg-results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;max-height:min(52vh,430px);margin-top:10px;padding:2px 4px 4px 2px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .kg-result{width:100%;min-height:42px;padding:7px 9px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;border:1px solid transparent;border-radius:var(--ui-radius-sm);background:transparent;color:var(--ui-text)} .kg-toolbar .kg-result{width:100%;border-color:var(--ui-border);background:var(--ui-surface)} .kg-result:hover,.kg-result.on{background:var(--ui-primary-tint);border-color:var(--steel-line)} .kg-result-dot{width:8px;height:8px;border-radius:50%;background:var(--kg-color,var(--ui-primary))} .kg-result b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2xs);color:var(--ui-text-strong)} .kg-result small{display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-result em{font-family:var(--mono);font-size:var(--fs-3xs);font-style:normal;color:var(--ui-text-muted)} .kg-empty{padding:24px 12px;text-align:center;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-md);font-size:var(--fs-xs);line-height:1.6;color:var(--ui-text-muted)} .kg-stage{position:relative;min-height:640px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 50%,var(--ui-primary-tint),transparent 32%),var(--ui-surface-subtle)} .kg-stage::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.42;background-image:radial-gradient(circle,var(--ui-border-strong) 1px,transparent 1px);background-size:24px 24px} .kg-stage::after{content:"";position:absolute;z-index:0;inset:-18%;pointer-events:none;opacity:.45;background:conic-gradient(from 120deg at 50% 51%,transparent 0 18%,color-mix(in srgb,var(--ui-primary) 13%,transparent) 24%,transparent 31% 54%,color-mix(in srgb,var(--ui-success) 10%,transparent) 61%,transparent 68% 100%);animation:kgFieldSpin 38s linear infinite} .kg-stage.native{background:radial-gradient(circle at 50% 48%,var(--ui-surface) 0 16%,var(--ui-surface-subtle) 48%,var(--ui-success-tint) 100%)} .kg-force-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;cursor:grab;touch-action:none} .kg-force-canvas:active{cursor:grabbing} .kg-native-note{position:absolute;z-index:4;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;pointer-events:none} .kg-native-note b{font-size:var(--fs-xs);color:var(--ui-text-strong)} .kg-native-note span{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-native-contract{display:none} .kg-stage-head{position:absolute;z-index:4;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;pointer-events:none} .kg-stage-head b{font-size:var(--fs-xs);color:var(--ui-text-strong)} .kg-stage-head span{font-family:var(--mono);font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-stage-tools{position:absolute;z-index:5;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;gap:12px;align-items:flex-end;pointer-events:none} .kg-modebar{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--ui-surface) 94%,transparent);box-shadow:0 6px 18px rgba(23,32,51,.08);pointer-events:auto} .kg-mode{min-height:34px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--ui-text-muted);font-size:var(--fs-2xs);font-weight:750} .kg-mode.on{background:var(--ui-primary);color:var(--on-accent)} .kg-legend{max-width:360px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;pointer-events:none} .kg-legend span{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--ui-border);border-radius:999px;background:color-mix(in srgb,var(--ui-surface) 90%,transparent);font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-legend i{width:7px;height:7px;border-radius:50%;background:var(--kg-color)} .kg-lines{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none} .kg-edge{stroke:color-mix(in srgb,var(--ui-primary) 34%,var(--ui-border));stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:7 13;animation:kgEdgeFlow 7s linear infinite} .kg-node{--kg-color:var(--ui-primary);position:absolute;z-index:2;left:var(--x);top:var(--y);width:62px;height:62px;min-height:62px;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--kg-color) 42%,var(--ui-border));border-radius:50%;background:var(--ui-surface);color:var(--ui-text-strong);box-shadow:0 7px 22px rgba(23,32,51,.12);animation:kgNodeIn 360ms var(--motion-enter) both} .kg-node:hover{z-index:5;transform:translate(-50%,-50%) scale(1.06);border-color:var(--kg-color);box-shadow:0 10px 28px color-mix(in srgb,var(--kg-color) 20%,transparent)} .kg-node:focus-visible{z-index:6;outline:2px solid var(--ui-selection-border);outline-offset:3px;box-shadow:var(--ui-selection-shadow)} .kg-node span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--kg-color) 13%,var(--ui-surface));font-size:var(--fs-xs);font-weight:800;color:color-mix(in srgb,var(--kg-color) 72%,var(--ui-text-strong))} .kg-node em{position:absolute;top:calc(100% + 5px);left:50%;max-width:110px;transform:translateX(-50%);padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--ui-surface) 90%,transparent);font-size:var(--fs-3xs);font-style:normal;font-weight:650;line-height:1.25;white-space:nowrap;color:var(--ui-text);box-shadow:0 1px 5px rgba(23,32,51,.06)} .kg-node.center{z-index:3;width:92px;height:92px;min-height:92px;border-width:2px;background:color-mix(in srgb,var(--kg-color) 8%,var(--ui-surface));box-shadow:0 16px 42px color-mix(in srgb,var(--kg-color) 22%,transparent)} .kg-node.center span{width:50px;height:50px;font-size:var(--fs-sm)} .kg-node.center em{max-width:160px;font-size:var(--fs-2xs);font-weight:750} .kg-node.kg-obsidian-node{--kg-color:var(--ui-primary);--dx:0;--dy:0;--delay:0s;position:absolute;z-index:2;left:var(--x);top:var(--y);width:14px;height:14px;min-height:14px;padding:0;display:block;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--kg-color) 70%,var(--ui-surface));border-radius:50%;background:var(--kg-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--kg-color) 10%,transparent);animation:kgObsidianDrift 6.8s ease-in-out var(--delay) infinite alternate} .kg-node.kg-obsidian-node:hover,.kg-node.kg-obsidian-node.on{z-index:6;width:26px;height:26px;min-height:26px;border-color:var(--on-accent);box-shadow:0 0 0 7px color-mix(in srgb,var(--kg-color) 15%,transparent),0 14px 34px color-mix(in srgb,var(--kg-color) 36%,transparent);animation:kgObsidianPulse 1.9s ease-in-out infinite} .kg-obsidian-node:focus-visible{z-index:7;outline:2px solid var(--ui-selection-border);outline-offset:3px;box-shadow:var(--ui-selection-shadow)} .kg-obsidian-label{position:absolute;z-index:3;left:var(--x);top:calc(var(--y) + 13px);max-width:110px;transform:translateX(-50%);padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--ui-surface) 88%,transparent);font-size:var(--fs-3xs);font-weight:700;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ui-text-strong);animation:kgLabelBreathe 4.8s ease-in-out var(--delay,0s) infinite alternate} .kg-obsidian-edge{stroke:color-mix(in srgb,var(--ui-text-muted) 24%,transparent);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-dasharray:3 12;animation:kgEdgeFlow 12s linear infinite} .kg-obsidian-edge.hot{stroke:color-mix(in srgb,var(--ui-primary) 58%,transparent);stroke-width:1.25;stroke-dasharray:4 8;animation-duration:4.6s} @keyframes kgNodeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes kgFieldSpin{to{transform:rotate(1turn)}} @keyframes kgEdgeFlow{to{stroke-dashoffset:-80}} @keyframes kgObsidianDrift{0%{margin-left:calc(var(--dx) * -.45px);margin-top:calc(var(--dy) * -.45px);filter:saturate(.9);opacity:.78}55%{opacity:1}100%{margin-left:calc(var(--dx) * .75px);margin-top:calc(var(--dy) * .75px);filter:saturate(1.2);opacity:.9}} @keyframes kgObsidianPulse{0%,100%{transform:translate(-50%,-50%) scale(1);filter:saturate(1)}50%{transform:translate(-50%,-50%) scale(1.2);filter:saturate(1.35)}} @keyframes kgLabelBreathe{from{opacity:.72}to{opacity:1}} @media (prefers-reduced-motion: reduce){.kg-stage::after,.kg-edge,.kg-obsidian-edge,.kg-node.kg-obsidian-node,.kg-node.kg-obsidian-node:hover,.kg-node.kg-obsidian-node.on,.kg-obsidian-label{animation:none}} .kg-company{--kg-color:var(--ui-primary)}.kg-industry_chain{--kg-color:var(--ui-accent)}.kg-chain_segment{--kg-color:var(--ui-data-chain)}.kg-product_chain{--kg-color:var(--ui-data-product)}.kg-product_step{--kg-color:var(--ui-data-step)}.kg-cluster{--kg-color:var(--ui-data-cluster)}.kg-buyer{--kg-color:var(--ui-data-buyer)} .kg-detail-type{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--ui-radius-sm);background:var(--ui-primary-tint);color:var(--ui-primary-strong);font-size:var(--fs-2xs);font-weight:700} .kg-detail h2{margin:12px 0 4px;font-family:var(--disp);font-size:var(--fs-xl);line-height:1.3;color:var(--ui-text-strong)} .kg-detail-sub{font-size:var(--fs-xs);line-height:1.55;color:var(--ui-text-muted)} .kg-detail-desc{margin:14px 0;padding:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface-subtle);font-size:var(--fs-xs);line-height:1.7;color:var(--ui-text)} .kg-detail-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0} .kg-detail-metrics div{padding:10px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface)} .kg-detail-metrics b{display:block;font-family:var(--mono);font-size:var(--fs-lg);color:var(--ui-primary-strong)} .kg-detail-metrics span{font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-rel-types{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px} .kg-rel-types span{padding:4px 7px;border-radius:6px;background:var(--ui-surface-muted);font-size:var(--fs-3xs);color:var(--ui-text-muted)} .kg-cta{width:100%;min-height:44px;padding:9px 12px;border:0;border-radius:var(--ui-radius-sm);background:var(--ui-primary);color:var(--on-accent);font-weight:750} .kg-no-route{padding:10px 11px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-sm);font-size:var(--fs-2xs);line-height:1.55;color:var(--ui-text-muted)} .kg-relation-list{margin-top:14px;padding-top:13px;border-top:1px solid var(--ui-border)} .kg-relation-list > b{display:block;margin-bottom:8px;font-size:var(--fs-xs);color:var(--ui-text-strong)} .kg-relation-row{width:100%;min-height:44px;padding:7px 5px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--ui-border);background:transparent;color:var(--ui-text)} .kg-relation-row:hover{background:var(--ui-primary-tint)} .kg-relation-row i{font-style:normal;color:var(--ui-primary)} .kg-relation-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2xs)} .kg-relation-row em{font-family:var(--mono);font-size:var(--fs-3xs);font-style:normal;color:var(--ui-text-muted)} .kg-evidence-entry{margin-top:12px;padding:12px;border:1px solid var(--ui-selection-border);border-radius:var(--ui-radius-md);background:var(--ui-primary-tint)} .kg-evidence-entry b,.kg-evidence-entry span{display:block}.kg-evidence-entry b{font-size:var(--fs-xs);color:var(--ui-text-strong)}.kg-evidence-entry span{margin:4px 0 9px;font-size:var(--fs-3xs);line-height:1.55;color:var(--ui-text-muted)} .kg-evidence-open{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--ui-primary);border-radius:var(--ui-radius-sm);background:var(--ui-primary);color:var(--on-accent);font-weight:800} .kg-evidence-scrim{position:fixed;z-index:500;inset:0;padding:24px;display:grid;place-items:center;background:rgba(12,18,31,.52);backdrop-filter:blur(3px)} .kg-evidence-drawer{width:min(1180px,100%);height:min(820px,calc(100vh - 48px));display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;border:1px solid var(--ui-border-strong);border-radius:18px;background:var(--ui-surface);box-shadow:0 28px 80px rgba(10,16,28,.28)} .kg-ev-head{padding:17px 18px 13px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:1px solid var(--ui-border)} .kg-ev-kicker{font-family:var(--mono);font-size:var(--fs-3xs);font-weight:800;color:var(--ui-primary-strong)}.kg-ev-head h2{margin:4px 0;font-family:var(--disp);font-size:var(--fs-lg);color:var(--ui-text-strong)}.kg-ev-head p{margin:0;max-width:760px;font-size:var(--fs-xs);line-height:1.55;color:var(--ui-text-muted)} .kg-ev-close{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--ui-border);border-radius:50%;background:var(--ui-surface);color:var(--ui-text-strong);font-size:20px} .kg-ev-summary{padding:10px 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-subtle)} .kg-ev-summary > span,.kg-ev-block-shortcut{min-height:32px;padding:6px 9px;display:inline-flex;align-items:center;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);font-size:var(--fs-3xs);font-weight:750;color:var(--ui-text)} .kg-ev-block-shortcut{border-color:color-mix(in srgb,var(--ui-danger) 45%,var(--ui-border));color:var(--ui-danger)} .kg-ev-body{min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr)} .kg-ev-nav{min-height:0;padding:12px;border-right:1px solid var(--ui-border);background:var(--ui-surface-subtle);overflow:auto} .kg-ev-filters{display:flex;gap:5px;overflow:auto;padding:2px 2px 9px}.kg-ev-filter{min-height:34px;padding:0 9px;white-space:nowrap;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);font-size:var(--fs-3xs);font-weight:750;color:var(--ui-text-muted)}.kg-ev-filter[aria-selected="true"]{border-color:var(--ui-selection-border);background:var(--ui-selection-bg);color:var(--ui-primary-strong)} .kg-ev-records{display:grid;gap:6px}.kg-ev-record{width:100%;min-height:52px;padding:8px 9px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;text-align:left;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface);color:var(--ui-text)}.kg-ev-record[aria-selected="true"]{border-color:var(--ui-selection-border);background:var(--ui-selection-bg);box-shadow:var(--ui-selection-shadow)} .kg-ev-id{font-family:var(--mono);font-size:var(--fs-2xs);font-weight:850;color:var(--ui-primary-strong)}.kg-ev-record b,.kg-ev-record small{display:block}.kg-ev-record b{font-size:var(--fs-2xs);color:var(--ui-text-strong)}.kg-ev-record small{margin-top:3px;font-size:var(--fs-3xs);line-height:1.35;color:var(--ui-text-muted)}.kg-ev-record.is-blocked small{color:var(--ui-danger);font-weight:800} .kg-ev-detail{min-width:0;min-height:0;padding:18px 20px 28px;overflow:auto;overflow-wrap:anywhere}.kg-ev-detail h3{margin:0 0 5px;font-family:var(--disp);font-size:var(--fs-lg);color:var(--ui-text-strong)}.kg-ev-detail h4{margin:20px 0 8px;font-size:var(--fs-sm);color:var(--ui-text-strong)} .kg-ev-status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--ui-border);border-radius:999px;font-size:var(--fs-3xs);font-weight:850}.kg-ev-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ui-primary)}.kg-ev-status.blocked{color:var(--ui-danger)}.kg-ev-status.blocked::before{background:var(--ui-danger)}.kg-ev-status.scoped::before{background:var(--ui-warning)}.kg-ev-status.rewrite::before{background:var(--ui-accent)}.kg-ev-status.caveat::before{background:var(--ui-success)} .kg-ev-claim{margin:12px 0;padding:13px 14px;border-left:4px solid var(--ui-primary);border-radius:0 var(--ui-radius-sm) var(--ui-radius-sm) 0;background:var(--ui-primary-tint);font-size:var(--fs-sm);line-height:1.65;color:var(--ui-text-strong)} .kg-ev-alert{margin:10px 0;padding:11px 12px;border:1px solid color-mix(in srgb,var(--ui-danger) 42%,var(--ui-border));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--ui-danger) 7%,var(--ui-surface));font-size:var(--fs-xs);line-height:1.6;color:var(--ui-text)}.kg-ev-alert b{color:var(--ui-danger)} .kg-ev-constraints{margin:10px 0;padding:12px;border:1px solid color-mix(in srgb,var(--ui-warning) 48%,var(--ui-border));border-radius:var(--ui-radius-sm);background:color-mix(in srgb,var(--ui-warning) 8%,var(--ui-surface))}.kg-ev-constraints b{font-size:var(--fs-xs);color:var(--ui-text-strong)} .kg-ev-list{margin:7px 0 0;padding-left:20px}.kg-ev-list li{margin:5px 0;font-size:var(--fs-xs);line-height:1.6;color:var(--ui-text)} .kg-ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kg-ev-card,.kg-ev-disclosure{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface)}.kg-ev-card{padding:11px}.kg-ev-card b,.kg-ev-card span{display:block}.kg-ev-card b{font-size:var(--fs-3xs);color:var(--ui-text-muted)}.kg-ev-card span{margin-top:4px;font-size:var(--fs-xs);line-height:1.5;color:var(--ui-text-strong)} .kg-ev-disclosure{margin:8px 0;overflow:hidden}.kg-ev-disclosure summary{min-height:44px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-size:var(--fs-xs);font-weight:800;color:var(--ui-text-strong)}.kg-ev-disclosure summary small{font-size:var(--fs-3xs);font-weight:700;color:var(--ui-text-muted)}.kg-ev-disclosure-body{padding:0 12px 13px;border-top:1px solid var(--ui-border);font-size:var(--fs-xs);line-height:1.6;color:var(--ui-text)}.kg-ev-disclosure-body p{margin:9px 0}.kg-ev-disclosure-body a{overflow-wrap:anywhere;color:var(--ui-primary-strong);text-decoration:underline}.kg-ev-code{font-family:var(--mono);font-size:var(--fs-3xs);overflow-wrap:anywhere} .kg-ev-notice{margin:18px 0 0;padding:12px;border:1px dashed var(--ui-border-strong);border-radius:var(--ui-radius-sm);font-size:var(--fs-2xs);line-height:1.6;color:var(--ui-text-muted)} .kg-ev-loading,.kg-ev-error,.kg-ev-empty{padding:40px 24px;text-align:center;font-size:var(--fs-sm);line-height:1.7;color:var(--ui-text-muted)}.kg-ev-error b{display:block;color:var(--ui-danger)} /* 全站 selection contract：Hero 搜尋框是唯一視覺基準。元件可保留自己的底色， 但焦點與選取都共用淡紫細框、低透明度外環，不再出現高飽和粗紫框。 */ :is( .tab.on,.tab.active,.st-btn.on,.mchip.on,.lg.on,.tb-chip.on, .ats-btn.on,.att.on,.rp-t.on,.rp-v.on,.fvn-b.on,.gm-tb.on,.lk-b.on, .seg-box.active,.leaf.active,.geo-cluster-card.active, .kg-type.on,.kg-result.on,.kg-mode.on, [aria-selected="true"],[aria-pressed="true"] ){border-color:var(--ui-selection-border);box-shadow:var(--ui-selection-shadow)} @media(max-width:1100px){.kg-results{grid-template-columns:repeat(3,minmax(0,1fr))}.kg-workspace{grid-template-columns:1fr}.kg-detail{grid-column:auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}.kg-relation-list{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--ui-border);padding-left:18px}} @media(max-width:700px){.kg-view{padding-bottom:36px}.kg-head{align-items:flex-start}.kg-head h1{font-size:var(--fs-lg)}.kg-picker-bar{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:9px}.kg-picker-toggle{grid-column:1;min-width:0;width:100%;grid-template-columns:auto minmax(0,1fr) 32px}.kg-picker-toggle b{max-width:none}.kg-picker-count{grid-column:2;grid-row:1;padding:0 10px}.kg-picker-count b{display:none}.kg-quick-picks{grid-column:1 / -1;grid-row:2}.kg-quick{min-height:40px}.kg-picker-panel{padding:10px}.kg-results{grid-template-columns:1fr;max-height:360px}.kg-type{min-height:36px}.kg-workspace{grid-template-columns:1fr}.kg-panel,.kg-detail{padding:14px}.kg-stage{min-height:470px}.kg-stage-tools{display:block}.kg-legend{display:none}.kg-native-note{display:block}.kg-native-note span{display:block;margin-top:3px}.kg-detail{display:block}.kg-relation-list{margin-top:14px;padding:13px 0 0;border-top:1px solid var(--ui-border);border-left:0}.kg-rank-extra{display:none}.kg-node{width:54px;height:54px;min-height:54px}.kg-node span{width:30px;height:30px;font-size:var(--fs-2xs)}.kg-node:not(.center) em{max-width:66px;overflow:hidden;text-overflow:ellipsis}.kg-node.center{width:82px;height:82px;min-height:82px}.kg-obsidian-label{display:none}.kg-evidence-scrim{padding:0;place-items:stretch}.kg-evidence-drawer{width:100%;height:100dvh;border:0;border-radius:0;grid-template-rows:auto auto minmax(0,1fr)}.kg-ev-head{padding:13px 14px}.kg-ev-head h2{font-size:var(--fs-md)}.kg-ev-head p{font-size:var(--fs-2xs)}.kg-ev-summary{padding:8px 12px;overflow-x:auto;flex-wrap:nowrap}.kg-ev-summary > span,.kg-ev-block-shortcut{flex:0 0 auto}.kg-ev-body{display:block;overflow:auto}.kg-ev-nav{padding:9px 10px;border-right:0;border-bottom:1px solid var(--ui-border);overflow:visible}.kg-ev-records{display:flex;overflow-x:auto;gap:6px}.kg-ev-record{flex:0 0 196px}.kg-ev-detail{overflow:visible;padding:15px 14px 28px}.kg-ev-grid{grid-template-columns:1fr}} /* 全站收斂層：舊元件只保留結構，表面、邊框、文字與選取狀態統一走語意 token。 */ :where(.sp-chip,.th-chip,.tb-chip,.gs-chip,.st-btn,.mchip,.tab){ background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text);box-shadow:none } :where(.sp-chip,.th-chip,.tb-chip,.gs-chip,.st-btn,.mchip,.tab):hover{ background:var(--ui-primary-tint);border-color:var(--ui-selection-border);color:var(--ui-primary-strong) } :where(.sp-chip.on,.th-chip.on,.tb-chip.on,.gs-chip.on,.st-btn.on,.mchip.on,.tab.on,.tab.active){ background:var(--ui-selection-bg);border-color:var(--ui-selection-border);color:var(--ui-primary-strong); box-shadow:var(--ui-selection-shadow);font-weight:700 } /* 全站手機版硬化：固定觸控尺寸、解除 flex/grid 最小內容寬度，並阻止長字串撐破容器。 */ @media(max-width:900px){ .site-brand{min-width:var(--control-md);min-height:var(--control-md)} .top .searchbar:not(:focus-within) input{border-radius:50%} .top .searchbar:focus-within input{border-radius:999px} #app :is(button,a[href],a[onclick],input,select,textarea,[role="button"]):not(.kg-node){min-height:var(--control-md)} #app :is(.star-btn,.cmp-check,.cmp-x,.cp-close,.at-mx,.sh-x){min-width:var(--control-md);width:var(--control-md);height:var(--control-md)} #app a[onclick]{min-width:var(--control-md);justify-content:center} #app input[type="range"]{min-height:var(--control-md);touch-action:pan-y} :where(.wrap,.grid,.layout2,.chain-hd,.co-hd,.sec-head,.ar-row,.arr-l,.arr-m,.arr-r,.tab-body,.company-details,.screen-view,.rp-grid,.at-layout,.at-side,.kg-view) > *{min-width:0} :where(h1,h2,h3,h4,.arr-nm,.co-hd,.sec-head,.shi-q,.shi-d,.result-row,.article-card){overflow-wrap:anywhere} :where(img,video,canvas){max-width:100%} .chain-overview .tb-chip,.chain-overview .tb-clear,.screen-view .st-btn,.screen-view .mchip, .kg-quick,.kg-type,.insights-filter,.tabs .tab{min-height:var(--control-md)} .sv-c{height:auto;min-height:var(--control-md);padding:11px 13px} .asset-note a,.map-credit a{display:inline-flex;min-height:var(--control-md);align-items:center;padding-inline:4px} } /* 手機查詢台：下拉欄位以選項文字為主，不再把標籤與控制垂直堆成大型卡片。 */ @media(max-width:620px){ .screen-view .scr-filters{padding:10px;gap:8px} .screen-view .scr-sel{ display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px; min-height:56px;padding:5px 12px } .screen-view .scr-sel > span{align-self:center;font-size:var(--fs-xs);white-space:nowrap} .screen-view .scr-sel select{ min-width:0;width:100%;min-height:44px;padding:0 30px 0 0; font-size:var(--fs-lg);font-weight:650;line-height:1.2 } .screen-view .scr-sel::after{right:14px;top:50%;bottom:auto;transform:translateY(-65%) rotate(45deg)} .screen-view .scr-mkt{padding:10px 12px;gap:8px} .screen-view .scr-chip-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%} .screen-view .mchip{width:100%;min-width:0;min-height:44px;padding:0 6px} .screen-view .pri-badge.pb-solid{ background:var(--ui-primary-tint);color:var(--ui-primary-strong)!important; border:1px solid var(--ui-selection-border);font-size:var(--fs-xs);padding:4px 9px } } /* 搜尋與條件選取的形狀契約：輸入框與篩選 chip 都使用完整膠囊。 */ :where(input[type="search"],.screen-view .sa-input,.kg-search input){border-radius:var(--ui-radius-pill)!important} .kg-search button{border-radius:var(--ui-radius-pill)} .screen-view :is(.mchip,.lg,.sa-check){border-radius:var(--ui-radius-pill)!important} .screen-view .sa-logic{border-radius:var(--ui-radius-pill);padding:3px} .screen-view .sa-disclosure-body .sa-v{gap:8px} .top .searchbar:not(:focus-within) .ui-search-control{ border-color:var(--ui-border-strong);background:var(--ui-surface);box-shadow:none } .top .searchbar .ui-search-control:focus{border-color:var(--ui-selection-border)} .top .searchbar svg{width:18px;height:18px;color:var(--ui-text-muted)} .screen-view .pri-badge{ border:1px solid var(--ui-selection-border);border-radius:var(--ui-radius-pill); background:var(--ui-selection-bg);color:var(--ui-primary-strong)!important; font-weight:var(--ui-weight-strong);box-shadow:none } .screen-view .pri-badge.pb-solid,.screen-view .pri-badge.pb-infer{background:var(--ui-selection-bg);color:var(--ui-primary-strong)!important} .screen-view .pri-badge i{font-weight:var(--ui-weight-regular);color:var(--ui-text-muted);opacity:1} @media(max-width:620px){ .screen-view .scr-adv-overview{padding:12px 14px} .screen-view .sa-disclosure-head{min-height:60px;padding:10px 14px} .screen-view .sa-disclosure-body{padding:4px 14px 16px} } /* 國際對局總覽曾被詳情頁的高權重三欄規則蓋回去，390px 會多出 263px。 */ @media(max-width:820px){ .arena-detail .ar-row{grid-template-columns:minmax(0,1fr);gap:10px} .arena-detail .arr-m{width:100%;min-width:0} .arena-detail .arr-r{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;text-align:left} .arena-detail .arr-pos{margin:0;justify-self:start} .arena-detail .arr-tw{text-align:right} .arena-detail .arr-top{grid-column:1 / -1} } /* ═══════════════════════════════════════════════════════════ IVC COLOR CALIBRATION · Violet Pop · 2026-07-20 紫曜：品牌、互動與一般量化資料 青綠：第二組比較資料與上游分類 珊瑚：缺口、注意與中度風險 紅色：僅供明確危險、阻斷與最高風險 綠色：僅供已確認的正向／成功狀態 高／中／低若只是數值，不再跨色相跳色；改用同色相強度。 ═══════════════════════════════════════════════════════════ */ :root{ --bg:#F6F7FC; --card:#FFFFFF; --surface-2:#FAFAFE; --surface-3:#F0F1F8; --surface-4:#E9EBF3; --paper:#FFFFFF; --paper-2:#FFFBFA; --ink:#171C2E; --ink-soft:#4E5870; --ink-faint:#687086; --ink-dim:#9AA1B2; --line:#E1E4EF; --line-2:#ECEEF5; --line-3:#C9CEDD; --steel:#6758E8; --steel-dark:#5849D2; --steel-deep:#40358B; --steel-tint:#F1EFFF; --steel-tint-2:#F8F7FF; --steel-tint-3:#E8E4FF; --steel-line:#D6D0FA; --steel-line-2:#C5BDF5; --steel-line-3:#E5E1FC; --steel-soft:#9C91ED; --ok:#2D9968; --ok-ink:#227A52; --ok-ink-2:#27865B; --ok-tint:#EAF7F0; --ok-tint-2:#F3FBF7; --ok-line:#C6E7D5; --warn:#F08468; --warn-ink:#A4432E; --warn-ink-2:#B74D35; --warn-ink-3:#963A27; --warn-deep:#8B3827; --warn-deep-2:#6F2D21; --warn-tint:#FFF0EC; --warn-tint-2:#FFF8F6; --warn-tint-3:#FFE7E0; --warn-tint-4:#FFF4F1; --warn-tint-5:#FFEBE5; --warn-line:#F5C9BD; --risk:#C24152; --risk-ink:#9E3040; --risk-deep:#7E2533; --risk-soft:#E58D98; --risk-tint:#FDECEF; --risk-tint-2:#FFF6F7; --risk-tint-3:#FFFAFB; --risk-line:#F0C7CD; --gold:#F08468; --gold-2:#F29B52; --gold-deep:#A4432E; --up:#20A7A0; --up-tint:#EAF9F7; --mid:var(--steel); --mid-tint:var(--steel-tint); --down:#F08468; --down-tint:#FFF0EC; --ui-primary:var(--steel); --ui-primary-hover:var(--steel-dark); --ui-primary-strong:var(--steel-deep); --ui-primary-tint:var(--steel-tint); --ui-success:var(--ok); --ui-success-strong:var(--ok-ink); --ui-success-tint:var(--ok-tint); --ui-warning:var(--warn); --ui-warning-strong:var(--warn-ink); --ui-warning-tint:var(--warn-tint); --ui-danger:var(--risk); --ui-danger-strong:var(--risk-ink); --ui-danger-tint:var(--risk-tint); --ui-focus:#897CFF; --ui-accent:#20A7A0; --ui-accent-strong:#147C78; --ui-accent-tint:#EAF9F7; --ui-attention:#F08468; --ui-attention-strong:#A4432E; --ui-attention-tint:#FFF0EC; --ui-measure:var(--ui-primary); --ui-measure-compare:var(--ui-accent); --ui-gap:var(--ui-attention); --ui-data-chain:#20A7A0; --ui-data-product:#6758E8; --ui-data-step:#F08468; --ui-data-cluster:#37A7C4; --ui-data-buyer:#A35CC8; --ui-country-us:#6758E8; --ui-country-eu:#20A7A0; --ui-country-jp:#37A7C4; --ui-country-kr:#A35CC8; --ui-country-cn:#F08468; --ui-country-other:#8B93A7; --ui-risk-low:#F5B7A7; --ui-risk-mid:#F08468; --ui-risk-high:#C24152; --shadow:0 1px 2px rgba(35,31,72,.035),0 8px 24px rgba(49,42,113,.055); --shadow-lift:0 10px 34px rgba(49,42,113,.12); --ui-shadow-1:0 1px 2px rgba(35,31,72,.035),0 8px 24px rgba(49,42,113,.055); --ui-shadow-2:0 10px 34px rgba(49,42,113,.12); --ui-shadow-3:0 22px 64px rgba(35,31,72,.2); } html[data-theme="bright"] body{ background: radial-gradient(circle at 78% 8%,color-mix(in srgb,var(--ui-primary) 7%,transparent),transparent 28rem), radial-gradient(circle at 10% 38%,color-mix(in srgb,var(--ui-accent) 4%,transparent),transparent 32rem), var(--ui-canvas); } .top{box-shadow:0 1px 0 rgba(64,53,139,.05),0 12px 34px rgba(64,53,139,.045)} .searchbar input:focus{box-shadow:var(--ui-selection-shadow)} /* 一般量化資料：同一紫色量尺。 */ html[data-theme="bright"] .scb-track > i, html[data-theme="bright"] .pt-bar > i, html[data-theme="bright"] .fv-bar > i, html[data-theme="bright"] .sup-bar > i, html[data-theme="bright"] .cx-bar > i, html[data-theme="bright"] .scb-track > i.good, html[data-theme="bright"] .scb-track > i.mid, html[data-theme="bright"] .scb-track > i.weak, html[data-theme="bright"] .pt-bar > i.good, html[data-theme="bright"] .pt-bar > i.mid, html[data-theme="bright"] .pt-bar > i.weak, html[data-theme="bright"] .fv-bar > i.high, html[data-theme="bright"] .fv-bar > i.mid, html[data-theme="bright"] .fv-bar > i.low, html[data-theme="bright"] .sup-bar > i.high, html[data-theme="bright"] .sup-bar > i.mid, html[data-theme="bright"] .sup-bar > i.low, html[data-theme="bright"] .cx-bar > i.high, html[data-theme="bright"] .cx-bar > i.mid, html[data-theme="bright"] .cx-bar > i.low{ background:var(--ui-measure); } .scb-v.good,.scb-v.mid,.scb-v.weak{color:var(--ui-primary-strong)} .pt-gap i{background:var(--ui-gap);opacity:1} /* 台灣掌握度：同色相、不同強度；none 維持中性。 */ .tw-pill.high{background:color-mix(in srgb,var(--ui-primary) 14%,var(--ui-surface));color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 30%,var(--ui-border))} .tw-pill.mid{background:color-mix(in srgb,var(--ui-primary) 9%,var(--ui-surface));color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 22%,var(--ui-border))} .tw-pill.low{background:color-mix(in srgb,var(--ui-primary) 5%,var(--ui-surface));color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 15%,var(--ui-border))} .tw-dot.high{background:var(--ui-primary)} .tw-dot.mid{background:color-mix(in srgb,var(--ui-primary) 72%,var(--ui-surface))} .tw-dot.low{background:color-mix(in srgb,var(--ui-primary) 45%,var(--ui-surface))} /* 時間訊號是序列，不是好壞狀態。 */ .sgr-lag.far{background:color-mix(in srgb,var(--ui-primary) 7%,var(--ui-surface));color:var(--ui-primary-strong);border:1px solid color-mix(in srgb,var(--ui-primary) 14%,var(--ui-border))} .sgr-lag.mid{background:color-mix(in srgb,var(--ui-primary) 12%,var(--ui-surface));color:var(--ui-primary-strong);border:1px solid color-mix(in srgb,var(--ui-primary) 22%,var(--ui-border))} .sgr-lag.live{background:color-mix(in srgb,var(--ui-primary) 20%,var(--ui-surface));color:var(--ui-primary-strong);border:1px solid color-mix(in srgb,var(--ui-primary) 32%,var(--ui-border))} /* 買方矩陣：單一紫色熱度階梯。 */ .mx td.l0{background:var(--ui-surface-subtle);color:var(--ui-text-muted)} .mx td.l1{background:color-mix(in srgb,var(--ui-primary) 11%,var(--ui-surface));color:var(--ui-primary-strong)} .mx td.l2{background:color-mix(in srgb,var(--ui-primary) 48%,var(--ui-surface));color:var(--ui-text-strong)} .mx td.l3{background:var(--ui-primary);color:var(--on-accent)} /* 地理、衝擊與地緣曝險：固定暖色風險序列。 */ .pin.r1 .pin-halo,.pin.r1 .pin-dot{fill:var(--ui-risk-low)} .pin.r2 .pin-halo,.pin.r2 .pin-dot{fill:var(--ui-risk-mid)} .pin.r3 .pin-halo,.pin.r3 .pin-dot{fill:var(--ui-risk-high)} .gm-legend i.r1,.gc-risk i.r1,.rb-bar i.r1,.st-bar i.r1{background:var(--ui-risk-low)} .gm-legend i.r2,.gc-risk i.r2,.rb-bar i.r2,.st-bar i.r2{background:var(--ui-risk-mid)} .gm-legend i.r3,.gc-risk i.r3,.rb-bar i.r3,.st-bar i.r3{background:var(--ui-risk-high)} .geo-risk-mini i::before{background:var(--ui-risk-mid)} .st-v.r1,.st-v.r2{color:var(--ui-attention-strong)} .st-v.r3{color:var(--ui-danger-strong)} .sk-sev.r1,.sh-sev.r1{background:color-mix(in srgb,var(--ui-risk-low) 22%,var(--ui-surface));color:var(--ui-attention-strong);border-color:color-mix(in srgb,var(--ui-risk-low) 62%,var(--ui-border))} .sk-sev.r2,.sh-sev.r2{background:var(--ui-attention-tint);color:var(--ui-attention-strong);border-color:var(--warn-line)} .sk-sev.r3,.sh-sev.r3{background:var(--ui-danger-tint);color:var(--ui-danger-strong);border-color:var(--risk-line)} .gp-bar i.low{background:var(--ui-risk-low)} .gp-bar i.mid{background:var(--ui-risk-mid)} .gp-bar i.high{background:var(--ui-risk-high)} .gp-pill.low,.gp-pill.t-low{background:color-mix(in srgb,var(--ui-risk-low) 18%,var(--ui-surface));color:var(--ui-attention-strong)} .gp-pill.mid,.gp-pill.t-mid{background:var(--ui-attention-tint);color:var(--ui-attention-strong)} .gp-pill.high,.gp-pill.t-high{background:var(--ui-danger-tint);color:var(--ui-danger-strong)} /* 產業鏈分類：固定青綠／紫曜／珊瑚。 */ .pos-stage.up{background:var(--ui-accent-tint);color:var(--ui-accent-strong);border-color:color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border))} .pos-stage.mid{background:var(--ui-primary-tint);color:var(--ui-primary-strong);border-color:color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border))} .pos-stage.down{background:var(--ui-attention-tint);color:var(--ui-attention-strong);border-color:var(--warn-line)} /* 全球位置是等級序列，使用單一品牌色強度。 */ .arr-pos.p4,.ah-pos.p4{background:var(--ui-primary);color:var(--on-accent)} .arr-pos.p3,.ah-pos.p3{background:color-mix(in srgb,var(--ui-primary) 15%,var(--ui-surface));color:var(--ui-primary-strong)} .arr-pos.p2,.ah-pos.p2{background:color-mix(in srgb,var(--ui-primary) 9%,var(--ui-surface));color:var(--ui-primary-strong)} .arr-pos.p1,.ah-pos.p1{background:color-mix(in srgb,var(--ui-primary) 5%,var(--ui-surface));color:var(--ui-primary-strong);border:1px solid color-mix(in srgb,var(--ui-primary) 16%,var(--ui-border))} .arr-pos.p0,.ah-pos.p0{background:var(--ui-surface-muted);color:var(--ui-text-muted)} .ar-row.dominant,.ar-row.strong{border-left-color:var(--ui-primary)} .ar-row.mid{border-left-color:color-mix(in srgb,var(--ui-primary) 55%,var(--ui-border))} .ar-row.weak,.ar-row.declining{border-left-color:color-mix(in srgb,var(--ui-primary) 28%,var(--ui-border))} /* 需求主權是三個類別，不借用成功／警告語意。 */ .svb.brand,.sv-legend i.brand{background:var(--ui-accent)} .svb.spec,.sv-legend i.spec{background:var(--ui-primary)} .svb.order,.sv-legend i.order{background:#8B93A7} .sv-badge.brand{background:var(--ui-accent-tint);color:var(--ui-accent-strong)} .sv-badge.spec{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .sv-badge.order{background:var(--ui-surface-muted);color:var(--ui-text-muted)} /* Atlas：完整／缺口／缺席 = 青綠／珊瑚／紅。 */ .atlas-view{ --atlas-ok:var(--ui-accent); --atlas-gap:var(--ui-attention); --atlas-none:var(--ui-danger); --atlas-ok-tint:var(--ui-accent-tint); --atlas-gap-tint:var(--ui-attention-tint); --atlas-none-tint:var(--ui-danger-tint); --atlas-ok-line:color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border)); --atlas-gap-line:color-mix(in srgb,var(--ui-attention) 34%,var(--ui-border)); --atlas-none-line:color-mix(in srgb,var(--ui-danger) 34%,var(--ui-border)); } .atlas-view .gn-x.r1,.atlas-view .gn-i.ok{color:var(--ui-accent-strong)} .atlas-view .gn-x.r2,.atlas-view .gn-i.gap{color:var(--ui-attention-strong)} .atlas-view .gn-x.r3,.atlas-view .gn-i.none{color:var(--ui-danger-strong)} .atlas-view .at-item.is-gap{color:var(--ui-attention-strong);border-color:var(--atlas-gap-line)} .atlas-view .at-item b{color:var(--ui-attention-strong)} /* 錯配頁：缺口珊瑚、已站穩青綠，其餘維持品牌紫。 */ .mismatch-view .mm-sec.q-gap h2 i{background:var(--ui-attention);box-shadow:0 0 0 4px var(--ui-attention-tint)} .mismatch-view .mm-sec.q-hold h2 i{background:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-accent-tint)} /* 已確認受惠維持青綠；一般高曝險不再用紅色填滿整張卡。 */ .pg-item.good{background:var(--ui-accent-tint);border-color:color-mix(in srgb,var(--ui-accent) 25%,var(--ui-border))} .pg-item.high{background:var(--ui-primary-tint);border-color:color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border))} /* 圖譜節點採穩定的小面積分類色。 */ .kg-company{--kg-color:var(--ui-primary)} .kg-industry_chain{--kg-color:var(--ui-accent)} .kg-chain_segment{--kg-color:#37A7C4} .kg-product_chain{--kg-color:#A35CC8} .kg-product_step{--kg-color:var(--ui-attention)} .kg-cluster{--kg-color:#4C87D8} .kg-buyer{--kg-color:#E06CA5} /* 公司營收型態也是分類，不使用成功綠。 */ .dv-tag.focus{background:var(--ui-accent-tint);color:var(--ui-accent-strong)} .dv-tag.dual{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .dv-tag.diverse{background:var(--ui-surface-muted);color:var(--ui-text)} /* 國際位置缺席為中性資訊，不渲染成錯誤狀態。 */ .ar-row.absent{border-left-color:var(--ui-border-strong);background:var(--ui-surface-subtle)} /* Geography map v1.1：細框選取、真實據點與原生縮放／拖曳。 */ .geo-map-panel .gm-tb{ border:1px solid transparent;box-shadow:none } .geo-map-panel .gm-tb.on{ border-color:color-mix(in srgb,var(--ui-primary) 28%,var(--ui-border)); background:var(--ui-surface);box-shadow:none;color:var(--ui-primary-strong) } .geo-map-stage{position:relative;cursor:grab;touch-action:none;user-select:none} .geo-map-stage.is-dragging{cursor:grabbing} .geo-map-stage .tw-map{background:#c7edff} .geo-map-toolbar{ position:absolute;z-index:4;top:12px;right:12px;display:grid;grid-template-columns:repeat(3,40px); overflow:hidden;border:1px solid var(--ui-border);border-radius:11px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent); box-shadow:var(--ui-shadow-1);backdrop-filter:blur(10px) } .geo-map-control{ width:40px;height:40px;min-height:40px;border:0;border-left:1px solid var(--ui-border); background:transparent;color:var(--ui-text-strong);font:800 20px/1 var(--sans);cursor:pointer } .geo-map-control:first-child{border-left:0} .geo-map-control:hover{background:var(--ui-primary-tint);color:var(--ui-primary-strong)} .geo-map-scale{ position:absolute;z-index:4;right:12px;top:58px;min-width:58px;padding:5px 8px;text-align:center; border:1px solid var(--ui-border);border-radius:8px;background:color-mix(in srgb,var(--ui-surface) 92%,transparent); color:var(--ui-text-muted);font:700 var(--fs-3xs)/1 var(--mono);pointer-events:none } .pin-halo{opacity:.12} .pin .pin-dot{stroke:var(--ui-surface);stroke-width:2.5;vector-effect:non-scaling-stroke} .pin.selected .pin-dot{stroke:var(--ui-primary-strong);stroke-width:3;filter:drop-shadow(0 5px 9px rgba(23,28,46,.2))} .pin.selected .pin-halo{opacity:.2} .pin-n{font-size:20px} .pin-lb{font-size:21px;stroke-width:6px} .geo-site-marker{cursor:pointer;outline:none} .geo-site-marker .site-halo{fill:var(--ui-primary);opacity:.16} .geo-site-marker .site-dot{fill:var(--ui-primary);stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke} .geo-site-marker:hover .site-halo,.geo-site-marker:focus-visible .site-halo,.geo-site-marker.selected .site-halo{opacity:.32} .geo-site-marker:hover .site-dot,.geo-site-marker:focus-visible .site-dot,.geo-site-marker.selected .site-dot{stroke:var(--ui-primary-strong);stroke-width:3.5} .geo-site-label{opacity:0;pointer-events:none;transition:opacity .12s} .geo-site-marker:hover .geo-site-label,.geo-site-marker:focus-visible .geo-site-label,.geo-site-marker.selected .geo-site-label{opacity:1} .geo-site-label rect{fill:rgba(255,255,255,.96);stroke:var(--ui-border);stroke-width:1;vector-effect:non-scaling-stroke} .geo-site-label text{fill:var(--ui-text-strong);font:750 18px/1 var(--sans)} .geo-site-detail{margin:0 0 14px;padding:12px;border:1px solid color-mix(in srgb,var(--ui-primary) 24%,var(--ui-border));border-radius:var(--ui-radius-sm);background:var(--ui-primary-tint)} .geo-site-detail small,.geo-site-detail b,.geo-site-detail span,.geo-site-detail address{display:block} .geo-site-detail small{color:var(--ui-primary-strong);font-size:var(--fs-3xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase} .geo-site-detail b{margin-top:5px;color:var(--ui-text-strong);font-size:var(--fs-sm)} .geo-site-detail span,.geo-site-detail address{margin-top:3px;color:var(--ui-text-muted);font-size:var(--fs-2xs);line-height:1.5;font-style:normal} .geo-site-detail a{display:inline-flex;margin-top:8px;color:var(--ui-primary-strong);font-size:var(--fs-2xs);font-weight:750;text-decoration:underline;text-underline-offset:2px} .facility-card{margin-top:26px;border:1px solid var(--line);border-radius:var(--ui-radius-lg);background:var(--card);box-shadow:var(--ui-shadow-1);padding:18px} .facility-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px} .facility-head h3{margin:0;color:var(--ink);font-family:var(--disp);font-size:var(--fs-lg);font-weight:750} .facility-head p{margin:5px 0 0;color:var(--ink-faint);font-size:var(--fs-sm);line-height:1.6} .facility-source{display:inline-flex;align-items:center;white-space:nowrap;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-2xs);font-weight:750;padding:5px 10px} .facility-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px} .facility-summary span{border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-subtle);padding:10px 12px;color:var(--ink-soft);font-size:var(--fs-xs)} .facility-summary b{display:block;color:var(--steel-deep);font-family:var(--mono);font-size:var(--fs-lg);line-height:1.2} .facility-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .facility-item{border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface);padding:13px 14px} .facility-item b{display:block;color:var(--ink);font-size:var(--fs-sm);margin-bottom:5px} .facility-item small{display:inline-flex;margin-bottom:8px;border:1px solid var(--steel-line);border-radius:999px;background:var(--steel-tint);color:var(--steel-deep);font-size:var(--fs-3xs);font-weight:800;padding:2px 7px} .facility-item p,.facility-item address{margin:0;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.6;font-style:normal} .facility-risks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px} .facility-risk{border:1px solid color-mix(in srgb,var(--ui-risk-mid) 20%,var(--ui-border));border-radius:12px;background:color-mix(in srgb,var(--ui-risk-low) 7%,var(--ui-surface));padding:10px 12px;color:var(--ink-soft);font-size:var(--fs-xs);line-height:1.55} .facility-risk b{display:block;color:var(--ink);margin-bottom:3px} .gm-legend .site-key{width:10px;height:10px;border:2px solid #fff;background:var(--ui-primary);box-shadow:0 0 0 1px var(--ui-primary)} @media(max-width:640px){ .facility-card,.demand-profile,.company-map-profile,.company-power-profile{gap:10px} .facility-card{padding:14px;border-radius:16px} .facility-head{display:grid;gap:10px} .facility-source{width:max-content;max-width:100%;white-space:normal} .facility-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .facility-grid,.facility-risks,.demand-driver-grid,.mapping-card-grid,.power-card-grid{grid-template-columns:1fr;gap:10px} .facility-item,.facility-risk,.demand-driver-card,.mapping-card,.power-card{padding:13px;border-radius:13px} .demand-profile-summary,.profile-summary-card{padding:14px;border-radius:14px} .demand-profile-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .demand-profile-kpis span{min-width:0;padding:9px 8px;text-align:center} .profile-score{padding:12px 13px} } @media(max-width:420px){ .facility-summary,.demand-profile-kpis{grid-template-columns:1fr} } @media(max-width:760px){ .geo-map-toolbar{top:8px;right:8px;grid-template-columns:repeat(3,38px)} .geo-map-control{width:38px;height:38px;min-height:38px} .geo-map-scale{top:52px;right:8px} .pin-lb{font-size:18px} }