/* Shared visual system, loaded after the legacy diagnostic component styles. */
:root { --bg-color:#edf1f2; --card-bg:rgba(255,255,255,.91); --input-bg:#f3f6f7; --text-main:#192a31; --text-sub:#536873; --primary:#148271; --primary-dark:#116857; --accent:#148271; --accent-dark:#116857; --grid-color:rgba(60,90,100,.12); --shadow-sm:none; --shadow-lg:0 20px 70px #1730420a; --border-width:1px; --border-radius:18px; }
body.dark-mode { --bg-color:#090f16; --card-bg:rgba(16,25,34,.94); --input-bg:#0c151e; --text-main:#e6eef2; --text-sub:#91a6b4; --primary:#92e3ce; --primary-dark:#70c8b1; --accent:#92e3ce; --accent-dark:#70c8b1; --grid-color:rgba(181,214,227,.12); --shadow-sm:none; --shadow-lg:0 20px 70px #0002; }
body.model-load-error { --bg-color:#1b0d0b; --card-bg:rgba(36,20,19,.94); --input-bg:#24110f; --text-main:#fff0eb; --text-sub:#d5a39a; --primary:#ff795c; --primary-dark:#e85e43; --accent:#ff8a6b; --accent-dark:#e85e43; --grid-color:rgba(255,137,108,.18); --shadow-lg:0 20px 70px rgba(190,55,31,.2); }
body:not(.dark-mode).model-load-error { --bg-color:#fff1ec; --card-bg:rgba(255,250,248,.94); --input-bg:#fff0eb; --text-main:#48231d; --text-sub:#8e6057; --primary:#e85f43; --primary-dark:#c94d36; --accent:#e85f43; --accent-dark:#c94d36; --grid-color:rgba(190,73,49,.18); --shadow-lg:0 20px 70px rgba(190,73,49,.14); }
body { background-image:none; font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; font-size:16px; }
h1,h2,h3,button,.tool-title,.action-link,.form-group label { font-family:inherit; letter-spacing:0; }
[hidden] { display:none !important; }
a { color:var(--accent); }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
#fluid-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.65; pointer-events:none; filter:blur(2px); }
body.model-load-error::before { content:""; position:fixed; inset:0; z-index:100; pointer-events:none; background:rgba(226,76,43,.09); mix-blend-mode:color; transition:background .3s ease; }
body.model-load-error .fluid-stage { --fluid-accent:#ff8a6b; --fluid-accent-glow:rgba(255,117,82,.46); --fluid-accent-wash:rgba(255,117,82,.14); --fluid-meter-start:#a8493d; --fluid-meter-end:#ff9a77; border-color:rgba(255,138,107,.3); background:#1b0d0b; }
body.model-load-error .fluid-stage::before { background:radial-gradient(circle at 50% 52%,transparent 0 16%,rgba(35,10,7,.08) 38%,rgba(25,6,4,.58) 100%),linear-gradient(180deg,rgba(26,7,5,.38),transparent 22%,transparent 74%,rgba(22,5,4,.58)); }
body.model-load-error .fluid-stage::after { border-color:rgba(255,190,169,.13); }
body.model-load-error .workbench-shell > .tool-actions,
body.model-load-error .workspace-grid > .source-hub,
body.model-load-error .workspace-grid > .input-column,
body.model-load-error .workspace-grid > .output-column { border-color:rgba(255,137,108,.24); background:linear-gradient(160deg,rgba(45,23,22,.94),rgba(25,12,13,.94)); }
body.model-load-error .source-hub .realtime-typhoon-panel { border-color:rgba(255,138,107,.28); background:linear-gradient(110deg,rgba(255,117,82,.12),rgba(255,117,82,.035) 68%,transparent); box-shadow:inset 3px 0 0 rgba(255,138,107,.8); }
body.model-load-error .dropzone { border-color:rgba(255,138,107,.4) !important; background:linear-gradient(135deg,rgba(255,117,82,.11),rgba(139,56,48,.07)) !important; }
body.model-load-error .url-group textarea { border-color:rgba(255,138,107,.24) !important; background:rgba(24,8,9,.52) !important; }
body.model-load-error .btn-generate,
body.model-load-error .source-hub #insert-active-typhoon,
body.model-load-error .source-hub #load-history-typhoon,
body.model-load-error .source-hub #insert-history-times { background:var(--accent) !important; }
body.model-load-error #diagnosis-results { color:#ffd0c1; }
.app-header { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:28px; max-width:1440px; margin:auto; padding:26px 5%; border-bottom:1px solid var(--grid-color); }
.brand { display:flex; align-items:center; gap:8px; color:var(--text-main); text-decoration:none; font-size:20px; font-weight:750; letter-spacing:1px; white-space:nowrap; }.brand-symbol { font-size:36px; color:var(--accent); line-height:1; margin-right:4px; }.brand-muted { color:var(--text-sub); font-weight:400; }
.page-nav { display:flex; gap:6px; padding:5px; border:1px solid var(--grid-color); border-radius:30px; background:var(--card-bg); }.page-nav a { padding:8px 22px; border-radius:24px; color:var(--text-sub); text-decoration:none; font-size:14px; }.page-nav a[aria-current] { color:var(--text-main); background:var(--grid-color); }.page-nav span { margin-left:10px; color:var(--accent); }
#theme-toggle { border:1px solid var(--grid-color); background:var(--card-bg); color:var(--text-sub); padding:9px 14px; box-shadow:none; border-radius:9px; font-size:13px; letter-spacing:0; transform:none; }
.container.app-main { max-width:1220px; padding:46px 32px 24px; min-height:calc(100vh - 185px); }
.eyebrow { font-size:12px; letter-spacing:2.1px; font-weight:600; color:var(--accent); margin-bottom:12px; }.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; }h1 { font-size:36px; line-height:1.35; font-weight:550; letter-spacing:-1.4px; }.workspace-heading h1 span { color:var(--accent); }.page-description { color:var(--text-sub); margin-top:10px; font-size:15px; }.version-tag { font-family:monospace; color:var(--text-sub); font-size:12px; letter-spacing:1px; }.version-tag i { display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:100%; margin-right:8px; }
.tool-card { padding:0; overflow:visible; border:1px solid var(--grid-color); background:var(--card-bg); border-radius:18px; box-shadow:var(--shadow-lg); margin-bottom:0; }.tool-title { display:flex; align-items:center; justify-content:space-between; text-align:left; color:var(--text-main); font-size:16px; padding:21px 28px; margin:0; border-bottom:1px solid var(--grid-color); }.tool-title span { color:var(--text-sub); font-size:11px; letter-spacing:1.8px; font-weight:400; }.tool-actions { justify-content:flex-start; padding:16px 28px 0; gap:10px; margin-bottom:0; }.action-link { box-shadow:none; border:1px solid var(--grid-color); border-radius:7px; padding:7px 12px; font-size:13px; text-transform:none; font-weight:450; }.action-link:hover { box-shadow:none; color:var(--bg-color); }.action-link:active { transform:none; }.action-link svg { width:16px; height:16px; }
.form-group { margin-bottom:18px; }.form-group label { font-size:14px; font-weight:500; margin-bottom:12px; flex-wrap:wrap; gap:5px; }.form-group textarea { padding:14px; border:1px solid var(--grid-color); border-radius:10px; font-size:14px; font-family:inherit; cursor:text; }.or-divider { margin:16px 0; font-size:11px; }
input[type=checkbox] { width:16px !important; height:16px; }#average-option-container label { font-size:13px; margin:5px 0; }
.single-analysis-grid { grid-template-columns:1fr; }.single-analysis-metrics { grid-template-columns:repeat(2,1fr); }.single-analysis-head { flex-wrap:wrap; }
.research-note { color:var(--text-sub); font-size:12px; margin-top:20px; }.site-footer { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1370px; padding:24px 5%; margin:0 auto; border:0; font-size:12px; }.footer-muted { color:var(--text-sub); }.fluid-controls { display:flex; gap:16px; align-items:center; color:var(--text-sub); }.fluid-controls button { color:var(--text-sub); font-size:12px; background:var(--card-bg); border:1px solid var(--grid-color); padding:6px 10px; border-radius:6px; letter-spacing:0; }
.welcome-page { padding:60px 0 40px; }.welcome-page h1 { font-size:clamp(40px,5.6vw,76px); letter-spacing:-3px; line-height:1.3; }.welcome-page h1 span { color:var(--accent); }.welcome-intro { color:var(--text-sub); margin:28px 0; line-height:1.9; }.primary-link { display:inline-flex; gap:50px; padding:14px 22px; border-radius:8px; color:var(--bg-color); background:var(--accent); text-decoration:none; }.welcome-facts { display:flex; gap:70px; margin-top:64px; padding-top:24px; border-top:1px solid var(--grid-color); }.welcome-facts span { color:var(--text-sub); font-size:12px; letter-spacing:2px; }.welcome-facts p { margin-top:8px; }.tech-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:36px 0; }.tech-grid article { background:var(--card-bg); border:1px solid var(--grid-color); border-radius:12px; padding:28px; }.step-number { color:var(--accent); font:32px monospace; }.tech-grid h2,.tech-detail h2 { font-size:19px; font-weight:500; margin:20px 0 14px; }.tech-grid p,.tech-detail p { color:var(--text-sub); font-size:15px; line-height:1.9; }.tech-detail { display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:32px; border:1px solid var(--grid-color); border-radius:12px; background:var(--card-bg); }.tech-detail img { width:100%; border-radius:8px; }.tech-detail a { display:inline-block; margin-top:22px; }.tech-detail figcaption { font-size:12px; color:var(--text-sub); margin-top:8px; }
@media(max-width:760px) { .app-header { flex-wrap:wrap; gap:18px; padding:20px; }.brand { font-size:17px; }.page-nav { order:3; width:100%; justify-content:center; }.page-nav a { flex:1; text-align:center; padding:8px 12px; }.container.app-main { padding:30px 16px 16px; }.workspace-heading { align-items:flex-start; }.workspace-heading h1 { font-size:28px; }.tech-grid,.tech-detail { grid-template-columns:1fr; }.site-footer { flex-wrap:wrap; padding:24px 20px; }.fluid-controls { order:3; width:100%; justify-content:space-between; gap:8px; }.welcome-page { padding:32px 4px; }.welcome-facts { gap:20px; flex-wrap:wrap; }.tech-detail { padding:22px; gap:24px; }.form-group input[type=file] { max-width:100%; padding:22px 12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* FLOW ROOM — the fluid is a playable surface, not a background decoration. */
.fluid-stage .fluid-palette { background:rgba(9,15,26,.8); border-color:rgba(222,235,255,.2); }
.fluid-stage .palette-dot { width:32px; height:32px; padding:5px; box-shadow:none; }
.fluid-stage .palette-dot span { border:1px solid rgba(255,255,255,.32); }
.fluid-stage .palette-dot.is-active { border-color:var(--fluid-accent); box-shadow:0 0 0 2px var(--fluid-accent-wash); }
.fluid-stage .palette-dot:focus-visible { outline-color:var(--fluid-accent); }
.fluid-playground .fluid-stage { background:#060911; }
.fluid-playground .fluid-stage::before { background:radial-gradient(ellipse at center,transparent 50%,rgba(2,5,12,.16)); }
.fluid-playground .fluid-stage::after { border-color:rgba(218,237,255,.065); }
#fluid-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:1; pointer-events:auto; filter:none; cursor:crosshair; touch-action:none; }
.fluid-playground { margin:-8px 0 74px; }
.fluid-stage { --fluid-accent:#94f0db; --fluid-accent-glow:rgba(148,240,219,.45); --fluid-accent-wash:rgba(148,240,219,.12); --fluid-meter-start:#467e98; --fluid-meter-end:#9af6de; position:relative; height:clamp(540px,70vh,720px); min-height:540px; overflow:hidden; isolation:isolate; border:1px solid rgba(153,239,225,.23); border-radius:28px; background:#07141b; box-shadow:0 24px 80px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.025) inset; }
.fluid-stage::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(circle at 50% 52%,transparent 0 16%,rgba(4,12,18,.06) 38%,rgba(2,8,13,.54) 100%),linear-gradient(180deg,rgba(1,11,17,.34),transparent 22%,transparent 74%,rgba(1,8,13,.54)); }
.fluid-stage::after { content:""; position:absolute; inset:15px; z-index:2; border:1px solid rgba(194,255,247,.1); border-radius:20px; pointer-events:none; }
.fluid-grain { position:absolute; inset:0; z-index:3; opacity:.1; pointer-events:none; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.fluid-stage-top,.fluid-stage-bottom,.fluid-center-copy { position:absolute; z-index:4; pointer-events:none; }.fluid-stage-top { top:28px; left:32px; right:32px; display:flex; justify-content:flex-end; align-items:center; }.fluid-palette { display:flex; gap:8px; padding:6px; border:1px solid rgba(195,255,248,.15); border-radius:999px; background:rgba(3,15,22,.38); backdrop-filter:blur(12px); pointer-events:auto; }.palette-dot { width:25px; height:25px; padding:4px; border:1px solid transparent; border-radius:50%; background:transparent; cursor:pointer; transition:transform .2s ease,border-color .2s ease; }.palette-dot span { display:block; width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,#8ef8e0,#1a8fa7); box-shadow:0 0 11px rgba(104,242,211,.35); }.palette-dot[data-palette="ember"] span { background:linear-gradient(135deg,#ffd36e,#ed5264 72%); box-shadow:0 0 11px rgba(255,124,89,.42); }.palette-dot[data-palette="aurora"] span { background:linear-gradient(135deg,#e9a8ff,#6c7dff 70%); box-shadow:0 0 11px rgba(174,130,255,.42); }.palette-dot:hover { transform:scale(1.12); }.palette-dot.is-active { border-color:var(--fluid-accent); box-shadow:0 0 0 3px var(--fluid-accent-wash); }
.fluid-center-copy { inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:80px 24px 100px; }.fluid-eyebrow { margin:0 0 17px; color:var(--fluid-accent); font:600 11px/1 Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; letter-spacing:3.4px; text-shadow:0 0 20px var(--fluid-accent-glow); }.fluid-center-copy h2 { width:min(100%,820px); margin:0; color:#f2fffc; font:500 clamp(30px,4vw,58px)/1.18 Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; letter-spacing:-2px; text-wrap:balance; overflow-wrap:anywhere; text-shadow:0 12px 40px rgba(0,0,0,.22); }.fluid-center-copy h2 em { color:var(--fluid-accent); font-style:normal; }.fluid-stage-bottom { left:32px; right:32px; bottom:29px; display:flex; align-items:end; justify-content:space-between; gap:24px; }.fluid-meter { width:210px; display:grid; grid-template-columns:1fr auto; gap:8px 14px; color:rgba(190,230,225,.53); font-size:10px; letter-spacing:1.5px; }.fluid-meter strong { color:rgba(224,255,250,.86); font-size:10px; font-weight:600; letter-spacing:1px; }.fluid-meter i { grid-column:1 / -1; display:block; height:3px; overflow:hidden; background:rgba(211,255,249,.14); border-radius:4px; }.fluid-meter i b { display:block; width:72%; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--fluid-meter-start),var(--fluid-meter-end)); box-shadow:0 0 12px var(--fluid-accent-glow); transition:width .5s ease,background .3s ease; }.fluid-hint { display:flex; align-items:center; gap:10px; color:rgba(211,240,237,.58); font-size:12px; }.fluid-hint kbd { padding:6px 8px; border:1px solid rgba(218,255,250,.2); border-bottom-width:2px; border-radius:6px; color:rgba(234,255,252,.86); background:rgba(6,24,32,.46); font:600 10px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1px; }
@media(max-width:760px) { .fluid-playground { margin:0 -2px 52px; }.fluid-stage { height:600px; min-height:0; border-radius:22px; }.fluid-stage::after { inset:10px; border-radius:15px; }.fluid-stage-top { top:22px; left:22px; right:22px; }.fluid-center-copy { padding:76px 20px 122px; }.fluid-center-copy h2 { font-size:clamp(32px,9vw,46px); letter-spacing:-1.5px; }.fluid-stage-bottom { left:22px; right:22px; bottom:22px; align-items:flex-start; flex-direction:column-reverse; gap:17px; }.fluid-meter { width:170px; }.fluid-hint { font-size:11px; } }

/* WORKBENCH — one canonical layout for desktop and mobile. */
.analysis-heading { margin:0 0 24px; }.analysis-heading .eyebrow { margin-bottom:9px; }.analysis-heading h1 { font-size:clamp(30px,4vw,46px); letter-spacing:-1.8px; }
@media(min-width:1100px) { .container.app-main { max-width:1680px; padding-left:clamp(32px,4vw,76px); padding-right:clamp(32px,4vw,76px); }.app-header { max-width:1680px; padding-left:clamp(32px,4vw,76px); padding-right:clamp(32px,4vw,76px); }.site-footer { max-width:1680px; padding-left:clamp(32px,4vw,76px); padding-right:clamp(32px,4vw,76px); } }
.workbench-shell { padding:0; overflow:visible; border:0; background:transparent; box-shadow:none; }
.workbench-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:22px; padding:0 0 18px; }
.tool-kicker,.column-kicker { margin:0; color:var(--text-sub); font:600 10px/1.2 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.8px; text-transform:uppercase; }.tool-kicker span { color:var(--accent); padding:0 4px; }
.workbench-topline .tool-title { margin:10px 0 0; padding:0; color:var(--text-main); border:0; text-align:left; font-size:26px; line-height:1.15; font-weight:600; letter-spacing:-.7px; }
.model-badge,.result-state { display:inline-flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(186,231,229,.14); border-radius:8px; color:var(--text-sub); background:rgba(255,255,255,.035); font:600 10px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.1px; white-space:nowrap; }.model-badge i,.result-state i { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }.model-badge i,.result-state i { color:var(--accent); }
.workbench-shell > .tool-actions { display:flex; align-items:center; justify-content:flex-start; gap:7px; min-height:42px; margin:0 0 14px; padding:4px 9px; border:1px solid rgba(186,231,229,.11); border-radius:10px; background:rgba(16,25,34,.58); }.workbench-shell > .tool-actions .action-link { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:0; border-radius:7px; color:var(--text-sub); background:transparent; font-size:12px; }.workbench-shell > .tool-actions .action-link:hover { color:var(--text-main); background:rgba(148,240,219,.08); box-shadow:none; }.workbench-shell > .tool-actions .action-link svg { width:14px; height:14px; margin:0; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:14px; align-items:stretch; }
.workspace-grid > .source-hub { grid-column:1 / -1; display:grid; grid-template-columns:minmax(170px,.34fr) minmax(0,1fr); column-gap:24px; row-gap:0; align-items:start; margin:0; padding:20px 24px 16px; min-width:0; border:1px solid rgba(186,231,229,.13); border-radius:18px; background:linear-gradient(160deg,rgba(16,27,35,.94),rgba(9,18,25,.94)); box-shadow:0 16px 45px rgba(0,0,0,.1); }
.source-hub-head { display:block; margin:0; }.source-hub-head h3 { margin:8px 0 0; color:var(--text-main); font-size:20px; font-weight:600; letter-spacing:-.4px; }
.source-hub .realtime-typhoon-panel { grid-column:2; grid-row:1 / span 2; display:grid; align-content:start; gap:0; margin:0; padding:15px 17px; border:1px solid rgba(148,240,219,.19); border-radius:12px; background:linear-gradient(110deg,rgba(148,240,219,.09),rgba(148,240,219,.025) 68%,transparent); box-shadow:inset 3px 0 0 rgba(148,240,219,.72); }.source-hub .realtime-typhoon-panel > .realtime-typhoon-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }.realtime-typhoon-title { color:var(--text-main); font-size:14px; font-weight:650; letter-spacing:.2px; }.realtime-typhoon-status { color:var(--text-sub); font-size:11px; font-weight:500; }
.source-hub .realtime-typhoon-controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }.source-hub #active-typhoon-select { min-height:42px; width:100%; padding:10px 12px; border:1px solid rgba(186,231,229,.22); border-radius:8px; color:var(--text-main); background:rgba(3,13,20,.54); font-size:12px; }.source-hub #insert-active-typhoon,.source-hub #retry-active-typhoons,.source-hub #load-history-typhoon,.source-hub #insert-history-times { min-height:42px; padding:9px 12px; border:1px solid rgba(148,240,219,.2); border-radius:8px; color:#07141b; background:var(--accent); box-shadow:none; font-size:12px; }.source-hub #retry-active-typhoons { color:var(--text-main); background:rgba(255,255,255,.06); border-color:rgba(186,231,229,.16); }
.history-source { margin-top:14px; border-top:1px solid rgba(186,231,229,.11); }.history-source > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0 0; color:var(--text-main); cursor:pointer; list-style:none; }.history-source > summary::-webkit-details-marker { display:none; }.history-source > summary::after { content:'＋'; color:var(--accent); font-size:16px; font-weight:300; }.history-source[open] > summary::after { content:'－'; }.history-source > summary .realtime-typhoon-title { font-size:13px; }.history-source > summary .realtime-typhoon-status { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.history-typhoon-panel { margin-top:0; padding:14px 0 0; border-top:0; }.history-source-hint { margin:0 0 11px; color:var(--text-sub); font-size:11px; line-height:1.55; }.history-typhoon-loader { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }.source-hub #history-typhoon-url { min-height:40px; width:100%; padding:9px 10px; border:1px solid rgba(186,231,229,.18); border-radius:8px; font-size:12px; }.history-time-toolbar { display:flex; align-items:center; justify-content:space-between; gap:7px; margin:13px 0 8px; flex-wrap:wrap; }.history-time-list { max-height:230px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:5px; padding:9px; border:1px solid rgba(186,231,229,.13); border-radius:9px; background:rgba(3,13,20,.35); }.history-time-item { display:flex; align-items:center; gap:7px; padding:5px; border-radius:6px; color:var(--text-sub); cursor:pointer; font-size:11px; font-weight:500; }.history-time-item:hover { background:rgba(148,240,219,.08); }.history-time-item input { width:15px !important; height:15px; accent-color:var(--accent); }
.workspace-grid > .input-column,.workspace-grid > .output-column { min-width:0; padding:24px; border:1px solid rgba(186,231,229,.13); border-radius:18px; background:linear-gradient(160deg,rgba(16,27,35,.94),rgba(9,18,25,.94)); box-shadow:0 16px 45px rgba(0,0,0,.1); }.workspace-grid > .input-column { grid-column:1; border-right:1px solid rgba(186,231,229,.13); }.workspace-grid > .output-column { grid-column:2; border-left:1px solid rgba(186,231,229,.13); background:linear-gradient(160deg,rgba(12,23,31,.98),rgba(7,15,22,.98)); }
.field-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }.field-heading label { margin:0; color:var(--text-main); font:600 13px/1.2 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.3px; }.field-heading > span { color:var(--text-sub); font:500 11px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1px; }.file-group,.url-group { margin-bottom:22px; }
.dropzone { position:relative; display:flex !important; align-items:center; gap:14px; min-height:116px; margin:0; padding:20px; border:1px dashed rgba(148,240,219,.31) !important; border-radius:14px !important; color:var(--text-main); background:linear-gradient(135deg,rgba(148,240,219,.075),rgba(62,113,135,.04)) !important; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease; }.dropzone:hover,.dropzone:focus-within { border-color:var(--accent) !important; background:linear-gradient(135deg,rgba(148,240,219,.13),rgba(62,113,135,.07)) !important; transform:translateY(-1px); }.dropzone-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:12px; color:var(--accent); background:rgba(148,240,219,.1); }.dropzone-icon svg { width:22px; height:22px; }.dropzone-copy { display:grid; gap:7px; min-width:0; }.dropzone-copy strong { font-size:15px; font-weight:600; }.dropzone-copy small,.field-note { color:var(--text-sub); font-size:12px; line-height:1.5; }.dropzone-cta { margin-left:auto; padding:9px 11px; border:1px solid rgba(148,240,219,.25); border-radius:7px; color:var(--accent); font-size:11px; white-space:nowrap; }.dropzone-cta b { margin-left:6px; font-size:14px; font-weight:500; }.dropzone input[type=file] { position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; }.field-note { margin:8px 0 0; }
.or-divider { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--text-sub); font:600 9px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.4px; }.or-divider::before,.or-divider::after { content:""; flex:1; height:1px; background:rgba(186,231,229,.1); }.or-divider span { opacity:.6; }.url-group > .url-label { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin:0 0 8px; color:var(--text-sub); font-size:12px; font-weight:500; }.url-label > span { white-space:nowrap; }.url-label .action-link { display:inline-flex; align-items:center; gap:4px; margin:0; padding:4px 7px !important; border:1px solid rgba(186,231,229,.12); border-radius:6px; color:var(--text-sub); background:rgba(255,255,255,.025); font-size:11px !important; }.url-label .action-link svg { width:12px !important; height:12px !important; margin:0 !important; }.url-label .action-link:hover { color:var(--accent); background:rgba(148,240,219,.08); box-shadow:none; }.url-group textarea { display:block; width:100%; min-height:104px !important; padding:14px !important; border:1px solid rgba(186,231,229,.15) !important; border-radius:12px !important; outline:0; color:var(--text-main); background:rgba(3,13,20,.46) !important; font:400 12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; resize:vertical; }.url-group textarea::placeholder { color:rgba(145,166,180,.52); }.url-group textarea:hover,.url-group textarea:focus { border-color:rgba(148,240,219,.55) !important; background:rgba(3,13,20,.64) !important; }
.options-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; color:var(--text-sub); font:600 9px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.4px; }.options-heading small { color:rgba(145,166,180,.58); font-size:9px; font-weight:500; letter-spacing:1px; }.option-row { display:flex !important; align-items:flex-start; gap:10px; margin:0 !important; padding:12px 0; border-bottom:1px solid rgba(186,231,229,.08); cursor:pointer; }.option-row:last-of-type { border-bottom:0; }.option-row input[type=checkbox] { flex:0 0 auto; width:16px !important; height:16px; margin:1px 0 0; accent-color:var(--accent); }.option-row > span { display:grid; gap:4px; min-width:0; }.option-row strong { color:var(--text-main); font-size:13px; font-weight:600; }.option-row small { color:var(--text-sub); font-size:11px; line-height:1.45; }.zoom-control { margin-top:11px; padding-top:13px; border-top:1px solid rgba(186,231,229,.08); }.zoom-control label { display:flex !important; align-items:center; justify-content:space-between; margin:0 0 10px !important; color:var(--text-sub); font-size:12px !important; font-weight:500 !important; }.zoom-control label b { padding:4px 7px; border-radius:5px; color:var(--accent); background:rgba(148,240,219,.1); font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }#zoom-slider { width:100%; margin:0; accent-color:var(--accent); cursor:pointer; }
.button-group { display:flex; align-items:stretch; gap:8px; margin-top:0; padding-top:4px; }.btn-generate { min-height:50px; padding:12px 18px !important; border:1px solid rgba(148,240,219,.24) !important; border-radius:10px !important; color:#07141b !important; background:var(--accent) !important; box-shadow:0 10px 24px rgba(94,222,192,.13) !important; font-size:13px !important; font-weight:650; text-shadow:none !important; }.btn-generate:hover:not(:disabled) { filter:brightness(1.06); transform:translateY(-1px); }.btn-generate:active:not(:disabled) { transform:translateY(1px); box-shadow:none !important; }.btn-help { width:50px; min-height:50px; border:1px solid rgba(186,231,229,.16); border-radius:10px !important; color:var(--text-sub); background:rgba(255,255,255,.035); box-shadow:none !important; font-size:18px; }.btn-help:hover { color:var(--text-main); background:rgba(255,255,255,.075); }.progress-container { height:4px; overflow:hidden; margin-top:13px !important; border-radius:99px; background:rgba(186,231,229,.1); }.progress-bar { height:100%; border-radius:inherit; background:var(--accent); }
.workbench-shell .research-note { margin:16px 0 0; font-size:10px; }.output-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:10px; color:var(--text-main); }.output-heading h3 { margin:7px 0 0; color:var(--text-main); font-size:24px; font-weight:600; letter-spacing:-.6px; }.output-hint { max-width:360px; margin:0; color:var(--text-sub); font-size:13px; line-height:1.65; }.output-column .result-state { color:var(--text-sub); }.output-column .result-state i { color:var(--accent); }
#enm-image-preview-container { margin-top:18px !important; padding:8px; border:1px solid rgba(186,231,229,.11); border-radius:12px; background:rgba(3,13,20,.4); }#enm-preview-image { display:block; width:100%; max-height:260px; border:0; border-radius:7px; background:#07101f; }#diagnosis-results-container { position:relative; margin-top:20px; padding:0; border:1px solid rgba(186,231,229,.13); border-radius:13px; overflow:hidden; background:rgba(3,13,20,.52); }.result-label { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-bottom:1px solid rgba(186,231,229,.1); color:var(--text-sub); font:600 9px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.2px; }#diagnosis-results { min-height:270px; padding:20px !important; border:0 !important; border-radius:0 !important; color:#a9f5de; background:transparent !important; font:400 13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; box-shadow:none !important; white-space:pre-wrap; }#diagnosis-results::after { display:none !important; }#copy-results-btn { top:43px; right:10px; padding:6px 8px; border:1px solid rgba(186,231,229,.14); border-radius:7px; color:var(--text-sub); background:rgba(255,255,255,.05); box-shadow:none; }#copy-results-btn:hover { color:var(--text-main); background:rgba(255,255,255,.1); }

/* PROCESSING OPTIONS — quiet rows with a clear control hierarchy. */
.output-column .result-state.is-error { color:var(--accent); border-color:rgba(255,137,108,.36); background:rgba(255,117,82,.1); }.output-column .result-state.is-error i { color:var(--accent); }
#average-option-container { display:grid; gap:0; margin:12px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0; background:transparent !important; }
#average-option-container .options-heading { margin:0; padding:0 0 10px; border-bottom:1px solid rgba(186,231,229,.12); color:var(--text-sub); font:600 10px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:1.5px; }
#average-option-container .options-heading small { color:var(--text-sub); font-size:10px; letter-spacing:1px; opacity:.72; }
#average-option-container .option-row { display:flex !important; align-items:center; gap:13px; min-height:58px; margin:0 !important; padding:12px 0; border-bottom:1px solid rgba(186,231,229,.1); cursor:pointer; }
#average-option-container .option-row:last-of-type { border-bottom:0; }
#average-option-container .option-row input[type=checkbox] { appearance:none; -webkit-appearance:none; flex:0 0 auto; width:40px !important; height:24px; margin:0; padding:0; border:1px solid rgba(186,231,229,.28); border-radius:999px; background:rgba(186,231,229,.11); cursor:pointer; transition:background .2s ease,border-color .2s ease; }
#average-option-container .option-row input[type=checkbox]::after { content:""; display:block; width:18px; height:18px; margin:2px; border-radius:50%; background:var(--text-sub); transition:transform .2s ease,background .2s ease; }
#average-option-container .option-row input[type=checkbox]:checked { border-color:var(--accent); background:var(--accent); }
#average-option-container .option-row input[type=checkbox]:checked::after { transform:translateX(16px); background:#07141b; }
#average-option-container .option-row input[type=checkbox]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#average-option-container .option-row > span { display:grid; gap:3px; min-width:0; }
#average-option-container .option-row strong { color:var(--text-main); font-size:14px; font-weight:600; line-height:1.3; }
#average-option-container .option-row small { color:var(--text-sub); font-size:12px; line-height:1.45; }
#average-option-container .zoom-control { margin:0; padding:16px 0 2px; border-top:1px solid rgba(186,231,229,.1); }
#average-option-container .zoom-control label { display:flex !important; align-items:center; justify-content:space-between; margin:0 0 11px !important; color:var(--text-sub); font-size:13px !important; font-weight:500 !important; }
#average-option-container .zoom-control label b { padding:4px 7px; border-radius:5px; color:var(--accent); background:rgba(148,240,219,.1); font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
#average-option-container #zoom-slider { display:block; width:100%; height:4px; margin:0; accent-color:var(--accent); cursor:pointer; }

/* SINGLE IMAGE DETAIL — keep the long-form result balanced across the workbench. */
/* HISTORY LOOKUP — ask for the storm identity, then derive the archive URL. */
.source-hub .history-typhoon-loader { display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,.5fr) auto; align-items:end; gap:8px; }
.source-hub .history-storm-field,.source-hub .history-basin-field { display:grid; gap:7px; margin:0; }
.source-hub .history-storm-field > span,.source-hub .history-basin-field > span { color:var(--text-sub); font:500 11px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif; }
.source-hub #history-typhoon-id,.source-hub #history-typhoon-basin { min-height:40px; width:100%; padding:9px 10px; border:1px solid rgba(186,231,229,.2); border-radius:8px; color:var(--text-main); background:rgba(3,13,20,.54); font:500 12px/1.2 Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; }
.source-hub #history-typhoon-id::placeholder { color:rgba(145,166,180,.58); }
.source-hub #history-typhoon-id:focus,.source-hub #history-typhoon-basin:focus { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent); outline-offset:2px; }
.history-url-preview { margin:9px 0 0; color:var(--text-sub); font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; opacity:.78; }
.history-url-fallback { margin-top:10px; padding-top:10px; border-top:1px solid rgba(186,231,229,.1); }
.history-url-fallback > summary { display:inline-flex; align-items:center; color:var(--text-sub); cursor:pointer; font-size:11px; list-style:none; }
.history-url-fallback > summary::-webkit-details-marker { display:none; }
.history-url-fallback > summary::after { content:'＋'; margin-left:7px; color:var(--accent); font-size:14px; }
.history-url-fallback[open] > summary::after { content:'－'; }
.history-url-fallback[open] > summary { margin-bottom:9px; }
.history-url-fallback #history-typhoon-url { min-height:40px; }
#wind-chart-container { min-width:0; width:100%; overflow:hidden; }
#wind-chart-container .wind-chart-plot { position:relative; width:100%; min-width:0; height:clamp(320px,42vw,520px); }
#wind-chart-container .wind-chart-plot canvas { display:block; width:100% !important; height:100% !important; max-height:none; }
.workspace-grid > .single-analysis-panel { grid-column:1 / -1; min-width:0; width:100%; margin:0; padding:22px 24px 24px; border:1px solid rgba(186,231,229,.13); border-radius:18px; background:linear-gradient(160deg,rgba(16,27,35,.94),rgba(9,18,25,.94)); box-shadow:0 16px 45px rgba(0,0,0,.1); overflow:hidden; }
.workspace-grid > .single-analysis-panel .single-analysis-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 18px; min-width:0; }
.workspace-grid > .single-analysis-panel .single-analysis-head h3 { min-width:0; margin:0; color:var(--text-main); font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.2px; }
.workspace-grid > .single-analysis-panel .single-report-btn { flex:0 0 auto; max-width:100%; padding:9px 13px; border:1px solid rgba(148,240,219,.22); border-radius:8px; color:#07141b; background:var(--accent); box-shadow:none; font-size:12px; white-space:nowrap; }
.workspace-grid > .single-analysis-panel .single-report-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
.workspace-grid > .single-analysis-panel .single-analysis-grid { display:grid; grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr); gap:18px; min-width:0; }
.workspace-grid > .single-analysis-panel .single-analysis-image { display:block; width:100%; max-width:100%; height:auto; min-height:0; aspect-ratio:1 / 1; object-fit:contain; border:1px solid rgba(186,231,229,.12); border-radius:12px; background:#07101f; }
.workspace-grid > .single-analysis-panel .single-analysis-chart-wrap { position:relative; display:block; min-width:0; width:100%; min-height:320px; overflow:hidden; }
.workspace-grid > .single-analysis-panel .single-analysis-chart-wrap canvas { display:block; width:100% !important; max-width:100%; height:100% !important; max-height:none; }
.workspace-grid > .single-analysis-panel .single-analysis-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.workspace-grid > .single-analysis-panel .single-analysis-metric { min-width:0; padding:12px; border:1px solid rgba(186,231,229,.11); border-radius:9px; background:rgba(3,13,20,.28); }
.workspace-grid > .single-analysis-panel .single-analysis-metric span { display:block; color:var(--text-sub); font-size:11px; font-weight:500; line-height:1.4; }
.workspace-grid > .single-analysis-panel .single-analysis-metric strong { display:block; margin-top:5px; color:var(--text-main); font-size:15px; line-height:1.3; overflow-wrap:anywhere; }
.workspace-grid > .single-analysis-panel .single-analysis-note { margin:13px 0 0; color:var(--text-sub); font-size:12px; line-height:1.6; }
@media(max-width:900px) { .workspace-grid > .single-analysis-panel { padding:20px 18px; }.workspace-grid > .single-analysis-panel .single-analysis-grid { grid-template-columns:1fr; }.workspace-grid > .single-analysis-panel .single-analysis-image { width:min(100%,420px); height:auto; max-height:none; justify-self:center; }.workspace-grid > .single-analysis-panel .single-analysis-chart-wrap { height:360px; min-height:320px; }.workspace-grid > .single-analysis-panel .single-analysis-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .workspace-grid > .single-analysis-panel .single-analysis-head { flex-direction:column; gap:12px; }.workspace-grid > .single-analysis-panel .single-report-btn { width:100%; }.workspace-grid > .single-analysis-panel .single-analysis-metrics { grid-template-columns:1fr; } }

@media(max-width:760px) {
  #wind-chart-container { margin-top:16px !important; padding:12px !important; }
  #wind-chart-container .chart-toolbar { align-items:stretch; flex-direction:column; gap:10px; margin-bottom:12px; padding:10px; }
  #wind-chart-container .chart-mode-control { align-items:stretch; flex-direction:column; gap:6px; width:100%; }
  #wind-chart-container #wind-chart-mode,#wind-chart-container .export-chart-btn { width:100%; min-width:0; white-space:normal; }
  #wind-chart-container .wind-chart-plot { height:340px; }
  .workspace-grid > .single-analysis-panel { padding:16px 14px; }
  .workspace-grid > .single-analysis-panel .single-analysis-chart-wrap { height:340px; min-height:320px; }
}

@media(max-width:1060px) { .workspace-grid { grid-template-columns:minmax(300px,1fr) minmax(290px,1fr); }.workspace-grid > .source-hub { grid-column:1 / -1; }.source-hub .realtime-typhoon-panel > .realtime-typhoon-head { flex-direction:row; align-items:center; }.source-hub .realtime-typhoon-controls { grid-template-columns:minmax(0,1fr) auto auto; }.source-hub .history-typhoon-loader { grid-template-columns:minmax(0,1fr) auto; }.source-hub #active-typhoon-select,.source-hub #insert-active-typhoon,.source-hub #retry-active-typhoons,.source-hub #history-typhoon-url,.source-hub #load-history-typhoon { width:auto; }.source-hub #retry-active-typhoons { grid-column:auto; } }
@media(max-width:900px) { .workspace-grid > .source-hub { grid-template-columns:1fr; row-gap:14px; }.source-hub .realtime-typhoon-panel { grid-column:auto; grid-row:auto; } }
@media(max-width:760px) { .workbench-topline { padding-bottom:15px; }.workbench-topline .model-badge { display:none; }.workbench-shell > .tool-actions { margin-bottom:10px; overflow:auto; }.workspace-grid { grid-template-columns:1fr; gap:10px; }.workspace-grid > .source-hub,.workspace-grid > .input-column,.workspace-grid > .output-column { grid-column:1; }.workspace-grid > .source-hub { padding:20px 18px 16px; }.workspace-grid > .input-column,.workspace-grid > .output-column { padding:22px 18px 20px; }.workspace-grid > .input-column { border-right:1px solid rgba(186,231,229,.13); }.workspace-grid > .output-column { border-left:1px solid rgba(186,231,229,.13); }.source-hub .realtime-typhoon-panel > .realtime-typhoon-head { align-items:flex-start; flex-direction:column; gap:7px; }.source-hub .realtime-typhoon-controls,.source-hub .history-typhoon-loader { grid-template-columns:1fr; }.source-hub #active-typhoon-select,.source-hub #insert-active-typhoon,.source-hub #retry-active-typhoons,.source-hub #history-typhoon-url,.source-hub #load-history-typhoon { width:100%; }.source-hub #retry-active-typhoons { grid-column:auto; }.source-hub .history-time-toolbar { align-items:flex-start; flex-direction:column; }.source-hub #insert-history-times { width:100%; }.dropzone { padding:16px; }.dropzone-cta { display:none; }.output-heading h3 { font-size:22px; } }

/* WORKBENCH HIERARCHY — readable controls, quiet metadata. */
.workbench-topline .tool-title { font-size:28px; }
.workbench-topline .model-badge { font-size:12px; }
.workbench-shell > .tool-actions .action-link { font-size:14px; }
.source-hub-head h3 { font-size:24px; }
.source-hub .realtime-typhoon-title { font-size:16px; }
.source-hub .realtime-typhoon-status { font-size:13px; }
.source-hub #active-typhoon-select { font-size:14px; }
.source-hub #insert-active-typhoon,.source-hub #retry-active-typhoons,.source-hub #load-history-typhoon,.source-hub #insert-history-times { font-size:14px; }
.history-source > summary .realtime-typhoon-title { font-size:16px; }
.history-source > summary .realtime-typhoon-status { font-size:13px; }
.source-hub .history-storm-field > span,.source-hub .history-basin-field > span { font-size:14px; }
.source-hub #history-typhoon-id,.source-hub #history-typhoon-basin { font-size:15px; }
.history-url-preview { font-size:12px; }
.history-url-fallback > summary { font-size:13px; }
.field-heading label { font-size:15px; }
.field-heading > span { font-size:12px; }
.dropzone-copy strong { font-size:17px; }
.dropzone-copy small,.field-note { font-size:14px; }
.url-group > .url-label { font-size:14px; }
.url-label .action-link { font-size:12px !important; }
.url-group textarea { font-size:14px; }
.options-heading { font-size:12px; }
.options-heading small { font-size:12px; }
.option-row strong { font-size:16px; }
.option-row small { font-size:14px; }
.zoom-control label { font-size:14px !important; }
.zoom-control label b { font-size:12px; }
.btn-generate { font-size:15px !important; }
.output-heading h3 { font-size:26px; }
.output-hint { font-size:15px; }
.result-label { font-size:12px; }
#diagnosis-results { font-size:14px; }
.workbench-shell .research-note { font-size:12px; }
.workspace-grid > .single-analysis-panel .single-analysis-head h3 { font-size:20px; }
.workspace-grid > .single-analysis-panel .single-report-btn { font-size:14px; }
.workspace-grid > .single-analysis-panel .single-analysis-metric span { font-size:13px; }
.workspace-grid > .single-analysis-panel .single-analysis-note { font-size:13px; }