/* ═══════════════════════════════════════════════════
QueWi+ IRAN WAR ROOM — IRON CURTAIN COMMAND UI
Premium Military Intelligence • Warm Authority
═══════════════════════════════════════════════════ */
/* ══════ ROOT DESIGN SYSTEM ══════ */
:root{
/* Dark Foundation — deep ocean navy (matches satellite map) */
--bg:#101824;--bg2:#152030;--bg3:#1a283a;--bg4:#223448;--bg5:#2d4058;
/* Warm Ivory Text */
--txt:#e8e4dc;--txt2:#a8a49a;--txt3:#7a776e;
/* Command Gold — primary accent (military brass) */
--cyan:#c8a45a;--cyan2:#a88a42;
--gold:#c8a45a;--gold2:#dbb96e;
/* Signal Colors */
--red:#c43c3c;--orange:#c87832;--green:#6a9a4a;--amber:#d4922a;
/* Model Identities */
--claude:#c89b6a;--gpt:#6b9fd4;--gemini:#5ebcb2;--deepseek:#34d399;--quewi:#9070b0;
/* Force Colors — premium copper vs teal-steel */
--force-red:#c85040;--force-red2:#e06858;--force-blue:#4878b0;--force-blue2:#6098d0;
/* Glass & Borders — warm gold tint on navy */
--glass:rgba(16,22,32,.82);--glass2:rgba(12,16,24,.88);--glass3:rgba(22,32,45,.72);
--border:rgba(200,164,90,.07);--border2:rgba(200,164,90,.14);--border3:rgba(200,164,90,.24);
/* Warm Glows */
--glow-cyan:0 0 20px rgba(200,164,90,.06),0 0 40px rgba(200,164,90,.02);
--glow-red:0 0 20px rgba(196,60,60,.08);
--glow-gold:0 0 20px rgba(200,164,90,.08);
--glow-quewi:0 0 20px rgba(144,112,176,.08),0 0 40px rgba(144,112,176,.03);
/* Typography */
--fd:'Orbitron',sans-serif;
--fb:'Rajdhani','Noto Sans SC','PingFang SC',system-ui,sans-serif;
--fh:'Noto Serif SC','Songti SC','LXGW WenKai SC',serif;
--fc:'Noto Sans SC','PingFang SC','Helvetica Neue',sans-serif;
--fm:'JetBrains Mono',monospace;
--f-impact:'Noto Sans SC','Noto Serif SC','PingFang SC',sans-serif;
--f-stamp:'Zhi Mang Xing','Ma Shan Zheng','ZCOOL QingKe HuangYou',cursive;
--f-headline:'Noto Serif SC','Songti SC',serif;
/* Sizing */
--fs-base:16px;--fs-sm:14px;--fs-xs:12px;--fs-lg:18px;--fs-xl:22px;--fs-xxl:28px;
}
/* ═══════════════════════════════════════════════════════
MACRO QUANT ARENA
═══════════════════════════════════════════════════════ */
.macro-quant-arena{
--mq-collapsed-height:218px;
margin:20px 14px 14px;
border:1px solid rgba(84,115,166,0.35);
background:#080d1a;
box-shadow:0 18px 48px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(135,168,227,0.06);
border-radius:14px;
padding:14px;
position:relative;
z-index:1;
}
.mq-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(92,125,178,0.2);padding-bottom:14px;margin-bottom:16px;position:relative}
.mq-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(92,125,178,0.45),rgba(92,125,178,0.12) 65%,transparent)}
.mq-title{
color:#e7f0ff;font-weight:900;font-size:22px;letter-spacing:.6px;
background:linear-gradient(105deg,#e7f0ff 0%,#8cc8ff 28%,#52e5ff 50%,#8cc8ff 72%,#e7f0ff 100%);
background-size:200% 100%;
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
animation:mqTitleShimmer 4s ease-in-out infinite;
text-shadow:0 0 18px rgba(82,229,255,.15);
position:relative;
}
.mq-title::after{
content:'';position:absolute;bottom:-3px;left:0;width:100%;height:2px;
background:linear-gradient(90deg,transparent,rgba(82,229,255,.6) 20%,rgba(140,200,255,.8) 50%,rgba(82,229,255,.6) 80%,transparent);
background-size:200% 100%;
animation:mqTitleGlow 3s ease-in-out infinite;
border-radius:1px;
}
@keyframes mqTitleShimmer{
0%,100%{background-position:100% 50%}
50%{background-position:0% 50%}
}
@keyframes mqTitleGlow{
0%,100%{background-position:200% 50%;opacity:.4}
50%{background-position:0% 50%;opacity:1}
}
.mq-sub{color:rgba(140,170,218,.75);font-size:11px;margin-top:5px;letter-spacing:2.2px;text-transform:uppercase;font-family:var(--fd);
animation:mqSubPulse 5s ease-in-out infinite;
}
@keyframes mqSubPulse{
0%,100%{opacity:.75}
50%{opacity:1;color:rgba(180,210,248,.95)}
}
.mq-method-note{
margin-top:11px;
color:rgba(189,210,241,.88);
font-size:13.5px;
line-height:1.62;
max-width:700px;
letter-spacing:.15px;
font-family:var(--fh),var(--fb);
}
.mq-profit-badge{
margin-top:8px;
display:inline-block;
padding:5px 12px;
background:linear-gradient(135deg,rgba(52,211,153,.15),rgba(16,185,129,.08));
border:1px solid rgba(52,211,153,.4);
border-radius:8px;
color:#6fffd2;
font-size:12px;
font-weight:600;
letter-spacing:.3px;
animation:profitPulse 3s ease-in-out infinite;
}
.mq-profit-badge .mq-profit-icon{font-size:14px}
@keyframes profitPulse{0%,100%{box-shadow:0 0 6px rgba(52,211,153,.15)}50%{box-shadow:0 0 14px rgba(52,211,153,.35)}}
/* ═══ TOTAL PORTFOLIO SUMMARY BANNER ═══ */
.mq-total-banner{
margin:10px 0 12px;
border-radius:14px;
overflow:hidden;
}
/* ═══ EVENT-DRIVEN ROTATION PANEL ═══ */
.mq-rotation-panel{
margin:8px 0 10px;
border-radius:12px;
background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04));
border:1px solid rgba(139,92,246,.35);
overflow:hidden;
}
.mq-rotation-inner{
padding:10px 14px;
}
.mq-rotation-header{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
}
.mq-rotation-icon{font-size:14px}
.mq-rotation-title{
font-size:12px;
font-weight:700;
color:rgba(200,210,245,.85);
letter-spacing:.3px;
}
.mq-rotation-instruments{
margin-left:auto;
font-size:10px;
font-family:'JetBrains Mono',monospace;
color:rgba(167,139,250,.9);
background:rgba(139,92,246,.15);
padding:2px 8px;
border-radius:6px;
letter-spacing:.5px;
}
.mq-rotation-body{
display:flex;
flex-wrap:wrap;
gap:6px;
align-items:flex-start;
}
.mq-rotation-domains{
display:flex;
flex-wrap:wrap;
gap:4px;
}
.mq-rotation-domain-tag{
display:inline-flex;
align-items:center;
gap:3px;
font-size:10px;
font-family:'JetBrains Mono',monospace;
padding:2px 7px;
border-radius:5px;
background:rgba(99,102,241,.12);
border:1px solid rgba(129,140,248,.3);
color:rgba(199,210,254,.8);
}
.mq-rotation-domain-tag .arrow{
font-size:9px;
font-weight:bold;
}
.mq-rotation-domain-tag .arrow.up{color:#34d399}
.mq-rotation-domain-tag .arrow.down{color:#f87171}
.mq-rotation-domain-tag.fwd{
border-color:rgba(251,191,36,.4);
background:rgba(251,191,36,.10);
}
.mq-rotation-domain-tag.fwd::before{
content:'⚡';
font-size:8px;
}
.mq-rotation-signals{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-left:auto;
}
.mq-rotation-sig{
display:inline-flex;
align-items:center;
gap:3px;
font-size:9px;
font-family:'JetBrains Mono',monospace;
padding:2px 6px;
border-radius:4px;
}
.mq-rotation-sig.gold-on{
background:rgba(251,191,36,.12);
border:1px solid rgba(251,191,36,.35);
color:rgba(253,230,138,.9);
}
.mq-rotation-sig.fwd-boost{
background:rgba(52,211,153,.10);
border:1px solid rgba(52,211,153,.35);
color:rgba(167,243,208,.9);
}
.mq-total-banner.profitable{
background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(52,211,153,.06));
border:1px solid rgba(52,211,153,.45);
}
.mq-total-banner.losing{
background:linear-gradient(135deg,rgba(255,77,109,.10),rgba(255,60,60,.04));
border:1px solid rgba(255,100,120,.35);
}
.mq-total-inner{
padding:14px 18px;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
}
.mq-total-label{
font-size:13px;
font-weight:700;
color:#c0d6f6;
letter-spacing:.6px;
white-space:nowrap;
}
.mq-total-pnl{
font-size:22px;
font-weight:800;
font-family:'JetBrains Mono',monospace;
letter-spacing:-.3px;
}
.mq-total-pnl.up{color:#6fffd2}
.mq-total-pnl.down{color:#ff95ac}
.mq-total-row{
display:flex;
flex-wrap:wrap;
gap:16px;
font-size:12px;
color:rgba(180,205,240,.8);
margin-left:auto;
}
.mq-total-row span{white-space:nowrap}
.mq-total-row .up{color:#6fffd2}
.mq-total-row .down{color:#ff95ac}
/* When all models losing — hide individual cards, show summary message */
.mq-card.mq-hidden{display:none !important}
.mq-scoreboard-msg{
grid-column:1/-1;
text-align:center;
padding:24px 16px;
color:rgba(170,195,230,.65);
font-size:13px;
line-height:1.7;
background:rgba(12,20,34,.5);
border:1px dashed rgba(85,120,177,.25);
border-radius:12px;
}
.mq-scoreboard-msg .icon{font-size:28px;display:block;margin-bottom:8px}
.mq-head-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.mq-ts{color:rgba(142,167,207,.7);font-size:11px;letter-spacing:.4px;text-align:right;font-family:var(--fm,'JetBrains Mono',monospace)}
.mq-regime{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(14,23,40,.88),rgba(10,18,34,.72));border:1px solid rgba(89,126,191,.38);padding:8px 14px;border-radius:12px;backdrop-filter:blur(6px)}
.mq-regime-k{font-size:11px;color:#86a2ce;letter-spacing:.6px}
.mq-regime-v{font-size:12px;color:#dbebff;font-weight:600}
.mq-regime-score{font-size:12px;color:#6bf2cb;font-family:'JetBrains Mono', monospace}
.mq-regime-bar{width:84px;height:5px;background:rgba(75,105,152,.35);border-radius:99px;overflow:hidden}
.mq-regime-fill{height:100%;width:0;background:linear-gradient(90deg,#00e2ff,#00ff9d,#ffd166,#ff4d6d)}
.mq-recompute-btn{border:1px solid rgba(83,130,223,.45);color:#d7e8ff;background:linear-gradient(180deg, rgba(49,81,142,.42), rgba(27,50,91,.38));border-radius:10px;padding:7px 11px;font-size:12px;cursor:pointer}
.mq-recompute-btn:hover{transform:translateY(-1px)}
.mq-market-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.mq-market-item{background:rgba(12,20,34,.74);border:1px solid rgba(78,112,167,.35);border-radius:10px;padding:7px 8px;display:flex;flex-direction:column;gap:2px}
.mq-market-item .k{font-size:11px;color:#8eb1e3;letter-spacing:.5px}
.mq-market-item .v{font-size:13px;color:#e0efff;font-family:'JetBrains Mono', monospace}
.mq-market-item .c{font-size:11px;color:#9dc2ee}
.mq-market-item .c.up{color:#74ffcf}
.mq-market-item .c.down{color:#ff95ac}
.mq-scoreboard{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px;margin-bottom:10px}
.mq-card{
background:linear-gradient(145deg,rgba(14,22,40,.88),rgba(20,30,52,.82));
border:1px solid rgba(85,120,177,.25);border-radius:14px;padding:14px 16px;
position:relative;overflow:hidden;
transition:all .4s cubic-bezier(.22,1,.36,1);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.mq-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,var(--mq-accent,#7dd3fc),transparent 80%);
opacity:.7;transition:opacity .3s;
}
.mq-card:hover{border-color:rgba(120,170,240,.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 20px var(--mq-glow,rgba(125,211,252,.08))}
.mq-card:hover::before{opacity:1}
.mq-card.mq-claude{--mq-accent:#7dd3fc;--mq-glow:rgba(125,211,252,.1)}
.mq-card.mq-gpt{--mq-accent:#fbbf24;--mq-glow:rgba(251,191,36,.1)}
.mq-card.mq-gemini{--mq-accent:#a78bfa;--mq-glow:rgba(167,139,250,.1)}
.mq-card.mq-deepseek{
--mq-accent:#34d399;--mq-glow:rgba(52,211,153,.1);
background:linear-gradient(145deg,rgba(14,28,35,.88),rgba(18,32,45,.82));
border-color:rgba(52,211,153,.25);
}
.mq-card.mq-deepseek .mq-card-h{color:#34d399}
.mq-card-h{
font-size:12px;font-weight:800;letter-spacing:3px;
color:#7dd3fc;text-transform:uppercase;
font-family:'JetBrains Mono',monospace;
}
.mq-card.mq-gpt .mq-card-h{color:#fbbf24}
.mq-card.mq-gemini .mq-card-h{color:#a78bfa}
/* ── Card Top Row: model name + ROI badge ── */
.mq-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.mq-card-roi{
font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
padding:2px 8px;border-radius:6px;letter-spacing:.3px;
background:rgba(255,255,255,.06);
}
.mq-card-roi.up{color:#6fffd2;background:rgba(52,211,153,.12)}
.mq-card-roi.down{color:#ff8aa2;background:rgba(255,95,130,.12)}
/* ── Card Tagline (replaces method-note inside cards) ── */
.mq-card-tagline{
font-size:10px;color:rgba(160,185,220,.65);letter-spacing:.8px;
text-transform:uppercase;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ── Compact Stats Grid (2x4) inside each card ── */
.mq-card-stats{
display:grid;grid-template-columns:1fr 1fr;gap:1px 12px;
margin-top:6px;padding-top:6px;
border-top:1px solid rgba(100,140,200,.12);
}
.mq-stat{display:flex;justify-content:space-between;align-items:center;padding:1.5px 0}
.mq-stat-k{font-size:10px;color:rgba(150,180,220,.6);letter-spacing:.3px}
.mq-stat-v{font-size:11px;color:#b8cde8;font-family:'JetBrains Mono',monospace;font-weight:500}
.mq-stat-v.up{color:#6fffd2}
.mq-stat-v.down{color:#ff8aa2}
/* ── Card entrance animation ── */
.mq-card{opacity:0;animation:mqCardIn .5s cubic-bezier(.22,1,.36,1) forwards}
.mq-card:nth-child(1){animation-delay:.05s}
.mq-card:nth-child(2){animation-delay:.12s}
.mq-card:nth-child(3){animation-delay:.19s}
.mq-card:nth-child(4){animation-delay:.26s}
@keyframes mqCardIn{
from{opacity:0;transform:translateY(12px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* VIX Hero — prominent first item in market strip */
.mq-market-item.mq-vix-hero{
background:linear-gradient(135deg,rgba(255,80,80,.12) 0%,rgba(255,50,50,.05) 100%);
border-color:rgba(255,100,100,.45);
position:relative;
grid-column:span 2;
}
.mq-market-item.mq-vix-hero .k{color:#ff8a8a;font-size:12px;font-weight:700}
.mq-market-item.mq-vix-hero .v{color:#ffcaca;font-size:16px;font-weight:700}
.mq-market-item.mq-vix-hero .c{font-size:12px}
.mq-market-item.mq-vix-hero::after{
content:'';position:absolute;top:0;right:0;bottom:0;width:3px;
background:linear-gradient(180deg,#ff4444,#ff8888,#ff4444);
border-radius:0 10px 10px 0;
animation:vixPulse 2s ease-in-out infinite;
}
@keyframes vixPulse{0%,100%{opacity:.4}50%{opacity:1}}
.mq-main{font-family:'JetBrains Mono', monospace;font-size:22px;font-weight:700;color:#d5e6ff;line-height:1.1}
.mq-main.up,.mq-row .up,.mq-scenario-table .up{color:#6fffd2}
.mq-main.down,.mq-row .down,.mq-scenario-table .down{color:#ff8aa2}
.mq-row{display:flex;justify-content:space-between;color:#b8cae8;font-size:12px;padding-top:3px}
.mq-dominant{margin-top:6px;padding:5px 7px;border-radius:8px;background:rgba(13,22,38,.78);border:1px solid rgba(77,113,170,.18);color:#e0ecff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mq-grid{display:grid;grid-template-columns:1fr;gap:10px}
.mq-panel{background:rgba(14,23,39,.72);border:1px solid rgba(79,112,166,.25);border-radius:14px;padding:12px;min-height:180px;position:relative;overflow:hidden}
.mq-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 0%,rgba(80,140,220,.04),transparent 70%);pointer-events:none}
.mq-panel-wide{grid-column:1 / -1}
.mq-panel-half{min-height:160px}
.mq-panel-h{font-size:13px;color:#cae1ff;letter-spacing:.4px;margin-bottom:8px;font-weight:600}
/* ── Equity canvas premium styling ── */
.mq-equity-panel{min-height:auto;padding:14px 16px 12px}
.mq-equity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px}
.mq-equity-header .mq-panel-h{margin-bottom:0}
.mq-equity-canvas-wrap{position:relative;border-radius:10px;overflow:hidden;background:rgba(8,14,26,.6);border:1px solid rgba(74,109,163,.2)}
#mq-equity-canvas{width:100%;height:200px;display:block}
/* ── Equity curve legend ── */
.mq-equity-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mq-legend-item{display:flex;align-items:center;gap:5px;font-size:10px;color:rgba(200,220,245,.7);font-family:'JetBrains Mono',monospace;letter-spacing:.3px}
.mq-legend-dot{width:12px;height:3px;border-radius:2px;display:inline-block;box-shadow:0 0 6px currentColor}
/* ═══ WAR ROOM VIX PANEL ═══ */
.mq-vix-panel{min-height:auto;padding:14px 16px 12px;position:relative;overflow:hidden}
.mq-vix-panel::after{content:'';position:absolute;top:0;right:0;width:180px;height:180px;
background:radial-gradient(circle,rgba(0,255,200,0.03) 0%,transparent 70%);pointer-events:none}
.mq-vix-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-wrap:wrap;gap:6px}
.mq-vix-header .mq-panel-h{margin-bottom:0}
.mq-vix-title{font-size:14px !important;background:linear-gradient(90deg,#00ffc8,#00bfff,#a78bfa);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700 !important}
.mq-vix-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mq-vix-dot-wr{background:linear-gradient(90deg,#00e5ff,#00bfff) !important;box-shadow:0 0 8px #00e5ff !important}
.mq-vix-dot-real{background:linear-gradient(90deg,#00c853,#66bb6a) !important;box-shadow:0 0 8px #00c853 !important}
/* ── VIX Mode Toggle: premium animated pill switch ── */
.mq-vix-mode-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;-webkit-user-select:none}
.mq-vix-mode-track{position:relative;width:32px;height:16px;border-radius:8px;
background:linear-gradient(135deg,rgba(0,229,255,0.15),rgba(0,191,255,0.25));
border:1px solid rgba(0,229,255,0.3);transition:all .35s cubic-bezier(.4,.0,.2,1);
overflow:hidden;flex-shrink:0}
.mq-vix-mode-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;
background:linear-gradient(135deg,#00e5ff,#00bfff);box-shadow:0 0 6px rgba(0,229,255,0.6);
transition:all .35s cubic-bezier(.4,.0,.2,1)}
.mq-vix-mode-glow{position:absolute;top:-2px;left:-2px;width:18px;height:18px;border-radius:50%;
background:radial-gradient(circle,rgba(0,229,255,0.3),transparent 70%);
transition:all .35s cubic-bezier(.4,.0,.2,1);opacity:0.6}
.mq-vix-mode-toggle:hover .mq-vix-mode-thumb{box-shadow:0 0 10px rgba(0,229,255,0.8)}
.mq-vix-mode-toggle:hover .mq-vix-mode-glow{opacity:1}
.mq-vix-mode-label{font-size:9px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
color:rgba(0,229,255,0.7);transition:all .35s;white-space:nowrap;text-transform:uppercase}
/* Active = RAW mode */
.mq-vix-mode-toggle.raw .mq-vix-mode-track{background:linear-gradient(135deg,rgba(255,180,40,0.15),rgba(255,140,0,0.25));
border-color:rgba(255,180,40,0.4)}
.mq-vix-mode-toggle.raw .mq-vix-mode-thumb{left:18px;
background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 0 6px rgba(251,191,36,0.6)}
.mq-vix-mode-toggle.raw .mq-vix-mode-glow{left:14px;
background:radial-gradient(circle,rgba(251,191,36,0.3),transparent 70%)}
.mq-vix-mode-toggle.raw .mq-vix-mode-label{color:rgba(251,191,36,0.8)}
@keyframes vix-toggle-pulse{0%,100%{box-shadow:0 0 6px rgba(0,229,255,0.6)}50%{box-shadow:0 0 12px rgba(0,229,255,0.9)}}
.mq-vix-mode-thumb{animation:vix-toggle-pulse 2s ease-in-out infinite}
.mq-vix-status{font-size:9px;color:rgba(0,255,200,0.6);font-family:'JetBrains Mono',monospace;letter-spacing:.6px}
/* ── VIX Metrics: Google-Finance-style hero row ── */
.mq-vix-metrics{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.mq-vix-hero-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mq-vix-price-hero{display:flex;align-items:baseline;gap:10px}
.mq-vix-big-price{font-size:28px;font-weight:700;color:#e0f0ff;font-family:'JetBrains Mono',monospace;letter-spacing:-.5px}
.mq-vix-big-change{font-size:13px;font-weight:600;font-family:'JetBrains Mono',monospace}
.mq-vix-wr-badge{display:flex;flex-direction:column;align-items:center;padding:4px 14px;
background:rgba(0,229,255,0.06);border:1px solid rgba(0,229,255,0.15);border-radius:8px}
.mq-vix-wr-label{font-size:8px;color:rgba(0,229,255,0.6);letter-spacing:.8px;text-transform:uppercase;
font-family:'JetBrains Mono',monospace}
.mq-vix-wr-val{font-size:18px;font-weight:700;color:#00e5ff;font-family:'JetBrains Mono',monospace;
text-shadow:0 0 10px rgba(0,229,255,0.3)}
.mq-vix-wr-delta{font-size:9px;font-family:'JetBrains Mono',monospace;margin-top:1px}
.mq-vix-wr-delta.delta-pos{color:#ff4757}
.mq-vix-wr-delta.delta-neg{color:#2ed573}
.mq-vix-wr-delta.delta-zero{color:#8ea9cf}
.mq-vix-dirs{display:flex;gap:8px;align-items:center;margin-left:auto}
.mq-vix-dir{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-family:'JetBrains Mono',monospace}
.mq-vix-dir.up{color:#ff4757}.mq-vix-dir.down{color:#2ed573}.mq-vix-dir.stable{color:#8ea9cf}
.mq-vix-dir .arrow{font-size:11px;font-weight:700}
/* ── Daily stats row (Open/High/Low/PrevClose/52W) ── */
.mq-vix-stats-row{display:flex;gap:6px;flex-wrap:wrap}
.mq-vix-stat{display:flex;gap:6px;align-items:baseline;padding:2px 0}
.mq-vix-stat-k{font-size:10px;color:rgba(200,220,245,0.4);font-family:'JetBrains Mono',monospace}
.mq-vix-stat-v{font-size:11px;color:rgba(200,230,255,0.75);font-weight:600;font-family:'JetBrains Mono',monospace}
.mq-vix-stat::after{content:'·';color:rgba(255,255,255,0.1);margin-left:6px;font-size:10px}
.mq-vix-stat:last-child::after{display:none}
/* ── Key signal row ── */
.mq-vix-signal-row{font-size:10px;color:rgba(0,255,200,0.55);font-family:'JetBrains Mono',monospace;
line-height:1.3;max-height:28px;overflow:hidden;margin-top:2px;padding:3px 0;
border-top:1px solid rgba(0,255,200,0.06)}
/* ── Quant Model Decomposition Row ── */
.mq-vix-quant-row{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0;
border-top:1px solid rgba(0,229,255,0.06);border-bottom:1px solid rgba(0,229,255,0.06)}
.mq-vix-quant-item{display:flex;flex-direction:column;align-items:center;gap:1px;
padding:3px 8px;background:rgba(8,14,28,0.5);border-radius:6px;
border:1px solid rgba(60,100,160,0.1);min-width:58px;cursor:help}
.mq-vix-quant-item:hover{background:rgba(15,25,45,0.7);border-color:rgba(0,229,255,0.15)}
.mq-vq-label{font-size:8px;color:rgba(200,220,245,0.4);font-family:'JetBrains Mono',monospace;
letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.mq-vq-val{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace}
.mq-vix-canvas-wrap{position:relative;border-radius:10px;overflow:hidden;
background:rgba(4,8,18,0.8);border:1px solid rgba(255,255,255,0.06);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2),0 0 20px rgba(0,0,0,0.3)}
#mq-vix-canvas{width:100%;height:340px;display:block}
.mq-vix-pulse{position:absolute;top:8px;right:10px;width:6px;height:6px;border-radius:50%;
background:#00e5ff;box-shadow:0 0 6px #00e5ff,0 0 12px rgba(0,229,255,0.4);
animation:vixPulse 2s ease-in-out infinite}
@keyframes vixPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(1.5)}}
/* Responsive */
@media(max-width:920px){#mq-vix-canvas{height:280px}}
@media(max-width:600px){
#mq-vix-canvas{height:240px}
.mq-vix-big-price{font-size:22px}
.mq-vix-big-change{font-size:11px}
.mq-vix-wr-val{font-size:15px}
.mq-vix-stats-row{gap:4px}
.mq-vix-stat-k{font-size:9px}
.mq-vix-stat-v{font-size:10px}
}
/* Sidebar compact */
.macro-quant-arena .mq-vix-panel{padding:8px 10px 6px}
.macro-quant-arena #mq-vix-canvas{height:220px}
.macro-quant-arena .mq-panel-wide.mq-vix-panel{display:block !important}
/* ═══ MULTI-ASSET RISK INTELLIGENCE DASHBOARD ═══ */
/* ── Risk Hero Grid: VIX Price + Term Structure + Regime ── */
.mq-risk-hero-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:8px 0 10px;
border-bottom:1px solid rgba(0,229,255,0.08)}
.mq-risk-vix-block,.mq-risk-ts-block,.mq-risk-verdict-block{display:flex;flex-direction:column;
align-items:center;gap:3px}
.mq-risk-vix-label{font-size:9px;color:rgba(200,220,245,0.4);font-family:'JetBrains Mono',monospace;
letter-spacing:1px;text-transform:uppercase}
.mq-risk-vix-price{font-size:32px;font-weight:700;color:#e0f0ff;font-family:'JetBrains Mono',monospace;
letter-spacing:-1px;line-height:1}
.mq-risk-vix-change{font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace}
.mq-risk-badge-label{font-size:8px;color:rgba(200,220,245,0.4);font-family:'JetBrains Mono',monospace;
letter-spacing:.8px;text-transform:uppercase}
.mq-risk-badge{padding:3px 10px;border:1px solid;border-radius:12px;font-size:11px;font-weight:600;
font-family:'JetBrains Mono',monospace;text-align:center}
.mq-risk-ts-detail{font-size:9px;color:rgba(200,220,245,0.55);font-family:'JetBrains Mono',monospace}
.mq-risk-regime{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;
letter-spacing:.5px}
.mq-risk-stress{font-size:9px;color:rgba(200,220,245,0.55);font-family:'JetBrains Mono',monospace}
.mq-risk-verdict{font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace;
margin-top:2px;text-align:center}
.mq-risk-conviction{font-size:9px;color:rgba(200,220,245,0.5);font-family:'JetBrains Mono',monospace}
/* ── Cross-Asset Risk Matrix ── */
.mq-cam-title{font-size:10px;color:rgba(200,220,245,0.5);font-family:'JetBrains Mono',monospace;
letter-spacing:.8px;text-transform:uppercase;padding:10px 0 6px;
border-bottom:1px solid rgba(0,229,255,0.06)}
.mq-cam-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px 0}
.mq-cam-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;
background:rgba(8,14,28,0.6);border:1px solid rgba(60,100,160,0.12);border-radius:8px;
transition:all .2s ease}
.mq-cam-cell:hover{background:rgba(15,25,45,0.8);border-color:rgba(0,229,255,0.2);
transform:translateY(-1px)}
.mq-cam-icon{font-size:14px;line-height:1}
.mq-cam-sym{font-size:9px;font-weight:700;color:rgba(200,220,245,0.7);font-family:'JetBrains Mono',monospace;
letter-spacing:.5px}
.mq-cam-price{font-size:11px;font-weight:600;color:#e0f0ff;font-family:'JetBrains Mono',monospace}
.mq-cam-chg{font-size:9px;font-weight:600;font-family:'JetBrains Mono',monospace}
.mq-cam-signal{font-size:14px;font-weight:700;line-height:1}
.mq-cam-consensus{font-size:8px;font-weight:600;font-family:'JetBrains Mono',monospace;
display:flex;flex-direction:column;align-items:center;gap:1px}
.mq-cam-votes{font-size:7px;opacity:0.5;display:block}
.mq-cam-summary{display:flex;gap:14px;padding:4px 0;font-size:9px;font-family:'JetBrains Mono',monospace;
flex-wrap:wrap;border-top:1px solid rgba(0,229,255,0.06)}
/* ── Model Consensus Table ── */
.mq-cons-title{font-size:10px;color:rgba(200,220,245,0.5);font-family:'JetBrains Mono',monospace;
letter-spacing:.8px;text-transform:uppercase;padding:10px 0 6px;
border-bottom:1px solid rgba(0,229,255,0.06)}
.mq-cons-table{width:100%;overflow-x:auto;padding:4px 0}
.mq-cons-table table{width:100%;border-collapse:collapse;font-size:10px;
font-family:'JetBrains Mono',monospace}
.mq-cons-table th{padding:4px 6px;color:rgba(200,220,245,0.45);font-weight:500;font-size:9px;
text-align:center;letter-spacing:.3px;border-bottom:1px solid rgba(60,100,160,0.12)}
.mq-cons-model{font-weight:700;font-size:9px;letter-spacing:.5px;padding:5px 4px !important;
white-space:nowrap}
.mq-cons-cell{text-align:center;padding:4px 4px;border-bottom:1px solid rgba(30,50,80,0.15);
vertical-align:middle}
.mq-cons-dir{font-size:8px;font-weight:700;display:block;line-height:1.2}
.mq-cons-pnl{font-size:7px;display:block;opacity:0.7}
.mq-cons-empty{color:rgba(150,180,220,0.2)}
.mq-risk-signal-row{font-size:10px;color:rgba(0,255,200,0.55);font-family:'JetBrains Mono',monospace;
line-height:1.3;max-height:28px;overflow:hidden;margin-top:6px;padding:5px 0;
border-top:1px solid rgba(0,255,200,0.06)}
/* Responsive for risk dashboard */
@media(max-width:700px){
.mq-risk-hero-grid{grid-template-columns:1fr;gap:8px}
.mq-cam-grid{grid-template-columns:repeat(3,1fr)}
.mq-risk-vix-price{font-size:26px}
.mq-cons-table{font-size:9px}
}
@media(max-width:400px){
.mq-cam-grid{grid-template-columns:repeat(2,1fr)}
.mq-risk-vix-price{font-size:22px}
}
.mq-trade-tape{display:flex;flex-direction:column;gap:6px;max-height:235px;overflow:auto;padding-right:2px}
.mq-tape-item{display:grid;grid-template-columns:70px 58px 44px 66px 1fr;gap:6px;align-items:center;font-size:12px;padding:6px;border-radius:8px;background:rgba(10,18,31,.86);border:1px solid rgba(65,99,151,.28)}
.mq-ti-time{color:#8ea9cf;font-family:'JetBrains Mono', monospace}
.mq-ti-model{color:#d8e8ff;font-weight:600}
.mq-ti-side{color:#aac7ed}
.mq-ti-symbol{color:#7db8ff;font-family:'JetBrains Mono', monospace}
.mq-ti-notional{justify-self:end;font-family:'JetBrains Mono', monospace}
.mq-ti-reason{grid-column:1 / -1;font-size:10px;color:#8eb0d8;letter-spacing:.4px;text-transform:uppercase}
.mq-empty{color:#85a2cd;font-size:13px;padding:8px 4px}
/* ── Position Toggle Button ── */
.mq-pos-toggle{
display:block;width:100%;margin-top:6px;padding:5px 8px;
background:rgba(50,80,130,.2);border:1px solid rgba(86,130,200,.25);
border-radius:8px;color:#7eb8f7;font-size:11px;font-family:'JetBrains Mono',monospace;
letter-spacing:.5px;cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);
text-align:left;
}
.mq-pos-toggle:hover{background:rgba(70,110,180,.38);border-color:rgba(120,180,255,.55);color:#b8d8ff}
.mq-pos-toggle.open{background:rgba(30,55,100,.5);border-color:#4a90d9;color:#c6e0ff}
/* ── Position Breakdown Panel ── */
.mq-pos-panel{
display:none;width:100%;margin:14px 0 4px;
background:rgba(8,15,28,.88);border:1px solid rgba(70,105,170,.4);
border-radius:12px;overflow:hidden;
animation:mqPosIn .22s ease-out;
}
@keyframes mqPosIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.mq-pos-ph{
display:flex;align-items:center;gap:16px;padding:10px 16px;
background:rgba(18,30,54,.7);border-bottom:1px solid rgba(70,105,170,.35);
flex-wrap:wrap;
}
.mq-pos-ph-model{
font-size:13px;font-weight:700;letter-spacing:1px;color:#7dd3fc;
font-family:'JetBrains Mono',monospace;
}
.mq-pos-ph-equity,.mq-pos-ph-cash{font-size:12px;color:#9bbfe0}
.mq-pos-ph-equity span,.mq-pos-ph-cash span{color:#d8eeff;font-weight:600}
.mq-pos-close{
margin-left:auto;background:none;border:none;color:#6a90c0;cursor:pointer;
font-size:15px;line-height:1;padding:2px 6px;border-radius:4px;transition:color .15s;
}
.mq-pos-close:hover{color:#ffaaaa}
.mq-pos-table-wrap{padding:10px 14px 14px;overflow-x:auto}
.mq-pos-table{width:100%;border-collapse:collapse;font-size:12px;font-family:'JetBrains Mono',monospace}
.mq-pos-table th{
padding:6px 10px;text-align:right;color:#6a95c8;font-weight:600;letter-spacing:.4px;
border-bottom:1px solid rgba(70,110,165,.4);font-size:11px;
}
.mq-pos-table th:first-child{text-align:left}
.mq-pos-table td{
padding:7px 10px;text-align:right;color:#cde4ff;
border-bottom:1px solid rgba(40,65,110,.3);
}
.mq-pos-table td:first-child{text-align:left;color:#7dd3fc;font-weight:700}
.mq-pos-table tr:last-child td{border-bottom:none}
.mq-pos-table tr:hover td{background:rgba(60,95,160,.18)}
.mq-pos-table td.up{color:#74ffcf}
.mq-pos-table td.down{color:#ff95ac}
.mq-pos-table td.side-long{color:#74ffcf;font-weight:700}
.mq-pos-table td.side-short{color:#ff95ac;font-weight:700}
.mq-pos-empty{display:none;text-align:center;padding:20px;color:#5a80aa;font-size:13px}
.mq-scenario-wrap{overflow:auto}
.mq-scenario-table{width:100%;border-collapse:collapse;font-size:12px}
.mq-scenario-table th,.mq-scenario-table td{padding:8px;border-bottom:1px solid rgba(68,99,145,.3);text-align:right;color:#dceafe}
.mq-scenario-table th:first-child,.mq-scenario-table td:first-child{text-align:left;color:#9bc2ff;font-weight:700}
@media (max-width: 1180px){
.mq-header{flex-direction:column;align-items:flex-start}
.mq-head-right{width:100%;justify-content:space-between;flex-wrap:wrap}
.mq-market-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 920px){
.mq-scoreboard{grid-template-columns:1fr 1fr;gap:8px}
.mq-grid{grid-template-columns:1fr}
.mq-panel-wide{grid-column:auto}
.mq-market-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
#mq-equity-canvas{height:180px}
.mq-tape-item{grid-template-columns:62px 48px 38px 58px 1fr}
.mq-main{font-size:18px}
}
@media (max-width: 480px){
.mq-scoreboard{grid-template-columns:1fr;gap:6px}
}
/* ══════ RESET & BASE ══════ */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:var(--fs-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;text-rendering:optimizeLegibility}
body{
background:var(--bg);color:var(--txt);font-family:var(--fb);line-height:1.8;overflow-x:hidden;
font-feature-settings:'palt','kern';
background-image:
radial-gradient(ellipse at 15% 50%, rgba(200,164,90,.06) 0%, transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(61,143,160,.05) 0%, transparent 50%),
radial-gradient(ellipse at 50% 90%, rgba(208,128,80,.04) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(38,51,68,.65) 0%, transparent 70%),
radial-gradient(ellipse at 50% 30%, rgba(22,32,50,.8) 0%, transparent 80%);
background-attachment:fixed;
}
/* Ultra-subtle noise texture */
body::after{
content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
background:url('data:image/svg+xml,');
background-size:256px 256px;
}
a{color:var(--gold);text-decoration:none;transition:color .3s}
a:hover{color:var(--gold2)}
.hidden{display:none!important}
/* ══════ ANIMATIONS ══════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 6px rgba(200,164,90,.15)}50%{box-shadow:0 0 20px rgba(200,164,90,.3)}}
@keyframes scanMove{0%{background-position:0 0}100%{background-position:100% 100%}}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes shakeHeavy{0%{transform:translate(0)}10%{transform:translate(-14px,10px) rotate(-1.5deg)}20%{transform:translate(12px,-8px) rotate(2deg)}30%{transform:translate(-10px,6px) rotate(-1deg)}40%{transform:translate(8px,-10px) rotate(1deg)}50%{transform:translate(-6px,4px)}60%{transform:translate(4px,-3px)}70%{transform:translate(-2px,3px)}80%{transform:translate(2px,-2px)}90%{transform:translate(-1px,1px)}100%{transform:translate(0)}}
@keyframes grainShift{0%{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,15%)}50%{transform:translate(-10%,5%)}60%{transform:translate(15%,0)}70%{transform:translate(0,10%)}80%{transform:translate(-15%,0)}90%{transform:translate(10%,5%)}100%{transform:translate(5%,0)}}
@keyframes threatPulse{0%,100%{text-shadow:0 0 8px rgba(196,60,60,.4)}50%{text-shadow:0 0 25px rgba(196,60,60,.7),0 0 50px rgba(196,60,60,.2)}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes expandIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes divergencePulse{0%,100%{border-color:rgba(196,60,60,.12)}50%{border-color:rgba(196,60,60,.3)}}
@keyframes riskGlow{0%,100%{box-shadow:0 0 15px rgba(196,60,60,.15),0 0 5px rgba(196,60,60,.1)}50%{box-shadow:0 0 30px rgba(196,60,60,.35),0 0 60px rgba(196,60,60,.12)}}
@keyframes nodeAppear{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes stampSlam{0%{transform:scale(4) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(-5deg);opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ambientGlow{0%,100%{opacity:.4}50%{opacity:.7}}
@keyframes borderTrace{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes radarSweep{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes threatWave{0%{transform:scaleX(0);opacity:.6}50%{transform:scaleX(1);opacity:.2}100%{transform:scaleX(1);opacity:0}}
@keyframes holoFlicker{0%,97%{opacity:1}97.5%{opacity:.6}98%{opacity:1}98.5%{opacity:.7}99%{opacity:1}}
@keyframes dataStream{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
@keyframes cardReveal{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroGlow{0%,100%{box-shadow:inset 0 0 20px rgba(196,60,60,0)}50%{box-shadow:inset 0 0 20px rgba(196,60,60,.06)}}
@keyframes gridPulse{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes warningStrobe{0%,85%,100%{opacity:0}90%{opacity:.4}95%{opacity:.6}}
@keyframes numberGlitch{0%,100%{transform:none;opacity:1}33%{transform:translate(-2px,1px) skewX(-2deg);opacity:.8}66%{transform:translate(2px,-1px) skewX(2deg);opacity:.9}}
/* ══════ CINEMATIC OVERLAY ══════ */
.cine-overlay{
position:fixed;inset:0;z-index:9999;
background:radial-gradient(ellipse at 50% 40%, #0d1520 0%, #080c14 50%, #040608 100%);
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.film-grain{
position:absolute;inset:-50%;width:200%;height:200%;
background:url('data:image/svg+xml,');
animation:grainShift 8s steps(10) infinite;pointer-events:none;z-index:1;
animation-play-state:running;
}
/* ── Radar rings — pulsing circles from center ── */
.splash-radar{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
pointer-events:none;z-index:1;
}
.radar-ring{
position:absolute;border-radius:50%;
border:1px solid rgba(200,164,90,.06);
animation:radarExpand 6s ease-out infinite;
}
.radar-ring.r1{width:200px;height:200px;animation-delay:0s}
.radar-ring.r2{width:200px;height:200px;animation-delay:2s}
.radar-ring.r3{width:200px;height:200px;animation-delay:4s}
@keyframes radarExpand{
0%{width:80px;height:80px;opacity:.4;border-color:rgba(200,164,90,.15)}
50%{opacity:.15}
100%{width:min(1200px,90vw);height:min(1200px,90vw);opacity:0;border-color:rgba(200,164,90,.02)}
}
.radar-sweep{
position:absolute;width:300px;height:300px;
border-radius:50%;
background:conic-gradient(from 0deg, transparent 0deg, rgba(200,164,90,.06) 40deg, transparent 80deg);
animation:radarSpin 8s linear infinite;
opacity:.5;
}
@keyframes radarSpin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/* ── Floating node network canvas ── */
.splash-nodes{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:1;opacity:.6;
}
.cine-phase{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:2;padding-bottom:6vh}
#phase-classified{display:flex;opacity:1}
#phase-classified .classified-stamp{animation:stampSlam .15s ease-out both}
#phase-classified .classified-sub{animation:fadeUp .4s .2s ease both}
.classified-stamp{
font-family:var(--fd);font-size:clamp(2.5rem,8vw,5rem);font-weight:900;
color:var(--red);letter-spacing:14px;
text-shadow:0 0 30px rgba(196,60,60,.35),0 0 80px rgba(196,60,60,.1);
border:3px solid var(--red);padding:.6rem 2.5rem;
position:relative;
}
.classified-stamp::before{
content:'';position:absolute;inset:-6px;
border:1px solid rgba(196,60,60,.15);
}
.classified-sub{font-family:'Noto Serif SC','Noto Sans SC',var(--fh),serif;font-size:clamp(.85rem,2.5vw,1.1rem);color:var(--txt3);letter-spacing:6px;margin-top:1.4rem;font-weight:600}
.intel-block{font-family:var(--fm);font-size:clamp(.7rem,1.8vw,.9rem);color:var(--gold);max-width:650px;width:90%}
.intel-line{padding:.45rem 0;border-bottom:1px solid rgba(200,164,90,.06);min-height:1.4rem;letter-spacing:1px}
.threat-box{
margin-top:1.8rem;display:flex;align-items:center;gap:1.2rem;
padding:1rem 2.2rem;border:3px solid var(--red);
background:rgba(196,60,60,.08);border-radius:4px;
position:relative;z-index:5;
box-shadow:0 0 40px rgba(196,60,60,.15),inset 0 0 30px rgba(196,60,60,.05);
}
.threat-label{font-family:var(--fd);font-size:.7rem;color:var(--txt3);letter-spacing:3px}
.threat-val{font-family:var(--fd),'Impact','Arial Black',sans-serif;font-size:3rem;color:var(--red);font-weight:900;animation:threatPulse 2.5s infinite;letter-spacing:14px;text-shadow:0 0 30px rgba(196,60,60,.6),0 0 60px rgba(196,60,60,.3),0 2px 4px rgba(0,0,0,.5);text-transform:uppercase}
.jet-trail{position:absolute;top:30%;height:2px;background:linear-gradient(90deg,transparent,rgba(200,164,90,.5),transparent);width:60%;filter:blur(1px)}
.jet-trail.reverse{top:65%}
.impact-flash{display:none!important}
.fireball{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,#c87832,#c43c3c,transparent);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);z-index:4}
/* ── Title Block — clean, centered, premium ── */
.title-block{text-align:center;z-index:3;perspective:1000px;padding:0 1.5rem;box-sizing:border-box;max-width:780px;margin:0 auto}
.title-main{
font-family:var(--fd);font-size:clamp(2rem,5.5vw,3.6rem);font-weight:900;
color:var(--txt);letter-spacing:clamp(4px,1.5vw,12px);
text-shadow:0 0 60px rgba(200,164,90,.18),0 0 120px rgba(200,164,90,.06);
white-space:nowrap;overflow:visible;
background:linear-gradient(180deg, #f0e8d0 0%, #c8a45a 60%, #a88838 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
max-width:95vw;
}
.title-divider{width:280px;height:1px;background:linear-gradient(90deg,transparent,rgba(200,164,90,.5),transparent);margin:.6rem auto;transform-origin:center}
.title-sub{
font-family:'Noto Sans SC','Noto Serif SC','PingFang SC',sans-serif;
font-size:clamp(1.3rem,3.2vw,1.8rem);color:var(--txt);
letter-spacing:clamp(4px,1vw,8px);margin-bottom:.3rem;font-weight:800;
text-shadow:0 0 30px rgba(200,164,90,.15),0 2px 4px rgba(0,0,0,.5);
}
.title-cn{
font-family:var(--fc);font-size:clamp(.9rem,2.4vw,1.15rem);
color:var(--txt2);letter-spacing:clamp(2px,.8vw,5px);
margin-top:.2rem;
}
.title-vs{display:flex;align-items:center;gap:.8rem;margin-top:.8rem;width:100%;max-width:520px;justify-content:center;margin-left:auto;margin-right:auto}
.vs-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(200,164,90,.2),transparent)}
.vs-text{font-family:var(--fc);font-size:clamp(.72rem,1.9vw,.88rem);color:var(--gold);letter-spacing:clamp(2px,.8vw,4px);white-space:nowrap;opacity:.85}
/* ── Model Badge Cards — modern chip design ── */
.title-models{display:flex;gap:.6rem;justify-content:center;margin-top:.8rem;flex-wrap:wrap;align-items:center}
.mbadge-card{
display:flex;flex-direction:column;align-items:center;gap:.2rem;
padding:.5rem 1rem;border-radius:6px;
border:1px solid;opacity:0;
background:rgba(255,255,255,.02);
backdrop-filter:blur(4px);
transition:all .4s;
min-width:90px;
}
.mbadge-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.06)}
.mbadge-card .mbc-icon{font-size:1.1rem;line-height:1}
.mbadge-card .mbc-name{font-family:var(--fd);font-size:.7rem;font-weight:800;letter-spacing:2px}
.mbadge-card .mbc-ver{font-family:var(--fm);font-size:.55rem;opacity:.6;letter-spacing:1px}
.mbadge-vs{font-family:var(--fd);font-size:.65rem;font-weight:700;color:rgba(200,164,90,.4);letter-spacing:3px;opacity:0}
.mb-claude{border-color:rgba(200,155,106,.3);color:var(--claude);box-shadow:0 0 20px rgba(200,155,106,.06)}
.mb-claude:hover{border-color:rgba(200,155,106,.5);box-shadow:0 0 30px rgba(200,155,106,.12)}
.mb-gpt{border-color:rgba(107,159,212,.3);color:var(--gpt);box-shadow:0 0 20px rgba(107,159,212,.06)}
.mb-gpt:hover{border-color:rgba(107,159,212,.5);box-shadow:0 0 30px rgba(107,159,212,.12)}
.mb-gemini{border-color:rgba(94,188,178,.3);color:var(--gemini);box-shadow:0 0 20px rgba(94,188,178,.06)}
.mb-gemini:hover{border-color:rgba(94,188,178,.5);box-shadow:0 0 30px rgba(94,188,178,.12)}
.mb-quewi{border-color:var(--quewi);color:var(--quewi);box-shadow:var(--glow-quewi)}
.title-desc{
font-family:var(--fc);font-size:clamp(.82rem,2.1vw,1rem);
color:var(--txt3);letter-spacing:clamp(1px,.6vw,3px);
margin-top:1rem;opacity:.7;
}
.title-powered{font-family:var(--fb);font-size:.8rem;color:var(--txt3);margin-top:.5rem;letter-spacing:1px;opacity:.6}
.q-link{color:var(--quewi);font-weight:600;border-bottom:1px solid rgba(144,112,176,.3);transition:all .3s}
.q-link:hover{color:#b090d0;text-shadow:0 0 8px rgba(144,112,176,.25)}
/* ── QueWi Hero Branding — redesigned with glow ring ── */
.title-quewi-hero{
display:flex;align-items:center;justify-content:center;gap:1rem;
margin-bottom:1rem;opacity:0;flex-wrap:wrap;max-width:90vw;margin-left:auto;margin-right:auto;
}
.quewi-hero-logo-ring{
position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.quewi-hero-logo-ring::before{
content:'';position:absolute;inset:-4px;border-radius:16px;
border:2px solid rgba(144,112,176,.3);
animation:logoRingPulse 3s ease-in-out infinite;
}
.quewi-hero-logo-ring::after{
content:'';position:absolute;inset:-8px;border-radius:20px;
border:1px solid rgba(144,112,176,.1);
animation:logoRingPulse 3s ease-in-out infinite 0.5s;
}
@keyframes logoRingPulse{
0%,100%{opacity:.4;transform:scale(1)}
50%{opacity:.8;transform:scale(1.04)}
}
.quewi-hero-logo{
width:56px;height:56px;border-radius:14px;
background:linear-gradient(135deg,rgba(144,112,176,.2),rgba(88,60,140,.1));
border:2px solid rgba(144,112,176,.45);
color:var(--quewi);font-family:var(--fd);font-size:1.5rem;font-weight:900;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 30px rgba(144,112,176,.2),0 0 60px rgba(144,112,176,.05);
text-shadow:0 0 12px rgba(144,112,176,.6);
position:relative;z-index:1;
}
.quewi-hero-text{display:flex;flex-direction:column;gap:.15rem}
.quewi-hero-name{
font-family:var(--fd);font-size:1.8rem;font-weight:800;color:var(--quewi);
letter-spacing:4px;text-shadow:0 0 20px rgba(144,112,176,.3);white-space:nowrap;
line-height:1;
}
.quewi-hero-name sup{font-size:.5em;color:var(--gold)}
.quewi-hero-tag{
font-family:var(--fc);font-size:.7rem;letter-spacing:2px;color:var(--txt3);
white-space:nowrap;
}
/* QueWi.ai CTA badge — 倒流标志 */
.quewi-cta-badge{
display:inline-flex;align-items:center;gap:.3rem;
text-decoration:none;
font-family:var(--fd);font-size:.6rem;font-weight:700;
color:#fff;letter-spacing:.5px;
padding:.25rem .7rem;
background:linear-gradient(135deg,rgba(144,112,176,.28),rgba(88,60,140,.35));
border:1px solid rgba(144,112,176,.45);
border-radius:20px;
box-shadow:0 0 12px rgba(144,112,176,.15),inset 0 0 8px rgba(144,112,176,.08);
transition:all .35s;
white-space:nowrap;
animation:ctaBadgePulse 4s ease-in-out infinite;
}
.quewi-cta-badge:hover{
background:linear-gradient(135deg,rgba(144,112,176,.4),rgba(88,60,140,.5));
border-color:rgba(144,112,176,.7);
box-shadow:0 0 22px rgba(144,112,176,.3),inset 0 0 10px rgba(144,112,176,.12);
transform:translateY(-1px);
color:#fff;
}
.qcta-bolt{font-size:.75rem}
.qcta-txt{color:rgba(255,255,255,.85);font-size:.55rem;font-weight:600}
.qcta-models{
color:var(--quewi);font-weight:800;font-size:.6rem;
text-shadow:0 0 6px rgba(144,112,176,.3);
}
@keyframes ctaBadgePulse{
0%,100%{box-shadow:0 0 12px rgba(144,112,176,.15),inset 0 0 8px rgba(144,112,176,.08)}
50%{box-shadow:0 0 20px rgba(144,112,176,.25),inset 0 0 12px rgba(144,112,176,.12)}
}
/* Logo QueWi badge in topbar */
.logo-quewi{
font-family:var(--fd);font-size:.7rem;font-weight:800;
color:var(--quewi);letter-spacing:2.5px;
padding:.2rem .65rem;margin-left:.5rem;
background:linear-gradient(135deg,rgba(144,112,176,.15),rgba(144,112,176,.04));
border:1px solid rgba(144,112,176,.3);border-radius:2px;
box-shadow:0 0 15px rgba(144,112,176,.1);
text-shadow:0 0 8px rgba(144,112,176,.4);
}
.logo-quewi sup{font-size:.65em;color:var(--gold)}
/* Stamp slam animation */
@keyframes threatStampSlam{
0%{transform:scale(3.5) rotate(-8deg);opacity:0;filter:blur(4px)}
60%{transform:scale(0.95) rotate(0deg);opacity:1;filter:blur(0)}
75%{transform:scale(1.05) rotate(1deg)}
100%{transform:scale(1) rotate(0deg);opacity:1;filter:blur(0)}
}
@keyframes threatStampShake{
0%{transform:translate(0)}
15%{transform:translate(-10px,6px) rotate(-1deg)}
30%{transform:translate(8px,-4px) rotate(1deg)}
45%{transform:translate(-6px,3px)}
60%{transform:translate(4px,-2px)}
75%{transform:translate(-2px,1px)}
100%{transform:translate(0)}
}
.ember-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.ember{position:absolute;border-radius:50%;background:radial-gradient(circle,#dbb96e,#c87832);box-shadow:0 0 4px rgba(200,164,90,.3);pointer-events:none;z-index:1}
.shatter-box{position:absolute;inset:0;pointer-events:none;z-index:10}
.shard{position:absolute;background:linear-gradient(135deg,rgba(200,164,90,.1),rgba(200,164,90,.01));border:1px solid rgba(200,164,90,.08)}
/* ── Cinematic GO Button — dynamic, bouncy, glowing ── */
.cine-enter-wrap{
margin-top:1.2rem;text-align:center;z-index:5;
display:flex;justify-content:center;align-items:center;
}
.cine-go-btn{
font-family:var(--fd);
font-size:1rem;
color:#c8a45a;letter-spacing:2px;
width:120px;height:120px;
padding:0;
background:radial-gradient(circle at 40% 35%,rgba(200,164,90,.12),rgba(200,164,90,.03) 70%,transparent);
border:2px solid rgba(200,164,90,.4);
border-radius:50%;cursor:pointer;
transition:all .4s cubic-bezier(.34,1.56,.64,1);
text-shadow:0 0 24px rgba(200,164,90,.35);
font-weight:700;
box-shadow:0 0 50px rgba(200,164,90,.08),0 0 100px rgba(200,164,90,.03),inset 0 0 40px rgba(200,164,90,.04);
position:relative;overflow:hidden;
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
margin:0 auto;
animation:goBounce 2.8s ease-in-out infinite, goGlow 3s ease-in-out infinite;
}
.cine-go-btn::before{
content:'';position:absolute;inset:-2px;
border-radius:50%;
border:1px solid rgba(200,164,90,.15);
animation:goRingPulse 2.8s ease-in-out infinite;
}
.cine-go-btn::after{
content:'';position:absolute;
width:60%;height:30%;
top:12%;left:20%;
background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);
border-radius:50%;
pointer-events:none;
}
@keyframes goBounce{
0%,100%{transform:translateY(0) scale(1)}
15%{transform:translateY(-8px) scale(1.04)}
30%{transform:translateY(0) scale(0.98)}
42%{transform:translateY(-4px) scale(1.02)}
55%{transform:translateY(0) scale(1)}
}
@keyframes goGlow{
0%,100%{box-shadow:0 0 50px rgba(200,164,90,.08),0 0 100px rgba(200,164,90,.03),inset 0 0 40px rgba(200,164,90,.04)}
50%{box-shadow:0 0 60px rgba(200,164,90,.15),0 0 120px rgba(200,164,90,.06),inset 0 0 50px rgba(200,164,90,.06)}
}
@keyframes goRingPulse{
0%,100%{transform:scale(1);opacity:.5}
50%{transform:scale(1.08);opacity:.9}
}
.cine-go-btn:hover{
transform:translateY(-6px) scale(1.08);
border-color:rgba(200,164,90,.7);
box-shadow:0 0 80px rgba(200,164,90,.2),0 0 150px rgba(200,164,90,.08),inset 0 0 50px rgba(200,164,90,.06);
animation:none;
}
.cine-go-btn:active{
transform:translateY(0) scale(0.95);
transition:all .1s;
}
.ceb-go{
font-family:var(--fd);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900;
letter-spacing:6px;position:relative;z-index:1;
background:linear-gradient(180deg,#f0e8d0 0%,#c8a45a 60%,#a88838 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.ceb-text{
font-family:var(--fd);font-weight:800;position:relative;z-index:1;
}
.ceb-sub{
display:none;
}
.skip-btn{
position:fixed;bottom:2.5rem;right:2.5rem;z-index:99999;
background:rgba(200,164,90,.15);border:1px solid rgba(200,164,90,.5);
color:rgba(200,164,90,.85);padding:.65rem 1.6rem;
font-family:var(--fd);font-size:.75rem;cursor:pointer;
border-radius:3px;backdrop-filter:blur(8px);letter-spacing:3px;transition:all .3s;
animation:skipPulse 2s ease-in-out infinite;
}
.skip-btn:hover{background:rgba(200,164,90,.25);border-color:var(--gold);color:var(--gold)}
@keyframes skipPulse{0%,100%{opacity:.85}50%{opacity:1;box-shadow:0 0 12px rgba(200,164,90,.3)}}
/* ══════ TOP BAR ══════ */
.topbar{
display:flex;align-items:center;justify-content:space-between;
padding:.6rem 1.2rem;
background:linear-gradient(180deg,rgba(16,22,32,.97),rgba(12,16,24,.95));
-webkit-backdrop-filter:blur(16px); /* Android Chrome / older Safari */
backdrop-filter:blur(16px);
border-bottom:1px solid var(--border2);
position:fixed;top:0;left:0;right:0;z-index:10000;gap:1rem;
}
/* Gold accent strip under topbar */
.topbar::after{
content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 5%,var(--gold) 50%,transparent 95%);
opacity:.25;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:.7rem}
/* Mobile back button — only visible on mobile */
.mobile-back-btn{
display:none;text-decoration:none;
font-size:.82rem;font-family:var(--fd);font-weight:600;
color:var(--gold);padding:.25rem .6rem;gap:.3rem;
border:1px solid rgba(200,164,90,.28);border-radius:6px;
background:linear-gradient(135deg,rgba(200,164,90,.1),rgba(200,164,90,.04));
transition:all .3s;line-height:1;letter-spacing:.5px;
white-space:nowrap;
}
.mobile-back-btn:hover,.mobile-back-btn:active{background:rgba(200,164,90,.18);color:var(--gold2);border-color:rgba(200,164,90,.45)}
@media(max-width:768px){.mobile-back-btn{display:flex;align-items:center}}
.topbar-center{flex:1;text-align:center}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;cursor:pointer}
.logo-icon{font-size:1.4rem}
.logo-txt{font-family:var(--fd);font-size:1rem;font-weight:700;letter-spacing:5px;color:var(--gold);text-shadow:0 0 12px rgba(200,164,90,.15)}
.live-ind{display:flex;align-items:center;gap:.3rem;font-family:var(--fd);font-size:.68rem;letter-spacing:2px;color:var(--red)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.5s infinite;box-shadow:0 0 4px var(--red)}
.sfx-toggle{background:none;border:1px solid var(--border);color:var(--txt3);padding:.25rem .5rem;border-radius:2px;cursor:pointer;font-size:.85rem;transition:all .3s}
.sfx-toggle:hover{border-color:var(--gold);color:var(--gold)}
/* BGM toggle button */
.bgm-btn{
font-size:.72rem;opacity:.65;position:relative;
padding:.25rem .6rem;letter-spacing:1.5px;
font-family:var(--fd);display:flex;align-items:center;gap:.3rem;
}
.bgm-btn:hover{opacity:.9}
.bgm-btn.bgm-active{
opacity:1;color:var(--gold);border-color:rgba(200,164,90,.4);
background:rgba(200,164,90,.08);
box-shadow:0 0 10px rgba(200,164,90,.2);
animation:bgmPulse 3s ease-in-out infinite;
}
@keyframes bgmPulse{
0%,100%{box-shadow:0 0 6px rgba(200,164,90,.15)}
50%{box-shadow:0 0 16px rgba(200,164,90,.35)}
}
.theater-label{font-family:var(--f-impact);font-size:1rem;color:var(--txt);letter-spacing:5px;font-weight:800;text-shadow:0 0 15px rgba(200,164,90,.15)}
.data-ts{font-family:var(--fm);font-size:.65rem;color:var(--txt3);margin-top:.15rem}
.refresh-btn{
display:flex;align-items:center;gap:.3rem;
padding:.35rem .75rem;background:rgba(200,164,90,.04);
border:1px solid var(--border2);color:var(--gold);
font-size:.75rem;cursor:pointer;border-radius:2px;
font-family:var(--fb);transition:all .3s;letter-spacing:.5px;
}
.refresh-btn:hover{background:rgba(200,164,90,.08);box-shadow:var(--glow-gold);transform:translateY(-1px)}
.refresh-btn.spinning{pointer-events:none;opacity:.65}
.auth-btn{
display:flex;align-items:center;gap:.3rem;
padding:.35rem .6rem;background:var(--glass);
border:1px solid var(--border);color:var(--txt2);
cursor:pointer;border-radius:2px;font-size:.75rem;font-family:var(--fb);transition:all .3s;
}
.auth-btn:hover{border-color:var(--gold);color:var(--gold)}
.auth-btn-cta{
background:linear-gradient(135deg,rgba(200,164,90,.15),rgba(144,112,176,.18));
border:1px solid rgba(200,164,90,.5);color:var(--gold);
font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:1.5px;
padding:.4rem .85rem;border-radius:3px;
animation:authCtaPulse 2.5s ease-in-out infinite;
text-shadow:0 0 8px rgba(200,164,90,.3);
box-shadow:0 0 12px rgba(200,164,90,.15),inset 0 0 8px rgba(200,164,90,.05);
}
.auth-btn-cta:hover{
background:linear-gradient(135deg,rgba(200,164,90,.28),rgba(144,112,176,.3));
border-color:var(--gold);color:#fff;
box-shadow:0 0 20px rgba(200,164,90,.3),inset 0 0 10px rgba(200,164,90,.1);
transform:translateY(-1px);
}
.auth-cta-icon{font-size:.85rem;filter:drop-shadow(0 0 4px rgba(200,164,90,.5))}
@keyframes authCtaPulse{
0%,100%{box-shadow:0 0 12px rgba(200,164,90,.15),inset 0 0 8px rgba(200,164,90,.05)}
50%{box-shadow:0 0 22px rgba(200,164,90,.3),inset 0 0 12px rgba(200,164,90,.1)}
}
.q-badge{
font-family:var(--fd);font-size:.78rem;letter-spacing:2px;
padding:.35rem .95rem;background:rgba(144,112,176,.08);
border:1px solid rgba(144,112,176,.3);color:var(--quewi);
border-radius:2px;text-decoration:none;font-weight:700;
transition:all .3s;box-shadow:var(--glow-quewi),0 0 20px rgba(144,112,176,.08);
}
.q-badge:hover{background:rgba(144,112,176,.12);transform:translateY(-1px)}
/* ══════ TICKER ══════ */
.ticker-bar{
display:flex;align-items:center;gap:0;position:relative;
background:linear-gradient(90deg, rgba(255,82,82,.18), rgba(255,82,82,.03) 18%, rgba(10,16,28,.94) 48%, rgba(255,82,82,.05) 82%, rgba(255,82,82,.16)),linear-gradient(180deg, rgba(20,26,40,.98), rgba(10,14,24,.98));
border-top:1px solid rgba(255,120,120,.12);
border-bottom:1px solid rgba(255,120,120,.14);overflow:hidden;height:48px;
box-shadow:0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04), inset 0 -8px 20px rgba(120,0,0,.12);
}
.ticker-bar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:220px;pointer-events:none;background:linear-gradient(90deg, rgba(255,66,66,.2), transparent 78%)}
.ticker-label{
position:relative;z-index:1;
font-family:var(--fd);font-size:.72rem;color:#ffd8d8;
letter-spacing:3.4px;padding:0 1.15rem;white-space:nowrap;flex-shrink:0;
display:flex;align-items:center;gap:.4rem;
height:100%;background:linear-gradient(90deg, rgba(110,10,10,.58), rgba(60,8,8,.26));
border-right:1px solid rgba(255,120,120,.18);text-shadow:0 0 14px rgba(255,66,66,.3);
}
.blink-red{animation:pulse 1s infinite}
.ticker-track{flex:1;overflow:hidden;position:relative;height:100%;display:flex;align-items:center}
.ticker-track::before,.ticker-track::after{content:'';position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none}
.ticker-track::before{left:0;background:linear-gradient(90deg, rgba(10,14,24,.98), transparent)}
.ticker-track::after{right:0;background:linear-gradient(270deg, rgba(10,14,24,.98), transparent)}
.ticker-content{display:flex;align-items:center;gap:1.35rem;white-space:nowrap;animation:scroll 105s linear infinite;font-size:.9rem;color:#ecd9d9;font-family:var(--f-headline);padding-left:1rem}
.ticker-item{cursor:pointer;transition:transform .22s ease, filter .22s ease, border-color .22s ease, background .22s ease;padding:.38rem .75rem .4rem;border-radius:999px;letter-spacing:.15px;display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(255,120,120,.12);background:linear-gradient(180deg, rgba(50,20,24,.34), rgba(17,23,37,.62));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.ticker-item:hover{transform:translateY(-1px);filter:brightness(1.05);border-color:rgba(255,180,120,.28)}
.ticker-item.ticker-breaking{color:#ffe5e0;font-weight:700;background:linear-gradient(180deg, rgba(92,18,18,.5), rgba(26,20,34,.78));border-color:rgba(255,92,92,.28);box-shadow:0 0 0 1px rgba(255,80,80,.06), 0 0 18px rgba(160,20,20,.16)}
.ticker-item-badge{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:22px;padding:0 .55rem;border-radius:999px;background:linear-gradient(90deg, rgba(255,52,52,.95), rgba(196,60,60,.72));color:#fff;font-family:var(--fd);font-size:.6rem;letter-spacing:1.25px;box-shadow:0 0 14px rgba(255,70,70,.24)}
.ticker-item-source{display:inline-flex;align-items:center;height:22px;padding:0 .48rem;border-radius:7px;background:rgba(45,68,96,.54);border:1px solid rgba(100,140,196,.22);color:#8cc8ff;font-family:var(--fm);font-size:.74rem}
.ticker-item-text{color:#f4d6d1;font-size:.96rem;letter-spacing:.12px}
.ticker-item-time{color:rgba(255,212,212,.56);font-family:var(--fm);font-size:.7rem}
/* ══════ HUD BOTTOM ══════ */
.hud-bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:.4rem .8rem;background:linear-gradient(0deg,rgba(8,9,13,.9),transparent);font-family:var(--fm);font-size:.7rem;color:var(--txt3);letter-spacing:1px;z-index:4}
/* ══════ DUAL-PANEL LAYOUT ══════ */
.dual-panel{display:grid;grid-template-columns:420px 1fr;min-height:calc(100vh - 44px);
transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1)}
.dual-panel.intel-collapsed{grid-template-columns:0 1fr}
/* ══════ PANEL HEADER ══════ */
.panel-header{
display:flex;align-items:center;justify-content:space-between;
padding:.65rem 1rem;
background:#0c0d13;
border-bottom:2px solid rgba(200,164,90,.15);
position:relative;z-index:20;
box-shadow:0 4px 16px rgba(0,0,0,.5);
flex-shrink:0;
}
/* Animated gold accent line under panel header */
.panel-header::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:.3;animation:borderTrace 6s linear infinite;
background-size:200% 100%;
}
.ph-left{display:flex;align-items:center;gap:.5rem}
.ph-icon{font-size:1.2rem}
.ph-title{font-family:'LXGW WenKai SC','Noto Serif SC',serif;font-size:1.2rem;letter-spacing:2px;color:var(--txt);font-weight:700}
.panel-compare .ph-title{
font-size:1.5rem;
letter-spacing:4px;
background:linear-gradient(90deg, var(--gold), #ff6b35, var(--gold));
background-size:200% 100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:wargame-title-shimmer 3s ease-in-out infinite;
text-shadow:none;
position:relative;
}
.panel-compare .ph-title::after{
content:none;
}
@keyframes wargame-title-shimmer{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes live-blink{
0%,100%{opacity:1}
50%{opacity:0.3}
}
.ph-badge{
font-family:var(--fm);font-size:.75rem;
padding:.18rem .6rem;
background:rgba(196,60,60,.12);border:1px solid rgba(196,60,60,.3);
color:var(--red);border-radius:2px;min-width:26px;text-align:center;
animation:phBadgePulse 2s ease-in-out infinite;
box-shadow:0 0 8px rgba(196,60,60,.15);
position:relative;
}
.ph-badge::before{
content:'';position:absolute;inset:-2px;border-radius:3px;
border:1px solid rgba(196,60,60,.2);
animation:phBadgeRing 2s ease-in-out infinite;
pointer-events:none;
}
@keyframes phBadgePulse{
0%,100%{background:rgba(196,60,60,.12);box-shadow:0 0 8px rgba(196,60,60,.15)}
50%{background:rgba(196,60,60,.22);box-shadow:0 0 16px rgba(196,60,60,.3)}
}
@keyframes phBadgeRing{
0%,100%{opacity:.3;transform:scale(1)}
50%{opacity:.8;transform:scale(1.1)}
}
.ph-right{display:flex;align-items:center;gap:.5rem}
/* ══════ QUEWI INTEL LABEL ══════ */
.quewi-intel-combined{
font-family:var(--fd);font-size:.95rem;letter-spacing:3px;font-weight:700;
color:var(--quewi);padding:.45rem 1rem;
background:linear-gradient(135deg,rgba(144,112,176,.12),rgba(196,60,60,.04),rgba(200,164,90,.06));
background-size:200% 100%;
border:1px solid rgba(144,112,176,.3);
border-radius:3px;display:flex;align-items:center;gap:.4rem;
box-shadow:var(--glow-quewi),0 0 12px rgba(144,112,176,.08);white-space:nowrap;
text-shadow:0 0 8px rgba(144,112,176,.15);
animation:intelLabelShift 6s ease-in-out infinite;
position:relative;cursor:pointer;
transition:box-shadow .25s,border-color .25s,transform .15s;
user-select:none;
overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0;
}
.quewi-intel-combined:hover{
box-shadow:var(--glow-quewi),0 0 24px rgba(144,112,176,.25),0 0 40px rgba(196,60,60,.12);
border-color:rgba(144,112,176,.55);
}
.quewi-intel-combined:active{
transform:scale(.96);
}
.quewi-intel-combined::after{
content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(196,60,60,.4),var(--gold),rgba(196,60,60,.4),transparent);
animation:intelLabelLine 4s linear infinite;
background-size:200% 100%;
}
/* ═══ INTEL PANEL — FLOATING REOPEN TAB ═══ */
.intel-reopen-tab{
position:fixed;left:0;top:50%;z-index:999;
transform:translateY(-50%) translateX(-100%);
opacity:0;pointer-events:none;
transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .35s ease;
cursor:pointer;
writing-mode:vertical-lr;text-orientation:mixed;
font-family:var(--fd);font-size:.7rem;letter-spacing:3px;font-weight:700;
color:var(--quewi);
padding:.8rem .35rem;
background:linear-gradient(180deg,#0c0d13 0%,rgba(144,112,176,.15) 50%,#0c0d13 100%);
border:1px solid rgba(144,112,176,.35);border-left:none;
border-radius:0 4px 4px 0;
box-shadow:4px 0 20px rgba(0,0,0,.6),0 0 15px rgba(144,112,176,.12);
user-select:none;
backdrop-filter:blur(8px);
}
.intel-reopen-tab.show{
transform:translateY(-50%) translateX(0);
opacity:1;pointer-events:auto;
}
.intel-reopen-tab:hover{
box-shadow:4px 0 30px rgba(0,0,0,.7),0 0 25px rgba(144,112,176,.25);
border-color:rgba(144,112,176,.6);
background:linear-gradient(180deg,#0c0d13 0%,rgba(144,112,176,.25) 50%,#0c0d13 100%);
}
.intel-reopen-tab:active{transform:translateY(-50%) translateX(-3px)}
.intel-reopen-tab .irt-icon{
font-size:1rem;margin-bottom:.3rem;
animation:qi-pulse 2.5s infinite alternate;
}
.intel-reopen-tab::before{
content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
background:linear-gradient(180deg,transparent,var(--gold),rgba(196,60,60,.5),var(--gold),transparent);
animation:irtEdgeGlow 3s ease-in-out infinite;
}
@keyframes irtEdgeGlow{
0%,100%{opacity:.3}
50%{opacity:.8}
}
@keyframes intelLabelShift{
0%,100%{background-position:0% 50%;box-shadow:var(--glow-quewi),0 0 12px rgba(144,112,176,.08)}
50%{background-position:100% 50%;box-shadow:var(--glow-quewi),0 0 20px rgba(196,60,60,.08)}
}
@keyframes intelLabelLine{0%{background-position:200% 0}100%{background-position:-200% 0}}
.quewi-intel-combined .chat-quewi-logo{width:20px;height:20px;font-size:.6rem;margin-right:.2rem}
.qi-sat{font-size:.9rem;margin:0 .25rem;filter:drop-shadow(0 0 3px rgba(200,164,90,.3));animation:qi-pulse 2.5s infinite alternate}
@keyframes qi-pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.08)}}
/* ══════ LEFT PANEL — INTEL FEED ══════ */
.panel-intel{
background:#0c1018;border-right:1px solid var(--border);
display:flex;flex-direction:column;max-height:calc(100vh - 44px);
position:sticky;top:44px;
overflow:hidden;
transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease;
will-change:transform,opacity;
}
.dual-panel.intel-collapsed .panel-intel{
transform:translateX(-100%);opacity:0;pointer-events:none;
}
/* Ambient scan line on intel panel — dual red/gold urgency sweep */
.panel-intel::after{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,
transparent 0%,
transparent 42%,
rgba(196,60,60,.05) 46%,
rgba(200,164,90,.1) 50%,
rgba(196,60,60,.05) 54%,
transparent 58%,
transparent 100%);
background-size:100% 200%;
animation:intelScan 4s ease-in-out infinite;
}
/* CLASSIFIED diagonal watermark — subtle tension */
.panel-intel::before{
content:'CLASSIFIED';position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);
font-family:var(--fd);font-size:4rem;letter-spacing:15px;font-weight:900;
color:rgba(196,60,60,.025);z-index:0;pointer-events:none;
white-space:nowrap;user-select:none;
}
@keyframes intelScan{0%{background-position:0 -100%}50%{background-position:0 200%}100%{background-position:0 -100%}}
.panel-intel>*{position:relative;z-index:1}
.intel-search{position:relative}
.intel-search-input{
background:var(--bg);border:1px solid var(--border);color:var(--txt);
padding:.4rem .7rem .4rem 2.2rem;font-size:.8rem;border-radius:2px;
width:170px;font-family:var(--fb);transition:all .3s;
}
.intel-search-input:focus{border-color:var(--red);outline:none;width:210px;box-shadow:0 0 12px rgba(196,60,60,.1),0 0 4px rgba(200,164,90,.06)}
.search-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-size:.75rem;opacity:.4}
.news-list-wrap{flex:1;overflow-y:auto;padding:0;position:relative}
/* Vertical urgency scan line sweeping through the feed */
.news-list-wrap::after{
content:'';position:absolute;left:0;right:0;height:60px;z-index:2;pointer-events:none;
background:linear-gradient(180deg,transparent,rgba(196,60,60,.06),rgba(200,164,90,.04),transparent);
animation:intelSweep 4s ease-in-out infinite;
}
@keyframes intelSweep{
0%{top:-60px}
100%{top:100%}
}
.news-list{padding:.4rem 0;margin-top:.4rem;position:relative}
/* ══════ NEWS ITEMS ══════ */
.news-item{
display:flex;gap:.8rem;padding:.85rem 1.1rem;margin:0;cursor:pointer;
transition:all .35s cubic-bezier(.4,0,.2,1);align-items:flex-start;position:relative;
border-bottom:1px solid rgba(200,164,90,.04);
animation:newsSlideIn .5s ease-out both;
}
.news-item:nth-child(1){animation-delay:0s}
.news-item:nth-child(2){animation-delay:.06s}
.news-item:nth-child(3){animation-delay:.12s}
.news-item:nth-child(4){animation-delay:.18s}
.news-item:nth-child(5){animation-delay:.24s}
.news-item:nth-child(6){animation-delay:.3s}
.news-item:nth-child(7){animation-delay:.36s}
.news-item:nth-child(8){animation-delay:.42s}
@keyframes newsSlideIn{from{opacity:0;transform:translateX(-18px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
.news-item::before{
content:'';position:absolute;left:0;top:0;bottom:0;
width:0;background:linear-gradient(180deg,var(--red),var(--gold),rgba(200,164,90,.3));transition:width .3s;opacity:.85;
}
.news-item:hover{
background:linear-gradient(90deg,rgba(200,164,90,.08),rgba(196,60,60,.02),transparent);
transform:translateX(4px);
box-shadow:inset 3px 0 16px rgba(200,164,90,.06), 0 2px 12px rgba(0,0,0,.2);
}
.news-item:hover::before{width:3px}
.news-item:active{transform:translateX(2px) scale(.99)}
.news-item.news-item-active{
background:linear-gradient(90deg,rgba(200,164,90,.12),rgba(144,112,176,.08),transparent);
box-shadow:inset 3px 0 18px rgba(200,164,90,.12), 0 2px 14px rgba(0,0,0,.24);
}
.news-item.news-item-active::before{width:3px}
/* ── Breaking news: < 30 min ── */
.news-item.breaking{
border-left:2.5px solid var(--red);
background:linear-gradient(90deg,rgba(196,60,60,.07),rgba(196,60,60,.02),transparent);
animation:newsSlideIn .5s ease-out both, breakingFlash 3s ease-in-out infinite;
}
@keyframes breakingFlash{
0%,100%{background:linear-gradient(90deg,rgba(196,60,60,.07),rgba(196,60,60,.02),transparent)}
50%{background:linear-gradient(90deg,rgba(196,60,60,.12),rgba(196,60,60,.04),transparent)}
}
.news-item.breaking:hover{
background:linear-gradient(90deg,rgba(196,60,60,.15),rgba(196,60,60,.04),transparent);
box-shadow:inset 3px 0 20px rgba(196,60,60,.1), 0 0 20px rgba(196,60,60,.06);
}
/* Live pulse dot for breaking news */
.news-item.breaking::after{
content:'';position:absolute;right:8px;top:50%;width:7px;height:7px;
border-radius:50%;background:var(--red);
box-shadow:0 0 8px var(--red),0 0 16px rgba(196,60,60,.3);
animation:breakDotPulse 1.2s infinite;transform:translateY(-50%);
}
@keyframes breakDotPulse{
0%,100%{opacity:1;box-shadow:0 0 8px var(--red),0 0 16px rgba(196,60,60,.3);transform:translateY(-50%) scale(1)}
50%{opacity:.5;box-shadow:0 0 4px var(--red);transform:translateY(-50%) scale(.7)}
}
/* ── Recent news: < 1 hour — warm urgency tint ── */
.news-item.recent{
border-left:1.5px solid rgba(200,164,90,.3);
background:linear-gradient(90deg,rgba(200,164,90,.03),transparent);
}
.news-item.recent .news-item-time{color:var(--gold)}
/* ── NEW tag for fresh items ── */
.news-new-tag{
display:inline-flex;align-items:center;
font-family:var(--fd);font-size:.5rem;letter-spacing:2px;font-weight:700;
padding:.1rem .35rem;border-radius:2px;margin-left:.4rem;
animation:newTagPulse 2s ease-in-out infinite;
vertical-align:middle;line-height:1;
}
.news-new-tag.tag-breaking{
color:#fff;background:var(--red);
box-shadow:0 0 8px rgba(196,60,60,.4);
text-shadow:0 0 4px rgba(0,0,0,.3);
}
.news-new-tag.tag-recent{
color:var(--gold);background:rgba(200,164,90,.12);
border:1px solid rgba(200,164,90,.25);
}
@keyframes newTagPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.7;transform:scale(.95)}
}
.news-item-thumb{
width:68px;height:52px;border-radius:3px;object-fit:cover;flex-shrink:0;
background:var(--bg4);border:1px solid var(--border);
transition:all .3s;
}
.news-item:hover .news-item-thumb{border-color:rgba(200,164,90,.25);box-shadow:0 2px 12px rgba(0,0,0,.4),0 0 8px rgba(200,164,90,.08)}
.news-item.breaking .news-item-thumb{border-color:rgba(196,60,60,.3)}
.news-item-body{flex:1;min-width:0}
.news-item-source{font-size:.72rem;margin-bottom:.35rem;line-height:1;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.news-item-title{
font-size:.95rem;line-height:1.6;color:var(--txt);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-family:var(--f-headline);font-weight:600;letter-spacing:.5px;
transition:color .3s, text-shadow .3s;
}
.news-item:hover .news-item-title{color:var(--gold2);text-shadow:0 0 12px rgba(200,164,90,.15)}
.news-item.breaking .news-item-title{color:rgba(255,200,200,.95)}
.news-item.breaking:hover .news-item-title{color:#ff8a8a;text-shadow:0 0 12px rgba(196,60,60,.2)}
.news-item-summary{
font-size:.78rem;color:var(--txt3);line-height:1.5;margin-top:.15rem;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.news-item-meta{
display:flex;align-items:center;justify-content:space-between;margin-top:.25rem;gap:.4rem;
}
.news-item-time{font-size:.62rem;color:var(--txt3);font-family:var(--fm);white-space:nowrap;transition:color .3s}
.news-item-time.time-critical{color:var(--red);font-weight:600;animation:timeCritPulse 1.5s ease-in-out infinite}
.news-item-time.time-urgent{color:var(--gold)}
@keyframes timeCritPulse{0%,100%{opacity:1}50%{opacity:.5}}
/* ── News Item Mini Social Bar ── */
.news-social-mini{
display:inline-flex;align-items:center;gap:.15rem;margin-left:auto;
}
.ns-btn{
background:none;border:none;color:var(--txt3);font-size:.6rem;
cursor:pointer;padding:2px 5px;border-radius:10px;
display:inline-flex;align-items:center;gap:3px;
transition:all .2s;white-space:nowrap;line-height:1;
}
.ns-svg{width:13px;height:13px;flex-shrink:0;opacity:.55;transition:opacity .2s}
.ns-btn:hover .ns-svg{opacity:1}
.ns-btn:hover{background:rgba(200,164,90,.1);color:var(--gold2)}
.ns-btn .ns-cnt{font-size:.58rem;font-family:var(--fm)}
.ns-liked{color:var(--red) !important}
.ns-liked:hover{background:rgba(196,60,60,.1)}
.ns-share:hover{color:var(--cyan)}
.ns-orig-link{color:var(--txt3);font-size:.6rem;letter-spacing:.3px}
.ns-orig-link:hover{color:var(--cyan);background:rgba(0,180,216,.08)}
/* ══════ INTEL FOOTER ══════ */
.intel-footer{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-top:1px solid var(--border);background:var(--glass);position:relative;overflow:hidden}
.intel-footer::before{
content:'';position:absolute;top:0;left:-100%;width:50%;height:1px;
background:linear-gradient(90deg,transparent,var(--red),var(--gold),transparent);
animation:footerScan 4s linear infinite;
}
@keyframes footerScan{0%{left:-50%}100%{left:100%}}
.intel-src-note{font-size:.62rem;color:var(--txt3)}
.intel-src-note::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:.4rem;vertical-align:middle;animation:srcDotPulse 1.5s infinite}
@keyframes srcDotPulse{0%,100%{opacity:1;box-shadow:0 0 4px var(--green)}50%{opacity:.4;box-shadow:0 0 8px var(--green)}}
.intel-custom-btn{
padding:.28rem .65rem;background:rgba(200,164,90,.04);
border:1px solid rgba(200,164,90,.12);color:var(--gold);
font-size:.68rem;cursor:pointer;border-radius:2px;font-family:var(--fb);transition:all .25s;
}
.intel-custom-btn:hover{background:rgba(200,164,90,.08);border-color:var(--gold)}
/* ══════ RIGHT PANEL — COMPARISON ══════ */
.panel-compare{
background:var(--bg);min-height:0;overflow-y:auto;overflow-x:hidden;
position:relative;
}
/* Ambient war-zone atmosphere on right panel */
.panel-compare::before{
content:'';position:fixed;top:0;right:0;width:60vw;height:100vh;
background:
radial-gradient(ellipse at 25% 15%, rgba(196,60,60,.12) 0%, transparent 45%),
radial-gradient(ellipse at 75% 85%, rgba(74,127,181,.08) 0%, transparent 45%),
radial-gradient(ellipse at 50% 50%, rgba(200,164,90,.06) 0%, transparent 55%);
pointer-events:none;z-index:0;
animation:ambientShift 12s ease-in-out infinite alternate;
}
@keyframes ambientShift{
0%{opacity:.5;transform:scale(1) translate(0,0)}
33%{opacity:.8;transform:scale(1.03) translate(1%,-1%)}
66%{opacity:1;transform:scale(1.06) translate(-1%,1%)}
100%{opacity:.5;transform:scale(1) translate(0,0)}
}
.panel-compare .panel-header{position:relative;z-index:2}
.compare-body{position:relative;z-index:1}
.panel-compare .panel-header{top:0;z-index:2}
.compare-body{padding:1.2rem;overflow:visible;position:relative;z-index:1}
/* ══════ MODEL INDICATORS (legacy — kept for compat) ══════ */
.model-indicators{display:flex;gap:.5rem}
.mi{
font-family:var(--fd);font-size:.68rem;letter-spacing:1.5px;
color:var(--mc);padding:.3rem .8rem;border:1px solid var(--mc);
border-radius:2px;opacity:1;background:rgba(255,255,255,.02);font-weight:600;
}
.mi-clickable{cursor:pointer;transition:all .3s;position:relative}
.mi-clickable:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
.mi-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;background:var(--mc);animation:miDotPulse 2s ease-in-out infinite}
@keyframes miDotPulse{0%,100%{opacity:1;box-shadow:0 0 3px var(--mc)}50%{opacity:.4;box-shadow:0 0 8px var(--mc)}}
.mi-pulse{animation:miBorderPulse 3s ease-in-out infinite}
@keyframes miBorderPulse{0%,100%{border-color:var(--mc);box-shadow:0 0 0 rgba(255,255,255,0)}50%{border-color:var(--mc);box-shadow:0 0 8px rgba(255,255,255,.08)}}
.mi-click-hint{display:none}
/* ── LIVE badge on header ── */
.wg-live-badge{
font-family:var(--fd);font-size:.55rem;letter-spacing:2px;font-weight:700;
color:#fff;background:var(--red);padding:2px 10px;border-radius:2px;
margin-left:8px;animation:livePulse 1.5s ease-in-out infinite;
box-shadow:0 0 8px rgba(196,60,60,.4);
}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 8px rgba(196,60,60,.4)}50%{opacity:.75;box-shadow:0 0 18px rgba(196,60,60,.7)}}
/* ═══════════════════════════════════════════════════
WAR-ROOM HERO MODEL CARDS — cinematic, dramatic
═══════════════════════════════════════════════════ */
.wg-hero-strip{
position:relative;
padding:1.2rem 1.2rem .8rem;
background:
radial-gradient(ellipse at 30% 20%, rgba(200,164,90,.04) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(100,160,210,.03) 0%, transparent 60%),
linear-gradient(180deg, rgba(8,10,16,.95), rgba(12,14,22,.9));
border-bottom:1px solid rgba(200,164,90,.08);
overflow:hidden;
}
.wg-hero-scanline{
position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,164,90,.015) 2px, rgba(200,164,90,.015) 4px);
z-index:0;
}
.wg-hero-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
position:relative;z-index:1;
}
/* ── Individual Hero Card ── */
.wg-hero-card{
position:relative;cursor:pointer;
padding:1.4rem 1.2rem 1rem;
border-radius:6px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(145deg, rgba(20,24,35,.9), rgba(14,18,28,.95));
overflow:hidden;
transition:all .35s cubic-bezier(.4,0,.2,1);
text-align:center;
box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.wg-hero-card:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:0 8px 40px rgba(0,0,0,.5);
border-color:rgba(255,255,255,.12);
}
/* Model-specific accent colors */
.wg-hc-claude{--hc:var(--claude);--hcr:200,155,106}
.wg-hc-gpt{--hc:var(--gpt);--hcr:107,159,212}
.wg-hc-gemini{--hc:var(--gemini);--hcr:94,188,178}
.wg-hero-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent, var(--hc), transparent);
opacity:.6;
}
.wg-hero-card:hover::before{opacity:1}
/* Corner glow */
.wg-hc-glow{
position:absolute;top:-30px;right:-30px;width:100px;height:100px;
background:radial-gradient(circle, rgba(var(--hcr),.12), transparent 70%);
pointer-events:none;transition:opacity .3s;
}
.wg-hero-card:hover .wg-hc-glow{opacity:1.5}
/* Mini radar */
.wg-hc-radar{
position:absolute;bottom:8px;right:8px;width:40px;height:40px;
border-radius:50%;border:1px solid rgba(var(--hcr),.12);
overflow:hidden;opacity:.4;
}
.wg-hc-radar-sweep{
position:absolute;top:50%;left:50%;width:50%;height:1px;
background:linear-gradient(90deg, rgba(var(--hcr),.5), transparent);
transform-origin:left center;
animation:radarSweep 3s linear infinite;
}
@keyframes radarSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Status badge */
.wg-hc-status{
font-family:var(--fd);font-size:.55rem;letter-spacing:2px;font-weight:700;
color:var(--green);margin-bottom:.6rem;
display:flex;align-items:center;justify-content:center;gap:5px;
}
.wg-hc-dot{
width:6px;height:6px;border-radius:50%;background:var(--green);
box-shadow:0 0 6px var(--green);
animation:hcDotPulse 1.5s ease-in-out infinite;
}
@keyframes hcDotPulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--green)}50%{opacity:.5;box-shadow:0 0 12px var(--green)}}
/* Icon */
.wg-hc-icon{
font-size:2.2rem;margin-bottom:.4rem;
filter:drop-shadow(0 0 12px rgba(var(--hcr),.4));
animation:hcIconFloat 4s ease-in-out infinite;
}
@keyframes hcIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Name */
.wg-hc-name{
font-family:var(--fd);font-size:1.1rem;font-weight:700;
letter-spacing:3px;color:var(--hc);
text-shadow:0 0 20px rgba(var(--hcr),.3);
margin-bottom:.15rem;
}
/* Sub-label */
.wg-hc-sub{
font-family:var(--fm);font-size:.62rem;color:var(--txt3);
letter-spacing:1px;margin-bottom:.7rem;
}
/* Loading bar */
.wg-hc-bar{
height:2px;background:rgba(255,255,255,.06);border-radius:1px;
overflow:hidden;margin-bottom:.5rem;
}
.wg-hc-bar-fill{
height:100%;width:0%;border-radius:1px;
background:linear-gradient(90deg, var(--hc), rgba(var(--hcr),.3));
box-shadow:0 0 8px rgba(var(--hcr),.4);
transition:width 1.5s cubic-bezier(.4,0,.2,1);
}
/* Bottom label */
.wg-hc-label{
font-family:var(--fd);font-size:.5rem;letter-spacing:3px;
color:rgba(255,255,255,.2);font-weight:600;
}
/* Hover effects */
.wg-hero-card:hover .wg-hc-name{text-shadow:0 0 30px rgba(var(--hcr),.5)}
.wg-hero-card:hover .wg-hc-radar{opacity:.8}
.wg-hero-card:hover .wg-hc-label{color:rgba(255,255,255,.4)}
/* Staggered entry animation */
.wg-hero-card{animation:hcSlideUp .6s ease-out both}
.wg-hc-claude{animation-delay:0s}
.wg-hc-gpt{animation-delay:.15s}
.wg-hc-gemini{animation-delay:.3s}
@keyframes hcSlideUp{
from{opacity:0;transform:translateY(20px) scale(.95)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* ── Hero cards responsive ── */
@media(max-width:900px){
.wg-hero-cards{gap:.7rem}
.wg-hero-card{padding:1rem .8rem .8rem}
.wg-hc-icon{font-size:1.6rem}
.wg-hc-name{font-size:.9rem;letter-spacing:2px}
}
@media(max-width:600px){
.wg-hero-cards{grid-template-columns:1fr;gap:.6rem}
.wg-hero-strip{padding:.8rem .8rem .5rem}
.wg-hero-card{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;
text-align:left;padding:.7rem .8rem;gap:0 .6rem;
}
.wg-hc-glow,.wg-hc-radar,.wg-hc-scanline{display:none}
.wg-hc-status{grid-column:1/-1;margin-bottom:.2rem;justify-content:flex-start;font-size:.5rem}
.wg-hc-icon{font-size:1.4rem;grid-row:2;margin:0}
.wg-hc-name{font-size:.8rem;grid-row:2;margin:0}
.wg-hc-sub{grid-row:3;grid-column:2;margin:0;font-size:.55rem}
.wg-hc-bar{grid-column:1/-1;margin:.3rem 0 .1rem}
.wg-hc-label{grid-column:1/-1;text-align:center}
}
/* ══════ RISK OVERVIEW ══════ */
.risk-overview{
margin-bottom:1.2rem;
background:
radial-gradient(ellipse at 20% 40%, rgba(196,60,60,.05) 0%, transparent 50%),
linear-gradient(135deg,rgba(16,22,32,.92),rgba(22,32,45,.88));
border:1px solid rgba(196,60,60,.12);border-left:3px solid rgba(196,60,60,.4);
border-radius:4px;padding:1rem;position:relative;overflow:hidden;
animation:riskGlow 6s ease-in-out infinite;
}
.risk-overview::before{
content:'';position:absolute;inset:0;
background:linear-gradient(45deg,transparent 30%,rgba(196,60,60,.02) 50%,transparent 70%);
animation:scanMove 12s linear infinite;pointer-events:none;
}
/* Second overlay — holographic grid */
.risk-overview::after{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(196,60,60,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(196,60,60,.02) 1px, transparent 1px);
background-size:30px 30px;
animation:gridPulse 6s ease-in-out infinite;
}
.risk-ov-title{
font-family:var(--fd);font-size:.82rem;color:var(--red);letter-spacing:4px;
margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;
text-shadow:0 0 12px rgba(196,60,60,.2);font-weight:700;
padding-bottom:.5rem;border-bottom:1px solid rgba(196,60,60,.1);
position:relative;
}
.risk-ov-title .pulse-dot-red{width:8px;height:8px;background:var(--red);border-radius:50%;animation:pulse 1.5s infinite;box-shadow:0 0 8px var(--red)}
.risk-bars{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:relative}
.risk-bar-item{
padding:.55rem .7rem;
background:linear-gradient(145deg,rgba(0,0,0,.3),rgba(16,22,32,.6));
border:1px solid rgba(200,164,90,.06);border-radius:4px;
transition:all .3s;position:relative;overflow:hidden;
}
.risk-bar-item:hover{border-color:rgba(200,164,90,.12);transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,.2)}
.risk-bar-label{font-family:var(--fh);font-size:.8rem;color:var(--txt2);letter-spacing:.5px;margin-bottom:.3rem;font-weight:500}
.risk-bar-track{height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-bottom:.2rem;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}
.risk-bar-fill{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.4,0,.2,1);box-shadow:0 0 6px rgba(196,60,60,.15)}
.risk-bar-models{display:flex;justify-content:space-between;font-size:.62rem}
.risk-bar-models span{font-family:var(--fm)}
/* ══════ MILITARY DASHBOARD ══════ */
.mil-dashboard{
margin-bottom:1.2rem;position:relative;overflow:hidden;
background:
radial-gradient(ellipse at 20% 30%, rgba(180,50,40,.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(50,85,150,.06) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(200,164,90,.04) 0%, transparent 60%);
border-radius:6px;padding:1rem;
border:1px solid rgba(200,164,90,.06);
}
/* Holographic military grid overlay */
.mil-dashboard::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(200,164,90,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,164,90,.08) 1px, transparent 1px);
background-size:40px 40px;
animation:gridPulse 4s ease-in-out infinite;
}
/* Radar sweep overlay */
.mil-dashboard::after{
content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;
transform:translate(-50%,-50%);
background:conic-gradient(from 0deg, transparent 0deg, rgba(200,164,90,.04) 30deg, transparent 60deg);
animation:radarSweep 12s linear infinite;
pointer-events:none;z-index:0;opacity:.5;
mask-image:radial-gradient(circle,#000 30%,transparent 70%);
-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);
}
.mil-dashboard>*{position:relative;z-index:1}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;position:relative}
.dash-title{
font-family:var(--f-impact);font-size:.95rem;color:var(--gold);letter-spacing:3px;
display:flex;align-items:center;gap:.5rem;font-weight:700;
text-shadow:0 0 12px rgba(200,164,90,.15);
}
.dash-refresh{
font-size:.65rem;color:var(--txt3);cursor:pointer;padding:.25rem .55rem;
border:1px solid var(--border2);border-radius:2px;background:rgba(200,164,90,.02);
transition:all .3s;font-family:var(--fb);
}
.dash-refresh:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(200,164,90,.1);background:rgba(200,164,90,.05)}
/* Dashboard freshness badge */
.dash-age{font-size:.55rem;margin-left:.5rem;padding:.15rem .4rem;border-radius:2px;font-family:var(--fb)}
.dash-age-fresh{color:#0f0;background:rgba(0,255,0,.08);border:1px solid rgba(0,255,0,.2)}
.dash-age-aging{color:var(--orange);background:rgba(255,165,0,.08);border:1px solid rgba(255,165,0,.2)}
.dash-age-stale{color:var(--red);background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.3);animation:pulse-stale 2s infinite}
@keyframes pulse-stale{0%,100%{opacity:1}50%{opacity:.6}}
/* Force header */
.force-header{
display:flex;align-items:center;justify-content:center;gap:1.8rem;
margin-bottom:.9rem;padding:.9rem;
background:linear-gradient(90deg,rgba(180,50,40,.15),rgba(16,22,32,.92) 30%,rgba(16,22,32,.92) 70%,rgba(50,85,150,.15));
border-radius:4px;border:1px solid rgba(200,164,90,.15);
position:relative;overflow:hidden;
box-shadow:0 2px 20px rgba(0,0,0,.4),inset 0 0 40px rgba(0,0,0,.2);
animation:headerTension 3s ease-in-out infinite;
}
@keyframes headerTension{
0%,100%{background:linear-gradient(90deg,rgba(180,50,40,.10),rgba(16,22,32,.92) 30%,rgba(16,22,32,.92) 70%,rgba(50,85,150,.10))}
50%{background:linear-gradient(90deg,rgba(180,50,40,.20),rgba(16,22,32,.92) 35%,rgba(16,22,32,.92) 65%,rgba(50,85,150,.20))}
}
/* Animated tension line between red and blue */
.force-header::before{
content:'';position:absolute;top:50%;left:50%;width:2px;height:70%;
background:linear-gradient(180deg,transparent,var(--gold),transparent);
transform:translate(-50%,-50%);
animation:pulse 2s infinite;
box-shadow:0 0 8px rgba(200,164,90,.3);
}
.force-header::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,rgba(180,50,40,.04),transparent 40%,transparent 60%,rgba(50,85,150,.04));
animation:warningStrobe 6s ease-in-out infinite;
pointer-events:none;
}
.force-side{display:flex;align-items:center;gap:.6rem}
.force-side.red{color:var(--force-red)}.force-side.blue{color:var(--force-blue)}
.force-flag{font-size:1.6rem;animation:flagWave 4s ease-in-out infinite}
@keyframes flagWave{0%,100%{transform:rotate(0deg) scale(1)}25%{transform:rotate(-2deg) scale(1.03)}75%{transform:rotate(2deg) scale(1.03)}}
.force-name{font-family:var(--fd);font-size:.8rem;letter-spacing:3px;font-weight:700}
.force-vs{
font-family:var(--fd);font-size:1.1rem;color:var(--gold);letter-spacing:4px;font-weight:800;
text-shadow:0 0 12px rgba(200,164,90,.3),0 0 30px rgba(200,164,90,.1);
animation:vsPulse 3s ease-in-out infinite;
}
@keyframes vsPulse{0%,100%{text-shadow:0 0 12px rgba(200,164,90,.3),0 0 30px rgba(200,164,90,.1)}50%{text-shadow:0 0 20px rgba(200,164,90,.5),0 0 50px rgba(200,164,90,.15),0 0 80px rgba(200,164,90,.05)}}
/* Force cards */
.force-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.7rem;margin-bottom:.9rem}
.force-card{
background:linear-gradient(145deg,rgba(16,22,32,.88),rgba(22,32,45,.82));
border:1px solid rgba(200,164,90,.12);border-radius:4px;
padding:.8rem;transition:all .4s;position:relative;overflow:hidden;
border-left:3px solid rgba(200,164,90,.35);
animation:cardReveal .5s ease-out both, cardBreathe 4s ease-in-out infinite;
box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 0 30px rgba(0,0,0,.15);
}
@keyframes cardBreathe{
0%,100%{box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 0 30px rgba(0,0,0,.15),0 0 0 rgba(200,164,90,0)}
50%{box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 0 30px rgba(0,0,0,.15),0 0 15px rgba(200,164,90,.08),inset 0 0 15px rgba(200,164,90,.03)}
}
.force-card:nth-child(1){animation-delay:.1s}
.force-card:nth-child(2){animation-delay:.18s}
.force-card:nth-child(3){animation-delay:.26s}
.force-card:nth-child(4){animation-delay:.34s}
.force-card:nth-child(5){animation-delay:.42s}
.force-card:nth-child(6){animation-delay:.5s}
.force-card:hover{border-color:rgba(200,164,90,.25);transform:translateY(-3px);box-shadow:0 6px 25px rgba(0,0,0,.45),0 0 20px rgba(200,164,90,.06),inset 0 0 30px rgba(0,0,0,.15)}
/* Ambient glow — subtle copper/teal tension */
.force-card::before{
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(135deg,rgba(180,50,40,.03) 0%,transparent 40%,transparent 60%,rgba(50,85,150,.03) 100%);
opacity:0;transition:opacity .5s;
}
.force-card:hover::before{opacity:1}
/* Scan line on force card */
.force-card::after{
content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.03),transparent);
animation:shimmer 4s ease-in-out infinite;
pointer-events:none;z-index:0;
}
.force-card-title{
font-family:var(--fd);font-size:.75rem;color:var(--gold);letter-spacing:3px;
margin-bottom:.5rem;display:flex;align-items:center;gap:.45rem;
padding-bottom:.35rem;border-bottom:1px solid rgba(200,164,90,.08);font-weight:600;
text-shadow:0 0 8px rgba(200,164,90,.15);
}
.force-card-icon{font-size:1.1rem;filter:drop-shadow(0 0 4px rgba(200,164,90,.2));animation:qi-pulse 3s infinite alternate}
/* Red vs Blue comparison bar */
.force-compare-bar{margin:.4rem 0;animation:cardReveal .5s ease-out both}
.fcb-label{font-size:.75rem;color:var(--txt2);margin-bottom:.15rem;font-family:var(--fb);display:flex;justify-content:space-between}
.fcb-label .fcb-red{color:var(--force-red);font-family:var(--fm);font-weight:600;text-shadow:0 0 6px rgba(200,60,50,.2)}
.fcb-label .fcb-blue{color:var(--force-blue);font-family:var(--fm);font-weight:600;text-shadow:0 0 6px rgba(50,90,160,.2)}
.fcb-track{
display:flex;height:26px;background:linear-gradient(180deg,rgba(12,16,24,.5),rgba(22,32,45,.7));border-radius:13px;overflow:hidden;
position:relative;box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
border:1px solid rgba(200,164,90,.1);
}
/* Clash spark at the seam */
.fcb-track::after{
content:'';position:absolute;top:-2px;bottom:-2px;width:3px;
left:var(--clash-point,50%);z-index:2;
background:linear-gradient(180deg,transparent,#fff,var(--gold),#fff,transparent);
box-shadow:0 0 6px rgba(255,255,255,.6),0 0 16px rgba(200,164,90,.4),0 0 30px rgba(255,200,50,.1);
animation:clashSpark 1.5s ease-in-out infinite;
border-radius:2px;
}
@keyframes clashSpark{
0%,100%{opacity:.5;box-shadow:0 0 4px rgba(255,255,255,.4),0 0 12px rgba(200,164,90,.2)}
50%{opacity:1;box-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(200,164,90,.5),0 0 40px rgba(255,200,50,.15)}
}
.fcb-fill-red{
background:linear-gradient(90deg,rgba(160,50,40,.85),rgba(200,70,55,.8),rgba(220,95,75,.75));
height:100%;transition:width 1.2s cubic-bezier(.4,0,.2,1);
display:flex;align-items:center;justify-content:center;
font-size:.58rem;font-family:var(--fm);color:#fff;font-weight:700;
text-shadow:0 1px 3px rgba(0,0,0,.5);min-width:20px;
position:relative;overflow:hidden;border-radius:0;
animation:barPulseRed 2.5s ease-in-out infinite;
}
/* When red is 100%, track handles rounding */
.fcb-fill-red[data-w="100"]{border-radius:0}
@keyframes barPulseRed{
0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 6px rgba(200,60,50,.2)}
50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 12px rgba(200,60,50,.35),0 0 20px rgba(200,60,50,.1)}
}
/* Animated shimmer on red bar */
.fcb-fill-red::after{
content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
animation:shimmer 2.5s ease-in-out infinite;
}
.fcb-fill-blue{
background:linear-gradient(270deg,rgba(45,85,140,.85),rgba(65,115,180,.8),rgba(90,140,210,.75));
height:100%;transition:width 1.2s cubic-bezier(.4,0,.2,1);
display:flex;align-items:center;justify-content:center;
font-size:.58rem;font-family:var(--fm);color:#fff;font-weight:700;
text-shadow:0 1px 3px rgba(0,0,0,.5);min-width:20px;
position:relative;overflow:hidden;border-radius:0;
animation:barPulseBlue 2.8s ease-in-out infinite;
}
/* When blue is 100%, track handles rounding */
.fcb-fill-blue[data-w="100"]{border-radius:0}
@keyframes barPulseBlue{
0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 6px rgba(50,90,160,.2)}
50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 0 12px rgba(50,90,160,.35),0 0 20px rgba(50,90,160,.1)}
}
/* Animated shimmer on blue bar */
.fcb-fill-blue::after{
content:'';position:absolute;top:0;right:-100%;width:60%;height:100%;
background:linear-gradient(270deg,transparent,rgba(255,255,255,.15),transparent);
animation:shimmer 2.8s ease-in-out infinite;
}
/* Interactive sliders */
.force-sliders{
background:linear-gradient(145deg,rgba(16,22,32,.88),rgba(22,32,45,.82));
border:1px solid var(--border2);border-radius:4px;
padding:.8rem;margin-bottom:.9rem;border-left:3px solid rgba(200,164,90,.2);
position:relative;
}
.force-sliders-title{
font-family:var(--fd);font-size:.75rem;color:var(--gold);letter-spacing:3px;
margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem;
}
.slider-row{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;padding:.25rem 0}
.slider-label{font-size:.75rem;color:var(--txt2);width:100px;flex-shrink:0;font-family:var(--fh);font-weight:500}
.slider-input{
flex:1;-webkit-appearance:none;appearance:none;height:4px;
background:linear-gradient(90deg,var(--force-red),var(--gold),var(--force-blue));
border-radius:2px;outline:none;cursor:pointer;
}
.slider-input::-webkit-slider-thumb{
-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
background:var(--gold);border:2px solid var(--bg);cursor:pointer;
box-shadow:0 0 8px rgba(200,164,90,.3);transition:all .2s;
}
.slider-input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 14px rgba(200,164,90,.5)}
.slider-value{font-family:var(--fm);font-size:.72rem;color:var(--gold);width:45px;text-align:right;font-weight:600}
/* Overall balance gauge */
.balance-gauge{
background:linear-gradient(135deg,rgba(16,22,32,.9),rgba(200,164,90,.02),rgba(16,22,32,.9));
border:1px solid rgba(200,164,90,.1);border-radius:4px;
padding:.8rem;margin-bottom:.9rem;text-align:center;
position:relative;overflow:hidden;
}
.balance-gauge::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,rgba(208,128,80,.02),transparent 30%,transparent 70%,rgba(61,143,160,.02));
pointer-events:none;
}
.gauge-title{font-family:var(--fd);font-size:.78rem;color:var(--gold);letter-spacing:3px;margin-bottom:.5rem}
.gauge-bar{height:28px;background:var(--bg4);border-radius:3px;overflow:hidden;position:relative;margin:.4rem 0;display:flex}
.gauge-fill-red{height:100%;background:linear-gradient(90deg,rgba(160,50,40,.8),rgba(200,70,55,.75));border-radius:0;transition:width .8s ease;flex-shrink:0}
.gauge-fill-blue{height:100%;background:linear-gradient(270deg,rgba(45,85,140,.8),rgba(65,115,180,.75));border-radius:0;transition:width .8s ease;flex-shrink:0}
.gauge-marker{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;border-radius:2px;transform:translateX(-50%);transition:left .8s ease;box-shadow:0 0 8px rgba(255,255,255,.4)}
.gauge-labels{display:flex;justify-content:space-between;font-size:.68rem}
.gauge-labels .g-red{color:var(--force-red);font-family:var(--fd);letter-spacing:1px}
.gauge-labels .g-blue{color:var(--force-blue);font-family:var(--fd);letter-spacing:1px}
.gauge-labels .g-pct{color:var(--gold);font-family:var(--fm);font-weight:700;font-size:.82rem}
/* Force AI Commentary Box */
.force-ai-commentary{
margin-top:.6rem;padding:.6rem .75rem;
background:linear-gradient(135deg,rgba(10,14,20,.7),rgba(20,28,40,.6));
border:1px solid rgba(200,164,90,.1);border-radius:6px;
border-left:3px solid var(--gold);
animation:fadeSlideIn .4s ease-out;
}
.fac-header{
display:flex;align-items:center;gap:6px;margin-bottom:.35rem;
font-family:var(--fd);font-size:.65rem;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;
}
.fac-icon{width:14px;height:14px;flex-shrink:0;color:var(--gold)}
.fac-text{
font-family:var(--fb);font-size:.78rem;color:var(--txt);line-height:1.65;
letter-spacing:.2px;
}
.fac-loading{
font-size:.7rem;color:var(--txt3);font-family:var(--fb);
display:flex;align-items:center;gap:6px;
}
.fac-dot{
width:6px;height:6px;border-radius:50%;background:var(--gold);
animation:facPulse 1s infinite;
}
@keyframes facPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Summary stats grid */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-bottom:.7rem}
.dash-card{
background:linear-gradient(145deg,rgba(16,22,32,.88),rgba(22,32,45,.82));
border:1px solid var(--border2);border-radius:4px;
padding:.6rem;text-align:center;transition:all .4s;position:relative;overflow:hidden;
animation:cardReveal .5s ease-out both;
}
.dash-card:nth-child(1){animation-delay:.05s}
.dash-card:nth-child(2){animation-delay:.1s}
.dash-card:nth-child(3){animation-delay:.15s}
.dash-card:nth-child(4){animation-delay:.2s}
.dash-card:nth-child(5){animation-delay:.25s}
.dash-card:nth-child(6){animation-delay:.3s}
.dash-card:hover{border-color:rgba(200,164,90,.2);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 12px var(--accent-glow,rgba(200,164,90,.06))}
.dash-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,var(--gold));box-shadow:0 0 8px var(--accent,rgba(200,164,90,.15))}
.dash-card.danger{--accent:var(--red);--accent-glow:rgba(196,60,60,.08)}
.dash-card.warn{--accent:var(--orange);--accent-glow:rgba(200,120,50,.08)}
.dash-card.ok{--accent:var(--green);--accent-glow:rgba(106,154,74,.08)}
.dash-card.info{--accent:var(--gold);--accent-glow:rgba(200,164,90,.08)}
.dash-card.special{--accent:var(--quewi);--accent-glow:rgba(144,112,176,.08)}
.dash-icon{font-size:1.3rem;margin-bottom:.15rem;filter:drop-shadow(0 0 4px rgba(200,164,90,.1))}
.dash-value{font-family:var(--fd);font-size:1.05rem;font-weight:700;color:var(--accent,var(--gold));letter-spacing:1px;text-shadow:0 0 8px var(--accent-glow,rgba(200,164,90,.1))}
.dash-label{font-size:.68rem;color:var(--txt3);margin-top:.12rem;letter-spacing:.5px;font-family:var(--fb)}
/* accent classes moved into .dash-card block above */
/* Key events */
.dash-events{
background:linear-gradient(135deg,rgba(16,22,32,.9),rgba(196,60,60,.02),rgba(16,22,32,.9));
border:1px solid rgba(196,60,60,.1);border-radius:4px;
padding:.6rem .8rem;margin-bottom:.7rem;border-left:3px solid rgba(196,60,60,.35);
position:relative;overflow:hidden;
}
.dash-events::before{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(196,60,60,.015),transparent);
animation:threatWave 7s ease-in-out infinite;
transform-origin:left;pointer-events:none;
}
.dash-events-title{font-family:'Noto Sans SC',var(--fd),sans-serif;font-size:.75rem;color:var(--gold);letter-spacing:2px;margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem;position:relative;font-weight:700;text-shadow:0 0 10px rgba(200,164,90,.1)}
.dash-event{
font-size:.82rem;color:var(--txt);padding:.3rem 0;border-bottom:1px solid rgba(200,164,90,.03);
display:flex;gap:.4rem;align-items:flex-start;line-height:1.8;font-family:'Noto Sans SC','PingFang SC',var(--fc),sans-serif;font-weight:400;
animation:cardReveal .4s ease-out both;position:relative;
}
.dash-event:nth-child(1){animation-delay:.1s}
.dash-event:nth-child(2){animation-delay:.2s}
.dash-event:nth-child(3){animation-delay:.3s}
.dash-event:nth-child(4){animation-delay:.4s}
.dash-event:nth-child(5){animation-delay:.5s}
.dash-event:nth-child(6){animation-delay:.6s}
.dash-event:nth-child(7){animation-delay:.7s}
.dash-event:nth-child(8){animation-delay:.8s}
.dash-event:last-child{border-bottom:none}
.dash-event-dot{
width:5px;height:5px;border-radius:50%;background:var(--red);
flex-shrink:0;margin-top:.45rem;
box-shadow:0 0 5px var(--red),0 0 10px rgba(196,60,60,.2);
animation:pulse 2s infinite;
}
/* ══════ DATA SOURCES SECTION ══════ */
.dash-sources{
background:var(--glass);border:1px solid var(--border);border-radius:4px;
padding:.7rem .8rem;margin-bottom:.7rem;border-left:3px solid rgba(0,200,180,.15);
}
.dash-sources-title{
font-family:var(--fd);font-size:.72rem;color:var(--teal,#4ecdc4);
letter-spacing:2px;margin-bottom:.5rem;display:flex;align-items:center;gap:.3rem;
text-transform:uppercase;
}
.dash-methodology{
display:flex;gap:.4rem;align-items:flex-start;
font-size:.78rem;color:var(--txt2);line-height:1.7;
background:rgba(0,0,0,.2);border-radius:4px;padding:.5rem .6rem;margin-bottom:.5rem;
border-left:2px solid rgba(78,205,196,.3);font-family:var(--fb);
}
.dash-meth-icon{flex-shrink:0;margin-top:1px}
.dash-src-list{
display:flex;flex-direction:column;gap:.4rem;
}
.dash-src-item{
padding:.4rem .5rem;border-radius:4px;
background:rgba(0,0,0,.15);border:1px solid rgba(200,164,90,.06);
transition:all .2s;
}
.dash-src-item:hover{background:rgba(200,164,90,.06);border-color:rgba(200,164,90,.12)}
.dash-src-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem}
.dash-src-badge{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;
background:rgba(78,205,196,.15);color:var(--teal,#4ecdc4);
font-size:.6rem;font-weight:700;flex-shrink:0;
border:1px solid rgba(78,205,196,.3);
}
.dash-src-name{
font-size:.78rem;font-weight:600;color:var(--teal,#4ecdc4);
font-family:var(--fd);letter-spacing:.5px;
}
.dash-src-headline{
font-size:.72rem;color:var(--txt2);font-style:italic;
padding-left:20px;line-height:1.5;font-family:var(--fb);
opacity:.8;
}
.dash-src-usage{
font-size:.7rem;color:var(--gold);padding-left:20px;
line-height:1.5;font-family:var(--fb);margin-top:.1rem;
}
.dash-src-fallback{
font-size:.76rem;color:var(--txt2);font-style:italic;
padding:.3rem 0;line-height:1.6;
}
.dash-gen-time{
font-size:.68rem;color:var(--txt2);opacity:.65;
text-align:right;margin-top:.5rem;font-family:var(--fd);
letter-spacing:.5px;
}
/* ══════ STAT HERO ROW ══════ */
.stat-hero-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:.8rem}
.stat-hero{
text-align:center;padding:.65rem .4rem;
background:linear-gradient(135deg,rgba(16,22,32,.92),rgba(22,32,45,.88));
border:1px solid var(--border2);
border-radius:4px;position:relative;overflow:hidden;transition:all .4s;
animation:cardReveal .6s ease-out both, heroGlow 6s ease-in-out infinite;
backdrop-filter:blur(4px);
}
.stat-hero:nth-child(1){animation-delay:.05s,.05s}
.stat-hero:nth-child(2){animation-delay:.12s,.12s}
.stat-hero:nth-child(3){animation-delay:.19s,.19s}
.stat-hero:nth-child(4){animation-delay:.26s,.26s}
.stat-hero:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 15px rgba(200,164,90,.06)}
/* Top color bar */
.stat-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.stat-hero.danger::before{background:linear-gradient(90deg,var(--red),rgba(196,60,60,.3));box-shadow:0 0 12px rgba(196,60,60,.3)}
.stat-hero.warn::before{background:linear-gradient(90deg,var(--orange),rgba(200,120,50,.3));box-shadow:0 0 12px rgba(200,120,50,.2)}
.stat-hero.info::before{background:linear-gradient(90deg,var(--gold),rgba(200,164,90,.3));box-shadow:0 0 12px rgba(200,164,90,.2)}
/* Shimmer scan line */
.stat-hero::after{
content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.04),transparent);
animation:shimmer 4s ease-in-out infinite;
pointer-events:none;
}
.stat-hero-icon{font-size:1.5rem;margin-bottom:.2rem;filter:drop-shadow(0 0 3px rgba(200,164,90,.15))}
.stat-hero-num{
font-family:var(--fd);font-size:1.35rem;font-weight:800;color:var(--txt);letter-spacing:2px;
text-shadow:0 0 8px rgba(255,255,255,.05);
}
.stat-hero.danger .stat-hero-num{color:var(--red);text-shadow:0 0 12px rgba(196,60,60,.3)}
.stat-hero.warn .stat-hero-num{color:var(--orange);text-shadow:0 0 12px rgba(200,120,50,.25)}
.stat-hero-num.glitch{animation:numberGlitch .15s linear}
.stat-hero-label{font-size:.68rem;color:var(--txt3);font-family:var(--fb);margin-top:.1rem;letter-spacing:.5px}
/* ══════ THREAT STATUS BAR ══════ */
.threat-status-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.8rem}
.tsb-item{
padding:.45rem .6rem;background:linear-gradient(135deg,rgba(16,22,32,.85),rgba(22,32,45,.8));
border:1px solid var(--border2);border-radius:4px;text-align:center;
position:relative;overflow:hidden;transition:all .3s;
}
.tsb-item:hover{border-color:rgba(200,164,90,.18);box-shadow:0 2px 12px rgba(0,0,0,.25)}
/* Subtle data scan line */
.tsb-item::after{
content:'';position:absolute;top:0;left:-100%;width:80%;height:100%;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.025),transparent);
animation:shimmer 6s ease-in-out infinite;
pointer-events:none;
}
.tsb-label{display:block;font-size:.58rem;color:var(--txt3);font-family:var(--fd);letter-spacing:1.5px;margin-bottom:.15rem}
.tsb-val{display:block;font-family:var(--fd);font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:1px;word-break:break-all;line-height:1.3}
.tsb-danger .tsb-val{color:var(--red);text-shadow:0 0 10px rgba(196,60,60,.3);animation:threatPulse 3s infinite}
.tsb-warn .tsb-val{color:var(--orange)}
.tsb-red{color:var(--red)!important;text-shadow:0 0 8px rgba(196,60,60,.2)}
/* ══════ ESCALATION GAUGE ══════ */
.esc-gauge{
background:linear-gradient(135deg,rgba(16,22,32,.9),rgba(196,60,60,.03),rgba(16,22,32,.9));
border:1px solid rgba(196,60,60,.12);border-radius:4px;
padding:.8rem;margin-bottom:.8rem;border-left:3px solid rgba(196,60,60,.4);
position:relative;overflow:hidden;
animation:riskGlow 4s ease-in-out infinite;
}
/* Threat wave that sweeps across the gauge */
.esc-gauge::before{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
background:linear-gradient(90deg,transparent,rgba(196,60,60,.06),transparent);
animation:threatWave 5s ease-in-out infinite;
transform-origin:left;pointer-events:none;
}
.esc-gauge-title{font-family:var(--fd);font-size:.78rem;color:var(--red);letter-spacing:3px;margin-bottom:.5rem;font-weight:700;position:relative;text-shadow:0 0 8px rgba(196,60,60,.2)}
.esc-gauge-track{
height:26px;background:var(--bg4);
border-radius:3px;overflow:hidden;position:relative;border:1px solid rgba(196,60,60,.15);
box-shadow:inset 0 0 15px rgba(0,0,0,.3);
}
.esc-gauge-fill{
height:100%;border-radius:3px;
background:linear-gradient(90deg,var(--green),var(--amber) 40%,var(--orange) 65%,var(--red) 85%);
transition:width 1.5s cubic-bezier(.4,0,.2,1);position:relative;
box-shadow:0 0 12px rgba(196,60,60,.2);
}
.esc-gauge-fill::after{
content:'';position:absolute;right:0;top:0;bottom:0;width:20px;
background:radial-gradient(circle,rgba(255,255,255,.3),transparent);animation:pulse 1.5s infinite;
filter:blur(2px);
}
.esc-gauge-val{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--fd);font-size:.8rem;font-weight:800;color:#fff;
text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 10px rgba(196,60,60,.3);letter-spacing:2px;
}
.esc-gauge-labels{display:flex;justify-content:space-between;margin-top:.25rem;font-size:.58rem;color:var(--txt3);font-family:var(--fm);position:relative}
/* ══════ RATIO GRID ══════ */
.ratio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.ratio-item{
padding:.45rem .55rem;background:linear-gradient(145deg,rgba(16,22,32,.88),rgba(22,32,45,.82));
border:1px solid var(--border2);border-radius:4px;transition:all .4s;
animation:cardReveal .4s ease-out both;
}
.ratio-item:nth-child(1){animation-delay:.1s}
.ratio-item:nth-child(2){animation-delay:.15s}
.ratio-item:nth-child(3){animation-delay:.2s}
.ratio-item:nth-child(4){animation-delay:.25s}
.ratio-item:nth-child(5){animation-delay:.3s}
.ratio-item:nth-child(6){animation-delay:.35s}
.ratio-item:hover{border-color:rgba(200,164,90,.18);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.3)}
.ratio-item.adv-blue{border-left:3px solid var(--force-blue)}
.ratio-item.adv-red{border-left:3px solid var(--force-red)}
.ratio-item.contested{border-left:3px solid var(--gold)}
.ratio-label{font-size:.72rem;color:var(--txt2);margin-bottom:.2rem;font-family:var(--fb)}
.ratio-bar{display:flex;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-bottom:.15rem}
.ratio-fill-r{background:var(--force-red);height:100%;transition:width .6s ease}
.ratio-fill-b{background:var(--force-blue);height:100%;transition:width .6s ease}
.ratio-pct{font-size:.58rem;color:var(--txt3);font-family:var(--fm);font-weight:600}
/* ══════ DIVERGENCE BANNER ══════ */
/* ══════ QueWi AI STRATEGIC INTEL PANEL — PREMIUM DESIGN ══════ */
.quewi-intel-panel{
margin-bottom:1.5rem;
background:linear-gradient(170deg,rgba(8,6,16,.97) 0%,rgba(14,10,28,.96) 40%,rgba(10,8,20,.97) 100%);
border:1px solid rgba(200,164,90,.12);
border-radius:14px;
overflow:hidden;
position:relative;
box-shadow:
0 2px 0 rgba(200,164,90,.06),
0 0 60px rgba(0,0,0,.6),
0 0 120px rgba(200,164,90,.03),
inset 0 1px 0 rgba(255,255,255,.03);
}
.quewi-intel-panel::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 5%,rgba(200,164,90,.5) 30%,rgba(255,200,100,.7) 50%,rgba(200,164,90,.5) 70%,transparent 95%);
}
.quewi-intel-panel::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 15%,rgba(200,164,90,.15) 50%,transparent 85%);
}
/* ── Header ── */
.qip-header{
padding:.85rem 1.2rem .6rem;
background:linear-gradient(180deg,rgba(200,164,90,.04) 0%,transparent 100%);
border-bottom:1px solid rgba(200,164,90,.08);
position:relative;
}
.qip-header::after{
content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.2),transparent);
}
.qip-logo-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.qip-pulse{
width:7px;height:7px;background:#ff4757;border-radius:50%;
box-shadow:0 0 6px #ff4757,0 0 14px rgba(255,71,87,.35);
animation:qip-blink 2s ease-in-out infinite;
}
@keyframes qip-blink{0%,100%{opacity:1;box-shadow:0 0 6px #ff4757,0 0 14px rgba(255,71,87,.35)}50%{opacity:.35;box-shadow:0 0 2px #ff4757}}
.qip-logo{
font-family:var(--fd);font-size:.85rem;font-weight:800;letter-spacing:5px;
background:linear-gradient(135deg,#c8a45a 0%,#ffe0a0 45%,#c8a45a 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
text-transform:uppercase;
}
.qip-badge{
font-family:var(--fm);font-size:.58rem;letter-spacing:2.5px;color:rgba(200,164,90,.6);
padding:.18rem .65rem;border:1px solid rgba(200,164,90,.15);border-radius:999px;
background:rgba(200,164,90,.04);text-transform:uppercase;
}
/* ── Premium Tabs — segmented control with gold accent ── */
.qip-tabs{display:flex;gap:0;background:rgba(0,0,0,.3);border-radius:10px;padding:3px;border:1px solid rgba(200,164,90,.08)}
.qip-tab{
flex:1;padding:.7rem .9rem;border:none;border-radius:8px;
background:transparent;color:rgba(200,164,90,.45);font-family:var(--fd);
font-size:.72rem;letter-spacing:2.5px;cursor:pointer;transition:all .4s cubic-bezier(.22,1,.36,1);
text-align:center;position:relative;overflow:hidden;
display:flex;align-items:center;justify-content:center;gap:.45rem;
}
.qip-tab:hover{color:rgba(200,164,90,.7);background:rgba(200,164,90,.04)}
.qip-tab.active{
background:linear-gradient(135deg,rgba(200,164,90,.1) 0%,rgba(200,164,90,.04) 100%);
color:var(--gold);
box-shadow:0 2px 12px rgba(200,164,90,.08),0 0 1px rgba(200,164,90,.3),inset 0 1px 0 rgba(255,255,255,.04);
}
.qip-tab.active::after{
content:'';position:absolute;bottom:0;left:15%;right:15%;height:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.qip-tab-icon{font-size:.85rem;line-height:1}
.qip-tab-label{font-size:.72rem;letter-spacing:2.5px;white-space:nowrap}
/* ── Body ── */
.qip-body{padding:1.2rem 1.4rem}
.qip-placeholder{
text-align:center;padding:2.5rem 1rem;color:rgba(200,164,90,.4);font-size:.82rem;
position:relative;
}
.qip-ph-glow{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,rgba(200,164,90,.06),transparent 70%);
animation:qip-glow 3.5s ease-in-out infinite;
}
@keyframes qip-glow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.12}}
/* ── Actions ── */
.qip-actions{display:flex;gap:.5rem;padding:.5rem 1.2rem .75rem}
.qip-action-btn{
flex:1;padding:.65rem;border:1px solid rgba(200,164,90,.2);border-radius:8px;
background:linear-gradient(135deg,rgba(200,164,90,.06),rgba(200,164,90,.02));
color:rgba(200,164,90,.7);font-family:var(--fd);font-size:.64rem;letter-spacing:2.5px;
cursor:pointer;transition:all .4s;text-align:center;text-transform:uppercase;
}
.qip-action-btn:hover{
background:linear-gradient(135deg,rgba(200,164,90,.12),rgba(200,164,90,.06));
border-color:rgba(200,164,90,.4);transform:translateY(-1px);
box-shadow:0 4px 20px rgba(200,164,90,.08);color:var(--gold);
}
.qip-action-btn:disabled{opacity:.5;cursor:wait;animation:pulse-glow 1.5s ease-in-out infinite}
/* ════════════════════════════════════════════
CONSENSUS CARD — Premium Intelligence Report
════════════════════════════════════════════ */
.con-card{
background:transparent;border-radius:0;
border:none;padding:0;text-align:left;
}
/* ── Header: Score Ring + Title + Summary ── */
.con-header{
display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem;
padding-bottom:1rem;
border-bottom:1px solid rgba(200,164,90,.08);
position:relative;
}
.con-header::after{
content:'';position:absolute;bottom:-1px;left:0;width:80px;height:1px;
background:var(--gold);
}
.con-score-ring{
position:relative;width:76px;height:76px;flex-shrink:0;
}
.con-score-inner{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;z-index:1;
}
.con-score-num{
font-family:var(--fd);font-size:1.75rem;font-weight:800;line-height:1;
letter-spacing:-1px;
}
.con-score-lbl{font-family:var(--fm);font-size:.55rem;opacity:.4;letter-spacing:1px}
.con-score-arc{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}
.con-arc-bg{fill:none;stroke:rgba(255,255,255,.04);stroke-width:3.5}
.con-arc-fg{fill:none;stroke-width:3.5;stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.22,1,.36,1)}
.con-arc-fg.con-score-high{stroke:#2ed573}
.con-arc-fg.con-score-med{stroke:#ffa502}
.con-arc-fg.con-score-low{stroke:#ff4757}
.con-score-high{color:#2ed573}
.con-score-med{color:#ffa502}
.con-score-low{color:#ff4757}
.con-header-text{flex:1;min-width:0}
.con-header-title{
font-family:var(--fd);font-size:.65rem;letter-spacing:4px;color:rgba(200,164,90,.5);
margin-bottom:.45rem;text-transform:uppercase;
}
.con-scenario{
font-size:1.05rem;color:var(--txt);line-height:1.7;
font-family:var(--f-headline),var(--fb);
font-weight:400;
}
/* ── Quick Cards 2×2 Grid ── */
.con-quick-grid{
display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
margin-bottom:1.2rem;
}
.con-qcard{
padding:.75rem .85rem;
background:linear-gradient(135deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.005) 100%);
border:1px solid rgba(200,164,90,.06);border-radius:8px;
position:relative;overflow:hidden;
transition:all .3s;
}
.con-qcard:hover{
border-color:rgba(200,164,90,.15);
background:linear-gradient(135deg,rgba(200,164,90,.03),rgba(255,255,255,.01));
}
.con-qcard::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
background:linear-gradient(180deg,rgba(200,164,90,.4),rgba(200,164,90,.1));
border-radius:2px;
}
.con-qcard-icon{font-size:.9rem;margin-bottom:.3rem;display:block}
.con-qcard-lbl{
font-family:var(--fd);font-size:.65rem;color:rgba(200,164,90,.45);
letter-spacing:2px;text-transform:uppercase;margin-bottom:.25rem;
}
.con-qcard-val{
font-size:.9rem;color:var(--txt);line-height:1.65;
font-family:var(--f-headline),var(--fb);
}
/* ── Actors Row ── */
.con-actors-row{
display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
margin-bottom:1.2rem;padding-bottom:.8rem;
border-bottom:1px solid rgba(255,255,255,.03);
}
.con-actors-lbl{
font-family:var(--fd);font-size:.65rem;color:rgba(200,164,90,.45);letter-spacing:2px;
text-transform:uppercase;
}
.con-actor-tag{
font-size:.75rem;padding:.25rem .6rem;border-radius:999px;
background:rgba(200,164,90,.04);border:1px solid rgba(200,164,90,.12);
color:rgba(200,164,90,.85);font-family:var(--fd);letter-spacing:1.5px;
transition:all .3s;
}
.con-actor-tag:hover{background:rgba(200,164,90,.08);border-color:rgba(200,164,90,.25)}
/* ── Six-Dimension Consensus Cards ── */
.con-dims-section{margin-bottom:1.2rem}
.con-section-title{
font-family:var(--fd);font-size:.65rem;letter-spacing:4px;color:var(--gold);
margin-bottom:.8rem;padding-bottom:.4rem;
border-bottom:1px solid rgba(200,164,90,.08);
display:flex;align-items:center;gap:.5rem;text-transform:uppercase;
position:relative;
}
.con-section-title::after{
content:'';position:absolute;bottom:-1px;left:0;width:40px;height:1px;
background:var(--gold);
}
.con-section-icon{font-size:.85rem}
.con-dim-card{
margin-bottom:.6rem;padding:.8rem 1rem .8rem 1.2rem;border-radius:8px;
border:1px solid rgba(255,255,255,.03);
background:linear-gradient(135deg,rgba(255,255,255,.015) 0%,rgba(255,255,255,.005) 100%);
transition:all .4s cubic-bezier(.22,1,.36,1);
position:relative;overflow:hidden;
}
.con-dim-card::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:3px 0 0 3px;
}
.con-dim-card.con-ag-full::before{background:linear-gradient(180deg,#2ed573,rgba(46,213,115,.3))}
.con-dim-card.con-ag-strong::before{background:linear-gradient(180deg,#ffa502,rgba(255,165,2,.3))}
.con-dim-card.con-ag-partial::before{background:linear-gradient(180deg,#ff4757,rgba(255,71,87,.3))}
.con-dim-card:hover{
background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
border-color:rgba(255,255,255,.06);
transform:translateX(2px);
}
.con-dim-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.con-dim-icon{font-size:.8rem;margin-right:.35rem}
.con-dim-name{
font-size:.9rem;color:var(--txt);font-weight:600;
font-family:var(--f-headline),var(--fb);flex:1;
letter-spacing:.5px;
}
.con-dim-agree{
font-family:var(--fd);font-size:.55rem;letter-spacing:2.5px;padding:.2rem .6rem;
border-radius:4px;border:1px solid currentColor;font-weight:700;
text-transform:uppercase;
}
.con-ag-full .con-dim-agree{color:#2ed573;background:rgba(46,213,115,.06)}
.con-ag-strong .con-dim-agree{color:#ffa502;background:rgba(255,165,2,.06)}
.con-ag-partial .con-dim-agree{color:#ff4757;background:rgba(255,71,87,.06)}
.con-dim-finding{
font-size:.9rem;color:var(--txt2);line-height:1.7;margin-bottom:.45rem;
font-family:var(--f-headline),var(--fb);
}
.con-dim-indicators{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.35rem}
.con-indicator{
font-size:.65rem;padding:.15rem .45rem;border-radius:4px;
background:rgba(200,164,90,.05);border:1px solid rgba(200,164,90,.1);
color:rgba(200,164,90,.8);font-family:var(--fm);letter-spacing:.5px;
}
.con-dim-models{display:flex;gap:.35rem}
.con-model-dot{
font-size:.55rem;padding:.12rem .45rem;border-radius:4px;
font-family:var(--fm);letter-spacing:1.5px;font-weight:500;
}
.con-model-claude{background:rgba(114,83,198,.1);color:#9b78e0;border:1px solid rgba(114,83,198,.2)}
.con-model-gpt{background:rgba(0,166,126,.1);color:#2ed573;border:1px solid rgba(0,166,126,.2)}
.con-model-gemini{background:rgba(66,133,244,.1);color:#5b9aff;border:1px solid rgba(66,133,244,.2)}
/* ── Extreme Scenario ── */
.con-extreme{
margin-bottom:.8rem;padding:.7rem .9rem;border-radius:8px;
background:linear-gradient(135deg,rgba(255,71,87,.03),rgba(255,20,20,.01));
border:1px solid rgba(255,71,87,.1);
position:relative;overflow:hidden;
}
.con-extreme::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(255,71,87,.4),transparent);
}
.con-extreme-body{font-size:.9rem;color:var(--txt);line-height:1.7;font-family:var(--f-headline),var(--fb)}
.con-extreme-prob{
font-size:.75rem;color:#ff4757;margin-top:.45rem;
font-family:var(--fd);letter-spacing:1.5px;
}
/* ── Strategic Forecast ── */
.con-forecast{
margin-bottom:.8rem;padding:.75rem .9rem;border-radius:8px;
background:linear-gradient(135deg,rgba(200,164,90,.03),rgba(200,164,90,.01));
border:1px solid rgba(200,164,90,.08);
position:relative;
}
.con-forecast::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
background:linear-gradient(180deg,rgba(200,164,90,.5),rgba(200,164,90,.1));
}
.con-forecast-body{font-size:1.05rem;color:var(--txt);line-height:1.75;font-family:var(--f-headline),var(--fb);padding-left:.3rem}
/* ── Reliability ── */
.con-reliable{
margin-bottom:.6rem;padding:.55rem .8rem;border-radius:8px;
background:rgba(46,213,115,.02);border:1px solid rgba(46,213,115,.08);
}
.con-reliable-title{
font-family:var(--fd);font-size:.55rem;letter-spacing:2.5px;color:#2ed573;
margin-bottom:.3rem;text-transform:uppercase;
}
.con-reliable-body{font-size:.8rem;color:var(--txt2);line-height:1.7}
/* ── Recommendations ── */
.con-recs{margin-bottom:.6rem}
.con-rec-item{
display:flex;align-items:flex-start;gap:.55rem;padding:.45rem .6rem;
margin-bottom:.35rem;font-size:.9rem;color:var(--txt);line-height:1.65;
border-radius:6px;background:rgba(255,255,255,.01);
transition:background .3s;
font-family:var(--f-headline),var(--fb);
}
.con-rec-item:hover{background:rgba(255,255,255,.025)}
.con-rec-num{
flex-shrink:0;width:20px;height:20px;border-radius:50%;
background:rgba(200,164,90,.08);border:1px solid rgba(200,164,90,.18);
color:var(--gold);font-family:var(--fd);font-size:.55rem;
display:flex;align-items:center;justify-content:center;margin-top:2px;
font-weight:700;
}
.con-timestamp{
font-family:var(--fm);font-size:.52rem;color:rgba(200,164,90,.3);
text-align:right;margin-top:.6rem;letter-spacing:1px;
}
/* ════════════════════════════════════════════
DIVERGENCE CARD — Premium Analysis View
════════════════════════════════════════════ */
.divergence-banner{margin-bottom:1.2rem}
.div-banner-title{
font-family:var(--fd);font-size:.9rem;color:var(--red);letter-spacing:4px;
margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;
font-weight:700;padding-bottom:.5rem;border-bottom:1px solid rgba(196,60,60,.08);
}
.div-banner-title .pulse-dot{width:8px;height:8px;background:var(--red);border-radius:50%;animation:pulse 1.5s infinite;box-shadow:0 0 6px var(--red)}
.div-item{
margin-bottom:.8rem;padding:.9rem 1rem;
background:var(--glass);
border:1px solid rgba(196,60,60,.06);border-left:3px solid rgba(196,60,60,.3);
border-radius:6px;transition:all .3s;
}
.div-item:hover{background:rgba(196,60,60,.02);border-left-color:var(--red)}
.div-topic{font-family:var(--f-impact);font-size:1.1rem;color:var(--gold);letter-spacing:2.5px;margin-bottom:.6rem;font-weight:600}
.div-models{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.div-model-cell{padding:.6rem .7rem;background:rgba(0,0,0,.2);border-radius:6px;border-top:2px solid var(--mc)}
.div-model-name{font-family:var(--fd);font-size:.65rem;color:var(--mc);letter-spacing:1px;margin-bottom:.25rem}
.div-model-val{font-size:.9rem;color:var(--txt);line-height:1.7;font-family:var(--f-headline),var(--fb)}
/* ── Deep Divergence Analysis ── */
.div-deep-wrap{margin-top:.6rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.06)}
.div-deep-btn{
width:100%;padding:.85rem 1.2rem;border:2px solid rgba(255,71,87,.45);border-radius:8px;
background:linear-gradient(135deg,rgba(255,71,87,.14),rgba(200,164,90,.06));
color:#ff4757;font-family:var(--fd);font-size:.88rem;letter-spacing:3px;
cursor:pointer;transition:all .3s;text-transform:uppercase;
box-shadow:0 0 12px rgba(255,71,87,.12),inset 0 1px 0 rgba(255,255,255,.04);
position:relative;overflow:hidden;
}
.div-deep-btn::before{
content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,71,87,.1),transparent);
animation:shimmer 3s ease-in-out infinite;
}
.div-deep-btn:hover{background:linear-gradient(135deg,rgba(255,71,87,.22),rgba(200,164,90,.1));border-color:#ff4757;transform:translateY(-2px);box-shadow:0 4px 20px rgba(255,71,87,.2)}
.div-deep-btn:disabled{opacity:.5;cursor:wait}
.div-btn-loading{animation:pulse-glow 1.5s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 5px rgba(255,71,87,.2)}50%{box-shadow:0 0 20px rgba(255,71,87,.4)}}
.div-deep-loading{text-align:center;padding:1.5rem;color:var(--txt2);font-size:.82rem}
.div-deep-loading .radar-spinner{margin:0 auto .8rem}
.div-deep-err{padding:1rem;color:#ff4757;font-size:.82rem;text-align:center;border:1px solid rgba(255,71,87,.15);border-radius:8px;background:rgba(255,71,87,.03)}
/* ── Deep Divergence Card — Premium Layout ── */
.div-deep-card{
background:transparent;border:none;border-radius:0;
padding:0;margin-top:0;text-align:left;
}
.div-deep-header{
display:flex;align-items:flex-start;gap:1.2rem;margin-bottom:1.2rem;
padding-bottom:1rem;
border-bottom:1px solid rgba(200,164,90,.08);
position:relative;
}
.div-deep-header::after{
content:'';position:absolute;bottom:-1px;left:0;width:80px;height:1px;
background:var(--gold);
}
.div-score-circle{
width:76px;height:76px;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
border:2.5px solid currentColor;flex-shrink:0;
position:relative;
}
.div-score-circle::after{
content:'';position:absolute;inset:-5px;border-radius:50%;
border:1px dashed currentColor;opacity:.15;
animation:outerRingSpin 12s linear infinite;
}
.div-score-high{color:#ff4757;background:rgba(255,71,87,.05)}
.div-score-med{color:#ffa502;background:rgba(255,165,2,.05)}
.div-score-low{color:#2ed573;background:rgba(46,213,115,.05)}
.div-score-num{font-family:var(--fd);font-size:1.75rem;font-weight:800;line-height:1;letter-spacing:-1px}
.div-score-label{font-family:var(--fm);font-size:.52rem;opacity:.4;letter-spacing:1px}
.div-score-title{
font-family:var(--fd);font-size:.65rem;letter-spacing:4px;
color:rgba(200,164,90,.5);margin-bottom:.45rem;text-transform:uppercase;
}
.div-score-summary{font-size:1.05rem;color:var(--txt);line-height:1.7;font-family:var(--f-headline),var(--fb)}
/* ── Key Divergence Items ── */
.div-deep-section{margin-bottom:1.2rem}
.div-ds-title{
font-family:var(--fd);font-size:.65rem;letter-spacing:4px;color:var(--gold);
margin-bottom:.8rem;padding-bottom:.4rem;
border-bottom:1px solid rgba(200,164,90,.08);
text-transform:uppercase;position:relative;
}
.div-ds-title::after{
content:'';position:absolute;bottom:-1px;left:0;width:40px;height:1px;
background:var(--gold);
}
.div-kd-item{
margin-bottom:.7rem;padding:.85rem 1rem;
background:linear-gradient(135deg,rgba(255,255,255,.015),rgba(255,255,255,.005));
border-radius:8px;border:1px solid rgba(255,255,255,.03);
transition:all .4s cubic-bezier(.22,1,.36,1);
}
.div-kd-item:hover{
background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
border-color:rgba(255,255,255,.06);
}
.div-kd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.div-kd-dim{font-size:.9rem;color:var(--txt);font-weight:600;font-family:var(--f-headline),var(--fb);letter-spacing:.5px}
.div-kd-score{
font-family:var(--fd);font-size:.78rem;padding:.2rem .6rem;border-radius:5px;
border:1px solid currentColor;font-weight:700;letter-spacing:1px;
}
.div-kd-stances{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.5rem}
.div-kd-stance{
font-size:.9rem;color:var(--txt2);line-height:1.75;
padding:.5rem .8rem;border-left:3px solid var(--border);
background:rgba(0,0,0,.12);border-radius:0 6px 6px 0;
font-family:var(--f-headline),var(--fb);
transition:all .3s;
}
.div-kd-stance:hover{background:rgba(0,0,0,.2)}
.div-kd-stance b{font-weight:600;letter-spacing:.5px}
.div-kd-analysis{
font-size:.9rem;color:var(--txt3);line-height:1.7;
padding:.55rem .8rem;font-style:italic;
background:rgba(200,164,90,.02);border-radius:6px;
border:1px solid rgba(200,164,90,.06);
}
.div-credible{font-size:.9rem;color:var(--txt);line-height:1.7;padding:.65rem .85rem;background:rgba(46,213,115,.03);border:1px solid rgba(46,213,115,.1);border-radius:8px}
.div-advice{
font-size:.9rem;color:var(--txt);line-height:1.75;
padding:.7rem .9rem;
background:linear-gradient(135deg,rgba(200,164,90,.03),rgba(200,164,90,.01));
border:1px solid rgba(200,164,90,.08);border-radius:8px;
position:relative;
}
.div-advice::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
background:linear-gradient(180deg,rgba(200,164,90,.5),rgba(200,164,90,.1));
}
.div-deep-ts{
font-family:var(--fm);font-size:.52rem;color:rgba(200,164,90,.3);
text-align:right;margin-top:.7rem;letter-spacing:1px;
}
/* ════════════════════════════════════════════════════
CONSENSUS — COMPACT CARD GRID (QueWi v3)
Tactical tension layout • high screen utilization • war-room dynamism
════════════════════════════════════════════════════ */
.cg-wrap{background:transparent;text-align:left}
/* ── Hero: Score + Scenario — tactical command briefing feel ── */
.cg-hero{
display:flex;align-items:center;gap:1.1rem;margin-bottom:1rem;
padding:1rem 1.2rem;border-radius:10px;
background:linear-gradient(135deg,rgba(200,164,90,.06) 0%,rgba(200,164,90,.015) 50%,rgba(46,213,115,.02) 100%);
border:1px solid rgba(200,164,90,.12);
position:relative;overflow:hidden;
box-shadow:0 2px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.02);
}
.cg-hero::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.5),rgba(46,213,115,.3),transparent);
animation:cg-hero-glow 4s ease-in-out infinite alternate;
}
@keyframes cg-hero-glow{
0%{opacity:.5;filter:blur(0)}
100%{opacity:1;filter:blur(1px)}
}
.cg-hero::after{
content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.15),transparent);
}
.cg-score-ring{position:relative;width:72px;height:72px;flex-shrink:0}
.cg-score-inner{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;z-index:1;
}
.cg-score-num{font-family:var(--fd);font-size:1.7rem;font-weight:800;line-height:1;letter-spacing:-1px;
text-shadow:0 0 12px currentColor;
}
.cg-score-lbl{font-family:var(--fm);font-size:.48rem;opacity:.4;letter-spacing:1px}
.cg-score-arc{position:absolute;top:0;left:0;width:100%;height:100%;transform:rotate(-90deg)}
.cg-arc-bg{fill:none;stroke:rgba(255,255,255,.04);stroke-width:3}
.cg-arc-fg{fill:none;stroke-width:3.5;stroke-linecap:round;transition:stroke-dasharray 1.2s cubic-bezier(.22,1,.36,1);
filter:drop-shadow(0 0 4px currentColor);
}
.cg-s-high{color:#2ed573}.cg-s-med{color:#ffa502}.cg-s-low{color:#ff4757}
.cg-arc-fg.cg-s-high{stroke:#2ed573}.cg-arc-fg.cg-s-med{stroke:#ffa502}.cg-arc-fg.cg-s-low{stroke:#ff4757}
.cg-hero-text{flex:1;min-width:0}
.cg-hero-tag{
font-family:var(--fd);font-size:.6rem;letter-spacing:3.5px;color:rgba(200,164,90,.6);
margin-bottom:.35rem;text-transform:uppercase;
display:flex;align-items:center;gap:.4rem;
}
.cg-hero-tag::before{
content:'';width:6px;height:6px;border-radius:50%;background:#2ed573;
box-shadow:0 0 6px #2ed573;animation:cg-pulse-dot 2s ease-in-out infinite;
}
@keyframes cg-pulse-dot{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.cg-hero-scenario{
font-size:.95rem;color:var(--txt);line-height:1.7;
font-family:var(--f-headline),var(--fb);
}
/* ── Quick Info Strip — 4 columns with glow borders ── */
.cg-quick{
display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;
margin-bottom:.9rem;
}
.cg-qi{
padding:.6rem .65rem;border-radius:8px;
background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.005));
border:1px solid rgba(200,164,90,.07);
position:relative;overflow:hidden;transition:all .35s cubic-bezier(.22,1,.36,1);
}
.cg-qi:hover{
border-color:rgba(200,164,90,.2);transform:translateY(-2px);
box-shadow:0 4px 14px rgba(0,0,0,.2),0 0 8px rgba(200,164,90,.05);
}
.cg-qi::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2.5px;
background:linear-gradient(180deg,var(--gold),rgba(200,164,90,.1));
}
.cg-qi::after{
content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
background:radial-gradient(circle at center,rgba(200,164,90,.02) 0%,transparent 70%);
opacity:0;transition:opacity .3s;
}
.cg-qi:hover::after{opacity:1}
.cg-qi-icon{font-size:.8rem;display:block;margin-bottom:.2rem}
.cg-qi-lbl{font-family:var(--fd);font-size:.52rem;color:rgba(200,164,90,.45);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.15rem}
.cg-qi-val{font-size:.82rem;color:var(--txt);line-height:1.55;font-family:var(--f-headline),var(--fb)}
/* ── Actors Strip with pulse ── */
.cg-actors{
display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
margin-bottom:.9rem;padding:.5rem .7rem;
border-radius:7px;
background:linear-gradient(90deg,rgba(200,164,90,.02),transparent);
border:1px solid rgba(200,164,90,.04);
}
.cg-actors-lbl{font-family:var(--fd);font-size:.55rem;color:rgba(200,164,90,.45);letter-spacing:2px;text-transform:uppercase}
.cg-actor{
font-size:.65rem;padding:.22rem .55rem;border-radius:999px;
background:rgba(200,164,90,.05);border:1px solid rgba(200,164,90,.12);
color:rgba(200,164,90,.85);font-family:var(--fd);letter-spacing:1px;
transition:all .3s;position:relative;
}
.cg-actor:hover{background:rgba(200,164,90,.1);border-color:rgba(200,164,90,.25);transform:scale(1.05)}
/* ── Dimension Grid — 3 columns (war-room tactical tiles) ── */
.cg-dims{
display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
margin-bottom:.9rem;
}
.cg-dim{
padding:.7rem .75rem;border-radius:9px;
border:1px solid rgba(255,255,255,.04);
background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(255,255,255,.004));
transition:all .4s cubic-bezier(.22,1,.36,1);
position:relative;overflow:hidden;
opacity:0;animation:cg-fadein .5s cubic-bezier(.22,1,.36,1) forwards;
}
.cg-dim:nth-child(1){animation-delay:.06s}
.cg-dim:nth-child(2){animation-delay:.12s}
.cg-dim:nth-child(3){animation-delay:.18s}
.cg-dim:nth-child(4){animation-delay:.24s}
.cg-dim:nth-child(5){animation-delay:.30s}
.cg-dim:nth-child(6){animation-delay:.36s}
@keyframes cg-fadein{
from{opacity:0;transform:translateY(8px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
/* ── Top glow bar per agreement level ── */
.cg-dim::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;
}
.cg-dim::after{
content:'';position:absolute;top:0;left:0;right:0;height:20px;
pointer-events:none;border-radius:9px 9px 0 0;
}
.cg-dim.cg-ag-full::before{background:linear-gradient(90deg,#2ed573,rgba(46,213,115,.2))}
.cg-dim.cg-ag-full::after{background:linear-gradient(180deg,rgba(46,213,115,.06),transparent)}
.cg-dim.cg-ag-strong::before{background:linear-gradient(90deg,#ffa502,rgba(255,165,2,.2))}
.cg-dim.cg-ag-strong::after{background:linear-gradient(180deg,rgba(255,165,2,.05),transparent)}
.cg-dim.cg-ag-partial::before{background:linear-gradient(90deg,#ff4757,rgba(255,71,87,.2))}
.cg-dim.cg-ag-partial::after{background:linear-gradient(180deg,rgba(255,71,87,.06),transparent)}
.cg-dim:hover{
background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
border-color:rgba(255,255,255,.08);transform:translateY(-3px);
box-shadow:0 6px 20px rgba(0,0,0,.2),0 0 1px rgba(255,255,255,.1);
}
.cg-dim-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.cg-dim-name{
font-size:.82rem;color:var(--txt);font-weight:600;
font-family:var(--f-headline),var(--fb);
display:flex;align-items:center;gap:.3rem;
}
.cg-dim-icon{font-size:.75rem}
.cg-dim-badge{
font-family:var(--fd);font-size:.48rem;letter-spacing:2px;padding:.18rem .5rem;
border-radius:4px;border:1px solid currentColor;font-weight:700;text-transform:uppercase;
position:relative;
}
.cg-ag-full .cg-dim-badge{color:#2ed573;background:rgba(46,213,115,.08);box-shadow:0 0 6px rgba(46,213,115,.1)}
.cg-ag-strong .cg-dim-badge{color:#ffa502;background:rgba(255,165,2,.08);box-shadow:0 0 6px rgba(255,165,2,.1)}
.cg-ag-partial .cg-dim-badge{color:#ff4757;background:rgba(255,71,87,.08);box-shadow:0 0 6px rgba(255,71,87,.1);
animation:cg-partial-pulse 2.5s ease-in-out infinite;
}
@keyframes cg-partial-pulse{0%,100%{box-shadow:0 0 4px rgba(255,71,87,.1)}50%{box-shadow:0 0 12px rgba(255,71,87,.25)}}
.cg-dim-finding{
font-size:.8rem;color:var(--txt2);line-height:1.65;
font-family:var(--f-headline),var(--fb);
margin-bottom:.35rem;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cg-dim-indicators{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.3rem}
.cg-dim-ind{
font-size:.55rem;padding:.12rem .4rem;border-radius:4px;
background:rgba(200,164,90,.05);border:1px solid rgba(200,164,90,.1);
color:rgba(200,164,90,.75);font-family:var(--fm);letter-spacing:.3px;
transition:all .2s;
}
.cg-dim-ind:hover{background:rgba(200,164,90,.1);border-color:rgba(200,164,90,.2)}
.cg-dim-models{display:flex;gap:.3rem}
.cg-mdot{
font-size:.48rem;padding:.1rem .4rem;border-radius:4px;
font-family:var(--fm);letter-spacing:1px;font-weight:500;
}
.cg-mdot.m-claude{background:rgba(200,155,106,.12);color:var(--claude);border:1px solid rgba(200,155,106,.18)}
.cg-mdot.m-gpt{background:rgba(107,159,212,.12);color:var(--gpt);border:1px solid rgba(107,159,212,.18)}
.cg-mdot.m-gemini{background:rgba(94,188,178,.12);color:var(--gemini);border:1px solid rgba(94,188,178,.18)}
/* ── Bottom Row: Extreme + Forecast — dramatic tension ── */
.cg-bottom{
display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
margin-bottom:.7rem;
}
.cg-extreme{
padding:.7rem .8rem;border-radius:9px;
background:linear-gradient(135deg,rgba(255,71,87,.04),rgba(255,20,20,.01));
border:1px solid rgba(255,71,87,.1);
position:relative;overflow:hidden;
animation:cg-extreme-breathe 5s ease-in-out infinite;
}
@keyframes cg-extreme-breathe{
0%,100%{border-color:rgba(255,71,87,.1);box-shadow:0 0 0 rgba(255,71,87,0)}
50%{border-color:rgba(255,71,87,.18);box-shadow:0 0 12px rgba(255,71,87,.06)}
}
.cg-extreme::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(255,71,87,.5),rgba(255,71,87,.2),transparent);
animation:cg-extreme-scan 3s ease-in-out infinite;
}
@keyframes cg-extreme-scan{
0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}
}
.cg-sec-title{
font-family:var(--fd);font-size:.58rem;letter-spacing:3px;color:var(--gold);
margin-bottom:.45rem;text-transform:uppercase;
display:flex;align-items:center;gap:.35rem;
}
.cg-extreme .cg-sec-title{color:#ff4757}
.cg-extreme-body{font-size:.8rem;color:var(--txt);line-height:1.65;font-family:var(--f-headline),var(--fb)}
.cg-extreme-prob{
font-size:.68rem;color:#ff4757;margin-top:.35rem;font-family:var(--fd);letter-spacing:1.5px;
text-shadow:0 0 8px rgba(255,71,87,.15);
}
.cg-forecast{
padding:.7rem .8rem;border-radius:9px;
background:linear-gradient(135deg,rgba(200,164,90,.03),rgba(200,164,90,.01));
border:1px solid rgba(200,164,90,.08);
position:relative;
}
.cg-forecast::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2.5px;
background:linear-gradient(180deg,rgba(200,164,90,.5),rgba(200,164,90,.08));
}
.cg-forecast-body{font-size:.8rem;color:var(--txt);line-height:1.65;font-family:var(--f-headline),var(--fb);padding-left:.25rem}
/* ── Meta Row: Reliability + Recommendations ── */
.cg-meta-row{
display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
margin-bottom:.5rem;
}
.cg-reliable{
padding:.55rem .7rem;border-radius:8px;
background:rgba(46,213,115,.02);border:1px solid rgba(46,213,115,.08);
}
.cg-reliable .cg-sec-title{color:#2ed573}
.cg-reliable-body{font-size:.75rem;color:var(--txt2);line-height:1.65}
.cg-recs{
padding:.55rem .7rem;border-radius:8px;
background:rgba(255,255,255,.012);border:1px solid rgba(255,255,255,.04);
}
.cg-rec-item{
display:flex;align-items:flex-start;gap:.4rem;
padding:.28rem 0;font-size:.8rem;color:var(--txt);line-height:1.55;
font-family:var(--f-headline),var(--fb);
}
.cg-rec-num{
flex-shrink:0;width:18px;height:18px;border-radius:50%;
background:rgba(200,164,90,.07);border:1px solid rgba(200,164,90,.18);
color:var(--gold);font-family:var(--fd);font-size:.48rem;
display:flex;align-items:center;justify-content:center;margin-top:1px;font-weight:700;
}
.cg-ts{
font-family:var(--fm);font-size:.48rem;color:rgba(200,164,90,.25);
text-align:right;margin-top:.4rem;letter-spacing:1px;
}
/* ── Consensus Responsive ── */
@media(max-width:768px){
.cg-quick{grid-template-columns:repeat(2,1fr)}
.cg-dims{grid-template-columns:repeat(2,1fr)}
.cg-bottom,.cg-meta-row{grid-template-columns:1fr}
}
@media(max-width:480px){
.cg-quick{grid-template-columns:1fr 1fr}
.cg-dims{grid-template-columns:1fr}
.cg-hero{flex-direction:column;align-items:flex-start;gap:.6rem}
}
/* ════════════════════════════════════════════════════
DIVERGENCE — COMPARISON TABLE (QueWi v2)
Side-by-side model comparison • military scan line
════════════════════════════════════════════════════ */
.dvt-wrap{background:transparent;text-align:left;position:relative}
/* ── Header ── */
.dvt-header{
display:flex;align-items:center;gap:1rem;margin-bottom:1rem;
padding-bottom:.8rem;border-bottom:1px solid rgba(200,164,90,.08);
position:relative;
}
.dvt-header::after{
content:'';position:absolute;bottom:-1px;left:0;width:60px;height:1px;
background:var(--gold);
}
.dvt-score{
width:56px;height:56px;border-radius:50%;flex-shrink:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
border:2.5px solid currentColor;position:relative;
}
.dvt-score::after{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:1px dashed currentColor;opacity:.12;
animation:outerRingSpin 12s linear infinite;
}
.dvt-s-high{color:#ff4757;background:rgba(255,71,87,.04)}
.dvt-s-med{color:#ffa502;background:rgba(255,165,2,.04)}
.dvt-s-low{color:#2ed573;background:rgba(46,213,115,.04)}
.dvt-score-num{font-family:var(--fd);font-size:1.4rem;font-weight:800;line-height:1;letter-spacing:-1px}
.dvt-score-lbl{font-family:var(--fm);font-size:.45rem;opacity:.35;letter-spacing:1px}
.dvt-header-text{flex:1;min-width:0}
.dvt-header-tag{font-family:var(--fd);font-size:.55rem;letter-spacing:3px;color:rgba(200,164,90,.45);text-transform:uppercase;margin-bottom:.2rem}
.dvt-summary{font-size:.9rem;color:var(--txt);line-height:1.6;font-family:var(--f-headline),var(--fb)}
/* ── Table Wrapper with Scan Line ── */
.dvt-table-wrap{
position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
margin-bottom:.8rem;border-radius:8px;
border:1px solid rgba(200,164,90,.06);
scrollbar-width:thin;scrollbar-color:rgba(200,164,90,.15) transparent;
}
.dvt-table-wrap::after{
content:'';position:absolute;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent 5%,rgba(200,164,90,.2) 25%,rgba(200,164,90,.5) 50%,rgba(200,164,90,.2) 75%,transparent 95%);
animation:dvt-scan 6s ease-in-out infinite;
pointer-events:none;z-index:2;
box-shadow:0 0 8px rgba(200,164,90,.1);
}
@keyframes dvt-scan{
0%{top:0;opacity:.4}
50%{top:calc(100% - 2px);opacity:.7}
100%{top:0;opacity:.4}
}
/* ── Table ── */
.dvt-table{
width:100%;border-collapse:collapse;
background:rgba(0,0,0,.15);
font-size:.82rem;
}
.dvt-table th,.dvt-table td{
padding:.6rem .7rem;text-align:left;vertical-align:top;
border-bottom:1px solid rgba(255,255,255,.03);
}
.dvt-table thead th{
font-family:var(--fd);font-size:.55rem;letter-spacing:2px;text-transform:uppercase;
padding:.7rem .7rem;
background:rgba(0,0,0,.25);
border-bottom:2px solid rgba(200,164,90,.08);
position:sticky;top:0;z-index:1;
white-space:nowrap;
}
.dvt-th-dim{
color:rgba(200,164,90,.5);min-width:110px;
position:sticky;left:0;z-index:3;
background:rgba(16,24,36,.98)!important;
}
.dvt-th-claude{color:var(--claude);border-top:2px solid var(--claude)}
.dvt-th-gpt{color:var(--gpt);border-top:2px solid var(--gpt)}
.dvt-th-gemini{color:var(--gemini);border-top:2px solid var(--gemini)}
.dvt-th-score{color:rgba(200,164,90,.5);min-width:50px;text-align:center}
/* ── Table Rows ── */
.dvt-table tbody tr{transition:background .3s}
.dvt-table tbody tr:hover{background:rgba(200,164,90,.02)}
.dvt-table tbody tr:hover .dvt-td-claude{background:rgba(200,155,106,.02)}
.dvt-table tbody tr:hover .dvt-td-gpt{background:rgba(107,159,212,.02)}
.dvt-table tbody tr:hover .dvt-td-gemini{background:rgba(94,188,178,.02)}
.dvt-td-dim{
font-family:var(--f-headline),var(--fb);font-weight:600;
color:var(--txt);letter-spacing:.3px;
position:sticky;left:0;
background:rgba(16,24,36,.96);
border-right:1px solid rgba(200,164,90,.06);
min-width:110px;
}
.dvt-td-stance{
color:var(--txt2);line-height:1.6;
font-family:var(--f-headline),var(--fb);
font-size:.78rem;
}
.dvt-td-claude{border-left:2px solid rgba(200,155,106,.15)}
.dvt-td-gpt{border-left:2px solid rgba(107,159,212,.15)}
.dvt-td-gemini{border-left:2px solid rgba(94,188,178,.15)}
.dvt-td-score{text-align:center}
/* ── Score Badge ── */
.dvt-score-badge{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:50%;
font-family:var(--fd);font-size:.7rem;font-weight:700;
border:1.5px solid currentColor;
}
.dvt-sb-high{color:#ff4757;background:rgba(255,71,87,.06);animation:dvt-pulse-red 2.5s ease-in-out infinite}
.dvt-sb-med{color:#ffa502;background:rgba(255,165,2,.06)}
.dvt-sb-low{color:#2ed573;background:rgba(46,213,115,.06)}
@keyframes dvt-pulse-red{
0%,100%{box-shadow:0 0 4px rgba(255,71,87,.12)}
50%{box-shadow:0 0 14px rgba(255,71,87,.3)}
}
/* ── Analysis Sub-row ── */
.dvt-analysis-row td{
padding:.35rem .7rem;
border-bottom:1px solid rgba(200,164,90,.04);
}
.dvt-analysis{
font-size:.72rem;color:var(--txt3);line-height:1.6;font-style:italic;
padding:.35rem .6rem;
background:rgba(200,164,90,.015);border-radius:5px;
border:1px solid rgba(200,164,90,.04);
}
/* ── Strategic Advice ── */
.dvt-advice{
padding:.65rem .85rem;border-radius:8px;
background:linear-gradient(135deg,rgba(200,164,90,.025),rgba(200,164,90,.008));
border:1px solid rgba(200,164,90,.06);
margin-bottom:.5rem;position:relative;
}
.dvt-advice::before{
content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
background:linear-gradient(180deg,rgba(200,164,90,.45),rgba(200,164,90,.08));
}
.dvt-advice-title{
font-family:var(--fd);font-size:.55rem;letter-spacing:3px;color:var(--gold);
margin-bottom:.3rem;text-transform:uppercase;
}
.dvt-advice-body{font-size:.85rem;color:var(--txt);line-height:1.65;font-family:var(--f-headline),var(--fb);padding-left:.2rem}
.dvt-ts{
font-family:var(--fm);font-size:.48rem;color:rgba(200,164,90,.25);
text-align:right;margin-top:.4rem;letter-spacing:1px;
}
/* ── Mobile Scroll Hint ── */
.dvt-scroll-hint{
display:none;font-family:var(--fd);font-size:.5rem;color:rgba(200,164,90,.3);
letter-spacing:2px;text-transform:uppercase;text-align:center;
margin-bottom:.4rem;
animation:dvt-hint-pulse 2s ease-in-out infinite;
}
@keyframes dvt-hint-pulse{0%,100%{opacity:.3}50%{opacity:.6}}
/* ── Mobile Card Layout (hidden on desktop, shown on mobile) ── */
.dvt-cards{display:none}
@media(min-width:769px){
.dvt-scroll-hint{display:none}
.dvt-cards{display:none!important}
}
@media(max-width:768px){
/* Hide desktop table, show mobile cards */
.dvt-scroll-hint{display:none!important}
.dvt-table-wrap{display:none!important}
.dvt-cards{display:flex;flex-direction:column;gap:.65rem;margin-bottom:.8rem}
/* Header adjustments */
.dvt-header{gap:.75rem;margin-bottom:.85rem;padding-bottom:.65rem;flex-wrap:nowrap}
.dvt-score{width:48px;height:48px}
.dvt-score-num{font-size:1.2rem}
.dvt-score-lbl{font-size:.4rem}
.dvt-header-tag{font-size:.48rem;letter-spacing:2px;margin-bottom:.15rem}
.dvt-summary{font-size:.82rem;line-height:1.55}
/* ── Individual Card ── */
.dvt-card{
background:rgba(0,0,0,.18);
border:1px solid rgba(200,164,90,.06);
border-radius:10px;
padding:.7rem .75rem;
position:relative;
overflow:hidden;
animation:dvt-card-in .4s ease both;
}
.dvt-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(200,164,90,.12),transparent);
}
@keyframes dvt-card-in{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
/* Card header: dimension + score badge */
.dvt-card-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:.55rem;padding-bottom:.4rem;
border-bottom:1px solid rgba(200,164,90,.06);
gap:.5rem;
}
.dvt-card-dim{
font-family:var(--f-headline),var(--fb);font-weight:700;
color:var(--txt);font-size:.82rem;letter-spacing:.2px;
flex:1;min-width:0;line-height:1.35;
}
.dvt-card-head .dvt-score-badge{flex-shrink:0;width:30px;height:30px;font-size:.72rem}
/* 3-model stance list: vertical stack */
.dvt-card-stances{
display:flex;flex-direction:column;gap:.35rem;
}
.dvt-card-stance{
display:flex;align-items:flex-start;gap:.5rem;
padding:.4rem .55rem;border-radius:7px;
background:rgba(255,255,255,.012);
border-left:2.5px solid transparent;
transition:background .2s;
}
.dvt-card-stance:active{background:rgba(255,255,255,.04)}
.dvt-card-claude{border-left-color:var(--claude)}
.dvt-card-gpt{border-left-color:var(--gpt)}
.dvt-card-gemini{border-left-color:var(--gemini)}
.dvt-card-model{
font-family:var(--fd);font-size:.5rem;letter-spacing:1.5px;
text-transform:uppercase;min-width:42px;flex-shrink:0;
padding-top:.12rem;
line-height:1;
}
.dvt-card-claude .dvt-card-model{color:var(--claude)}
.dvt-card-gpt .dvt-card-model{color:var(--gpt)}
.dvt-card-gemini .dvt-card-model{color:var(--gemini)}
.dvt-card-text{
font-family:var(--f-headline),var(--fb);
font-size:.78rem;color:var(--txt2);line-height:1.55;
flex:1;min-width:0;
word-break:break-word;
}
/* Card analysis footer */
.dvt-card-analysis{
margin-top:.4rem;padding:.35rem .5rem;
font-size:.7rem;color:var(--txt3);line-height:1.55;
font-style:italic;
background:rgba(200,164,90,.015);border-radius:6px;
border:1px solid rgba(200,164,90,.04);
}
/* Strategic advice mobile */
.dvt-advice{padding:.55rem .7rem;margin-bottom:.4rem}
.dvt-advice-title{font-size:.5rem;letter-spacing:2px;margin-bottom:.25rem}
.dvt-advice-body{font-size:.8rem;line-height:1.6;padding-left:.15rem}
/* Timestamp & share */
.dvt-ts{font-size:.42rem;margin-top:.3rem}
.div-deep-share{margin-top:.35rem;padding-top:.3rem}
.div-deep-share .hz-quewi-fwd{font-size:.68rem!important;padding:5px 16px!important}
}
/* ── Extra small screens (iPhone SE / 375px) ── */
@media(max-width:400px){
.dvt-header{gap:.55rem}
.dvt-score{width:42px;height:42px}
.dvt-score-num{font-size:1.05rem}
.dvt-header-tag{font-size:.42rem;letter-spacing:1.5px}
.dvt-summary{font-size:.76rem;line-height:1.5}
.dvt-card{padding:.6rem .6rem}
.dvt-card-dim{font-size:.78rem}
.dvt-card-stance{padding:.35rem .45rem;gap:.4rem}
.dvt-card-model{font-size:.45rem;min-width:38px}
.dvt-card-text{font-size:.74rem;line-height:1.5}
.dvt-card-analysis{font-size:.66rem}
.dvt-advice-body{font-size:.76rem}
}
/* QueWi share buttons in panels */
.div-deep-share,.tl-quewi-share,.ca-share-wrap{
text-align:right;margin-top:.5rem;padding-top:.4rem;border-top:1px solid rgba(200,164,90,.06);
}
.div-deep-share .hz-quewi-fwd,
.tl-quewi-share .hz-quewi-fwd,
.ca-share-btn{
font-size:.72rem!important;padding:6px 20px!important;border-radius:999px!important;
}
.ca-share-btn{
background:linear-gradient(135deg,rgba(0,210,190,.15),rgba(144,112,226,.18))!important;
border:1px solid rgba(0,210,190,.3)!important;
color:#0ff!important;letter-spacing:1px;cursor:pointer;border-radius:999px;
transition:all .35s ease;font-family:var(--fd);
text-shadow:0 0 6px rgba(0,255,220,.25);
box-shadow:0 2px 12px rgba(0,210,190,.12);
animation:quewiFwdPulse 2.8s ease-in-out infinite;
}
.ca-share-btn:hover{
background:linear-gradient(135deg,rgba(0,210,190,.28),rgba(144,112,226,.32))!important;
border-color:rgba(0,255,220,.5)!important;color:#fff!important;
text-shadow:0 0 10px rgba(0,255,220,.45);
box-shadow:0 4px 20px rgba(0,210,190,.25);
}
/* ══════ VISUAL TIMELINE — REDESIGNED CARD LAYOUT ══════ */
.timeline-section{margin-bottom:1.5rem}
.timeline-title{
font-family:var(--f-impact);font-size:1rem;color:var(--gold);letter-spacing:4px;
margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;font-weight:700;
padding-bottom:.5rem;border-bottom:1px solid rgba(200,164,90,.12);
}
.tl-fold-all-hint{
margin-left:auto;
font-family:var(--fm);font-size:.58rem;color:var(--txt3);
letter-spacing:1px;font-weight:400;opacity:.6;
animation:hintPulse 3s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.6}50%{opacity:.25}}
/* vertical list of time horizons */
.tl-horizons{display:flex;flex-direction:column;gap:1.2rem}
.tl-horizon{
background:rgba(0,0,0,.15);border-radius:8px;overflow:hidden;
border:1px solid rgba(200,164,90,.06);
transition:border-color .4s,box-shadow .4s;
}
.tl-horizon.tl-hz-open{
border-color:rgba(200,164,90,.15);
box-shadow:0 2px 20px rgba(0,0,0,.3);
}
.tl-horizon.tl-hz-closed{
border-color:rgba(200,164,90,.04);
}
.tl-horizon-head{
display:flex;align-items:center;gap:.6rem;
padding:.65rem 1rem;
background:linear-gradient(135deg,rgba(200,164,90,.06),transparent);
border-bottom:1px solid rgba(200,164,90,.08);
cursor:pointer;
user-select:none;
-webkit-user-select:none;
transition:background .3s,padding .3s;
position:relative;
}
.tl-horizon-head:hover{
background:linear-gradient(135deg,rgba(200,164,90,.12),rgba(200,164,90,.02));
}
.tl-horizon-head:active{
background:linear-gradient(135deg,rgba(200,164,90,.18),rgba(200,164,90,.04));
}
.tl-hz-closed .tl-horizon-head{
border-bottom-color:transparent;
}
.tl-horizon-head.critical{
background:linear-gradient(135deg,rgba(196,60,60,.12),rgba(196,60,60,.02));
border-bottom-color:rgba(196,60,60,.15);
}
.tl-horizon-head.critical:hover{
background:linear-gradient(135deg,rgba(196,60,60,.2),rgba(196,60,60,.04));
}
.tl-horizon-head.warn{
background:linear-gradient(135deg,rgba(200,120,50,.1),rgba(200,120,50,.02));
border-bottom-color:rgba(200,120,50,.12);
}
.tl-horizon-head.warn:hover{
background:linear-gradient(135deg,rgba(200,120,50,.18),rgba(200,120,50,.04));
}
/* Chevron arrow */
.tl-hz-chevron{
margin-left:auto;
font-size:.9rem;
color:var(--gold);
opacity:.7;
transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s;
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;height:24px;
border-radius:50%;
background:rgba(200,164,90,.08);
flex-shrink:0;
}
.tl-hz-open .tl-hz-chevron{
opacity:1;
background:rgba(200,164,90,.15);
}
.tl-hz-closed .tl-hz-chevron:hover{
background:rgba(200,164,90,.2);
}
/* Model count badge */
.tl-hz-meta{
display:flex;align-items:center;gap:.4rem;
}
.tl-hz-model-count{
font-family:var(--fm);font-size:.6rem;color:var(--txt3);
letter-spacing:.5px;
background:rgba(200,164,90,.06);
padding:1px 6px;
border-radius:3px;
border:1px solid rgba(200,164,90,.08);
}
/* Collapsible body */
.tl-horizon-body{
max-height:5000px;
overflow:hidden;
opacity:1;
transition:max-height .5s cubic-bezier(.4,0,.2,1),
opacity .35s ease,
padding .35s ease;
}
.tl-hz-closed .tl-horizon-body{
max-height:0!important;
opacity:0;
padding-top:0;
padding-bottom:0;
}
.tl-horizon-icon{font-size:1.3rem}
.tl-horizon-label{
font-family:var(--f-impact);font-size:1.1rem;color:var(--gold);
letter-spacing:3px;font-weight:700;
}
.tl-horizon-head.critical .tl-horizon-label{color:#c43c3c}
.tl-horizon-head.warn .tl-horizon-label{color:#d08030}
/* model cards inside each horizon */
.tl-horizon-models{display:flex;flex-direction:column;gap:.6rem;padding:.8rem}
.tl-model-card{
background:rgba(255,255,255,.015);border-radius:6px;
border-left:3px solid var(--mc);padding:.7rem .9rem;
transition:background .2s;
}
.tl-model-card:hover{background:rgba(255,255,255,.035)}
.tl-model-name{
font-family:var(--f-impact);font-size:.82rem;color:var(--mc);
letter-spacing:2px;font-weight:600;display:flex;align-items:center;gap:.4rem;
margin-bottom:.5rem;
}
.tl-model-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* structured content blocks inside a model */
.tl-model-content{display:flex;flex-direction:column;gap:.4rem}
.tl-block{
padding:.55rem .7rem;border-radius:5px;
background:rgba(0,0,0,.12);position:relative;
}
.tl-block-label{
font-family:var(--f-impact);font-size:.78rem;color:var(--gold);
letter-spacing:1.5px;font-weight:600;margin-bottom:.3rem;
display:flex;align-items:center;gap:.3rem;
}
.tl-block-icon{font-size:.85rem}
.tl-block-body{
font-family:var(--f-headline),var(--fb);font-size:.92rem;
color:var(--txt);line-height:1.85;letter-spacing:.2px;
}
/* color coding per block type */
.tl-baseline{border-left:2px solid rgba(200,164,90,.3)}
.tl-esc{border-left:2px solid rgba(196,60,60,.5);background:rgba(196,60,60,.04)}
.tl-esc .tl-block-label{color:#c43c3c}
.tl-deesc{border-left:2px solid rgba(60,160,100,.5);background:rgba(60,160,100,.04)}
.tl-deesc .tl-block-label{color:#3ca064}
.tl-trigger{border-left:2px solid rgba(200,164,90,.4)}
.tl-trigger .tl-block-label{color:#d4a84a}
.tl-decision{border-left:2px solid rgba(80,140,220,.5);background:rgba(80,140,220,.03)}
.tl-decision .tl-block-label{color:#508cdc}
.tl-iw{border-left:2px solid rgba(150,120,200,.4);background:rgba(150,120,200,.03)}
.tl-iw .tl-block-label{color:#9678c8}
.tl-conf{border-left:2px solid rgba(200,164,90,.25)}
.tl-conf .tl-block-body{font-size:.82rem;color:var(--txt2);font-style:italic}
.tl-extra{border-left:2px solid rgba(200,164,90,.15)}
.tl-empty{color:var(--txt3);font-size:.8rem}
/* keep old classes for backward compat but hide */
.timeline-track{display:none}
.timeline-node{display:none}
/* ══════ COMPARE TABLES ══════ */
.compare-tables{margin-bottom:1.2rem}
.ct-section{margin-bottom:.8rem}
.ct-title{
font-family:var(--fd);font-size:.78rem;color:var(--gold);letter-spacing:3px;
margin-bottom:.5rem;display:flex;align-items:center;gap:.4rem;
padding-bottom:.35rem;border-bottom:1px solid rgba(200,164,90,.08);font-weight:600;
}
.ct-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.ct-table thead{background:linear-gradient(135deg,rgba(200,164,90,.03),transparent)}
.ct-table th{font-family:var(--fd);font-size:.62rem;color:var(--gold);letter-spacing:1.5px;padding:.5rem .55rem;text-align:left;border-bottom:1px solid var(--border);font-weight:500}
.ct-table th.col-claude{color:var(--claude)}.ct-table th.col-gpt{color:var(--gpt)}.ct-table th.col-gemini{color:var(--gemini)}
.ct-table td{padding:.5rem .55rem;font-size:.82rem;border-bottom:1px solid rgba(200,164,90,.02);vertical-align:top;line-height:1.7;font-family:var(--fb)}
.ct-table tr:last-child td{border-bottom:none}
.ct-table tr:hover td{background:rgba(200,164,90,.015)}
.ct-table td:first-child{font-family:var(--fh);font-size:.75rem;color:var(--gold);letter-spacing:1px;white-space:nowrap;width:80px;font-weight:400}
.ct-table .diff-cell{background:rgba(200,164,90,.03);border-left:2px solid var(--gold);padding-left:.4rem;font-weight:500}
/* ══════ CONSENSUS ══════ */
.consensus-block{
margin-bottom:1.2rem;background:var(--glass);
border:1px solid rgba(106,154,74,.1);border-radius:4px;
padding:.8rem;border-left:3px solid var(--green);
}
.cons-title{font-family:var(--fd);font-size:.75rem;color:var(--green);letter-spacing:3px;margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem;font-weight:600}
.cons-item{font-size:.82rem;padding:.3rem 0;border-bottom:1px solid rgba(200,164,90,.02);line-height:1.7;color:var(--txt);font-family:var(--fb)}
.cons-item:last-child{border-bottom:none}
/* ══════ WORST CASE CARDS ══════ */
.worst-case-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.75rem;align-items:stretch}
.wc-card{
padding:.78rem .82rem;background:var(--glass);
border:1px solid var(--border);border-radius:4px;
border-top:2px solid var(--mc);transition:all .3s;
min-height:100%;
}
.wc-card:hover{border-color:var(--mc);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.wc-model{font-family:var(--f-impact);font-size:.72rem;color:var(--mc);letter-spacing:2px;margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem;font-weight:600}
.wc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.wc-desc{font-size:.92rem;color:var(--txt);line-height:1.85;margin-bottom:.35rem;font-family:var(--f-headline),var(--fb)}
.wc-prob{font-size:.78rem;color:var(--gold);font-family:var(--f-impact);letter-spacing:1px}
/* ══════ LEADER MOVES V2 — leader-centric with avatars ══════ */
.leader-moves-grid{display:flex;flex-direction:column;gap:.8rem}
.leader-model-block{padding:.7rem;background:rgba(0,0,0,.12);border-radius:4px;margin-bottom:.3rem}
.leader-model-name{font-family:var(--fd);font-size:.58rem;letter-spacing:2px;margin-bottom:.5rem;font-weight:600}
.leader-grid-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.8rem}
.ldr2-card{
background:var(--glass);border:1px solid var(--border);border-radius:8px;
padding:.8rem;transition:all .3s;overflow:hidden;
}
.ldr2-card:hover{border-color:var(--border2);background:rgba(200,164,90,.02);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
/* Section dividers inside leader card */
.ldr2-section{margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--border)}
.ldr2-section:first-of-type{margin-top:.35rem}
.ldr2-sec-label{font-family:var(--fd);font-size:.6rem;letter-spacing:2px;color:var(--txt3);margin-bottom:.3rem;text-transform:uppercase}
.ldr2-header{display:flex;align-items:center;gap:.7rem;margin-bottom:.2rem}
.ldr2-avatar{
width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;
background:rgba(255,255,255,.04);border:2px solid var(--border2);
display:flex;align-items:center;justify-content:center;
}
.ldr2-avatar img{width:100%;height:100%;object-fit:cover}
.ldr2-avatar-flag{font-size:1.4rem}
.ldr2-info{flex:1;min-width:0}
.ldr2-name{font-family:var(--fh);font-size:1rem;color:var(--gold);font-weight:600;line-height:1.3}
.ldr2-country{
display:inline-block;font-size:.6rem;color:var(--txt3);font-family:var(--fb);
padding:.1rem .4rem;background:rgba(255,255,255,.03);border-radius:2px;
border:1px solid rgba(255,255,255,.06);margin-top:.15rem;
}
.ldr2-stance{font-size:.85rem;color:var(--txt2);line-height:1.7;font-family:var(--fh);padding:0}
/* Direct quotes */
.ldr2-quotes{
background:rgba(200,164,90,.04);border-left:3px solid rgba(200,164,90,.25);
padding:.4rem .6rem;margin-bottom:.45rem;border-radius:0 4px 4px 0;
}
.ldr2-quote{
font-size:.88rem;color:var(--txt);line-height:1.7;font-family:var(--fh);
font-style:italic;margin-bottom:.3rem;
}
.ldr2-quote:last-of-type{margin-bottom:0}
.ldr2-q-mark{color:var(--gold);font-size:1.1rem;font-weight:700;font-style:normal;opacity:.6}
.ldr2-quote-src{font-size:.62rem;color:var(--txt3);text-align:right;margin-top:.2rem;font-family:var(--fd);letter-spacing:.5px}
/* Multi-model predictions */
.ldr2-predictions{display:flex;flex-direction:column;gap:.3rem}
.ldr2-pred{
padding:.35rem .5rem;border-left:3px solid var(--border);
background:rgba(0,0,0,.12);border-radius:0 4px 4px 0;
}
.ldr2-pred-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.2rem;flex-wrap:wrap}
.ldr2-pred-model{font-family:var(--fd);font-size:.62rem;letter-spacing:1.5px;font-weight:600}
.ldr2-timeline{font-size:.58rem;color:var(--orange);font-family:var(--fm);margin-left:auto}
.ldr2-pred-move{font-size:.9rem;color:var(--gold);line-height:1.7;font-weight:500;font-family:var(--fh)}
.ldr2-pred-rationale{font-size:.78rem;color:var(--txt3);line-height:1.65;font-family:var(--fh);margin-top:.15rem}
/* Leader section: refresh button */
.ldr-refresh-btn{
float:right;font-size:.7rem;padding:.25rem .6rem;border-radius:4px;cursor:pointer;
background:rgba(139,92,246,.12);color:var(--purple,#a78bfa);border:1px solid rgba(139,92,246,.25);
font-family:var(--fb);transition:all .2s;margin-left:auto;
}
.ldr-refresh-btn:hover{background:rgba(139,92,246,.25);transform:scale(1.02)}
.ldr-refresh-btn.spinning{pointer-events:none;opacity:.7}
@keyframes spin360{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ldr-refresh-btn.spinning::before{content:'';display:inline-block;animation:spin360 1s linear infinite}
/* Leader real-time badge */
.ldr-realtime-badge{
display:inline-block;font-size:.6rem;padding:.15rem .45rem;border-radius:3px;margin-left:.4rem;
background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.3);
font-family:var(--fd);letter-spacing:.5px;animation:pulseBadge 2s ease-in-out infinite;
}
@keyframes pulseBadge{0%,100%{opacity:1}50%{opacity:.6}}
/* Leader loading overlay */
.ldr-loading-overlay{
text-align:center;padding:1.5rem;color:var(--txt2);font-size:.8rem;font-family:var(--fb);
background:rgba(0,0,0,.3);border-radius:6px;margin-bottom:.5rem;
}
.ldr-loading-overlay .radar-spinner{margin:0 auto .6rem}
/* Leader key signals */
.ldr2-signals{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.3rem 0;padding:.25rem 0}
.ldr2-signals-label{font-size:.65rem;color:var(--txt3);font-family:var(--fd);letter-spacing:.5px}
.ldr2-signal-tag{
font-size:.62rem;padding:.12rem .35rem;border-radius:3px;font-family:var(--fb);
background:rgba(14,165,233,.08);color:var(--cyan,#0ea5e9);border:1px solid rgba(14,165,233,.2);
}
/* Confidence badges (shared) */
.leader-conf{font-size:.58rem;font-family:var(--fd);letter-spacing:1px;padding:.15rem .45rem;border-radius:3px}
.conf-high{color:var(--green);background:rgba(106,154,74,.06);border:1px solid rgba(106,154,74,.15)}
.conf-med{color:var(--gold);background:rgba(200,164,90,.06);border:1px solid rgba(200,164,90,.15)}
.conf-low{color:var(--red);background:rgba(196,60,60,.06);border:1px solid rgba(196,60,60,.15)}
/* Dashboard provenance compact footer */
.dash-provenance{
display:flex;align-items:center;justify-content:space-between;gap:.5rem;
padding:.4rem .6rem;margin-top:.3rem;
font-size:.62rem;color:var(--txt3);opacity:.7;
border-top:1px solid rgba(200,164,90,.06);font-family:var(--fd);letter-spacing:.3px;
}
.dash-prov-sources{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-prov-time{flex-shrink:0}
/* ══════ FACT-CHECK PANEL ══════ */
.factcheck-panel{
margin-bottom:1.2rem;
background:var(--glass);
border:1px solid rgba(200,155,106,.1);
border-radius:4px;overflow:hidden;
}
.fc-header{
display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
padding:.7rem .9rem;
background:linear-gradient(135deg,rgba(200,155,106,.04),transparent);
border-bottom:1px solid rgba(200,155,106,.08);
}
.fc-title{font-family:var(--fd);font-size:.82rem;color:var(--claude);letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:.4rem}
.fc-icon{font-size:1rem}
.fc-subtitle{font-size:.65rem;color:var(--txt3);font-family:var(--fm);letter-spacing:1px;flex:1}
.fc-run-btn{
padding:.28rem .65rem;background:rgba(200,155,106,.06);
border:1px solid rgba(200,155,106,.2);border-radius:2px;
color:var(--claude);font-family:var(--fd);font-size:.58rem;
letter-spacing:1.5px;cursor:pointer;transition:all .3s;
}
.fc-run-btn:hover{background:rgba(200,155,106,.12);box-shadow:0 0 10px rgba(200,155,106,.1)}
.fc-run-btn.fc-loading{opacity:.5;pointer-events:none}
.fc-body{padding:.8rem .9rem}
.fc-placeholder{text-align:center;padding:1.5rem;color:var(--txt3)}
.fc-ph-icon{font-size:1.6rem;margin-bottom:.5rem;opacity:.4}
.fc-placeholder p{font-size:.78rem;margin:.15rem 0}
.fc-ph-sub{font-size:.65rem;color:var(--txt3);opacity:.6}
.fc-summary-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.7rem}
.fc-model-score{
padding:.55rem;border-radius:4px;text-align:center;
background:rgba(0,0,0,.2);border:1px solid var(--border);
border-top:2px solid var(--mc);transition:all .3s;
}
.fc-model-score:hover{border-color:var(--mc);transform:translateY(-1px)}
.fc-ms-name{font-family:var(--fd);font-size:.55rem;letter-spacing:1.5px;color:var(--mc);margin-bottom:.2rem}
.fc-ms-score{font-family:var(--fd);font-size:1.5rem;font-weight:800;color:var(--mc);line-height:1}
.fc-ms-rate{font-family:var(--fm);font-size:.62rem;margin-top:.15rem}
.fc-ms-rank{font-size:.58rem;color:var(--gold);font-family:var(--fd);letter-spacing:1px;margin-top:.1rem}
.fc-ms-bar{height:3px;background:rgba(255,255,255,.04);border-radius:2px;margin-top:.3rem;overflow:hidden}
.fc-ms-bar-fill{height:100%;border-radius:2px;transition:width 1s ease}
.fc-breakdown{margin-bottom:.7rem}
.fc-breakdown-title{font-family:var(--fd);font-size:.68rem;color:var(--txt2);letter-spacing:2px;margin-bottom:.4rem}
.fc-breakdown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.fc-bd-cell{padding:.35rem;background:rgba(0,0,0,.12);border-radius:3px;font-size:.65rem}
.fc-bd-label{color:var(--txt3);font-size:.52rem;font-family:var(--fm);display:block;margin-bottom:.1rem}
.fc-bd-val{font-family:var(--fm);font-weight:600}
.fc-predictions{margin-bottom:.6rem}
.fc-pred-title{font-family:var(--fd);font-size:.65rem;letter-spacing:1px;margin-bottom:.3rem;display:flex;align-items:center;gap:.3rem}
.fc-pred-title.correct{color:var(--green)}.fc-pred-title.wrong{color:var(--red)}.fc-pred-title.partial{color:var(--gold)}
.fc-pred-item{padding:.3rem .55rem;background:rgba(0,0,0,.1);border-radius:3px;margin-bottom:.2rem;font-size:.7rem;line-height:1.5;border-left:2px solid transparent}
.fc-pred-item.correct{border-left-color:var(--green)}.fc-pred-item.wrong{border-left-color:var(--red)}.fc-pred-item.partial{border-left-color:var(--gold)}
.fc-pred-label{font-size:.58rem;color:var(--txt3);font-family:var(--fm)}
.fc-meta{padding:.55rem;background:rgba(200,155,106,.03);border:1px solid rgba(200,155,106,.08);border-radius:4px;margin-top:.5rem}
.fc-meta-title{font-family:var(--fd);font-size:.65rem;color:var(--claude);letter-spacing:1px;margin-bottom:.3rem}
.fc-meta-text{font-size:.75rem;color:var(--txt);line-height:1.7}
/* ══════ MODEL DETAIL BAR ══════ */
.model-detail-bar{
display:flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;
padding:.6rem .8rem;background:var(--glass);
border:1px solid var(--border);border-radius:4px;flex-wrap:wrap;
}
.mdb-label{font-size:.75rem;color:var(--txt3);margin-right:.3rem;font-family:var(--fh)}
.mdb-btn{
display:flex;align-items:center;gap:.3rem;
padding:.42rem .75rem;background:rgba(255,255,255,.015);
border:1px solid var(--border);color:var(--txt2);
cursor:pointer;border-radius:2px;font-size:.78rem;font-family:var(--fb);transition:all .3s;
}
.mdb-btn:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.2)}
.mdb-claude:hover{border-color:var(--claude);color:var(--claude)}.mdb-gpt:hover{border-color:var(--gpt);color:var(--gpt)}.mdb-gemini:hover{border-color:var(--gemini);color:var(--gemini)}
.tdot{width:8px;height:8px;border-radius:50%}.cdot{background:var(--claude);color:var(--claude)}.gdot{background:var(--gpt);color:var(--gpt)}.emdot{background:var(--gemini);color:var(--gemini)}
/* ══════ CHAT SECTION ══════ */
.chat-section-inline{background:var(--glass);border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-bottom:.7rem}
.chat-section-hdr{
display:flex;align-items:center;justify-content:space-between;
padding:.6rem .9rem;
background:linear-gradient(135deg,rgba(144,112,176,.03),rgba(200,164,90,.02));
border-bottom:1px solid var(--border);
font-size:.82rem;color:var(--gold);font-family:var(--fd);letter-spacing:1.5px;
}
.chat-hdr-left{display:flex;align-items:center;gap:.5rem}
.chat-quewi-logo{
width:22px;height:22px;border-radius:50%;
background:linear-gradient(135deg,var(--quewi),var(--gold));
display:flex;align-items:center;justify-content:center;
font-size:.65rem;font-weight:800;color:#fff;
}
.chat-sel{background:var(--bg);border:1px solid var(--border);color:var(--txt);padding:.28rem .5rem;font-size:.72rem;border-radius:2px;font-family:var(--fb)}
.chat-msgs{max-height:220px;overflow-y:auto;padding:.6rem .9rem}
.chat-welcome{text-align:center;color:var(--txt2);font-size:.85rem;padding:.7rem;font-family:var(--fc)}
.chat-suggestions{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;justify-content:center}
.sgbtn{
padding:.28rem .7rem;background:rgba(200,164,90,.03);
border:1px solid var(--border2);color:var(--gold);
font-size:.7rem;cursor:pointer;border-radius:2px;font-family:var(--fb);transition:all .3s;
}
.sgbtn:hover{background:rgba(200,164,90,.06);transform:translateY(-1px)}
.chat-input-area{padding:.6rem .9rem;border-top:1px solid var(--border)}
.chat-usage{font-size:.62rem;color:var(--txt3);margin-bottom:.25rem}
.chat-row{display:flex;gap:.4rem}
.chat-row textarea{
flex:1;resize:none;background:var(--bg);border:1px solid var(--border);
color:var(--txt);padding:.5rem;font-size:.82rem;border-radius:4px;
font-family:var(--fb);transition:border-color .2s;line-height:1.5;
}
.chat-row textarea:focus{border-color:var(--gold);outline:none;box-shadow:0 0 8px rgba(200,164,90,.06)}
.chat-send-btn{
padding:.5rem .9rem;background:linear-gradient(135deg,var(--gold),var(--gold2));
border:none;color:var(--bg);cursor:pointer;border-radius:2px;
font-weight:700;font-size:.78rem;transition:all .2s;font-family:var(--fb);
}
.chat-send-btn:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(200,164,90,.2)}
.chat-msg{margin-bottom:.6rem;padding:.6rem .85rem;border-radius:4px;font-size:.82rem;line-height:1.8;font-family:var(--fb)}
.chat-msg.user{background:rgba(200,164,90,.04);border:1px solid rgba(200,164,90,.08);margin-left:1rem}
.chat-msg.ai{background:rgba(255,255,255,.015);border:1px solid var(--border);margin-right:1rem}
.chat-msg-thinking{font-size:.68rem;color:var(--txt3);font-style:italic;margin-bottom:.3rem;padding:.3rem;background:rgba(0,0,0,.1);border-radius:3px}
/* ══════ NEWS FLOATING POPUP ══════ */
.news-float-popup{
position:fixed;z-index:50000;top:50%;left:50%;
transform:translate(-50%,-50%) scale(.93);
width:min(540px,92vw);max-height:85vh;
background:var(--bg2);border:1px solid rgba(196,60,60,.15);border-radius:4px;
box-shadow:0 16px 80px rgba(0,0,0,.6),0 0 1px rgba(200,164,90,.15),0 0 60px rgba(196,60,60,.06);
display:flex;flex-direction:column;overflow:hidden;
opacity:0;transition:opacity .28s ease,transform .28s cubic-bezier(.23,1,.32,1);pointer-events:none;
backdrop-filter:blur(20px);
will-change:opacity,transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.news-float-popup.nfp-show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;box-shadow:0 20px 100px rgba(0,0,0,.7),0 0 2px rgba(200,164,90,.2),0 0 80px rgba(196,60,60,.08)}
.news-float-popup.nfp-hide{opacity:0;transform:translate(-50%,-50%) scale(.93);pointer-events:none}
.nfp-header{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;background:linear-gradient(90deg,rgba(196,60,60,.06),rgba(200,164,90,.04),transparent);border-bottom:1px solid var(--border2);position:relative;overflow:hidden}
.nfp-header::after{content:'';position:absolute;bottom:0;left:-60%;width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--red),var(--gold),transparent);animation:nfpHeaderScan 3s linear infinite}
@keyframes nfpHeaderScan{0%{left:-60%}100%{left:100%}}
.nfp-source{font-size:.65rem;line-height:1}
.nfp-time{font-size:.62rem;color:var(--txt3);font-family:var(--fm);flex:1}
.nfp-close{background:transparent;border:none;color:var(--txt3);font-size:1.1rem;cursor:pointer;padding:.3rem .5rem;transition:color .2s;margin-left:auto;line-height:1;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.nfp-close:hover{color:var(--red)}
.nfp-scroll{overflow-y:auto;padding:1.4rem 1.6rem;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(200,164,90,.15) transparent}
.nfp-img-wrap{margin-bottom:.8rem;border-radius:4px;overflow:hidden;border:1px solid var(--border);max-height:220px}
.nfp-img{width:100%;max-height:220px;object-fit:cover;display:block}
.nfp-title{font-size:1.2rem;line-height:1.9;color:var(--txt);margin-bottom:.5rem;font-weight:600;font-family:var(--f-headline)}
.nfp-title-en{font-size:.8rem;color:var(--txt3);line-height:1.5;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
/* ── Premium reading body: natural paragraph flow ── */
.nfp-body{font-size:.93rem;color:rgba(236,232,224,.92);line-height:2.05;margin-bottom:.6rem;font-family:var(--fc);white-space:normal;text-align:justify;letter-spacing:.3px}
.nfp-body .nfp-para{margin:0 0 1.1em 0;text-indent:0}
.nfp-body .nfp-para:last-child{margin-bottom:0}
.nfp-body .nfp-para:first-child::first-letter{font-size:1.4em;font-weight:700;color:var(--gold);float:left;line-height:1;margin-right:.12em;margin-top:.15em}
.nfp-no-content{color:var(--txt3);font-style:italic;font-size:.78rem}
.nfp-loading{color:var(--txt3);font-style:italic;text-align:center;padding:.5rem;font-size:.75rem}
.nfp-footer{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1rem;border-top:1px solid var(--border);gap:.5rem}
.nfp-social-bar{display:inline-flex;align-items:center;gap:.15rem}
.nfp-social-bar .ns-btn{font-size:.72rem;padding:3px 8px}
.nfp-social-bar .ns-btn .ns-cnt{font-size:.65rem}
.nfp-link{color:var(--gold);text-decoration:none;font-size:.72rem;padding:.28rem .6rem;border:1px solid rgba(200,164,90,.15);border-radius:2px;transition:all .3s}
.nfp-link:hover{background:rgba(200,164,90,.05);border-color:var(--gold)}
/* Prominent QueWi forward in news popup */
.nfp-quewi-fwd{
font-size:.78rem!important;padding:6px 20px!important;
font-weight:700!important;letter-spacing:2px!important;
flex-shrink:0;border-radius:999px!important;
}
/* ── Personal Wargame Button ── */
.chat-gen-wargame-btn{
width:100%;margin-top:.5rem;padding:.55rem;
background:linear-gradient(135deg,rgba(200,164,90,.08),rgba(144,112,176,.08));
border:1px solid var(--border2);color:var(--gold);
font-size:.78rem;cursor:pointer;border-radius:4px;
font-family:var(--fb);transition:all .3s;font-weight:600;
letter-spacing:.5px;
}
.chat-gen-wargame-btn:hover{
background:linear-gradient(135deg,rgba(200,164,90,.15),rgba(144,112,176,.12));
border-color:var(--gold);transform:translateY(-1px);
box-shadow:0 4px 16px rgba(200,164,90,.1);
}
.chat-gen-wargame-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* ── Personal Wargame Modal ── */
.personal-wg-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;
display:flex;align-items:center;justify-content:center;padding:1rem;
backdrop-filter:blur(4px);animation:fadeIn .3s;
}
.personal-wg-modal{
background:var(--panel);border:1px solid var(--border);border-radius:6px;
width:92%;max-width:600px;max-height:85vh;display:flex;flex-direction:column;
box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.pwg-header{
display:flex;align-items:center;gap:.5rem;
padding:.7rem 1rem;border-bottom:1px solid var(--border);
background:linear-gradient(135deg,rgba(200,164,90,.04),rgba(144,112,176,.03));
}
.pwg-title{font-family:var(--fd);font-size:.9rem;color:var(--gold);letter-spacing:1px;font-weight:600}
.pwg-model{font-size:.65rem;color:var(--txt3);margin-left:auto;font-family:var(--fm)}
.pwg-close{background:none;border:none;color:var(--txt3);font-size:1rem;cursor:pointer;padding:.1rem .3rem;transition:color .2s}
.pwg-close:hover{color:var(--red)}
.pwg-body{
flex:1;overflow-y:auto;padding:1rem 1.2rem;
font-size:.85rem;color:var(--txt);line-height:1.9;
font-family:var(--fb);white-space:pre-wrap;
}
.pwg-footer{
display:flex;gap:.5rem;padding:.6rem 1rem;border-top:1px solid var(--border);justify-content:flex-end;
}
.pwg-download,.pwg-copy{
padding:.35rem .75rem;font-size:.72rem;cursor:pointer;border-radius:3px;
border:1px solid var(--border2);background:rgba(200,164,90,.04);color:var(--gold);
font-family:var(--fb);transition:all .2s;
}
.pwg-download:hover,.pwg-copy:hover{background:rgba(200,164,90,.1);border-color:var(--gold)}
.pwg-share{
padding:.35rem .75rem;font-size:.72rem;cursor:pointer;border-radius:3px;
border:1px solid rgba(0,255,136,.2);background:rgba(0,255,136,.04);color:#00ff88;
font-family:var(--fb);transition:all .2s;
}
.pwg-share:hover{background:rgba(0,255,136,.12);border-color:#00ff88}
.pwg-branding{
text-align:center;padding:.4rem;font-family:var(--fm);font-size:.55rem;color:var(--txt3);
border-top:1px solid rgba(255,255,255,.04);
}
.pwg-branding a{color:var(--gold);text-decoration:none}
.pwg-branding a:hover{text-decoration:underline}
/* ══════ RISK MATRIX CARDS ══════ */
.risk-matrix-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.risk-matrix-card{
background:var(--glass);
border:1px solid rgba(196,60,60,.06);border-radius:4px;
padding:.7rem;transition:all .3s;position:relative;overflow:hidden;
}
.risk-matrix-card:hover{border-color:rgba(196,60,60,.15);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.rmc-title{font-family:var(--fh);font-size:.82rem;color:var(--gold);letter-spacing:.5px;margin-bottom:.5rem;font-weight:600;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.rmc-model{margin-bottom:.4rem;padding:.35rem .5rem;background:rgba(0,0,0,.15);border-radius:4px;border-left:2px solid transparent}
.rmc-model-header{display:flex;align-items:center;gap:.35rem;margin-bottom:.2rem}
.rmc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rmc-model-name{font-family:var(--fd);font-size:.55rem;letter-spacing:1.5px}
.rmc-pct{font-family:var(--fm);font-size:.75rem;font-weight:700;margin-left:auto}
.rmc-bar-track{height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;margin-bottom:.2rem}
.rmc-bar-fill{height:100%;border-radius:2px;transition:width .8s ease}
.rmc-rationale{font-size:.68rem;color:var(--txt2);line-height:1.55;opacity:.85}
.risk-val-card{padding:.15rem 0}
.risk-val-meters{display:flex;gap:.6rem;margin-bottom:.2rem;flex-wrap:wrap}
.risk-meter{display:flex;align-items:center;gap:.2rem}
.risk-meter-label{font-size:.58rem;color:var(--txt3);font-family:var(--fb);width:26px;flex-shrink:0}
.risk-pip{width:8px;height:8px;border-radius:2px;background:var(--bg4);transition:all .3s}
.risk-pip.active{background:var(--pip-color,var(--red));box-shadow:0 0 4px var(--pip-color,var(--red))}
.risk-val-text{font-size:.78rem;color:var(--txt2);line-height:1.7;margin-top:.15rem;font-family:var(--fb)}
/* ══════ NEWS READER MODAL ══════ */
.news-reader-overlay{position:fixed;inset:0;z-index:1000;background:rgba(8,9,13,.8);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:expandIn .3s ease-out}
.news-reader{background:var(--bg2);border:1px solid var(--border2);border-radius:4px;max-width:700px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,.5);display:flex;flex-direction:column}
.nr-header{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;background:linear-gradient(90deg,rgba(200,164,90,.04),transparent);border-bottom:1px solid var(--border2)}
.nr-classify{font-family:var(--fd);font-size:.65rem;color:var(--gold);letter-spacing:3px}
.nr-close{background:transparent;border:none;color:var(--txt3);font-size:1.2rem;cursor:pointer;transition:color .2s;padding:.2rem}
.nr-close:hover{color:var(--red)}
.nr-content{overflow-y:auto;padding:1.2rem}
.nr-img-wrap{margin-bottom:.8rem;border-radius:4px;overflow:hidden;border:1px solid var(--border);position:relative}
.nr-img{width:100%;max-height:320px;object-fit:cover;display:block}
.nr-meta{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem}
.nr-source{font-size:.7rem;line-height:1}
.nr-time{font-size:.68rem;color:var(--txt3);font-family:var(--fm)}
.nr-title-cn{font-size:1.15rem;line-height:1.75;color:var(--txt);margin-bottom:.4rem;font-weight:600;font-family:var(--fh)}
.nr-title-en{font-size:.85rem;color:var(--txt3);line-height:1.5;margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.nr-body-cn{font-size:.92rem;color:var(--txt);line-height:1.9;margin-bottom:.8rem;white-space:pre-wrap;font-family:var(--fb)}
.nr-body-cn .translating{color:var(--txt3);font-style:italic;text-align:center;padding:1rem}
.nr-footer-bar{display:flex;justify-content:flex-end;padding-top:.4rem;border-top:1px solid var(--border)}
.nr-orig-link{color:var(--gold);text-decoration:none;font-size:.8rem;font-family:var(--fb);padding:.4rem .8rem;border:1px solid rgba(200,164,90,.15);border-radius:2px;transition:all .3s}
.nr-orig-link:hover{background:rgba(200,164,90,.04);border-color:var(--gold)}
/* ══════ MODEL DETAIL MODAL ══════ */
.model-detail-overlay{position:fixed;inset:0;z-index:60000;background:rgba(8,9,13,.85);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:expandIn .3s ease-out}
.model-detail-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:4px;max-width:960px;width:95%;max-height:90vh;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,.5);display:flex;flex-direction:column}
.mdm-header{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.2rem;background:linear-gradient(90deg,rgba(200,164,90,.04),transparent);border-bottom:1px solid var(--border2)}
.mdm-title{font-family:var(--fd);font-size:.82rem;color:var(--gold);letter-spacing:3px}
.mdm-close{background:transparent;border:none;color:var(--txt3);font-size:1.2rem;cursor:pointer;transition:color .2s;padding:.2rem}
.mdm-close:hover{color:var(--red)}
.mdm-body{overflow-y:auto;padding:1.2rem;max-height:calc(90vh - 60px)}
/* ══════ WARGAME SECTIONS ══════ */
.wg-section{background:rgba(0,0,0,.1);border:1px solid var(--border);border-radius:4px;margin-bottom:.6rem;overflow:hidden;transition:all .3s}
.wg-section:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,.2)}
.wg-section-title{
display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;
background:linear-gradient(135deg,rgba(200,164,90,.03),transparent);
font-family:var(--f-impact);font-size:.75rem;color:var(--gold);letter-spacing:3px;
border-bottom:1px solid var(--border);
}
.wg-icon{font-size:1.05rem}
.wg-section-body{padding:.8rem 1rem;font-size:.95rem;line-height:1.9;color:var(--txt);font-family:var(--f-headline),var(--fb)}
.wg-obj{margin:.3rem 0}
.wg-obj.depth-1{padding-left:.6rem;border-left:2px solid rgba(200,164,90,.1);margin-left:.1rem}
.wg-obj.depth-2{padding-left:.5rem;border-left:2px solid rgba(200,164,90,.06);margin-left:.1rem}
.wg-obj.depth-3{padding-left:.4rem;border-left:1px solid rgba(200,164,90,.04);margin-left:.1rem}
.wg-field{display:block;padding:.4rem 0;border-bottom:1px solid rgba(200,164,90,.02)}
.wg-field:last-child{border-bottom:none}
.wg-key{display:block;font-family:var(--f-impact);font-size:.76rem;color:var(--gold);letter-spacing:1.5px;opacity:.8;margin-bottom:.2rem;font-weight:600}
.wg-val{display:block}.wg-nested{display:block;width:100%}
.wg-text{color:var(--txt);word-break:break-word;font-family:var(--f-headline),var(--fb)}.wg-num{color:var(--gold);font-family:var(--fm);font-weight:600}.wg-bool{color:var(--green);font-family:var(--fm)}.wg-null{color:var(--txt3)}
.wg-text-block{line-height:1.9;font-size:.92rem;font-family:var(--f-headline),var(--fb)}.wg-timestamp{font-family:var(--fm);font-size:.88rem;color:var(--gold);padding:.2rem 0}
.wg-link{color:var(--gold);text-decoration:none;border-bottom:1px dashed rgba(200,164,90,.2)}.wg-link:hover{border-bottom-style:solid}
.wg-list{list-style:none;padding:0;margin:.3rem 0}
.wg-list li{padding:.3rem 0 .3rem 1rem;position:relative;font-size:.85rem;line-height:1.75}
.wg-list li::before{content:'›';position:absolute;left:0;color:var(--gold);opacity:.4;font-weight:700;font-size:1.1rem}
.wg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.6rem;margin:.4rem 0}
.wg-card{background:rgba(200,164,90,.01);border:1px solid var(--border);border-radius:4px;padding:.85rem;transition:all .3s}
.wg-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.wg-card-title{font-family:var(--fd);font-size:.7rem;color:var(--gold);letter-spacing:1.5px;margin-bottom:.45rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.wg-actors-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:.6rem}
.actor-card{padding:.9rem;background:var(--glass);border:1px solid var(--border);border-radius:4px;transition:all .3s;position:relative;overflow:hidden}
.actor-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.actor-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.4rem;border-bottom:1px solid var(--border);margin-bottom:.4rem}
.actor-name{font-family:var(--fd);font-size:.75rem;color:var(--gold);letter-spacing:1.5px}
.actor-role{font-size:.62rem;color:var(--gold);padding:.12rem .45rem;background:rgba(200,164,90,.04);border:1px solid rgba(200,164,90,.1);border-radius:2px}
.actor-body{font-size:.8rem}.actor-field{margin:.25rem 0}.actor-label{font-size:.58rem;color:var(--txt3);font-family:var(--fd);letter-spacing:.5px}.actor-value{color:var(--txt)}
.no-data{text-align:center;padding:2rem;color:var(--txt3)}.no-data-icon{font-size:2rem;margin-bottom:.6rem;animation:pulse 2s infinite}.no-data p{font-size:.8rem;margin:.2rem 0}
/* Model detail raw fallback */
.mdm-raw-fallback{padding:1rem}
.mdm-raw-notice{color:var(--orange);font-size:.78rem;margin-bottom:.6rem;font-family:var(--fb)}
.mdm-raw-text{font-size:.68rem;color:var(--txt2);line-height:1.6;white-space:pre-wrap;word-break:break-all;max-height:60vh;overflow-y:auto;background:rgba(0,0,0,.2);padding:.8rem;border-radius:4px;border:1px solid rgba(255,255,255,.05);font-family:var(--fm)}
.radar-spinner{width:36px;height:36px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;margin:0 auto .8rem;animation:spin 1s linear infinite}
.loading-state{text-align:center;padding:2rem}
/* ══════ QUEWI STYLES ══════ */
.mb-quewi{border-color:var(--quewi);color:var(--quewi);box-shadow:var(--glow-quewi)}
.mdb-quewi:hover{border-color:var(--quewi);color:var(--quewi)}
.qdot{background:var(--quewi);color:var(--quewi)}
.quewi-results{margin-top:.5rem}
.quewi-cite{padding:.35rem .6rem;background:rgba(144,112,176,.015);border:1px solid rgba(144,112,176,.08);border-radius:4px;margin-bottom:.3rem;font-size:.78rem;transition:all .25s}
.quewi-cite:hover{background:rgba(144,112,176,.04);border-color:rgba(144,112,176,.2)}
.quewi-cite-title{color:var(--quewi);font-weight:500;margin-bottom:.12rem}
.quewi-cite-title a{color:var(--quewi);text-decoration:none}.quewi-cite-title a:hover{text-decoration:underline}
.quewi-cite-snippet{color:var(--txt2);font-size:.72rem;line-height:1.45}
.quewi-cite-date{font-size:.58rem;color:var(--txt3);font-family:var(--fm);margin-top:.12rem}
/* ══════ INTEL CUSTOM MODAL ══════ */
.ic-modal{max-width:460px}
.ic-header{text-align:center;margin-bottom:1rem}
.ic-header h2{font-family:var(--fd);font-size:.82rem;color:var(--gold);letter-spacing:3px;margin-bottom:.3rem}
.ic-header p{font-size:.78rem;color:var(--txt2)}
.ic-input{width:100%;padding:.65rem;background:var(--bg);border:1px solid var(--border);color:var(--txt);font-size:.82rem;border-radius:4px;margin-bottom:.5rem;font-family:var(--fb)}
.ic-submit{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--gold),var(--orange));border:none;color:var(--bg);font-weight:700;font-size:.8rem;cursor:pointer;border-radius:2px;margin-bottom:.6rem}
.ic-paywall{text-align:center;padding:.7rem;background:rgba(200,164,90,.02);border:1px solid rgba(200,164,90,.08);border-radius:4px}
.ic-paywall p{font-size:.78rem;color:var(--txt2);margin-bottom:.3rem}
.ic-price{color:var(--gold);font-weight:600}
/* ══════ FOOTER ══════ */
.wfooter{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem 1.5rem;background:var(--glass2);backdrop-filter:blur(8px);
border-top:1px solid var(--border);font-size:.68rem;color:var(--txt3);
}
.disclaimer{color:var(--gold);opacity:.7}
.wfooter a{color:var(--gold);text-decoration:none;opacity:.8}
.wfooter a:hover{opacity:1}
/* ══════ TOAST ══════ */
.toast-msg{
position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);
background:var(--glass2);backdrop-filter:blur(16px);
border:1px solid var(--gold);color:var(--txt);
padding:.75rem 1.5rem;border-radius:4px;font-size:.82rem;
z-index:10000;opacity:0;transition:all .4s;
box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.toast-msg.visible{opacity:1;transform:translateX(-50%) translateY(0)}
/* ══════ MODALS ══════ */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(8,9,13,.85);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem}
.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:4px;max-width:520px;width:100%;padding:1.5rem;position:relative}
.modal-close{position:absolute;top:.8rem;right:.8rem;background:transparent;border:none;color:var(--txt3);font-size:1.1rem;cursor:pointer;transition:color .2s}.modal-close:hover{color:var(--gold)}
.auth-method-btn{padding:.65rem;background:rgba(255,255,255,.015);border:1px solid var(--border);color:var(--txt);font-size:.8rem;cursor:pointer;border-radius:2px;text-align:center;font-family:var(--fb);transition:all .2s}
.auth-method-btn:hover{border-color:var(--gold);background:rgba(200,164,90,.03)}
/* ══════ SCROLLBAR ══════ */
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(200,164,90,.12);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgba(200,164,90,.22)}
/* ══════ RESPONSIVE ══════ */
/* --- Safe area for notch devices --- */
@supports(padding:env(safe-area-inset-top)){
.topbar{padding-left:max(1.2rem,env(safe-area-inset-left));padding-right:max(1.2rem,env(safe-area-inset-right))}
.wfooter{padding-bottom:max(.7rem,env(safe-area-inset-bottom))}
}
/* --- Tablet landscape / small desktop --- */
@media(max-width:1024px){
.dual-panel{grid-template-columns:1fr;display:flex;flex-direction:column}
.dual-panel.intel-collapsed{grid-template-columns:1fr}
.dual-panel.intel-collapsed .panel-intel{transform:none;opacity:1;pointer-events:auto;max-height:0;overflow:hidden;border:none;transition:max-height .4s ease}
.intel-reopen-tab{display:none!important}
/* Mobile order: dashboard(24h events) → news feed → risk matrix → rest */
.panel-compare{order:0;display:flex;flex-direction:column}
.panel-intel{order:0;max-height:none;position:static;border-right:none;border-bottom:1px solid var(--border)}
/* Reorder compare-body children for mobile:
mil-dashboard (24h events) first, then news panel injected via JS,
risk-overview later */
.compare-body{display:flex;flex-direction:column}
.mil-dashboard{order:-3}
/* News panel gets injected here via JS (order:-2) */
.compare-body > .panel-intel{order:-2;max-height:none;border-right:none;border-bottom:1px solid var(--border)}
.risk-overview{order:-1}
.quewi-intel-panel{order:0}
.divergence-banner{order:0}
.compare-tables{order:1}
.consensus-block{order:2}
.model-detail-bar{order:3}
.chat-section-inline{order:4}
.factcheck-panel{order:5}
/* Scrollable news container on mobile */
.panel-intel .news-list-wrap{max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel-header{position:static}
.div-models{grid-template-columns:1fr}
.risk-matrix-grid{grid-template-columns:1fr}
.force-grid{grid-template-columns:1fr}
.stat-hero-row{grid-template-columns:repeat(2,1fr)}
.threat-status-bar{grid-template-columns:repeat(2,1fr)}
.ratio-grid{grid-template-columns:repeat(2,1fr)}
.worst-case-cards{grid-template-columns:1fr}
.timeline-track{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
.wg-cards{grid-template-columns:1fr}
.wg-actors-grid{grid-template-columns:1fr}
/* QueWi Intel Panel — mobile */
.quewi-intel-panel{margin-bottom:.8rem}
.qip-header{padding:.5rem .6rem .3rem}
.qip-logo{font-size:.78rem;letter-spacing:3px}
.qip-tabs{gap:.25rem}
.qip-tab{padding:.4rem .4rem;font-size:.65rem;letter-spacing:1.5px}
.qip-body{padding:.5rem .6rem}
.con-header{flex-direction:column;align-items:flex-start;gap:.5rem}
.con-score-ring{width:56px;height:56px}
.con-score-num{font-size:1.2rem}
.con-quick-grid{grid-template-columns:1fr}
.con-actors-row{gap:.2rem}
.con-actor-tag{font-size:.6rem;padding:.15rem .35rem}
.con-dim-card{padding:.4rem}
}
/* --- Tablet portrait / large phones --- */
@media(max-width:768px){
html{font-size:15px}
/* Topbar — clean 2-row: utility strip + brand strip */
.topbar{flex-wrap:wrap;gap:0;padding:.45rem .65rem .35rem}
.topbar-left{order:1;flex:1 1 auto;gap:.45rem}
.topbar-right{order:2;flex:0 0 auto;gap:.4rem}
.topbar-center{order:3;width:100%;margin-top:.35rem}
.sfx-toggle{font-size:.72rem;padding:.2rem .32rem;border-radius:6px}
.bgm-btn{font-size:.62rem;padding:.2rem .35rem;letter-spacing:.5px;border-radius:6px}
.quewi-cta-badge{font-size:.48rem;padding:.18rem .45rem;gap:.18rem}
.qcta-txt{font-size:.42rem}
.qcta-models{font-size:.48rem}
.theater-label{font-size:.78rem;letter-spacing:2.5px}
.refresh-btn{padding:.25rem .5rem;font-size:.68rem}
.auth-btn{padding:.25rem .45rem;font-size:.68rem}
/* Intel panel — JS handles mobile positioning */
.panel-intel{max-height:none}
.intel-search-input{width:130px;font-size:.78rem}
.intel-search-input:focus{width:160px}
.news-item{padding:.7rem .9rem;gap:.6rem}
.news-item-thumb{width:60px;height:45px}
.news-item-title{font-size:.9rem;-webkit-line-clamp:2}
/* Compare */
.compare-body{padding:.7rem}
.model-detail-modal{max-width:96vw;width:96vw}
.model-detail-bar{flex-direction:column;align-items:stretch}
.model-detail-bar .mdb-btn{justify-content:center;padding:.5rem .8rem}
.model-indicators{flex-wrap:wrap;gap:.3rem}
.mi{font-size:.58rem;padding:.3rem .6rem}
/* Force */
.force-grid{grid-template-columns:1fr}
.stat-hero-row{grid-template-columns:repeat(2,1fr);gap:.4rem}
.stat-hero-num{font-size:1.1rem}
.ratio-grid{grid-template-columns:1fr}
.worst-case-cards{grid-template-columns:1fr}
.div-models{grid-template-columns:1fr}
.div-model-val{font-size:.75rem;line-height:1.55}
/* Leaders */
.leader-grid-v2{grid-template-columns:1fr}
.ldr2-card{padding:.5rem}
.ldr2-avatar{width:40px;height:40px}
/* Timeline horizontal scroll */
.timeline-node{min-width:150px}
.timeline-model-text{font-size:.68rem}
/* Tables: horizontal scroll wrapper */
.ct-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ct-table thead,.ct-table tbody,.ct-table tr,.ct-table th,.ct-table td{min-width:100px}
/* Hormuz */
.hormuz-section{margin:.5rem}
.hormuz-map{min-height:300px}
/* Cinematic */
.classified-stamp{letter-spacing:6px;padding:.4rem 1.2rem}
/* News popup — near fullscreen on tablet */
.news-float-popup{width:96vw!important;max-height:90vh;border-radius:6px}
.nfp-scroll{padding:1.2rem 1.4rem}
.nfp-title{font-size:1.1rem;line-height:1.85}
.nfp-body{font-size:.92rem;line-height:2}
.nfp-body .nfp-para{margin-bottom:1em}
/* Modal detail — fullscreen feel */
.model-detail-overlay{padding:.4rem}
.mdm-body{padding:.8rem}
.mdm-header{padding:.55rem .8rem}
/* Chat */
.chat-suggestions{flex-direction:column;align-items:stretch}
.sgbtn{text-align:left;padding:.45rem .7rem;font-size:.72rem}
/* Footer */
.wfooter{flex-direction:column;gap:.3rem;text-align:center;padding:.6rem 1rem}
}
/* --- Phone --- */
@media(max-width:480px){
html{font-size:14.5px}
/* Cinematic: phone-safe */
.classified-stamp{font-size:clamp(1.8rem,7vw,3rem);letter-spacing:4px;padding:.3rem 1rem}
.classified-sub{font-size:.82rem;letter-spacing:3px}
.intel-block{font-size:clamp(.65rem,1.6vw,.82rem)}
.title-main{letter-spacing:clamp(2px,1.5vw,6px)!important;font-size:clamp(1.3rem,5.5vw,2rem)!important;white-space:nowrap!important;text-align:center!important;line-height:1.3!important}
.title-sub{letter-spacing:4px;font-size:clamp(1rem,2.8vw,1.3rem)}
.title-cn{letter-spacing:2px;font-size:clamp(.8rem,2vw,1rem)}
.title-vs{max-width:320px;gap:.5rem}
.vs-text{font-size:.65rem;letter-spacing:2px}
.title-models{gap:.35rem}
.mbadge-card{padding:.35rem .55rem;min-width:58px;border-radius:4px}
.mbadge-card .mbc-icon{font-size:.85rem}
.mbadge-card .mbc-name{font-size:.5rem;letter-spacing:1px}
.mbadge-card .mbc-ver{font-size:.4rem}
.mbadge-vs{font-size:.45rem;letter-spacing:1px}
.title-desc{font-size:.78rem;letter-spacing:1.5px}
.cine-go-btn{width:90px;height:90px}
.ceb-go{font-size:clamp(1.4rem,3.5vw,1.8rem)!important;letter-spacing:4px!important}
.ceb-sub{font-size:.5rem!important}
.skip-btn{bottom:1.5rem;right:1rem;padding:.45rem .85rem;font-size:.56rem;letter-spacing:1.2px}
.splash-lang-toggle{top:1rem;right:1rem}
.splash-lang-btn{font-size:.55rem;padding:.3rem .5rem}
.threat-box{flex-direction:column;gap:.5rem;padding:.65rem 1rem;text-align:center}
.splash-radar{display:none}
.splash-nodes{display:none}
.quewi-hero-logo-ring{width:48px;height:48px}
.quewi-hero-logo{width:42px;height:42px;font-size:1.1rem}
.quewi-hero-name{font-size:1.4rem}
.quewi-hero-tag{font-size:.6rem}
/* Topbar: phone — clean 2-row */
.topbar{padding:.4rem .5rem .3rem;gap:0}
.topbar-left{gap:.35rem}
.topbar-right{gap:.35rem}
.topbar-center{margin-top:.28rem}
.logo-icon{font-size:1rem}
.logo-txt{font-size:.62rem;letter-spacing:1.8px;white-space:nowrap}
.live-ind{display:none}
.sfx-toggle{padding:.18rem .28rem;font-size:.68rem;border-radius:6px}
.bgm-btn{font-size:.55rem;padding:.18rem .3rem;letter-spacing:.3px;border-radius:6px}
.quewi-cta-badge{font-size:.42rem;padding:.14rem .35rem;gap:.15rem;border-radius:14px}
.qcta-txt{display:none}
.qcta-models{font-size:.42rem}
.qcta-bolt{font-size:.55rem}
.topbar-center .theater-label{font-size:.68rem;letter-spacing:1.8px}
.data-ts{display:none}
.topbar.topbar-command .topbar-command-link .data-ts{display:none}
.topbar-right .q-badge{display:none}
.topbar-right .auth-btn-cta{padding:.22rem .42rem;font-size:.48rem;letter-spacing:.4px}
.refresh-btn{padding:.22rem .42rem;font-size:.6rem;gap:.15rem}
/* Ticker */
.ticker-bar{height:30px}
.ticker-label{font-size:.55rem;padding:0 .5rem;letter-spacing:1.5px}
.ticker-content{font-size:.72rem;gap:2rem}
/* Intel panel: on mobile, JS moves it into compare-body */
.panel-intel{max-height:none}
.panel-header{padding:.5rem .65rem}
.ph-title{font-size:.85rem;letter-spacing:1.5px}
.panel-compare .ph-title{font-size:1.1rem;letter-spacing:2.5px}
.quewi-intel-combined{font-size:.68rem;padding:.28rem .55rem}
.ph-badge{font-size:.65rem;padding:.12rem .45rem}
.intel-search-input{width:100px;padding:.35rem .5rem .35rem 1.8rem;font-size:.75rem}
.intel-search-input:focus{width:130px}
.news-item{padding:.6rem .7rem;gap:.55rem}
.news-item-thumb{width:54px;height:40px;border-radius:2px}
.news-item-title{font-size:.88rem;line-height:1.6}
.news-item-source{font-size:.65rem}
.news-item-summary{font-size:.75rem}
.news-item-time{font-size:.6rem}
.intel-footer{padding:.4rem .65rem}
.intel-src-note{font-size:.58rem}
.intel-custom-btn{font-size:.62rem;padding:.24rem .5rem}
/* Hormuz: phone layout */
.hormuz-section{margin:.25rem;border-radius:4px}
.hormuz-header{padding:.55rem .7rem}
.hz-title{font-size:.72rem;letter-spacing:1.5px}
.hz-subtitle{display:block;font-size:.45rem;letter-spacing:1px;padding:.1rem .35rem}
.hz-icon{font-size:1rem}
.hormuz-map{min-height:250px}
.hz-map-stats{flex-wrap:wrap}
.hz-mstat{min-width:50%;padding:.35rem .2rem}
.hz-mstat-val{font-size:.85rem}
.hz-mstat-label{font-size:.5rem}
.hz-zoom-btns{gap:.2rem}
.hz-zoom-btn{padding:.2rem .4rem;font-size:.6rem}
.hz-stat-card{padding:.45rem .5rem;gap:.4rem}
.hz-stat-icon{font-size:1rem}
.hz-stat-num{font-size:.95rem}
.hz-stat-desc{font-size:.62rem}
.hz-oil-price{font-size:.85rem}
.hz-oil-label{font-size:.55rem;min-width:60px}
/* Compare body */
.compare-body{padding:.45rem}
/* Risk */
.risk-ov-title{font-size:.72rem;letter-spacing:2px}
.risk-bars{grid-template-columns:1fr}
.risk-bar-item{padding:.45rem .55rem}
/* Stats & Force */
.stat-hero-row{grid-template-columns:repeat(2,1fr);gap:.35rem}
.stat-hero{padding:.5rem .3rem}
.stat-hero-num{font-size:.95rem}
.stat-hero-icon{font-size:1.2rem}
.stat-hero-label{font-size:.6rem}
.threat-status-bar{grid-template-columns:repeat(2,1fr);gap:.3rem}
.tsb-label{font-size:.5rem}
.tsb-val{font-size:.65rem}
.force-header{flex-direction:column;gap:.4rem;padding:.55rem}
.force-flag{font-size:1.2rem}
.force-name{font-size:.68rem;letter-spacing:2px}
.force-vs{font-size:.85rem}
.force-card{padding:.6rem}
.force-card-title{font-size:.68rem;letter-spacing:2px}
.slider-label{width:70px;font-size:.62rem}
.slider-input::-webkit-slider-thumb{width:20px;height:20px}
.balance-gauge{padding:.5rem}
.gauge-bar{height:22px}
.gauge-labels{font-size:.6rem}
.esc-gauge-track{height:22px}
.esc-gauge-val{font-size:.72rem}
/* Divergence */
.div-banner-title{font-size:.72rem;letter-spacing:2px}
.div-topic{font-size:.78rem}
.div-model-cell{padding:.35rem .4rem}
.div-model-name{font-size:.5rem}
.div-model-val{font-size:.72rem;line-height:1.5}
/* Ratio */
.ratio-grid{grid-template-columns:1fr}
.risk-matrix-grid{grid-template-columns:1fr}
/* Timeline */
.timeline-node{min-width:130px;padding-top:2rem}
.timeline-dot{width:16px;height:16px;font-size:.45rem}
.timeline-label{font-size:.62rem}
.timeline-model-text{font-size:.65rem;line-height:1.5}
/* Leaders */
.leader-grid-v2{grid-template-columns:1fr}
.ldr2-card{padding:.4rem}
.ldr2-name{font-size:.78rem}
.ldr2-avatar{width:36px;height:36px}
.ldr2-quote{font-size:.7rem}
/* Model detail buttons */
.model-detail-bar{padding:.4rem .5rem;gap:.35rem}
.mdb-label{font-size:.68rem;display:none}
.mdb-btn{padding:.45rem .6rem;font-size:.72rem;flex:1;justify-content:center}
/* Indicators */
.model-indicators{flex-wrap:wrap;gap:.25rem}
.mi{font-size:.5rem;padding:.22rem .45rem;letter-spacing:1px}
/* Chat */
.chat-section-hdr{padding:.45rem .6rem;font-size:.72rem}
.chat-quewi-logo{width:18px;height:18px;font-size:.55rem}
.chat-sel{font-size:.65rem;padding:.22rem .4rem}
.chat-msgs{max-height:180px;padding:.4rem .6rem}
.chat-welcome{font-size:.78rem;padding:.5rem}
.chat-input-area{padding:.4rem .6rem}
.chat-row textarea{padding:.4rem;font-size:.78rem}
.chat-send-btn{padding:.4rem .7rem;font-size:.72rem}
.chat-usage{font-size:.55rem}
/* Fact check */
.fc-summary-bar{grid-template-columns:1fr}
.fc-breakdown-grid{grid-template-columns:1fr}
/* News popup — fullscreen on phone */
.news-float-popup{
width:100vw!important;max-height:100vh!important;height:100vh;
border-radius:0!important;top:0!important;left:0!important;
transform:none!important;
}
.news-float-popup.nfp-show{transform:none!important}
.nfp-header{padding:.55rem .8rem;gap:.35rem}
.nfp-source{font-size:.7rem}
.nfp-time{font-size:.65rem}
.nfp-close{font-size:1.4rem;padding:.3rem .5rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.nfp-scroll{padding:1.1rem 1.2rem;flex:1}
.nfp-img-wrap{margin-bottom:.8rem;max-height:180px;border-radius:6px}
.nfp-img{max-height:180px}
.nfp-title{font-size:1.05rem;line-height:1.85;margin-bottom:.5rem}
.nfp-title-en{font-size:.75rem;line-height:1.45;margin-bottom:.7rem}
.nfp-body{font-size:.9rem;line-height:2;letter-spacing:.3px}
.nfp-body .nfp-para{margin-bottom:1em}
.nfp-body .nfp-para:first-child::first-letter{font-size:1.3em;margin-right:.1em}
.nfp-footer{padding:.5rem .8rem;flex-wrap:wrap;gap:.4rem}
.nfp-social-bar .ns-btn{min-height:40px;min-width:40px;font-size:.75rem}
.nfp-quewi-fwd{font-size:.72rem;padding:.5rem .8rem;min-height:40px}
/* Model detail modal — fullscreen */
.model-detail-overlay{padding:0}
.model-detail-modal{max-width:100vw;width:100vw;max-height:100vh;border-radius:0}
.mdm-body{padding:.65rem;max-height:calc(100vh - 50px)}
.mdm-header{padding:.5rem .7rem}
.mdm-title{font-size:.72rem;letter-spacing:2px}
.wg-cards{grid-template-columns:1fr}
.wg-actors-grid{grid-template-columns:1fr}
.wg-section-title{font-size:.68rem;letter-spacing:2px;padding:.5rem .65rem}
.wg-section-body{padding:.6rem .7rem;font-size:.82rem;line-height:1.75}
/* Auth & modals */
.modal-overlay{padding:.3rem}
.modal{max-width:100%;padding:1.2rem;border-radius:4px}
/* Footer */
.wfooter{padding:.5rem .8rem;font-size:.6rem;gap:.2rem}
}
/* --- Small phones (iPhone SE, etc.) --- */
@media(max-width:360px){
html{font-size:13.5px}
.topbar-left .logo-txt{font-size:.5rem;letter-spacing:.6px}
.topbar-left .live-ind{display:none}
.topbar-center .theater-label{font-size:.6rem;letter-spacing:1.2px}
.stat-hero-row{grid-template-columns:1fr 1fr;gap:.25rem}
.stat-hero-num{font-size:.88rem}
.stat-hero-label{font-size:.58rem}
.force-card{padding:.45rem}
.force-card-title{font-size:.65rem}
.timeline-track{gap:0;padding:.5rem 0}
.timeline-node{min-width:110px}
.chat-msgs{max-height:150px}
.dual-panel{min-height:auto}
.panel-intel{max-height:none}
.news-item-thumb{display:none}
.news-item{padding:.5rem .6rem}
.news-item-title{font-size:.82rem;-webkit-line-clamp:2}
.hormuz-map{min-height:220px}
.hz-header-left .hz-icon{display:none}
.hz-zoom-btns{display:none}
.mdb-btn{font-size:.65rem;padding:.4rem .45rem}
.classified-stamp{font-size:clamp(1.5rem,6vw,2.5rem);letter-spacing:3px;padding:.25rem .8rem;border-width:2px}
.classified-sub{font-size:.68rem;letter-spacing:2px}
}
/* --- Landscape phones --- */
@media(max-height:500px) and (orientation:landscape){
.cine-overlay{overflow-y:auto}
.classified-stamp{font-size:2rem;letter-spacing:4px}
.title-main{font-size:clamp(1rem,4.5vw,1.6rem)!important;letter-spacing:1px!important;white-space:nowrap!important;word-spacing:2px!important;text-align:center!important}
.title-models{flex-wrap:nowrap}
.skip-btn{bottom:.8rem;right:.8rem}
.panel-intel{max-height:none}
.hormuz-map{min-height:200px}
}
/* --- Touch device optimizations --- */
@media(hover:none) and (pointer:coarse){
/* Larger touch targets (min 44px) */
.refresh-btn,.auth-btn,.hz-zoom-btn,.hz-track-btn,.mdb-btn,.sgbtn,.fc-run-btn,.intel-custom-btn,.skip-btn,.nfp-close,.nr-close,.mdm-close,.modal-close{
min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
}
.news-item{min-height:52px}
.mi-clickable{min-height:36px;display:inline-flex;align-items:center}
/* Remove hover effects that linger on touch */
.news-item:hover{transform:none;background:transparent}
.news-item:active{background:rgba(200,164,90,.04)}
.force-card:hover,.hz-stat-card:hover,.stat-hero:hover,.dash-card:hover,.wc-card:hover{transform:none}
.force-card:active,.hz-stat-card:active,.stat-hero:active{background:rgba(200,164,90,.03)}
/* Improve scroll performance */
.news-list-wrap,.mdm-body,.nfp-scroll,.hormuz-stats,.compare-body{
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* Prevent text selection on interactive elements */
.topbar,.ticker-bar,.model-detail-bar,.hz-zoom-btns,.chat-suggestions{
-webkit-user-select:none;user-select:none;
}
/* Better tap feedback */
.news-item,.mi-clickable,.mdb-btn,.sgbtn,.hz-zoom-btn,.refresh-btn{
-webkit-tap-highlight-color:rgba(200,164,90,.08);
}
}
/* ═══════════════════════════════════════════════════
HORMUZ MARITIME TRACKING PANEL
═══════════════════════════════════════════════════ */
.hormuz-section{
margin:1rem;padding:0;
background:var(--glass2);border:1px solid var(--border2);
border-radius:4px;overflow:visible;
box-shadow:0 8px 32px rgba(0,0,0,.3);
}
.hormuz-header{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
padding:.8rem 1.4rem;
background:linear-gradient(135deg,rgba(74,152,196,.04),transparent);
border-bottom:1px solid var(--border2);gap:.5rem;
}
.hz-header-left{display:flex;align-items:center;gap:.7rem}
.hz-icon{font-size:1.3rem}
.hz-title{
font-family:var(--fd);font-size:.95rem;font-weight:700;letter-spacing:4px;
color:#5b9ec4;text-shadow:0 0 12px rgba(91,158,196,.15);
}
.hz-subtitle{
font-family:var(--fm);font-size:.55rem;color:var(--txt3);
letter-spacing:2px;background:rgba(91,158,196,.04);
padding:.15rem .55rem;border-radius:2px;border:1px solid rgba(91,158,196,.08);
}
.hz-header-right{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.hz-api-badge{font-family:var(--fm);font-size:.62rem;letter-spacing:1px;padding:.2rem .6rem;border-radius:2px;display:flex;align-items:center;gap:.3rem}
.hz-api-online{background:rgba(106,154,74,.08);color:var(--green);border:1px solid rgba(106,154,74,.15)}
.hz-api-offline{background:rgba(200,164,90,.06);color:var(--gold);border:1px solid rgba(200,164,90,.12)}
.hz-api-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.hz-online{background:var(--green);box-shadow:0 0 4px var(--green);animation:pulse 1.5s infinite}
.hz-offline{background:var(--gold);box-shadow:0 0 3px var(--gold)}
.hz-api-pulse{animation:apiBadgeFlash .6s ease}
@keyframes apiBadgeFlash{0%{box-shadow:0 0 0 0 rgba(106,154,74,.3)}50%{box-shadow:0 0 6px 3px rgba(106,154,74,.15)}100%{box-shadow:none}}
.hz-live-badge{display:inline-block;background:var(--red);color:#fff;font-size:.52rem;font-weight:700;padding:0 .35rem;border-radius:2px;letter-spacing:.05em;animation:livePulse 2s ease infinite;vertical-align:middle;line-height:1.5}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.6}}
.hz-sim-badge{display:inline-block;background:rgba(200,164,90,.2);color:var(--gold);font-size:.52rem;font-weight:700;padding:0 .35rem;border-radius:2px;letter-spacing:.05em;vertical-align:middle;line-height:1.5}
.hz-zoom-btns{display:flex;gap:.3rem}
.hz-zoom-btn{
background:rgba(91,158,196,.04);border:1px solid var(--border);
color:var(--txt2);padding:.22rem .55rem;border-radius:2px;
font-size:.68rem;cursor:pointer;font-family:var(--fb);transition:all .3s;
}
.hz-zoom-btn:hover{border-color:#5b9ec4;color:#5b9ec4;background:rgba(91,158,196,.08)}
/* Hormuz body layout */
.hormuz-body{display:grid;grid-template-columns:1fr 300px;gap:0;min-height:450px}
.hormuz-map-wrap{position:relative;overflow:visible}
.hormuz-map-wrap .leaflet-tile-pane{overflow:hidden}
.hormuz-map{width:100%;height:100%;min-height:450px;background:#0a1210;z-index:1}
.hormuz-map .leaflet-container{background:#0a1210!important}
.hormuz-map .leaflet-control-zoom a{background:var(--glass2)!important;color:var(--gold)!important;border-color:var(--border2)!important}
.hormuz-map .leaflet-popup-pane{z-index:1100!important}
.hormuz-map .leaflet-popup-content-wrapper{background:var(--bg2)!important;color:var(--txt)!important;border:1px solid var(--border2);border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.hormuz-map .leaflet-popup-tip{background:var(--bg2)!important}
.v-popup{font-family:var(--fb);font-size:.78rem;min-width:180px}
.v-popup-name{font-family:var(--fd);font-size:.72rem;font-weight:700;color:#5b9ec4;letter-spacing:1px;margin-bottom:.4rem;padding-bottom:.3rem;border-bottom:1px solid var(--border)}
.v-popup-row{padding:.15rem 0;color:var(--txt2);font-size:.72rem}
.v-popup-row strong{color:var(--txt)}
.v-popup-social{display:flex;gap:6px;margin-top:.5rem;padding-top:.4rem;border-top:1px solid var(--border);flex-wrap:wrap}
.v-social-btn{background:rgba(200,164,90,.04);border:1px solid rgba(255,255,255,.08);color:var(--txt2);font-size:.6rem;padding:.2rem .4rem;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .25s;font-family:var(--fb);backdrop-filter:blur(4px)}
.v-social-btn:hover{border-color:rgba(200,164,90,.25);color:var(--gold);background:rgba(200,164,90,.08)}
.v-social-btn:active{transform:scale(.95)}
.vp-svg{width:12px;height:12px;flex-shrink:0;opacity:.65;transition:opacity .2s}
.v-social-btn:hover .vp-svg{opacity:1}
.vp-liked{color:#e05050;border-color:rgba(200,60,60,.2);background:rgba(200,60,60,.06)}
.vp-liked .vp-svg{opacity:1}
.vp-active{color:var(--force-blue);border-color:rgba(70,120,180,.25)}
.v-share-btn{color:var(--quewi);border-color:rgba(144,112,176,.15)}
.v-share-btn:hover{border-color:var(--quewi);color:#fff;background:rgba(144,112,176,.1)}
.v-social-cnt{font-family:var(--fm);font-size:.56rem;letter-spacing:.5px}
.vessel-marker-stable{transition:none!important;will-change:auto!important}
/* ═══ MARKER CLUSTER — Dark military theme overrides ═══ */
.hz-cluster-icon{background:none!important;border:none!important}
.hz-cluster{
display:flex;align-items:center;justify-content:center;
border-radius:50%;font-family:var(--fm);font-weight:700;
color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);
box-sizing:border-box;cursor:pointer;
transition:transform .15s ease;
}
.hz-cluster:hover{transform:scale(1.15)}
/* Vessel clusters — cyan/teal */
.hz-cluster-vessel{background:rgba(0,180,200,.25);border:2px solid rgba(0,229,255,.6);box-shadow:0 0 12px rgba(0,229,255,.3)}
.hz-cluster-vessel.hz-cluster-sm{width:30px;height:30px;font-size:11px}
.hz-cluster-vessel.hz-cluster-md{width:36px;height:36px;font-size:12px}
.hz-cluster-vessel.hz-cluster-lg{width:44px;height:44px;font-size:14px;border-width:2.5px}
/* Satellite clusters — magenta/red */
.hz-cluster-sat{background:rgba(255,45,85,.2);border:2px solid rgba(255,45,85,.55);box-shadow:0 0 12px rgba(255,45,85,.25);gap:2px;font-size:10px}
.hz-cluster-sat.hz-cluster-sm{width:34px;height:34px;font-size:10px}
.hz-cluster-sat.hz-cluster-md{width:40px;height:40px;font-size:11px}
.hz-cluster-sat.hz-cluster-lg{width:48px;height:48px;font-size:13px;border-width:2.5px}
/* Override default leaflet markercluster styles */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(30,30,40,.7)!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:rgba(0,180,200,.35)!important;color:#fff!important;font-family:var(--fm)!important}
/* Spiderfy legs */
.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{transition:transform .3s ease,opacity .3s ease}
.vessel-marker-stable:hover{z-index:1000!important}
.vessel-marker-stable:hover .v-svg-marker{transform:scale(1.2)}
.v-marker-wrap{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.v-svg-marker{width:32px;height:32px;transition:transform .2s ease}
.v-flag-label{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:13px;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;white-space:nowrap}
.v-dot{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;box-shadow:0 0 6px currentColor;position:relative}
.v-tracked-dot{width:24px;height:24px;font-size:14px;animation:glowPulse 1.5s infinite}
.v-heading{position:absolute;top:-8px;left:50%;transform-origin:center bottom;font-size:8px;color:#6a9a4a;text-shadow:0 0 4px #6a9a4a}
.v-icon{font-size:7px;line-height:1}
.loc-dot{width:8px;height:8px;border-radius:50%;position:relative}
.loc-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px solid currentColor;opacity:.25;animation:pulse 2s infinite}
.hz-tooltip{background:var(--bg2)!important;color:var(--txt)!important;border:1px solid var(--border2)!important;border-radius:4px!important;font-family:var(--fb)!important;font-size:.68rem!important;padding:.3rem .5rem!important;box-shadow:0 4px 12px rgba(0,0,0,.4)!important;white-space:pre-line}
.hz-tooltip::before{border-top-color:var(--border2)!important}
.hormuz-label{background:none!important;border:none!important}
.hz-label-inner{text-align:center;font-family:var(--fd);font-size:.68rem;color:rgba(196,60,60,.6);letter-spacing:3px;text-shadow:0 0 8px rgba(196,60,60,.2);animation:threatPulse 3s infinite}
.hz-sub{font-size:.52rem;color:rgba(196,60,60,.4);letter-spacing:3px}
/* Map stats bar */
.hz-map-stats{
position:absolute;bottom:0;left:0;right:0;z-index:1000;
display:flex;gap:0;
background:linear-gradient(0deg,rgba(8,9,13,.92),rgba(8,9,13,.6));
backdrop-filter:blur(8px);border-top:1px solid var(--border);
}
.hz-mstat{flex:1;text-align:center;padding:.45rem .3rem;border-right:1px solid var(--border)}
.hz-mstat:last-child{border-right:none}
.hz-mstat-val{display:block;font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--gold)}
.hz-mstat-green .hz-mstat-val{color:var(--green)}
.hz-mstat-red .hz-mstat-val{color:var(--red)}
.hz-mstat-purple .hz-mstat-val{color:var(--quewi)}
.hz-mstat-label{font-size:.58rem;color:var(--txt3);letter-spacing:1px;font-family:var(--fb)}
/* Stats sidebar */
.hormuz-stats{background:var(--bg2);border-left:1px solid var(--border);padding:.45rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto}
/* Satellite section */
.hz-sat-section{
padding:.6rem;border-radius:4px;
background:linear-gradient(135deg,rgba(91,158,196,.04),rgba(200,164,90,.02));
border:1px solid rgba(91,158,196,.12);margin-bottom:.15rem;
}
.hz-sat-title{font-family:var(--fd);font-size:.65rem;letter-spacing:3px;color:#5b9ec4;margin-bottom:.5rem;display:flex;align-items:center;gap:.3rem;text-shadow:0 0 6px rgba(91,158,196,.2)}
.hz-sat-grid{display:flex;flex-direction:column;gap:.25rem}
.hz-sat-item{display:flex;justify-content:space-between;align-items:center;padding:.22rem .4rem;border-radius:3px;background:rgba(0,0,0,.15)}
.hz-sat-label{font-family:var(--fd);font-size:.52rem;letter-spacing:1.5px;color:var(--txt3)}
.hz-sat-val{font-family:var(--fm);font-size:.6rem;font-weight:600;color:var(--txt2)}
.hz-sat-active{color:var(--green)}
.hz-sat-cov{color:#5b9ec4}
.hz-sat-ref{margin-top:.4rem;text-align:center}
.hz-sat-link{font-family:var(--fm);font-size:.55rem;color:rgba(91,158,196,.6);text-decoration:none;letter-spacing:.5px;transition:all .3s}
.hz-sat-link:hover{color:#5b9ec4}
/* Oil prices */
.hz-oil-section{
padding:.6rem;border-radius:4px;
background:linear-gradient(135deg,rgba(200,164,90,.04),rgba(196,60,60,.02));
border:1px solid rgba(200,164,90,.12);margin-bottom:.15rem;
}
.hz-oil-title{font-family:var(--fd);font-size:.65rem;letter-spacing:3px;color:var(--gold);margin-bottom:.5rem;display:flex;align-items:center;gap:.3rem}
.hz-oil-cards{display:flex;flex-direction:column;gap:.35rem}
.hz-oil-card{
display:flex;align-items:center;justify-content:space-between;
padding:.42rem .6rem;border-radius:3px;
background:rgba(0,0,0,.2);border:1px solid rgba(200,164,90,.08);transition:all .3s;
}
.hz-oil-card:hover{border-color:rgba(200,164,90,.2);background:rgba(200,164,90,.03)}
.hz-oil-card-gas{border-color:rgba(91,158,196,.1)}
.hz-oil-card-gas:hover{border-color:rgba(91,158,196,.2);background:rgba(91,158,196,.03)}
.hz-oil-label{font-family:var(--fm);font-size:.6rem;color:var(--txt3);letter-spacing:.5px;min-width:75px}
.hz-oil-price{font-family:var(--fd);font-size:1rem;font-weight:700;color:var(--gold);text-shadow:0 0 6px rgba(200,164,90,.2)}
.hz-oil-card-gas .hz-oil-price{color:#5b9ec4;text-shadow:0 0 6px rgba(91,158,196,.2)}
.hz-oil-change{font-family:var(--fm);font-size:.65rem;font-weight:600;padding:.1rem .35rem;border-radius:2px;min-width:52px;text-align:center}
.hz-oil-change.up{color:var(--red);background:rgba(196,60,60,.08)}
.hz-oil-change.down{color:var(--green);background:rgba(106,154,74,.08)}
.hz-oil-change.flat{color:var(--txt3);background:rgba(255,255,255,.03)}
.hz-oil-update{font-size:.52rem;color:var(--txt3);text-align:right;margin-top:.3rem;font-family:var(--fm)}
@keyframes oilFlash{0%{opacity:1}50%{opacity:.5}100%{opacity:1}}
.hz-oil-flash{animation:oilFlash .6s ease}
/* Stat cards */
.hz-stat-card{
display:flex;align-items:center;gap:.6rem;
padding:.55rem .65rem;border-radius:4px;
background:var(--glass);border:1px solid var(--border);transition:all .3s;
}
.hz-stat-card:hover{border-color:var(--border2);background:rgba(200,164,90,.02)}
.hz-stat-danger{border-color:rgba(196,60,60,.1);background:rgba(196,60,60,.02)}
.hz-stat-danger:hover{border-color:rgba(196,60,60,.2)}
.hz-stat-icon{font-size:1.3rem}
.hz-stat-num{font-family:var(--fd);font-size:1.15rem;font-weight:700;color:var(--gold)}
.hz-stat-danger .hz-stat-num{color:var(--red)}
.hz-stat-desc{font-size:.7rem;color:var(--txt3);font-family:var(--fb);letter-spacing:1px}
/* Tracker */
.hz-tracker{padding:.55rem;border-radius:4px;background:var(--glass);border:1px solid var(--border)}
.hz-tracker-title{font-family:var(--fd);font-size:.6rem;color:var(--txt2);letter-spacing:2px;margin-bottom:.4rem}
.hz-track-input{width:100%;padding:.32rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:2px;color:var(--txt);font-family:var(--fm);font-size:.72rem;margin-bottom:.3rem;outline:none}
.hz-track-input:focus{border-color:var(--gold);box-shadow:0 0 6px rgba(200,164,90,.08)}
.hz-track-btn{width:100%;padding:.32rem;background:rgba(200,164,90,.06);border:1px solid rgba(200,164,90,.15);border-radius:2px;color:var(--gold);font-family:var(--fd);font-size:.6rem;letter-spacing:2px;cursor:pointer;transition:all .3s}
.hz-track-btn:hover{background:rgba(200,164,90,.1)}
.hz-track-status{font-size:.62rem;color:var(--txt3);margin-top:.3rem;font-family:var(--fm)}
/* Legend */
.hz-legend{padding:.45rem .55rem;border-radius:4px;background:rgba(200,164,90,.02);border:1px solid var(--border)}
.hz-legend-title{font-family:var(--fd);font-size:.55rem;color:var(--txt3);letter-spacing:2px;margin-bottom:.3rem}
.hz-legend-row{display:flex;align-items:center;gap:.4rem;font-size:.62rem;color:var(--txt2);padding:.1rem 0}
.hz-ldot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 3px currentColor}
/* ═══ AI INTEL PANEL — Claude Opus 4.6 ═══ */
.hz-ai-intel{
padding:.6rem;border-radius:4px;
background:linear-gradient(135deg,rgba(200,164,90,.03),rgba(144,112,176,.03));
border:1px solid rgba(144,112,176,.15);
position:relative;overflow:hidden;
}
.hz-ai-intel::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--claude),var(--quewi),transparent);
opacity:.6;
}
.hz-ai-intel-header{
display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.35rem;
}
.hz-ai-intel-title{
font-family:var(--fd);font-size:.62rem;color:var(--claude);letter-spacing:2px;
display:flex;align-items:center;gap:.3rem;
}
.hz-ai-brain{font-size:.85rem}
.hz-ai-intel-badges{display:flex;align-items:center;gap:.35rem}
/* ═══ CRITICAL THREAT ALERT BANNER ═══ */
.hz-crit-banner{
position:relative;overflow:hidden;
background:linear-gradient(135deg,rgba(255,0,0,.12) 0%,rgba(180,0,0,.06) 50%,rgba(255,0,0,.10) 100%);
border:1px solid rgba(255,30,30,.45);
border-radius:6px;
padding:.65rem .8rem;
margin-bottom:.5rem;
text-align:center;
animation:critBannerPulse 2s ease-in-out infinite;
}
.hz-crit-scanline{
position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent 0%,rgba(255,0,0,.9) 50%,transparent 100%);
animation:critScanline 2.5s linear infinite;
box-shadow:0 0 12px rgba(255,0,0,.6),0 0 30px rgba(255,0,0,.2);
}
@keyframes critScanline{
0%{transform:translateY(0);opacity:1}
100%{transform:translateY(60px);opacity:0}
}
.hz-crit-inner{
display:flex;align-items:center;justify-content:center;gap:.55rem;
}
.hz-crit-icon{
font-size:1.3rem;
filter:drop-shadow(0 0 6px rgba(255,0,0,.7));
animation:critIconFlash 1s ease-in-out infinite;
}
@keyframes critIconFlash{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.6;transform:scale(1.15)}
}
.hz-crit-label{
font-family:var(--fd);font-size:1.4rem;font-weight:900;
letter-spacing:8px;color:#ff1a1a;
text-shadow:0 0 10px rgba(255,0,0,.8),0 0 30px rgba(255,0,0,.4),0 0 60px rgba(255,0,0,.15);
animation:critTextGlow 1.5s ease-in-out infinite;
}
@keyframes critTextGlow{
0%,100%{text-shadow:0 0 10px rgba(255,0,0,.8),0 0 30px rgba(255,0,0,.4),0 0 60px rgba(255,0,0,.15);color:#ff1a1a}
50%{text-shadow:0 0 20px rgba(255,0,0,1),0 0 50px rgba(255,0,0,.6),0 0 80px rgba(255,0,0,.3);color:#ff4040}
}
.hz-crit-pulse-dot{
width:8px;height:8px;border-radius:50%;background:#ff0000;
box-shadow:0 0 6px #ff0000,0 0 15px rgba(255,0,0,.5);
animation:critDotPulse 1s ease-in-out infinite;
}
@keyframes critDotPulse{
0%,100%{transform:scale(1);opacity:1}
50%{transform:scale(1.5);opacity:.4}
}
.hz-crit-sub{
font-family:var(--fm);font-size:.55rem;letter-spacing:4px;
color:rgba(255,80,80,.6);margin-top:.15rem;
}
@keyframes critBannerPulse{
0%,100%{border-color:rgba(255,30,30,.45);box-shadow:0 0 15px rgba(255,0,0,.08),inset 0 0 20px rgba(255,0,0,.03)}
50%{border-color:rgba(255,30,30,.7);box-shadow:0 0 25px rgba(255,0,0,.18),inset 0 0 30px rgba(255,0,0,.06)}
}
.hz-intel-badge{
font-family:var(--fm);font-size:.55rem;padding:.15rem .4rem;border-radius:2px;
}
.hz-intel-loading-state{color:var(--claude);background:rgba(200,155,106,.06);border:1px solid rgba(200,155,106,.15)}
.hz-intel-loading{animation:pulse 1.5s infinite}
.hz-intel-threat-badge{
font-family:var(--fd);font-size:.55rem;font-weight:700;letter-spacing:2px;
padding:.15rem .45rem;border-radius:2px;border:1px solid var(--orange);color:var(--orange);
}
.hz-intel-threat-sm{font-family:var(--fd);font-size:.5rem;letter-spacing:1px;font-weight:700}
.hz-ai-intel-subtitle{
font-family:var(--fc);font-size:.58rem;color:var(--txt3);margin-bottom:.4rem;
display:flex;align-items:center;gap:.25rem;letter-spacing:.5px;
}
.hz-ai-q{
display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;background:var(--quewi);color:#fff;
font-family:var(--fd);font-size:.55rem;font-weight:700;border-radius:2px;flex-shrink:0;
}
.hz-ai-intel-summary{
font-family:var(--fc);font-size:.72rem;color:var(--txt);
line-height:1.6;padding:.4rem .5rem;
background:rgba(200,164,90,.02);border-left:2px solid var(--claude);
border-radius:0 3px 3px 0;margin-bottom:.4rem;
}
.hz-ai-intel-events{
display:flex;flex-direction:column;gap:.3rem;
max-height:200px;overflow-y:auto;margin-bottom:.4rem;
scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
}
.hz-intel-event{
padding:.35rem .45rem;border-radius:3px;cursor:pointer;
background:rgba(16,22,32,.5);border:1px solid var(--border);transition:all .3s;
}
.hz-intel-event:hover{background:rgba(200,164,90,.04);border-color:var(--border2)}
.hz-ie-head{display:flex;align-items:center;gap:.3rem;margin-bottom:.15rem}
.hz-ie-num{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;border-radius:50%;font-family:var(--fd);
font-size:.5rem;color:#fff;font-weight:700;flex-shrink:0;
}
.hz-ie-icon{font-size:.72rem}
.hz-ie-title{font-family:var(--fb);font-size:.68rem;font-weight:600;color:var(--txt)}
.hz-ie-detail{font-size:.6rem;color:var(--txt2);line-height:1.55;font-family:var(--fc)}
.hz-ie-detail p,.intel-popup-body p{margin:0 0 .45em;line-height:1.6}
.hz-ie-detail p:last-child,.intel-popup-body p:last-child{margin-bottom:0}
.hz-ie-meta{font-size:.5rem;color:var(--txt3);font-family:var(--fm);margin-top:.15rem}
.hz-ai-intel-ship{
font-size:.62rem;color:var(--txt2);font-family:var(--fc);
padding:.3rem .4rem;background:rgba(91,158,196,.03);
border:1px solid rgba(91,158,196,.08);border-radius:3px;margin-bottom:.3rem;
}
.hz-ai-intel-footer{
display:flex;align-items:center;justify-content:space-between;gap:.3rem;
}
.hz-intel-ts{font-size:.5rem;color:var(--txt3);font-family:var(--fm)}
.hz-intel-refresh-btn{
font-family:var(--fd);font-size:.5rem;padding:.2rem .5rem;
background:rgba(200,155,106,.06);border:1px solid rgba(200,155,106,.15);
color:var(--claude);border-radius:2px;cursor:pointer;letter-spacing:1px;transition:all .3s;
}
.hz-intel-refresh-btn:hover{background:rgba(200,155,106,.12);border-color:var(--claude)}
/* ═══ INTEL MAP MARKERS ═══ */
.intel-marker-div{background:transparent!important;border:none!important}
/* ═══ CASUALTY INCIDENT MAP MARKERS ═══ */
.casualty-marker-div{background:transparent!important;border:none!important}
/* Satellite intel marker — cyan pulsing ring */
.sat-intel-marker .casualty-ring{
animation:satIntelScan 2.5s ease-in-out infinite!important;
border-style:dashed!important;
border-width:2px!important;
will-change:transform, opacity;
}
@keyframes satIntelScan{
0%{transform:scale(1);opacity:.7;border-color:#00e5ff}
50%{transform:scale(1.6);opacity:.15;border-color:#18ffff}
100%{transform:scale(1);opacity:.7;border-color:#00e5ff}
}
.sat-intel-marker .casualty-icon{
filter:drop-shadow(0 0 6px rgba(0,229,255,.8))!important;
}
/* ═══════════════════════════════════════════════════════════
SAT INTEL GATE MODAL — quick-register overlay
═══════════════════════════════════════════════════════════ */
.sat-gate-overlay {
position: fixed; inset: 0; z-index: 250000;
background: rgba(4, 8, 16, .88);
backdrop-filter: blur(14px);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
animation: satGateFadeIn .25s ease-out;
}
@keyframes satGateFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sat-gate-box {
background: linear-gradient(165deg, #0d1a2e 0%, #0a1220 50%, #0f1828 100%);
border: 1px solid rgba(0, 229, 255, .25);
border-radius: 14px;
max-width: 400px; width: 100%;
padding: 0;
position: relative;
box-shadow:
0 0 40px rgba(0, 229, 255, .08),
0 20px 60px rgba(0, 0, 0, .5),
inset 0 1px 0 rgba(0, 229, 255, .1);
animation: satGateSlideUp .3s ease-out;
overflow: hidden;
}
@keyframes satGateSlideUp {
from { transform: translateY(30px) scale(.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Scan-line decoration at top */
.sat-gate-box::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, #00e5ff 30%, #18ffff 50%, #00e5ff 70%, transparent);
animation: satGateScan 2.5s linear infinite;
}
@keyframes satGateScan {
0% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: .4; }
}
.sat-gate-close {
position: absolute; top: .7rem; right: .7rem;
background: transparent; border: none;
color: rgba(200, 220, 240, .4); font-size: 1.1rem;
cursor: pointer; width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; transition: all .2s; z-index: 2;
}
.sat-gate-close:hover { color: #00e5ff; background: rgba(0, 229, 255, .1); }
.sat-gate-header {
text-align: center;
padding: 1.8rem 1.5rem .8rem;
}
.sat-gate-icon {
font-size: 2.2rem;
margin-bottom: .4rem;
animation: satGateIconPulse 2s ease-in-out infinite;
}
@keyframes satGateIconPulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0,229,255,.5)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(0,229,255,.8)); }
}
.sat-gate-title {
font-family: var(--fd, 'Orbitron', sans-serif);
font-size: .95rem; font-weight: 800;
color: #00e5ff;
letter-spacing: 3px;
margin-bottom: .4rem;
text-shadow: 0 0 12px rgba(0, 229, 255, .3);
}
.sat-gate-subtitle {
font-size: .8rem;
color: rgba(200, 215, 235, .7);
line-height: 1.5;
max-width: 300px; margin: 0 auto;
}
.sat-gate-form {
padding: .6rem 1.5rem 1rem;
}
.sat-gate-input {
width: 100%; box-sizing: border-box;
padding: .7rem .9rem;
background: rgba(0, 229, 255, .04);
border: 1px solid rgba(0, 229, 255, .2);
border-radius: 8px;
color: #e8eff8; font-size: .88rem;
font-family: var(--fb, 'Inter', sans-serif);
outline: none; transition: all .2s;
margin-bottom: .6rem;
}
.sat-gate-input:focus {
border-color: #00e5ff;
box-shadow: 0 0 12px rgba(0, 229, 255, .15);
background: rgba(0, 229, 255, .07);
}
.sat-gate-input::placeholder { color: rgba(150, 175, 200, .4); }
.sat-gate-email { font-size: .78rem; }
.sat-gate-btn {
width: 100%; padding: .75rem 1rem;
background: linear-gradient(135deg, #00b8d4 0%, #00e5ff 50%, #18ffff 100%);
border: none; border-radius: 8px;
color: #000; font-size: .88rem; font-weight: 800;
letter-spacing: 1.5px;
font-family: var(--fd, 'Orbitron', sans-serif);
cursor: pointer;
transition: all .2s;
box-shadow: 0 4px 18px rgba(0, 229, 255, .25);
margin-top: .3rem;
}
.sat-gate-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(0, 229, 255, .35);
}
.sat-gate-btn:active { transform: translateY(0); }
.sat-gate-btn:disabled {
opacity: .5; cursor: not-allowed; transform: none;
}
.sat-gate-btn-icon { font-size: 1rem; }
.sat-gate-footer {
text-align: center;
padding: .5rem 1.5rem 1.2rem;
font-size: .7rem;
color: rgba(0, 229, 255, .45);
letter-spacing: .3px;
}
.sat-gate-error {
display: none;
text-align: center;
padding: .4rem 1.5rem .8rem;
font-size: .75rem;
color: #ff5252;
}
/* Mobile responsive */
@media (max-width: 480px) {
.sat-gate-box { max-width: 92vw; }
.sat-gate-title { font-size: .82rem; letter-spacing: 2px; }
.sat-gate-subtitle { font-size: .72rem; }
}
/* END SAT GATE MODAL */
.casualty-marker-wrap{
position:relative;display:flex;align-items:center;justify-content:center;
}
.casualty-ring{
position:absolute;inset:0;border-radius:50%;border:2px solid;
opacity:.8;animation:casualtyPulse 3s infinite;
}
@keyframes casualtyPulse{
0%{transform:scale(1);opacity:.8}
50%{transform:scale(1.4);opacity:.3}
100%{transform:scale(1);opacity:.8}
}
.casualty-icon{
z-index:2;position:relative;text-shadow:0 0 8px rgba(0,0,0,.9);
filter:drop-shadow(0 0 4px rgba(255,23,68,.6));
}
.casualty-count{
position:absolute;top:-6px;right:-8px;
min-width:20px;height:18px;border-radius:9px;
padding:0 4px;
font-family:var(--fd);font-size:.6rem;color:#fff;font-weight:bold;
display:flex;align-items:center;justify-content:center;
z-index:3;letter-spacing:-.5px;
box-shadow:0 0 8px rgba(255,23,68,.5);
}
.intel-marker-wrap{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.intel-ring{
position:absolute;inset:2px;border-radius:50%;border:2px solid;
opacity:.7;
}
.intel-marker-pulse .intel-ring{animation:intelPulseRing 2s infinite}
@keyframes intelPulseRing{
0%{transform:scale(1);opacity:.7}
50%{transform:scale(1.5);opacity:.2}
100%{transform:scale(1);opacity:.7}
}
.intel-marker-steady .intel-ring{
animation:intelSteadyGlow 4s ease-in-out infinite;
opacity:.55;
}
@keyframes intelSteadyGlow{
0%,100%{opacity:.4;transform:scale(1)}
50%{opacity:.65;transform:scale(1.15)}
}
.intel-icon{
width:22px;height:22px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:.7rem;z-index:2;position:relative;
}
.intel-idx{
position:absolute;top:-2px;right:-2px;
width:14px;height:14px;border-radius:50%;
background:var(--bg);border:1px solid rgba(200,164,90,.3);
font-family:var(--fd);font-size:.45rem;color:var(--gold);
display:flex;align-items:center;justify-content:center;
z-index:3;
}
.intel-popup-container{z-index:1200!important}
.intel-popup-container .leaflet-popup-content-wrapper{
background:rgba(16,22,32,.95)!important;
border:1px solid rgba(144,112,176,.2)!important;
padding:10px 14px!important;
}
.intel-popup{font-family:var(--fb);font-size:.88rem;min-width:300px}
.intel-popup-header{
display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;
margin-bottom:.4rem;background:rgba(200,164,90,.03);border-radius:3px;
}
.intel-popup-icon{font-size:1.2rem}
.intel-popup-title{font-weight:600;color:var(--txt);flex:1}
.intel-popup-sev{font-family:var(--fd);font-size:.65rem;letter-spacing:1px}
.intel-popup-body{font-size:.84rem;color:var(--txt2);line-height:1.7;padding:.3rem 0;font-family:var(--fc)}
.intel-popup-meta{
display:flex;gap:.7rem;font-size:.7rem;color:var(--txt3);
font-family:var(--fm);padding:.3rem 0;border-top:1px solid var(--border);margin-top:.3rem;
}
.intel-popup-coords{font-family:var(--fm);font-size:.64rem;color:var(--txt3);margin-top:.2rem}
/* Intel popup social buttons */
.intel-popup-social{
display:flex;gap:.4rem;margin-top:.45rem;padding-top:.45rem;
border-top:1px solid rgba(255,255,255,.08);
}
.ips-btn{
flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;
padding:.4rem .55rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;
background:rgba(255,255,255,.03);color:var(--txt2);font-size:.72rem;
cursor:pointer;transition:all .2s;font-family:var(--fm);
}
.ips-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.ips-like.ips-liked{color:#ff4757;border-color:rgba(255,71,87,.3);background:rgba(255,71,87,.08)}
.ips-share:hover{color:#00ff88;border-color:rgba(0,255,136,.3)}
.ips-count{font-size:.65rem;opacity:.7}
/* ═══ MIDDLE EAST FLIGHTS PANEL ═══ */
.hz-flights-panel{
padding:.5rem .6rem;border-radius:6px;
background:linear-gradient(135deg,rgba(74,144,217,.04),rgba(74,144,217,.01));
border:1px solid rgba(74,144,217,.15);
margin-top:.3rem;
}
.hz-flights-header{display:flex;justify-content:space-between;align-items:center;gap:.4rem;margin-bottom:.25rem}
.hz-flights-title{display:flex;align-items:center;gap:.35rem;font-family:var(--fd);font-size:.72rem;font-weight:700;color:#4a90d9;letter-spacing:1px}
.hz-flights-icon{font-size:1rem}
.hz-flights-badges{display:flex;align-items:center;gap:.3rem}
.hz-flight-badge{
font-family:var(--fd);font-size:.52rem;letter-spacing:1px;
padding:.1rem .4rem;border-radius:3px;white-space:nowrap;
}
.hz-flight-loading-state{color:#ffab00;background:rgba(255,171,0,.08);border:1px solid rgba(255,171,0,.2)}
.hz-flight-loading{animation:blink 1.2s ease infinite}
.hz-flight-error-state{color:#ff4444;background:rgba(255,68,68,.08);border:1px solid rgba(255,68,68,.2)}
.hz-flight-ready-state{color:#00e676;background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.15)}
.hz-flight-ok{font-weight:700}
.hz-flight-cnt{color:var(--txt2);margin-left:.2rem}
.hz-flight-count-badge{
font-family:var(--fd);font-size:.58rem;font-weight:700;
color:#4a90d9;background:rgba(74,144,217,.1);
padding:.1rem .35rem;border-radius:3px;border:1px solid rgba(74,144,217,.2);
}
.hz-flights-subtitle{
font-size:.58rem;color:var(--txt3);font-family:var(--fm);
display:flex;align-items:center;gap:.3rem;margin-bottom:.3rem;
}
.hz-flights-ae{
display:inline-block;font-family:var(--fd);font-size:.5rem;font-weight:700;
color:#4a90d9;background:rgba(74,144,217,.12);
padding:.05rem .25rem;border-radius:2px;letter-spacing:1px;margin-right:.15rem;
}
.hz-flights-stats{
display:flex;gap:.5rem;align-items:flex-start;padding:.25rem 0;
border-top:1px solid rgba(74,144,217,.1);border-bottom:1px solid rgba(74,144,217,.1);
margin-bottom:.25rem;
}
.hz-fs-item{display:flex;flex-direction:column;gap:.1rem;flex:1}
.hz-fs-label{font-family:var(--fd);font-size:.5rem;color:var(--txt3);letter-spacing:1px}
.hz-fs-val{font-family:var(--fm);font-size:.65rem;color:var(--txt)}
.hz-fs-airlines{display:flex;flex-wrap:wrap;gap:.2rem}
.hz-fa-tag{
font-family:var(--fd);font-size:.48rem;font-weight:600;
color:#4a90d9;background:rgba(74,144,217,.06);
padding:.05rem .2rem;border-radius:2px;border:1px solid rgba(74,144,217,.12);
white-space:nowrap;
}
.hz-fa-tag b{color:var(--txt)}
.hz-flights-list{
max-height:220px;overflow-y:auto;
scrollbar-width:thin;scrollbar-color:rgba(74,144,217,.2) transparent;
}
.hz-flight-item{
padding:.25rem .3rem;border-radius:4px;cursor:pointer;
border-bottom:1px solid rgba(74,144,217,.06);
transition:background .2s;
}
.hz-flight-item:hover{background:rgba(74,144,217,.08)}
.hz-fi-head{display:flex;align-items:center;gap:.3rem}
.hz-fi-flag{font-size:.7rem}
.hz-fi-fn{font-family:var(--fd);font-size:.62rem;font-weight:700;letter-spacing:1px}
.hz-fi-route{font-family:var(--fm);font-size:.55rem;color:var(--txt3);margin-left:auto}
.hz-fi-meta{
display:flex;gap:.5rem;font-size:.52rem;color:var(--txt3);
font-family:var(--fm);padding-left:1.2rem;
}
.hz-flights-footer{
display:flex;justify-content:space-between;align-items:center;
padding-top:.25rem;border-top:1px solid rgba(74,144,217,.1);margin-top:.25rem;
}
.hz-flight-ts{font-family:var(--fm);font-size:.52rem;color:var(--txt3)}
.hz-flights-refresh-btn{
font-family:var(--fd);font-size:.52rem;font-weight:700;
letter-spacing:1px;color:#4a90d9;background:rgba(74,144,217,.08);
border:1px solid rgba(74,144,217,.2);border-radius:3px;
padding:.15rem .4rem;cursor:pointer;transition:all .2s;
}
.hz-flights-refresh-btn:hover{background:rgba(74,144,217,.2);color:#fff}
/* ═══ FLIGHT MAP MARKERS ═══ */
.flight-marker-div{background:none!important;border:none!important}
.flight-marker-wrap{
position:relative;display:flex;flex-direction:column;align-items:center;
pointer-events:auto;cursor:pointer;
}
.flight-plane-icon{
line-height:1;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.flight-label{
font-family:var(--fd);font-size:.42rem;font-weight:700;
letter-spacing:.5px;white-space:nowrap;
text-shadow:0 1px 3px rgba(0,0,0,.8);
margin-top:-2px;
}
.flight-contrail{
position:absolute;height:2px;border-radius:1px;
top:50%;left:50%;transform-origin:center left;
pointer-events:none;
}
.flight-iran .flight-plane-icon svg path{
stroke:rgba(255,50,50,.8)!important;stroke-width:1!important;
}
.flight-airport-icon{
display:flex;flex-direction:column;align-items:center;pointer-events:none;
}
.fa-dot{
width:5px;height:5px;border-radius:50%;
background:rgba(74,144,217,.6);
box-shadow:0 0 6px rgba(74,144,217,.4);
}
.fa-code{
font-family:var(--fd);font-size:.4rem;font-weight:700;
color:rgba(74,144,217,.5);letter-spacing:.5px;
text-shadow:0 1px 2px rgba(0,0,0,.8);
}
/* Flight popup */
.flight-popup-container .leaflet-popup-content-wrapper{
background:rgba(8,9,13,.94)!important;border:1px solid rgba(74,144,217,.25)!important;
border-radius:6px!important;box-shadow:0 4px 20px rgba(0,0,0,.6)!important;
backdrop-filter:blur(12px);
}
.flight-popup-container .leaflet-popup-tip{background:rgba(8,9,13,.94)!important;border-color:rgba(74,144,217,.25)!important}
.flight-popup{font-family:var(--fb);font-size:.75rem;min-width:220px}
.flight-popup-header{
display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;
background:rgba(74,144,217,.06);border-radius:4px 4px 0 0;
margin:-.3rem -.3rem .3rem -.3rem;
}
.flight-popup-flag{font-size:1.1rem}
.flight-popup-fn{font-family:var(--fd);font-size:.85rem;font-weight:700;letter-spacing:1px}
.flight-popup-airline{font-size:.65rem;color:var(--txt2);margin-left:auto;font-family:var(--fc)}
.flight-popup-route{
display:flex;align-items:center;justify-content:center;gap:.4rem;
padding:.25rem 0;font-family:var(--fd);font-size:.7rem;color:var(--txt);
letter-spacing:1px;
}
.flight-popup-arrow{color:#4a90d9;font-size:.65rem}
.flight-popup-grid{
display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem;
padding:.2rem 0;border-top:1px solid var(--border);
}
.fpg-item{display:flex;flex-direction:column}
.fpg-label{font-family:var(--fd);font-size:.48rem;color:var(--txt3);letter-spacing:1px}
.fpg-val{font-family:var(--fm);font-size:.62rem;color:var(--txt)}
/* ═══ MILITARY FLIGHT MARKERS — 军事飞行器标记 ═══ */
.mil-flight-marker-div{background:transparent!important;border:none!important}
.mil-flight-marker-wrap{
position:relative;display:flex;flex-direction:column;align-items:center;
animation:milFlightPulse 2s ease-in-out infinite;
}
@keyframes milFlightPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.mil-flight-plane-icon{position:relative;z-index:2}
.mil-flight-label{
font-family:var(--fd);font-size:.5rem;font-weight:700;letter-spacing:1.5px;
white-space:nowrap;margin-top:-2px;z-index:1;
}
.mil-threat-ring{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:42px;height:42px;border-radius:50%;border:1.5px solid;
animation:milThreatPulse 2s ease-in-out infinite;z-index:0;
}
@keyframes milThreatPulse{
0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
50%{opacity:.3;transform:translate(-50%,-50%) scale(1.6)}
100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
}
.mil-flight-popup-container .leaflet-popup-content-wrapper{
background:rgba(15,5,5,.95)!important;border:1px solid rgba(255,34,34,.35)!important;
box-shadow:0 0 20px rgba(255,0,0,.15);border-radius:6px!important;
}
.mil-flight-popup-container .leaflet-popup-tip{background:rgba(15,5,5,.95)!important;border-color:rgba(255,34,34,.25)!important}
.mil-flight-popup{font-family:var(--fb);font-size:.75rem;min-width:220px}
.mfp-header{
display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;
background:rgba(255,34,34,.08);border-radius:4px;margin-bottom:.4rem;
}
.mfp-icon{font-size:1rem}
.mfp-callsign{font-family:var(--fd);font-size:.85rem;font-weight:700;letter-spacing:1px}
.mfp-class{font-size:.6rem;color:var(--txt2);margin-left:auto;font-family:var(--fc);opacity:.8}
.mfp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem;padding:.3rem .5rem}
.mfp-item{display:flex;justify-content:space-between;align-items:center;padding:.1rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mfp-label{font-family:var(--fc);font-size:.55rem;color:var(--txt2);text-transform:uppercase;letter-spacing:.5px}
.mfp-val{font-family:var(--fm);font-size:.62rem;color:var(--txt)}
/* ═══ COLLAPSIBLE SIDEBAR SECTIONS — 折叠面板系统 ═══ */
.hz-sec{position:relative;transition:all .3s}
.hz-sec-hdr{
display:flex;align-items:center;gap:.3rem;
padding:.35rem .45rem;cursor:pointer;user-select:none;
transition:background .2s;font-family:var(--fd);
font-size:.58rem;letter-spacing:1.5px;font-weight:600;
border-radius:3px;margin-bottom:.2rem;
}
.hz-sec-hdr:hover{background:rgba(255,255,255,.035)}
.hz-sec-num{
display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;border-radius:3px;
font-family:var(--fd);font-size:.48rem;font-weight:800;
letter-spacing:0;flex-shrink:0;
}
.hz-sec-tag{font-family:var(--fm);font-size:.42rem;letter-spacing:1.5px;color:var(--txt3);margin-left:auto;opacity:.5}
.hz-sec-arr{font-size:.55rem;color:var(--txt3);transition:transform .3s ease;margin-left:.15rem;width:10px;text-align:center}
.hz-sec.collapsed .hz-sec-arr{transform:rotate(-90deg)}
.hz-sec-body{max-height:800px;overflow:hidden;transition:max-height .4s ease,opacity .3s ease;opacity:1}
.hz-sec.collapsed .hz-sec-body{max-height:0!important;opacity:0;overflow:hidden}
/* Section accent colors */
.hz-sec.acc-sat{border-left:3px solid #4a9ec8}
.hz-sec.acc-sat .hz-sec-num{background:rgba(74,158,200,.15);color:#4a9ec8}
.hz-sec.acc-sat .hz-sec-hdr{color:#4a9ec8}
.hz-sec.acc-oil{border-left:3px solid var(--gold)}
.hz-sec.acc-oil .hz-sec-num{background:rgba(200,164,90,.15);color:var(--gold)}
.hz-sec.acc-oil .hz-sec-hdr{color:var(--gold)}
.hz-sec.acc-stats{border-left:3px solid #6a9a4a;border-radius:6px;padding:.35rem;background:var(--glass);border:1px solid var(--border)}
.hz-sec.acc-stats .hz-sec-num{background:rgba(106,154,74,.15);color:#6a9a4a}
.hz-sec.acc-stats .hz-sec-hdr{color:#6a9a4a}
.hz-sec.acc-track{border-left:3px solid #5b9ec4}
.hz-sec.acc-track .hz-sec-num{background:rgba(91,158,196,.15);color:#5b9ec4}
.hz-sec.acc-track .hz-sec-hdr{color:#5b9ec4}
.hz-sec.acc-intel{border-left:3px solid var(--claude)}
.hz-sec.acc-intel .hz-sec-num{background:rgba(200,155,106,.15);color:var(--claude)}
.hz-sec.acc-flight{border-left:3px solid #4a90d9}
.hz-sec.acc-flight .hz-sec-num{background:rgba(74,144,217,.15);color:#4a90d9}
.hz-sec.acc-legend{border-left:3px solid rgba(107,104,96,.4)}
.hz-sec.acc-legend .hz-sec-num{background:rgba(107,104,96,.15);color:var(--txt3)}
.hz-sec.acc-legend .hz-sec-hdr{color:var(--txt3)}
/* Stat cards 2x2 grid */
.hz-stat-grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
/* Toggle all button */
.hz-toggle-all{text-align:right;margin-bottom:.15rem}
.hz-toggle-all-btn{font-family:var(--fd);font-size:.48rem;letter-spacing:1px;color:var(--txt3);background:none;border:1px solid var(--border);padding:.15rem .4rem;border-radius:2px;cursor:pointer;transition:all .2s}
.hz-toggle-all-btn:hover{color:var(--gold);border-color:var(--gold)}
/* Right panel section number badges */
.sec-num-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-family:var(--fd);font-size:.52rem;font-weight:800;margin-right:.35rem;flex-shrink:0;letter-spacing:0}
.snb-red{background:rgba(196,60,60,.1);color:var(--red);border:1px solid rgba(196,60,60,.2)}
.snb-gold{background:rgba(200,164,90,.1);color:var(--gold);border:1px solid rgba(200,164,90,.2)}
.snb-blue{background:rgba(74,127,181,.1);color:var(--force-blue);border:1px solid rgba(74,127,181,.2)}
.snb-green{background:rgba(106,154,74,.1);color:var(--green);border:1px solid rgba(106,154,74,.2)}
.snb-purple{background:rgba(144,112,176,.1);color:var(--quewi);border:1px solid rgba(144,112,176,.2)}
/* Enhanced right panel section headers — 提高識別度 */
.risk-ov-title{font-size:.88rem!important;background:linear-gradient(90deg,rgba(196,60,60,.05),transparent)!important;padding:.55rem .7rem!important;margin:0 -.5rem .7rem -.5rem;border-radius:4px}
.div-banner-title{font-size:.88rem!important;background:linear-gradient(90deg,rgba(196,60,60,.05),transparent)!important;padding:.55rem .7rem!important;margin:0 -.5rem .7rem -.5rem;border-radius:4px}
.dash-title{font-size:1rem!important;background:linear-gradient(90deg,rgba(200,164,90,.05),transparent)!important;padding:.55rem .7rem!important;border-radius:4px}
.timeline-title{font-size:.88rem!important;background:linear-gradient(90deg,rgba(74,127,181,.05),transparent)!important;padding:.55rem .7rem!important;margin:0 -.5rem .7rem -.5rem;border-radius:4px}
.ct-title{font-size:.85rem!important;background:linear-gradient(90deg,rgba(200,164,90,.04),transparent)!important;padding:.55rem .7rem!important;margin:0 -.5rem .7rem -.5rem;border-radius:4px}
.cons-title{font-size:.82rem!important;background:linear-gradient(90deg,rgba(106,154,74,.05),transparent)!important;padding:.55rem .7rem!important;margin:0 -.5rem .7rem -.5rem;border-radius:4px}
/* Hormuz responsive */
@media(max-width:900px){
.hormuz-body{grid-template-columns:1fr;min-height:auto}
.hormuz-map{min-height:320px}
.hormuz-stats{flex-direction:row;flex-wrap:wrap;border-left:none;border-top:1px solid var(--border);padding:.5rem}
.hz-stat-card{flex:1;min-width:140px}
.hz-sat-section{flex:1 1 100%}
.hz-oil-section{flex:1 1 100%}
.hz-oil-cards{flex-direction:row;flex-wrap:wrap}
.hz-oil-card{flex:1;min-width:140px}
.hz-tracker{flex:1 1 100%}
.hz-legend{flex:1 1 100%}
.hz-ai-intel{flex:1 1 100%}
.hz-ai-intel-events{max-height:150px}
.hz-flights-panel{flex:1 1 100%}
.hz-flights-list{max-height:120px}
.hz-legend-row{display:inline-flex;margin-right:.8rem}
}
@media(max-width:600px){
.hormuz-header{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.5rem .7rem}
.hz-zoom-btns{flex-wrap:wrap;gap:.2rem}
.hz-map-stats{flex-wrap:wrap}
.hz-mstat{min-width:50%}
.hormuz-stats{padding:.35rem}
.hz-stat-card{min-width:calc(50% - .25rem)}
.hz-oil-cards{flex-direction:column}
.hz-oil-card{min-width:100%}
}
/* SAR scan overlay */
.hormuz-map-wrap::after{
content:'';position:absolute;inset:0;z-index:500;pointer-events:none;
background:
linear-gradient(180deg,rgba(8,9,13,.1) 0%,transparent 30%,transparent 70%,rgba(8,9,13,.15) 100%),
repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(200,164,90,.006) 3px,rgba(200,164,90,.006) 4px);
mix-blend-mode:multiply;
}
/* Remove old scanline overlay on warroom */
.warroom::before{display:none}
/* Lane pulse */
@keyframes lanePulse{0%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.lane-pulse{animation:lanePulse 2s linear infinite}
/* ═══ SOURCE BADGES ═══ */
.src-badge{
display:inline-flex;align-items:center;gap:.25rem;
font-family:var(--fd);font-size:.55rem;letter-spacing:1.5px;font-weight:600;
padding:.15rem .5rem;border-radius:2px;white-space:nowrap;
vertical-align:middle;line-height:1.2;
}
.src-tier-wire{color:#c8a45a;background:rgba(200,164,90,.08);border:1px solid rgba(200,164,90,.2);box-shadow:0 0 6px rgba(200,164,90,.08);animation:srcWireGlow 3s ease-in-out infinite alternate}
@keyframes srcWireGlow{0%{box-shadow:0 0 4px rgba(200,164,90,.06)}100%{box-shadow:0 0 10px rgba(200,164,90,.12)}}
.src-tier-media{color:#5b9ec4;background:rgba(91,158,196,.06);border:1px solid rgba(91,158,196,.15)}
.src-tier-regional{color:#9070b0;background:rgba(144,112,176,.06);border:1px solid rgba(144,112,176,.15)}
.src-tier-alt{color:var(--orange);background:rgba(200,120,50,.06);border:1px solid rgba(200,120,50,.15);position:relative}
.src-tier-alt::after{content:'⚠';font-size:.45rem;margin-left:.15rem;opacity:.6}
/* Leaflet overrides */
.leaflet-control-layers{background:rgba(8,9,13,.92)!important;border:1px solid var(--border2)!important;border-radius:4px!important;color:var(--txt)!important;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.4)!important}
.leaflet-control-layers-toggle{background-color:rgba(8,9,13,.92)!important;border:1px solid var(--border2)!important;border-radius:4px!important;width:30px!important;height:30px!important}
.leaflet-control-layers label{color:var(--txt2)!important;font-family:var(--fm);font-size:.7rem}
.leaflet-control-layers-separator{border-top-color:var(--border2)!important}
/* ╔══════════════════════════════════════════════════════════════╗
║ SURVEILLANCE CAMERA MODE — 全屏监控模式 ║
╚══════════════════════════════════════════════════════════════╝ */
/* ─── Fullscreen Section ─── */
.hz-surveillance {
position: relative;
width: 100%;
height: calc(100vh - 70px);
height: calc(100dvh - 70px);
min-height: 500px;
overflow: hidden;
background: #000;
}
.hz-fullmap {
position: absolute;
inset: 0;
z-index: 1;
background: #0a1018;
transform:translateZ(0);
-webkit-transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.hz-fullmap .leaflet-container {
background: #0a1018 !important;
transform:translateZ(0);
-webkit-transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.hz-fullmap .leaflet-tile-pane {
filter: saturate(1.12) brightness(0.96) contrast(1.05) sepia(0.03) hue-rotate(-2deg);
background: #0a0e18;
transform:translateZ(0);
-webkit-transform:translateZ(0);
}
/* Premium warm military satellite tint — subtle blue-gold shift */
.hz-fullmap .leaflet-tile-pane::after {
content:'';position:absolute;inset:0;pointer-events:none;z-index:999;
background:linear-gradient(180deg,
rgba(16,24,36,.06) 0%,
rgba(200,164,90,.02) 30%,
transparent 50%,
rgba(61,143,160,.02) 70%,
rgba(16,24,36,.08) 100%);
mix-blend-mode:multiply;
}
.hz-fullmap .leaflet-control-layers {
background: rgba(0,0,0,0.75) !important;
border: 1px solid rgba(0,255,136,0.2) !important;
color: #ccc !important;
border-radius: 4px !important;
}
.hz-fullmap .leaflet-control-layers label {
color: #ccc !important;
font-size: 0.7rem !important;
}
.hz-fullmap .leaflet-control-zoom a {
background: rgba(0,0,0,0.7) !important;
color: #0f8 !important;
border-color: rgba(0,255,136,0.15) !important;
}
.hz-fullmap .leaflet-tile{will-change:transform,opacity}
/* Push Leaflet controls below REC bar */
.hz-fullmap .leaflet-top.leaflet-left {
top: 36px !important;
}
@media(max-width:768px){
.hz-fullmap .leaflet-top.leaflet-left { top: 32px !important; }
.hz-fullmap .leaflet-control-zoom { display: none !important; }
}
/* ─── Scanlines ─── */
.hz-scanlines {
position: absolute;
inset: 0;
z-index: 90;
pointer-events: none;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.03) 2px,
rgba(0,0,0,0.03) 4px
);
mix-blend-mode: overlay;
}
/* ─── Vignette ─── */
.hz-vignette {
position: absolute;
inset: 0;
z-index: 91;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.3) 100%);
}
/* ─── Corner Brackets ─── */
.hz-corner {
position: absolute;
width: 40px;
height: 40px;
z-index: 95;
pointer-events: none;
}
.hz-corner-tl { top: 8px; left: 8px; border-top: 2px solid rgba(0,255,136,0.5); border-left: 2px solid rgba(0,255,136,0.5); }
.hz-corner-tr { top: 8px; right: 8px; border-top: 2px solid rgba(0,255,136,0.5); border-right: 2px solid rgba(0,255,136,0.5); }
.hz-corner-bl { bottom: 8px; left: 8px; border-bottom: 2px solid rgba(0,255,136,0.5); border-left: 2px solid rgba(0,255,136,0.5); }
.hz-corner-br { bottom: 8px; right: 8px; border-bottom: 2px solid rgba(0,255,136,0.5); border-right: 2px solid rgba(0,255,136,0.5); }
/* ─── Crosshair ─── */
.hz-crosshair {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 92;
pointer-events: none;
width: 60px; height: 60px;
}
.hz-cross-h, .hz-cross-v {
position: absolute;
background: rgba(0,255,136,0.18);
}
.hz-cross-h { top: 50%; left: 0; right: 0; height: 1px; }
.hz-cross-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.hz-cross-circle {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 30px; height: 30px;
border: 1px solid rgba(0,255,136,0.15);
border-radius: 50%;
}
/* ╔══════════════════════════════════════════════╗
║ REC HEADER BAR ║
╚══════════════════════════════════════════════╝ */
.hz-rec-bar {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 14px;
background: linear-gradient(180deg, rgba(2,6,14,.88) 0%, rgba(2,6,14,.55) 70%, transparent 100%);
font-family: 'JetBrains Mono', monospace;
user-select: none;
pointer-events: none;
}
.hz-rec-bar * { pointer-events: auto; }
.hz-rec-left {
display: flex;
align-items: center;
gap: 8px;
}
.hz-rec-dot {
width: 10px; height: 10px;
background: #ff0000;
border-radius: 50%;
box-shadow: 0 0 8px #ff0000, 0 0 20px rgba(255,0,0,0.4);
animation: recBlink 1s ease-in-out infinite;
}
@keyframes recBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.hz-rec-label {
color: #ff0000;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 0 10px rgba(255,0,0,0.5);
}
.hz-rec-time {
color: #00ff88;
font-size: 0.75rem;
letter-spacing: 1px;
}
.hz-rec-sep {
color: rgba(255,255,255,0.2);
font-size: 0.7rem;
}
.hz-rec-frames {
color: rgba(255,255,255,0.35);
font-size: 0.6rem;
letter-spacing: 1px;
}
.hz-rec-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.hz-rec-title {
color: rgba(255,255,255,0.85);
font-size: 0.78rem;
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: 0 0 12px rgba(200,164,90,.15), 0 1px 3px rgba(0,0,0,.6);
font-weight: 600;
}
.hz-rec-subtitle {
color: rgba(200,164,90,0.85);
font-size: 0.9rem;
letter-spacing: 5px;
font-family: 'LXGW WenKai SC', 'Noto Serif SC', serif;
font-weight: 700;
text-shadow: 0 0 14px rgba(200,164,90,.2), 0 0 40px rgba(200,164,90,.06), 0 1px 2px rgba(0,0,0,.6);
background: linear-gradient(90deg, rgba(200,164,90,.0), rgba(200,164,90,.08), rgba(200,164,90,.0));
padding: 2px 12px;
border-radius: 3px;
animation: subtitleGlow 4s ease-in-out infinite;
}
@keyframes subtitleGlow {
0%,100% { text-shadow: 0 0 14px rgba(200,164,90,.15), 0 1px 2px rgba(0,0,0,.6); opacity: .85; }
50% { text-shadow: 0 0 20px rgba(200,164,90,.3), 0 0 50px rgba(200,164,90,.08), 0 1px 2px rgba(0,0,0,.6); opacity: 1; }
}
.hz-rec-right {
display: flex;
align-items: center;
gap: 6px;
}
.hz-cam-btn {
background: rgba(0,0,0,0.5);
border: 1px solid rgba(0,255,136,0.2);
color: #0f8;
padding: 3px 10px;
font-size: 0.65rem;
border-radius: 3px;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
}
.hz-cam-btn:hover {
background: rgba(0,255,136,0.1);
border-color: rgba(0,255,136,0.5);
text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
/* ═══ SATELLITE ZOOM BUTTONS — premium military console style ═══ */
.hz-sat-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: radial-gradient(ellipse at 30% 20%, rgba(20,40,50,0.95), rgba(8,16,22,0.98));
border: 1px solid rgba(0,220,180,0.25);
border-radius: 10px;
cursor: pointer;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 2px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hz-sat-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 10px;
background: linear-gradient(135deg, rgba(0,220,180,0.06) 0%, transparent 50%, rgba(100,180,255,0.04) 100%);
pointer-events: none;
}
.hz-sat-icon {
font-size: 1.15rem;
filter: drop-shadow(0 0 4px rgba(0,220,180,0.4));
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
line-height: 1;
}
.hz-sat-label {
font-size: 0.5rem;
color: rgba(0,220,180,0.7);
letter-spacing: 0.5px;
margin-top: 2px;
font-family: inherit;
transition: color 0.3s, text-shadow 0.3s;
white-space: nowrap;
}
.hz-sat-ring {
position: absolute;
inset: 2px;
border-radius: 8px;
border: 1px solid transparent;
pointer-events: none;
transition: border-color 0.3s;
}
/* Hover — glow up */
.hz-sat-btn:hover {
border-color: rgba(0,220,180,0.6);
box-shadow: 0 4px 24px rgba(0,220,180,0.2), inset 0 0 20px rgba(0,220,180,0.05);
transform: translateY(-2px);
}
.hz-sat-btn:hover .hz-sat-icon {
transform: scale(1.2);
filter: drop-shadow(0 0 10px rgba(0,220,180,0.7));
}
.hz-sat-btn:hover .hz-sat-label {
color: #0ff;
text-shadow: 0 0 8px rgba(0,255,220,0.5);
}
.hz-sat-btn:hover .hz-sat-ring {
border-color: rgba(0,220,180,0.3);
animation: satRingScan 1.5s ease-in-out infinite;
}
/* Active press */
.hz-sat-btn:active {
transform: scale(0.95) translateY(0);
box-shadow: 0 0 30px rgba(0,220,180,0.35), inset 0 0 30px rgba(0,220,180,0.08);
}
/* Per-button accent colors */
.hz-sat-close:hover { border-color: rgba(255,100,60,0.6); box-shadow: 0 4px 24px rgba(255,100,60,0.15), inset 0 0 20px rgba(255,100,60,0.04); }
.hz-sat-close:hover .hz-sat-icon { filter: drop-shadow(0 0 10px rgba(255,100,60,0.7)); }
.hz-sat-close:hover .hz-sat-label { color: #ff8c55; text-shadow: 0 0 8px rgba(255,100,60,0.4); }
.hz-sat-close:hover .hz-sat-ring { border-color: rgba(255,100,60,0.3); }
.hz-sat-region:hover { border-color: rgba(80,160,255,0.6); box-shadow: 0 4px 24px rgba(80,160,255,0.15), inset 0 0 20px rgba(80,160,255,0.04); }
.hz-sat-region:hover .hz-sat-icon { filter: drop-shadow(0 0 10px rgba(80,160,255,0.7)); }
.hz-sat-region:hover .hz-sat-label { color: #6af; text-shadow: 0 0 8px rgba(80,160,255,0.4); }
.hz-sat-region:hover .hz-sat-ring { border-color: rgba(80,160,255,0.3); }
.hz-sat-global:hover { border-color: rgba(0,220,180,0.6); }
/* Idle subtle pulse per button — staggered */
.hz-sat-close .hz-sat-icon { animation: satIconFloat 3.0s ease-in-out infinite; }
.hz-sat-region .hz-sat-icon { animation: satIconFloat 3.0s ease-in-out 0.4s infinite; }
.hz-sat-global .hz-sat-icon { animation: satIconFloat 3.0s ease-in-out 0.8s infinite; }
@keyframes satIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes satRingScan {
0% { border-color: rgba(0,220,180,0.1); }
50% { border-color: rgba(0,220,180,0.45); }
100% { border-color: rgba(0,220,180,0.1); }
}
/* QueWi战情转发 button — eye-catching with glow pulse */
.hz-quewi-fwd{
background:linear-gradient(135deg,rgba(0,210,190,.15),rgba(144,112,226,.18))!important;
border:1px solid rgba(0,210,190,.3)!important;
color:#0ff!important;font-size:.7rem!important;padding:6px 18px;border-radius:999px;
cursor:pointer;font-family:inherit;transition:all .35s ease;letter-spacing:1px;
text-shadow:0 0 6px rgba(0,255,220,.25);
box-shadow:0 2px 12px rgba(0,210,190,.12),inset 0 1px 6px rgba(0,210,190,.04);
animation:quewiFwdPulse 2.8s ease-in-out infinite;
}
.hz-quewi-fwd:hover{
background:linear-gradient(135deg,rgba(0,210,190,.28),rgba(144,112,226,.32))!important;
border-color:rgba(0,255,220,.5)!important;
text-shadow:0 0 10px rgba(0,255,220,.45);
box-shadow:0 4px 20px rgba(0,210,190,.25),inset 0 1px 8px rgba(0,210,190,.08);
color:#fff!important;transform:translateY(-1px) scale(1.02);
}
@keyframes quewiFwdPulse{
0%,100%{box-shadow:0 2px 12px rgba(0,210,190,.1),inset 0 1px 6px rgba(0,210,190,.03)}
50%{box-shadow:0 4px 22px rgba(0,210,190,.22),inset 0 1px 10px rgba(0,210,190,.06)}
}
/* Per-event forward icon */
.hz-ie-fwd{
margin-left:auto;cursor:pointer;font-size:.7rem;opacity:.5;transition:all .2s;
flex-shrink:0;padding:1px 4px;border-radius:3px;
}
.hz-ie-fwd:hover{opacity:1;background:rgba(144,112,176,.15);text-shadow:0 0 6px rgba(144,112,176,.3)}
/* ╔══════════════════════════════════════════════╗
║ GLASS PANELS (Semi-transparent overlays) ║
╚══════════════════════════════════════════════╝ */
.hz-glass {
background: rgba(0, 5, 12, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0, 255, 136, 0.12);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 8px;
color: #dde;
font-family: 'JetBrains Mono', 'Rajdhani', monospace;
font-size: 0.7rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
}
.hz-glass-compact {
padding: 7px 10px;
}
.hz-glass-hdr {
display: flex;
align-items: center;
gap: 6px;
color: #00ff88;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(0,255,136,0.08);
}
.hz-glass-icon {
font-size: 0.75rem;
}
.hz-glass-tag {
margin-left: auto;
background: rgba(255,0,0,0.2);
color: #ff4444;
padding: 1px 6px;
border-radius: 3px;
font-size: 0.5rem;
letter-spacing: 1px;
animation: recBlink 2s ease-in-out infinite;
}
.hz-glass-foot {
color: rgba(255,255,255,0.3);
font-size: 0.6rem;
margin-top: 6px;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.05);
}
/* ─── Overlay positioning ─── */
.hz-overlay-left {
position: absolute;
top: 52px;
left: 12px;
z-index: 100;
width: 240px;
max-height: calc(100vh - 100px);
overflow-y: auto;
scrollbar-width: none;
}
.hz-overlay-left::-webkit-scrollbar { display: none; }
.hz-overlay-right {
position: absolute;
top: 52px;
right: 12px;
z-index: 100;
width: 320px;
max-height: calc(100vh - 100px);
overflow-y: auto;
scrollbar-width: none;
}
.hz-overlay-right::-webkit-scrollbar { display: none; }
.hz-overlay-bottom {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
}
/* ╔══════════════════════════════════════════════╗
║ OIL PRICE GRID ║
╚══════════════════════════════════════════════╝ */
.hz-oil-grid {
display: flex;
flex-direction: column;
gap: 4px;
}
.hz-oil-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 6px;
background: rgba(255,255,255,0.02);
border-radius: 3px;
border-left: 2px solid rgba(0,255,136,0.2);
}
.hz-oil-name {
color: rgba(255,255,255,0.5);
font-size: 0.55rem;
letter-spacing: 1.5px;
min-width: 50px;
}
.hz-oil-val {
color: #ffd700;
font-size: 0.85rem;
font-weight: 700;
font-family: 'Orbitron', monospace;
text-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.hz-oil-chg {
font-size: 0.6rem;
min-width: 65px;
text-align: right;
}
.hz-oil-chg.up, .hz-oil-change.up { color: #ff4444; }
.hz-oil-chg.down, .hz-oil-change.down { color: #00e676; }
.hz-oil-chg.flat { color: #888; }
/* Oil flash animation */
@keyframes oilFlash {
0% { text-shadow: 0 0 8px rgba(255,215,0,0.3); }
50% { text-shadow: 0 0 20px rgba(255,215,0,0.8); }
100% { text-shadow: 0 0 8px rgba(255,215,0,0.3); }
}
.hz-oil-flash { animation: oilFlash 0.5s ease-out; }
/* ╔══════════════════════════════════════════════╗
║ MARITIME STATUS GRID ║
╚══════════════════════════════════════════════╝ */
.hz-status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 6px;
}
.hz-sg {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
border: 1px solid rgba(0,255,136,0.05);
}
.hz-sg-num {
color: #00e5ff;
font-size: 1.1rem;
font-weight: 700;
font-family: 'Orbitron', monospace;
line-height: 1;
text-shadow: 0 0 10px rgba(0,229,255,0.3);
}
.hz-sg-lbl {
color: rgba(255,255,255,0.45);
font-size: 0.6rem;
margin-top: 3px;
letter-spacing: 0.5px;
}
.hz-status-bar {
display: flex;
justify-content: space-between;
font-size: 0.6rem;
color: rgba(255,255,255,0.35);
padding: 4px 2px 0;
border-top: 1px solid rgba(255,255,255,0.05);
}
.hz-status-bar b {
color: #00e5ff;
font-weight: 600;
}
.hz-bar-warn b { color: #ff6d00; }
.hz-bar-purple b { color: #e040fb; }
/* ─── Satellite mini ─── */
.hz-sat-info {
color: rgba(255,255,255,0.4);
font-size: 0.65rem;
letter-spacing: 0.5px;
}
/* ╔══════════════════════════════════════════════╗
║ FLIGHTS MINI PANEL ║
╚══════════════════════════════════════════════╝ */
.hz-flight-mini-badge {
margin-left: auto;
font-size: 0.5rem;
color: rgba(255,255,255,0.4);
}
.hz-flight-cnt {
color: #00e5ff;
font-size: 0.55rem;
margin-left: 4px;
}
.hz-flights-scroll {
max-height: 120px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,255,136,0.2) transparent;
}
.hz-flights-scroll::-webkit-scrollbar { width: 3px; }
.hz-flights-scroll::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.2); border-radius: 2px; }
/* Flight items within the mini panel */
.hz-flights-scroll .hz-fi {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 4px;
border-bottom: 1px solid rgba(255,255,255,0.03);
font-size: 0.55rem;
cursor: pointer;
transition: background 0.15s;
}
.hz-flights-scroll .hz-fi:hover {
background: rgba(0,255,136,0.05);
}
/* ╔══════════════════════════════════════════════╗
║ AI INTEL PANEL (RIGHT) ║
╚══════════════════════════════════════════════╝ */
.hz-glass-intel {
padding: 12px;
border-color: rgba(167, 139, 250, 0.15);
position: relative;
overflow: hidden;
}
.hz-glass-intel::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(167,139,250,0.008) 2px,
rgba(167,139,250,0.008) 4px
);
pointer-events: none;
z-index: 0;
}
.hz-glass-intel > * {
position: relative;
z-index: 1;
}
[lang="en"] .hz-glass-intel::after {
content: 'CLASSIFIED';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 3.5rem;
font-family: 'Impact', 'Arial Black', sans-serif;
color: rgba(167,139,250,0.018);
letter-spacing: 12px;
pointer-events: none;
z-index: 0;
white-space: nowrap;
text-transform: uppercase;
}
.hz-intel-head {
margin-bottom: 10px;
position: relative;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(167,139,250,0.08);
}
[lang="en"] .hz-intel-head::before {
content: '⬡ EYES ONLY';
position: absolute;
top: 2px; right: 0;
font-size: 0.35rem;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 2px;
color: rgba(255,60,60,0.2);
text-transform: uppercase;
z-index: 2;
}
.hz-intel-head::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167,139,250,0.2), rgba(255,60,60,0.15), transparent);
}
.hz-intel-title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.hz-intel-model-name {
color: #a78bfa;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
font-family: var(--fd);
text-shadow: 0 0 12px rgba(167,139,250,0.3);
line-height:1.4;
}
[lang="en"] .hz-intel-model-name {
font-size: 0.68rem;
letter-spacing: 3.5px;
}
.hz-intel-status-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.hz-intel-src {
color: rgba(255,255,255,0.2);
font-size: 0.45rem;
letter-spacing: 2px;
padding: 4px 0 6px;
border-bottom: 1px solid rgba(167,139,250,0.06);
font-family: var(--fd);
text-transform: uppercase;
line-height:1.5;
}
.hz-intel-src .hz-ai-q {
color: #a78bfa;
font-weight: 700;
margin-right: 2px;
}
.hz-src-brand {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
vertical-align: middle;
}
.hz-intel-body {
max-height: calc(100vh - 200px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(167,139,250,0.2) transparent;
display:flex;flex-direction:column;gap:10px;
}
.hz-intel-body::-webkit-scrollbar { width: 3px; }
.hz-intel-body::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.2); border-radius: 2px; }
/* ── Section Wrap: fixed label + scrollable content ── */
.hz-intel-section-wrap{
flex:0 1 auto;min-height:0;display:flex;flex-direction:column;
margin-top:0;
}
.hz-intel-section-wrap-geo{flex:0 1 auto}
.hz-intel-section-wrap-predict{flex:0 1 auto}
.hz-intel-scroll-box{
max-height:50vh;overflow-y:auto;min-height:0;
scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.22) transparent;
padding:8px 6px 4px 2px;
border-radius:14px;
border:1px solid rgba(122,146,196,.12);
background:linear-gradient(180deg, rgba(11,18,30,.92), rgba(9,14,24,.86));
box-shadow:inset 0 1px 0 rgba(255,255,255,.03), inset 0 -18px 32px rgba(0,0,0,.14);
}
.hz-intel-scroll-box::-webkit-scrollbar{width:3px}
.hz-intel-scroll-box::-webkit-scrollbar-thumb{background:rgba(167,139,250,.2);border-radius:2px}
.hz-pred-scroll-box{
max-height:40vh;
}
.hz-pred-placeholder{
color:rgba(138,43,226,.35);font-size:.65rem;text-align:center;padding:1.2rem .5rem;
font-family:var(--fd);letter-spacing:2px;
}
/* GEO cards unified (desktop + mobile): collapsed by default, click to expand */
.hz-intel-nav { display: none; }
.hz-ie-body {
max-height: 0;
overflow: hidden;
transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s;
opacity: 0;
}
.hz-intel-event.expanded .hz-ie-body {
max-height: 300px;
opacity: 1;
}
.hz-ie-arrow {
display: inline-flex;
margin-left: auto;
font-size: .58rem;
color: rgba(167,139,250,.5);
transition: transform .25s;
flex-shrink: 0;
}
.hz-intel-event.expanded .hz-ie-arrow {
transform: rotate(90deg);
color: #a78bfa;
}
.hz-intel-event.expanded {
background: rgba(167,139,250,0.06);
border-left-color: rgba(167,139,250,0.7);
}
.hz-geo-label,.hz-predict-label{min-height:44px;padding:0 14px;border-radius:14px;margin-bottom:8px}
.hz-geo-label{background:linear-gradient(90deg, rgba(31,84,156,.26), rgba(74,144,226,.08) 55%, rgba(8,14,24,.32));border:1px solid rgba(100,176,255,.18);box-shadow:0 10px 22px rgba(20,50,92,.18), inset 0 0 24px rgba(74,144,226,.05)}
.hz-geo-label .isl-icon{filter:drop-shadow(0 0 10px rgba(92,188,255,.35))}
.hz-geo-label .isl-txt{color:#d9eeff}
.hz-geo-label .hz-isl-tag{color:#8fd8ff;border-color:rgba(100,190,255,.24);background:linear-gradient(180deg, rgba(35,75,110,.48), rgba(12,28,45,.6));box-shadow:0 0 18px rgba(65,150,255,.12)}
.hz-predict-label{background:linear-gradient(90deg, rgba(118,58,180,.26), rgba(167,139,250,.08) 55%, rgba(8,14,24,.32));border:1px solid rgba(167,139,250,.18);box-shadow:0 10px 22px rgba(80,32,130,.18), inset 0 0 24px rgba(167,139,250,.05)}
.hz-intel-event{padding:.62rem .68rem .66rem;border-radius:12px;cursor:pointer;background:linear-gradient(180deg, rgba(16,24,38,.88), rgba(12,18,29,.82));border:1px solid rgba(96,166,235,.12);transition:all .25s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.12)}
.hz-intel-event:hover{background:linear-gradient(180deg, rgba(20,34,52,.94), rgba(14,22,36,.9));border-color:rgba(112,190,255,.26);transform:translateY(-1px)}
.hz-ie-head{display:flex;align-items:center;gap:.42rem;margin-bottom:.2rem}
.hz-ie-num{width:20px;height:20px;border-radius:999px;font-size:.54rem;box-shadow:0 0 12px rgba(92,188,255,.15)}
.hz-ie-title{font-family:var(--fb);font-size:.78rem;font-weight:700;color:#eff7ff;letter-spacing:.15px}
.hz-ie-detail{font-size:.65rem;color:rgba(214,228,246,.8);line-height:1.6;font-family:var(--fc)}
.hz-ie-meta{font-size:.54rem;color:rgba(170,192,220,.58);font-family:var(--fm);margin-top:.24rem}
.hz-pred-placeholder{color:rgba(188,167,255,.42);font-size:.7rem;text-align:center;padding:1.35rem .65rem;font-family:var(--fd);letter-spacing:2.2px}
.hz-ie-locate { display: inline-flex; }
.hz-ai-intel-summary {
color: rgba(255,255,255,0.88);
font-size: 0.78rem;
line-height: 1.65;
margin-bottom: 6px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(167,139,250,0.06), rgba(255,60,60,0.04));
border-radius: 6px;
border-left: 3px solid rgba(167,139,250,0.45);
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
position: relative;
overflow: visible;
word-break: break-word;
overflow-wrap: break-word;
}
.hz-ai-intel-summary::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(180deg, rgba(167,139,250,0.03) 0%, transparent 40%);
pointer-events: none;
}
.hz-intel-critical-flash {
border-left-color: rgba(255,50,50,0.6) !important;
animation: intelCritFlash 3s ease-in-out infinite;
}
@keyframes intelCritFlash {
0%, 100% { background: linear-gradient(135deg, rgba(167,139,250,0.05), rgba(255,60,60,0.03)); }
50% { background: linear-gradient(135deg, rgba(255,60,60,0.08), rgba(167,139,250,0.04)); box-shadow: inset 0 0 30px rgba(255,50,50,0.04); }
}
[lang="en"] .hz-ai-intel-summary {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 0.72rem;
line-height: 1.7;
letter-spacing: 0.2px;
}
.hz-ai-intel-events {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 6px;
}
.hz-ai-intel-ship {
color: rgba(255,255,255,0.45);
font-size: 0.7rem;
padding: 5px 8px;
background: rgba(0,255,136,0.03);
border-radius: 3px;
margin-bottom: 4px;
}
.hz-intel-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
border-top: 1px solid rgba(167,139,250,0.1);
margin-top: 4px;
}
.hz-intel-ts {
color: rgba(255,255,255,0.3);
font-size: 0.46rem;
font-family: var(--fd);
letter-spacing: 0.5px;
}
/* Intel event cards */
.hz-intel-ev {
display: flex;
gap: 8px;
padding: 6px 8px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
border-left: 2px solid;
font-size: 0.55rem;
cursor: pointer;
transition: background 0.15s;
}
.hz-intel-ev:hover {
background: rgba(255,255,255,0.05);
}
.hz-intel-ev-idx {
color: rgba(255,255,255,0.3);
font-size: 0.5rem;
min-width: 14px;
}
.hz-intel-ev-icon {
font-size: 0.7rem;
}
.hz-intel-ev-body {
flex: 1;
}
.hz-intel-ev-title {
color: rgba(255,255,255,0.8);
font-size: 0.55rem;
font-weight: 500;
margin-bottom: 2px;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
.hz-intel-ev-desc {
color: rgba(255,255,255,0.4);
font-size: 0.48rem;
line-height: 1.4;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
.hz-intel-ev-sev {
font-size: 0.45rem;
padding: 1px 4px;
border-radius: 2px;
margin-left: auto;
white-space: nowrap;
align-self: flex-start;
}
[lang="en"] .hz-intel-ev-title {
font-family: 'SF Pro Text', 'Inter', -apple-system, sans-serif;
letter-spacing: 0.3px;
}
[lang="en"] .hz-intel-ev-desc {
font-family: 'SF Pro Text', 'Inter', -apple-system, sans-serif;
}
/* ─── Intel Badges (reuse from before) ─── */
.hz-intel-badge {
font-size: 0.46rem;
padding: 3px 8px;
border-radius: 3px;
font-family: var(--fd);
letter-spacing: 1px;
text-transform: uppercase;
}
.hz-intel-loading-state {
background: rgba(255,165,0,0.08);
color: rgba(255,180,60,0.8);
border: 1px solid rgba(255,165,0,0.12);
animation: loadingPulse 2s ease-in-out infinite;
}
@keyframes loadingPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; border-color: rgba(255,165,0,0.25); }
}
.hz-intel-loading {
font-size: 0.46rem;
letter-spacing: 1.5px;
}
.hz-intel-ready-state {
background: rgba(0,255,136,0.08);
color: #00ff88;
border: 1px solid rgba(0,255,136,0.15);
}
.hz-intel-error-state {
background: rgba(255,0,0,0.08);
color: #ff4444;
border: 1px solid rgba(255,0,0,0.12);
}
.hz-intel-threat-badge {
font-size: 0.48rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 3px;
letter-spacing: 1.5px;
font-family: var(--fd);
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.06);
}
/* ─── Bottom Legend ─── */
.hz-bottom-legend {
display: flex;
gap: 12px;
padding: 5px 16px;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 20px;
border: 1px solid rgba(0,255,136,0.1);
}
.hz-lg {
display: flex;
align-items: center;
gap: 4px;
color: rgba(255,255,255,0.5);
font-size: 0.5rem;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.5px;
}
.hz-ldot2 {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
/* ─── API Status Badge (surveillance style) ─── */
.hz-surveillance .hz-api-badge {
font-size: 0.55rem;
padding: 2px 8px;
border-radius: 3px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 1px;
}
.hz-surveillance .hz-api-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
}
.hz-surveillance .hz-online {
background: #00ff88;
box-shadow: 0 0 6px #00ff88;
}
.hz-surveillance .hz-offline {
background: #ff4444;
}
.hz-surveillance .hz-api-offline {
background: rgba(255,68,68,0.1);
color: #ff8888;
}
.hz-surveillance .hz-live-badge {
color: #ff0000;
font-weight: 700;
animation: recBlink 1.5s infinite;
}
.hz-surveillance .hz-sim-badge {
color: #ffab00;
}
/* ─── Hide old hormuz styles that conflict ─── */
.hormuz-section { display: none !important; }
/* ╔══════════════════════════════════════════════╗
║ INTEL EVENT ITEMS ║
╚══════════════════════════════════════════════╝ */
.hz-intel-event {
padding: 7px 10px;
background: rgba(255,255,255,0.02);
border-radius: 5px;
border-left: 3px solid rgba(167,139,250,0.3);
margin-bottom: 5px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.hz-intel-event::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(167,139,250,0.1), transparent 60%);
}
.hz-intel-event:hover {
background: rgba(167,139,250,0.07);
border-left-color: rgba(167,139,250,0.7);
transform: translateX(2px);
box-shadow: -2px 0 12px rgba(167,139,250,0.08);
}
.hz-ie-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.hz-ie-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px; height: 16px;
border-radius: 3px;
color: #fff;
font-size: 0.45rem;
font-weight: 700;
flex-shrink: 0;
}
.hz-ie-icon {
font-size: 0.65rem;
}
.hz-ie-title {
color: rgba(255,255,255,0.9);
font-size: 0.72rem;
font-weight: 600;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
line-height: 1.45;
}
[lang="en"] .hz-ie-title {
font-family: 'SF Pro Display', 'Inter', -apple-system, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.2px;
}
.hz-ie-detail {
color: rgba(255,255,255,0.5);
font-size: 0.62rem;
line-height: 1.55;
padding-left: 22px;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
[lang="en"] .hz-ie-detail {
font-family: 'SF Pro Text', 'Inter', -apple-system, sans-serif;
font-size: 0.58rem;
}
.hz-ie-meta {
color: rgba(255,255,255,0.3);
font-size: 0.55rem;
padding-left: 22px;
margin-top: 2px;
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.8px;
}
/* ╔══════════════════════════════════════════════╗
║ FLIGHT ITEMS (surveillance compact) ║
╚══════════════════════════════════════════════╝ */
.hz-flight-item {
padding: 4px 6px;
border-bottom: 1px solid rgba(255,255,255,0.03);
cursor: pointer;
transition: background 0.15s;
}
.hz-flight-item:hover {
background: rgba(0,255,136,0.04);
}
.hz-fi-head {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.55rem;
}
.hz-fi-flag {
font-size: 0.6rem;
}
.hz-fi-fn {
font-weight: 600;
font-size: 0.55rem;
letter-spacing: 0.5px;
}
.hz-fi-route {
color: rgba(255,255,255,0.35);
font-size: 0.48rem;
margin-left: auto;
letter-spacing: 0.5px;
}
.hz-fi-meta {
display: flex;
gap: 8px;
font-size: 0.45rem;
color: rgba(255,255,255,0.25);
padding-left: 18px;
margin-top: 1px;
}
/* ─── Responsive: mobile ─── */
@media (max-width: 768px) {
/* Make overlays flow below map on mobile instead of overlapping */
.hz-surveillance { position: relative; display: flex; flex-direction: column; overflow: visible; height: auto; }
.hz-fullmap { min-height: 55vh; min-height: 55dvh; position: relative; }
.hz-overlay-left {
position: relative; top: auto; left: auto; width: 100%; max-height: none;
display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .4rem;
background: var(--bg2);
}
.hz-overlay-right {
position: relative; top: auto; right: auto; width: 100%; max-height: none;
padding: .4rem;
background: var(--bg2);
order: 2;
}
.hz-fullmap { order: 1; }
.hz-scanlines, .hz-vignette { order: 1; pointer-events: none; }
.hz-rec-bar { order: 1; background: rgba(2,6,14,.92) !important; }
/* Fix: social-bar inside Hormuz surveillance section — hide on mobile (full-screen map, no room for social UI) */
.hz-surveillance > .social-bar { display: none !important; }
.hz-overlay-left { order: 4; }
.hz-overlay-bottom { position: relative; bottom: auto; left: auto; transform: none; width: 100%; order: 5; }
/* ═══ FIX: MSRC bar must flow in layout, not absolute ═══ */
.hz-msrc-bar {
position: relative !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
order: 2;
width: 100%;
max-width: 100% !important;
margin: 0;
border-radius: 0;
box-sizing: border-box;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
z-index: 10;
border-left: none;
border-right: none;
background: rgba(8,12,18,.96);
padding: 6px 10px;
gap: 6px;
animation: none;
}
.hz-msrc-title {
border-right: none;
padding-right: 0;
}
.hz-msrc-sources {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px 8px;
}
/* ═══ FIX: Freshness clock must also flow ═══ */
.hz-freshness-clock {
position: relative !important;
top: auto !important;
right: auto !important;
transform: none !important;
order: 2;
width: 100%;
text-align: center;
padding: 3px 8px;
background: rgba(8,12,18,.9);
}
.hz-stale-badge {
position: relative !important;
order: 2;
}
.hz-overlay-right { order: 3; }
.hz-rec-center { display: flex; }
.hz-rec-bar { padding: 4px 8px; }
.hz-rec-subtitle { font-size: .65rem; letter-spacing: 2px; padding: 1px 6px; }
.hz-glass { padding: 6px 8px; font-size: 0.7rem; background:rgba(0,5,12,.96)!important; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hz-glass-intel { max-height: none; background:rgba(8,10,18,.97)!important; overflow: visible; }
.hz-intel-body { max-height: none; overflow: visible; }
.hz-intel-scroll-box{ max-height:32vh; }
.hz-pred-scroll-box{ max-height:35vh; }
/* Fix geo-intel text containment on mobile */
.hz-intel-event{ overflow:hidden; word-break:break-word; overflow-wrap:break-word; background:rgba(16,22,32,.95); margin-bottom:3px; border-radius:5px; }
.hz-ie-title{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.hz-ie-detail{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; font-size:.62rem; line-height:1.5; }
.hz-ie-meta{ font-size:.48rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hz-ie-entity{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hz-pred-card{ overflow:hidden; word-break:break-word; overflow-wrap:break-word; background:rgba(138,43,226,.06); margin-bottom:4px; }
.hz-pred-text{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.hz-pred-loc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hz-pred-evidence{ overflow:hidden; }
.hz-pred-ev-tag{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.hz-ai-intel-summary{ word-break:break-word; overflow-wrap:break-word; background:rgba(167,139,250,.06); }
.hz-oil-val { font-size: 0.75rem; }
.hz-sg-num { font-size: 0.95rem; }
.hz-sg-lbl { font-size: 0.55rem; }
.hz-bottom-legend { gap: 6px; padding: 3px 10px; justify-content: center; }
.hz-lg { font-size: 0.55rem; }
/* Corner brackets hidden on mobile */
.hz-corner { display: none; }
.hz-crosshair { display: none; }
/* ── Mobile: hide GEO-INTEL card images ── */
.hz-ie-img { display: none !important; }
/* ── Mobile: enlarge popup close button for touch ── */
.leaflet-popup-close-button {
width: 32px !important;
height: 32px !important;
font-size: 22px !important;
line-height: 30px !important;
padding: 0 !important;
top: 2px !important;
right: 2px !important;
color: #fff !important;
background: rgba(0,0,0,0.5) !important;
border-radius: 50% !important;
text-align: center !important;
z-index: 9999 !important;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:active {
background: rgba(255,0,0,0.5) !important;
color: #fff !important;
}
/* ── Mobile: constrain popup width ── */
.intel-popup-container .leaflet-popup-content-wrapper,
.flight-popup-container .leaflet-popup-content-wrapper,
.mil-flight-popup-container .leaflet-popup-content-wrapper {
max-width: calc(100vw - 40px) !important;
}
.leaflet-popup-content { margin: 8px !important; }
/* ── Mobile: popup image smaller ── */
.intel-popup-img { max-height: 90px; }
.intel-popup-img img { height: 90px; }
/* ── Mobile: prevent touch delay ── */
.leaflet-container { touch-action: manipulation; -webkit-touch-callout: none; }
/* ═══ MOBILE: allow page scroll through map when dragging is disabled ═══ */
.leaflet-container.hz-scroll-passthrough,
.leaflet-container.hz-scroll-passthrough.leaflet-touch-drag,
.leaflet-container.hz-scroll-passthrough.leaflet-touch-drag.leaflet-touch-zoom {
touch-action: pan-y pinch-zoom !important;
}
.intel-popup-social { flex-wrap: wrap; gap: 4px; }
.ips-btn { padding: 6px 8px; font-size: .65rem; min-height: 36px; }
/* ═══ MOBILE INTEL PANEL — COMPACT + SCROLL-TO-MAP ═══ */
/* ── Header: compact to save space ── */
.hz-intel-head {
margin-bottom: 4px;
}
.hz-intel-title-row {
margin-bottom: 2px;
gap: 5px;
}
.hz-intel-model-name {
font-size: .62rem;
letter-spacing: 2px;
line-height: 1.2;
}
.hz-intel-status-row {
margin-bottom: 2px;
gap: 4px;
}
.hz-intel-src {
font-size: .38rem;
padding: 2px 0 3px;
letter-spacing: 1.5px;
line-height: 1.3;
}
.hz-intel-urgency {
font-size: .48rem;
padding: 2px 0;
}
/* ── Summary: scrollable box like GEO/Predict ── */
.hz-ai-intel-summary {
max-height: 15vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 10px;
font-size: .72rem;
line-height: 1.6;
margin-bottom: 3px;
scrollbar-width: thin;
scrollbar-color: rgba(167,139,250,.2) transparent;
}
.hz-ai-intel-summary::-webkit-scrollbar { width: 2px; }
.hz-ai-intel-summary::-webkit-scrollbar-thumb { background: rgba(167,139,250,.25); border-radius: 2px; }
.hz-ai-intel-summary::after { display: none; }
.hz-ai-intel-summary::before { display: none; }
/* ── Tactical Ops Command Nav Bar — STICKY on mobile ── */
.hz-intel-nav {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 4px 0;
border-radius: 0;
overflow: visible;
border: none;
border-bottom: 1px solid rgba(255,60,60,.18);
border-top: 1px solid rgba(255,60,60,.12);
background: linear-gradient(180deg, rgba(10,8,20,.97), rgba(20,12,30,.98));
box-shadow: 0 2px 16px rgba(0,0,0,.5), 0 0 12px rgba(255,40,40,.06);
position: sticky;
top: 0;
z-index: 800;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hz-intel-nav::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,60,60,.3), rgba(167,139,250,.3), transparent);
}
.ops-nav-row {
display: flex;
gap: 0;
}
.ops-nav-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: 7px 2px;
font-size: .44rem;
font-family: var(--fd);
font-weight: 800;
letter-spacing: .8px;
color: rgba(255,255,255,.5);
background: transparent;
border: none;
border-right: 1px solid rgba(255,255,255,.04);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all .2s;
text-transform: uppercase;
position: relative;
}
.ops-nav-btn:last-child { border-right: none; }
.ops-nav-btn .ops-icon { font-size: .6rem; }
.ops-nav-btn .ops-lbl { white-space: nowrap; }
.ops-nav-btn .nav-count {
font-size: .38rem;
background: rgba(167,139,250,.2);
color: #a78bfa;
padding: 0 4px;
border-radius: 6px;
min-width: 12px;
text-align: center;
line-height: 1.4;
}
.ops-nav-btn:active,
.ops-nav-btn.active {
background: rgba(167,139,250,.15);
color: #c4b5fd;
}
.ops-nav-btn.active::after {
content: '';
position: absolute; bottom: 0; left: 20%; right: 20%; height: 2px;
background: #a78bfa;
border-radius: 2px;
animation: ops-glow .6s ease;
}
.ops-nav-red:active, .ops-nav-red.active {
background: rgba(255,60,60,.12);
color: #ff6b6b;
}
.ops-nav-red.active::after { background: #ff4444; }
.ops-nav-purple:active, .ops-nav-purple.active {
background: rgba(167,139,250,.15);
color: #c4b5fd;
}
.ops-nav-row-top { border-bottom: 1px solid rgba(255,255,255,.03); }
@keyframes ops-glow {
0% { opacity: 0; transform: scaleX(0); }
50% { opacity: 1; transform: scaleX(1.2); }
100% { opacity: 1; transform: scaleX(1); }
}
/* ── GEO card: expand/collapse body ── */
.hz-ie-body {
max-height: 0;
overflow: hidden;
transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s;
opacity: 0;
}
.hz-intel-event.expanded .hz-ie-body {
max-height: 300px;
opacity: 1;
}
.hz-ie-arrow {
margin-left: auto;
font-size: .55rem;
color: rgba(167,139,250,.5);
transition: transform .25s;
flex-shrink: 0;
}
.hz-intel-event.expanded .hz-ie-arrow {
transform: rotate(90deg);
color: #a78bfa;
}
.hz-intel-event.expanded {
background: rgba(167,139,250,.06);
border-left-color: rgba(167,139,250,.7);
}
/* Locate button inside expanded card */
.hz-ie-locate {
display: inline-flex;
align-items: center;
gap: 3px;
margin-top: 4px;
padding: 4px 10px;
font-size: .5rem;
font-family: var(--fd);
font-weight: 700;
letter-spacing: 1px;
color: #a78bfa;
background: rgba(167,139,250,.1);
border: 1px solid rgba(167,139,250,.2);
border-radius: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: all .2s;
}
.hz-ie-locate:active {
background: rgba(167,139,250,.25);
transform: scale(.95);
}
/* Section labels: tighter */
.hz-intel-section-label {
padding: 7px 10px 6px;
font-size: .65rem;
letter-spacing: 1.5px;
margin-top: 2px;
}
.hz-isl-tag {
font-size: .42rem;
padding: 1px 6px;
}
/* GEO-INTEL scroll box: compact */
.hz-intel-scroll-box {
max-height: 32vh;
}
.hz-pred-scroll-box {
max-height: 35vh;
}
/* Mobile: show nav, arrow, locate */
.hz-intel-nav { display: flex; flex-direction: column; }
.hz-ie-arrow { display: inline-flex; }
.hz-ie-locate { display: inline-flex; }
/* Mobile GEO card: show tap-to-map hint */
.hz-intel-event::after {
content: '📍 TAP → MAP';
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
font-size: .32rem;
font-family: var(--fd);
font-weight: 700;
letter-spacing: .6px;
color: rgba(167,139,250,.35);
pointer-events: none;
transition: opacity .2s;
}
.hz-intel-event.expanded::after {
opacity: 0;
}
/* GEO event cards: ultra-compact for mobile */
.hz-intel-event {
padding: 6px 8px;
margin-bottom: 3px;
border-radius: 5px;
-webkit-tap-highlight-color: transparent;
transition: all .2s ease;
position: relative;
cursor: pointer;
}
/* Compact head row */
.hz-ie-head {
gap: 4px;
margin-bottom: 2px;
}
.hz-ie-num {
width: 16px; height: 16px;
font-size: .5rem;
}
.hz-ie-icon {
font-size: .7rem;
}
.hz-ie-title {
font-size: .68rem;
-webkit-line-clamp: 1;
line-height: 1.4;
}
.hz-ie-sev-badge {
font-size: .7rem;
}
/* Detail: 2 lines max */
.hz-ie-detail {
-webkit-line-clamp: 2;
font-size: .62rem;
line-height: 1.5;
margin-bottom: 1px;
}
.hz-ie-meta {
font-size: .48rem;
}
.hz-ie-entity-inline {
font-size: .5rem;
margin-bottom: 1px;
}
/* Prediction cards: compact */
.hz-pred-card {
padding: 6px 8px;
margin-bottom: 4px;
border-radius: 5px;
-webkit-tap-highlight-color: transparent;
transition: transform .15s, box-shadow .15s;
}
.hz-pred-card:active {
transform: scale(.98);
box-shadow: 0 0 12px rgba(138,43,226,.35);
}
.hz-pred-head {
gap: 4px;
margin-bottom: 2px;
}
.hz-pred-num {
width: 16px; height: 16px;
font-size: .5rem;
}
.hz-pred-conf {
font-size: .46rem;
}
.hz-pred-tw {
font-size: .44rem;
}
.hz-pred-text {
font-size: .68rem;
line-height: 1.5;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 2px;
}
.hz-pred-loc {
font-size: .48rem;
margin-bottom: 2px;
}
.hz-pred-evidence {
gap: 2px;
margin-top: 2px;
}
.hz-pred-ev-tag {
font-size: .46rem;
max-width: 100%;
}
.hz-pred-impact {
font-size: .5rem;
}
.hz-pred-meta {
font-size: .44rem;
}
.hz-pred-anchor {
font-size: .52rem !important;
}
/* Map-return button: sticky hint when scrolled past map */
.hz-scroll-to-map-btn {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
background: linear-gradient(135deg, rgba(167,139,250,.9), rgba(138,43,226,.85));
color: #fff;
border: 1px solid rgba(255,255,255,.15);
border-radius: 20px;
padding: 8px 18px;
font-size: .7rem;
font-family: var(--fd);
letter-spacing: 1px;
font-weight: 700;
box-shadow: 0 4px 20px rgba(138,43,226,.4), 0 0 40px rgba(138,43,226,.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
animation: scrollBtnPulse 2s ease-in-out infinite;
display: none;
}
.hz-scroll-to-map-btn.visible {
display: flex;
align-items: center;
gap: 6px;
}
@keyframes scrollBtnPulse {
0%, 100% { box-shadow: 0 4px 20px rgba(138,43,226,.4); }
50% { box-shadow: 0 4px 28px rgba(138,43,226,.6), 0 0 50px rgba(138,43,226,.2); }
}
/* Intel section wrap: tighter gaps */
.hz-intel-section-wrap {
margin-top: 3px;
}
.hz-intel-body {
gap: 0;
}
}
@media (max-width: 480px) {
.hz-fullmap { min-height: 45vh; min-height: 45dvh; }
.hz-overlay-left { grid-template-columns: 1fr; padding: .3rem; }
.hz-overlay-right { padding: .3rem; }
/* Show all panels on mobile, just make them compact */
.hz-glass-compact { font-size: 0.65rem; }
/* ── 480px: further popup adjustments ── */
.intel-popup { min-width: 180px; font-size: .7rem; }
.intel-popup-body { font-size: .65rem; }
.intel-popup-img { max-height: 75px; }
.intel-popup-img img { height: 75px; }
.leaflet-popup-close-button {
width: 36px !important;
height: 36px !important;
font-size: 24px !important;
line-height: 34px !important;
}
/* Ultra-compact summary: shorter scroll on tiny screens */
.hz-ai-intel-summary {
max-height: 12vh;
font-size: .68rem;
padding: 6px 8px;
}
/* Even more compact cards */
.hz-intel-event { padding: 5px 7px; margin-bottom: 2px; }
.hz-ie-title { font-size: .64rem; }
.hz-ie-detail { font-size: .58rem; -webkit-line-clamp: 2; }
.hz-pred-card { padding: 5px 7px; margin-bottom: 3px; }
.hz-pred-text { font-size: .64rem; -webkit-line-clamp: 2; }
/* Scroll button smaller */
.hz-scroll-to-map-btn {
font-size: .62rem;
padding: 7px 14px;
bottom: 12px;
border-radius: 16px;
}
/* Scroll boxes: shorter on tiny phones */
.hz-intel-scroll-box { max-height: 28vh; }
.hz-pred-scroll-box { max-height: 30vh; }
}
/* ═══ INLINE SOCIAL BAR (for timeline/leader sections) ═══ */
.social-bar-inline {
border-top: 1px solid rgba(255,255,255,.04);
padding: 8px 10px;
margin-top: 8px;
background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(10,14,20,.2) 100%);
}
.social-bar-inline .social-bar-inner { gap: 6px; justify-content: flex-start; }
.social-bar-inline .social-btn { font-size: .68rem; }
.social-bar-inline .sb-svg { width: 14px; height: 14px; }
/* ═══════════════════════════════════════════════════════
SOCIAL ENGAGEMENT UI — PREMIUM GLOW DESIGN
═══════════════════════════════════════════════════════ */
/* Social bar — bottom of each panel */
.social-bar {
position: relative;
z-index: 10;
border-top: 1px solid rgba(200,164,90,.06);
background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(10,14,20,.35) 100%);
padding: 8px 12px;
margin-top: 8px;
}
/* Hide social bar inside Hormuz satellite map — overlaps REC bar and map UI */
.hz-surveillance > .social-bar { display: none !important; }
.social-bar-inner {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.social-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;
background: rgba(255,255,255,.03);
color: rgba(200,196,188,.8);
font-size: .72rem;
cursor: pointer;
transition: all .3s cubic-bezier(.4,0,.2,1);
font-family: var(--fb);
white-space: nowrap;
backdrop-filter: blur(6px);
position: relative;
overflow: hidden;
}
/* Shimmer bg on hover */
.social-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.social-btn:hover::before { opacity: 1; }
/* ── Like button ── */
.sb-like::before { background: linear-gradient(135deg, rgba(255,80,100,.1), rgba(255,60,80,.04)); }
.sb-like:hover {
border-color: rgba(255,80,100,.35);
color: #ff6b7f;
box-shadow: 0 0 16px rgba(255,80,100,.15), 0 2px 8px rgba(0,0,0,.2);
transform: translateY(-2px);
}
.sb-like:hover .sb-svg { color: #ff6b7f; filter: drop-shadow(0 0 4px rgba(255,80,100,.4)); }
.sb-like:active { transform: scale(.93); }
.sb-like.liked {
background: linear-gradient(135deg, rgba(255,70,90,.15), rgba(255,40,60,.08));
border-color: rgba(255,70,90,.4);
color: #ff5070;
box-shadow: 0 0 12px rgba(255,70,90,.2);
}
.sb-like.liked .sb-svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,70,90,.5)); }
.sb-like.liked .sb-count { color: #ff5070; }
/* ── Comment button ── */
.sb-comment::before { background: linear-gradient(135deg, rgba(0,200,255,.08), rgba(0,180,230,.03)); }
.sb-comment:hover {
border-color: rgba(0,200,255,.3);
color: #4dd9ff;
box-shadow: 0 0 16px rgba(0,200,255,.12), 0 2px 8px rgba(0,0,0,.2);
transform: translateY(-2px);
}
.sb-comment:hover .sb-svg { color: #4dd9ff; filter: drop-shadow(0 0 4px rgba(0,200,255,.35)); }
.sb-comment:active { transform: scale(.93); }
/* ── Forward/Share button ── */
.sb-forward::before { background: linear-gradient(135deg, rgba(200,164,90,.1), rgba(255,200,50,.04)); }
.sb-forward {
border-color: rgba(200,164,90,.2);
color: var(--gold);
}
.sb-forward:hover {
border-color: rgba(200,164,90,.45);
color: #e8c84a;
box-shadow: 0 0 16px rgba(200,164,90,.18), 0 2px 8px rgba(0,0,0,.2);
transform: translateY(-2px);
}
.sb-forward:hover .sb-svg { color: #e8c84a; filter: drop-shadow(0 0 4px rgba(200,164,90,.4)); }
.sb-forward:active { transform: scale(.93); }
/* Common sub-elements */
.sb-svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .75; transition: all .3s; }
.social-btn:hover .sb-svg { opacity: 1; }
.sb-count {
font-size: .62rem;
color: rgba(200,196,188,.5);
font-family: var(--fm);
letter-spacing: .5px;
transition: color .3s;
}
.social-btn:hover .sb-count { color: inherit; opacity: .8; }
.sb-label {
font-size: .65rem;
letter-spacing: .5px;
font-weight: 500;
transition: color .3s;
}
/* Heart burst animation */
.heart-burst {
position: absolute;
font-size: 1.5rem;
pointer-events: none;
animation: heartFloat .8s ease-out forwards;
z-index: 100;
left: 30px;
top: -5px;
}
@keyframes heartFloat {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-40px) scale(1.5); }
}
/* ═══ COMMENT OVERLAY — v2 WAR ROOM INTEL EXCHANGE ═══ */
.comment-overlay {
position: fixed;
inset: 0;
z-index: 60000;
background: rgba(0,0,0,.65);
backdrop-filter: blur(8px);
display: flex;
align-items: flex-end;
justify-content: center;
animation: cmt2FadeIn .25s;
}
@keyframes cmt2FadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Modal Container ── */
.cmt2-modal {
width: 100%;
max-width: 580px;
max-height: 80vh;
background: linear-gradient(180deg, #111820 0%, #0a0f16 100%);
border-top: 2px solid var(--gold, #c8a45a);
border-radius: 18px 18px 0 0;
display: flex;
flex-direction: column;
animation: cmt2SlideUp .35s cubic-bezier(.22,1,.36,1);
box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 0 60px rgba(200,164,90,.06);
}
@keyframes cmt2SlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* ── Header ── */
.cmt2-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 12px;
border-bottom: 1px solid rgba(200,164,90,.1);
background: linear-gradient(90deg, rgba(200,164,90,.06) 0%, transparent 60%);
}
.cmt2-header-left {
display: flex; align-items: center; gap: 10px;
}
.cmt2-header-icon {
font-size: 1.15rem;
animation: cmt2Radar 2s ease-in-out infinite;
}
@keyframes cmt2Radar { 0%,100% { opacity:.7; transform:scale(1); } 50% { opacity:1; transform:scale(1.15); } }
.cmt2-header-info { display: flex; flex-direction: column; }
.cmt2-title {
font-family: var(--fb);
font-size: .82rem;
color: var(--gold, #c8a45a);
font-weight: 600;
line-height: 1.2;
}
.cmt2-subtitle {
font-family: var(--fd, 'Orbitron');
font-size: .48rem;
color: rgba(200,164,90,.45);
letter-spacing: .2em;
text-transform: uppercase;
margin-top: 1px;
}
.cmt2-header-right {
display: flex; align-items: center; gap: 8px;
}
.cmt2-live-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #4aff7a;
box-shadow: 0 0 8px rgba(74,255,122,.5);
animation: cmt2Blink 1.5s infinite;
}
@keyframes cmt2Blink { 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.cmt2-count {
font-family: var(--fm);
font-size: .68rem;
color: var(--txt3, #7a776e);
}
.cmt2-close {
background: none; border: none;
color: var(--txt3);
font-size: 1.1rem; cursor: pointer;
padding: 4px 6px; border-radius: 6px;
transition: all .2s;
}
.cmt2-close:hover { color: var(--red, #c43c3c); background: rgba(196,60,60,.1); }
/* ── Comment List ── */
.cmt2-list {
flex: 1;
overflow-y: auto;
padding: 6px 14px 8px;
scrollbar-width: thin;
scrollbar-color: rgba(200,164,90,.12) transparent;
}
.cmt2-list::-webkit-scrollbar { width: 4px; }
.cmt2-list::-webkit-scrollbar-thumb { background: rgba(200,164,90,.15); border-radius: 4px; }
.cmt2-empty {
text-align: center; padding: 40px 20px;
color: var(--txt3); font-size: .82rem;
}
.cmt2-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: .4; }
/* ── Single Comment Item ── */
.cmt2-item {
display: flex;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,.03);
animation: cmt2ItemIn .35s ease-out both;
position: relative;
}
@keyframes cmt2ItemIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
.cmt2-item:last-child { border-bottom: none; }
/* Pinned / Hot */
.cmt2-pinned {
background: linear-gradient(135deg, rgba(255,80,50,.04), rgba(255,170,0,.03));
border: 1px solid rgba(255,140,60,.1);
border-radius: 10px;
padding: 12px 10px;
margin-bottom: 4px;
border-bottom: none;
}
.cmt2-pinned::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #ff6a3d, #c8a45a);
border-radius: 3px 0 0 3px;
}
.cmt2-pin-badge {
font-size: .55rem;
background: linear-gradient(135deg, rgba(255,100,50,.15), rgba(255,170,0,.1));
color: #ff8844;
padding: 1px 6px;
border-radius: 3px;
font-family: var(--fd, 'Orbitron');
letter-spacing: .06em;
border: 1px solid rgba(255,140,60,.15);
animation: cmt2PinGlow 2s ease-in-out infinite;
}
@keyframes cmt2PinGlow {
0%,100%{ box-shadow: 0 0 4px rgba(255,140,60,.1); }
50%{ box-shadow: 0 0 12px rgba(255,140,60,.25); }
}
/* Avatar */
.cmt2-avatar {
width: 32px; height: 32px;
flex-shrink: 0;
font-size: 1.3rem;
display: flex; align-items: center; justify-content: center;
}
.cmt2-avatar img {
width: 32px; height: 32px;
border-radius: 50%; object-fit: cover;
border: 1.5px solid rgba(200,164,90,.25);
}
/* Meta */
.cmt2-body { flex: 1; min-width: 0; }
.cmt2-meta {
display: flex; align-items: center; gap: 6px;
margin-bottom: 3px; flex-wrap: wrap;
}
.cmt2-author {
font-size: .7rem;
color: var(--gold, #c8a45a);
font-family: var(--fm);
font-weight: 600;
}
.cmt2-time {
font-size: .55rem;
color: var(--txt3);
font-family: var(--fm);
margin-left: auto;
}
/* Text */
.cmt2-text {
font-size: .78rem;
color: var(--txt, #e8e4dc);
line-height: 1.6;
word-break: break-word;
font-family: var(--fb);
}
.cmt2-reply-hint {
font-size: .68rem;
color: var(--txt3);
margin-right: 2px;
}
.cmt2-reply-hint b { color: rgba(200,164,90,.7); }
/* Quote block */
.cmt2-quote-block {
background: rgba(200,164,90,.04);
border-left: 2px solid rgba(200,164,90,.25);
padding: 5px 8px;
border-radius: 0 6px 6px 0;
margin-bottom: 5px;
font-size: .68rem;
line-height: 1.45;
color: var(--txt3);
}
.cmt2-quote-author {
color: rgba(200,164,90,.6);
font-weight: 600;
font-family: var(--fm);
}
.cmt2-quote-text { font-style: italic; }
/* Action Buttons */
.cmt2-actions {
display: flex; gap: 2px; margin-top: 5px;
}
.cmt2-act-btn {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none;
color: var(--txt3);
font-size: .6rem;
cursor: pointer;
padding: 3px 8px;
border-radius: 6px;
transition: all .2s;
font-family: var(--fb);
}
.cmt2-act-btn:hover {
background: rgba(255,255,255,.05);
color: var(--txt, #e8e4dc);
}
.cmt2-act-btn svg {
opacity: .5; transition: all .2s;
}
.cmt2-act-btn:hover svg { opacity: 1; }
/* Like button states */
.cmt2-like-btn.has-likes { color: var(--gold, #c8a45a); }
.cmt2-like-btn.has-likes svg { stroke: var(--gold); opacity: .8; }
.cmt2-like-btn:hover { color: #ff8844; }
.cmt2-like-btn:hover svg { stroke: #ff8844; }
/* Reply button */
.cmt2-reply-btn:hover { color: #4dd9ff; }
.cmt2-reply-btn:hover svg { stroke: #4dd9ff; }
/* Quote button */
.cmt2-quote-btn:hover { color: var(--gold); }
.cmt2-quote-btn:hover svg { stroke: var(--gold); }
/* ── Input Area ── */
.cmt2-input-area {
border-top: 1px solid rgba(200,164,90,.08);
background: rgba(0,0,0,.25);
padding: 0;
}
.cmt2-reply-tag {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 14px;
background: rgba(200,164,90,.04);
border-bottom: 1px solid rgba(200,164,90,.06);
font-size: .65rem;
color: var(--txt3);
font-family: var(--fb);
}
.crt-text b { color: var(--gold); }
.crt-text i { color: var(--txt2); }
.crt-cancel {
background: none; border: none;
color: var(--txt3); font-size: .8rem;
cursor: pointer; padding: 0 4px;
transition: color .2s;
}
.crt-cancel:hover { color: var(--red); }
.cmt2-input-row {
display: flex; gap: 8px;
padding: 10px 14px 12px;
align-items: center;
}
.cmt2-input {
flex: 1;
background: rgba(255,255,255,.04);
border: 1px solid rgba(200,164,90,.1);
border-radius: 22px;
padding: 9px 16px;
color: var(--txt);
font-size: .78rem;
font-family: var(--fb);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.cmt2-input::placeholder { color: var(--txt3); }
.cmt2-input:focus {
border-color: rgba(200,164,90,.35);
box-shadow: 0 0 12px rgba(200,164,90,.08);
}
.cmt2-send {
width: 38px; height: 38px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--gold, #c8a45a), #dbb96e);
color: #0a0f16;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all .25s;
box-shadow: 0 2px 12px rgba(200,164,90,.2);
}
.cmt2-send:hover {
transform: scale(1.08);
box-shadow: 0 4px 20px rgba(200,164,90,.35);
}
.cmt2-send:active { transform: scale(.92); }
/* keep legacy overlay for backward compat */
.comment-modal { display: none; }
/* ═══ SHARE OVERLAY ═══ */
.share-overlay {
position: fixed;
inset: 0;
z-index: 199999;
background: rgba(0,0,0,.65);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn .2s;
}
.share-modal {
width: 90%;
max-width: 480px;
background: linear-gradient(180deg, #1a2030 0%, #0e1420 100%);
border: 1px solid rgba(255,170,0,.2);
border-radius: 16px;
overflow: hidden;
animation: scaleIn .3s ease-out;
}
@keyframes scaleIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.share-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,.06);
background: linear-gradient(90deg, rgba(255,170,0,.08) 0%, transparent 100%);
}
.share-title { font-family: var(--fn); font-size: .9rem; color: var(--gold); }
.share-close { background: none; border: none; color: var(--txt3); font-size: 1.2rem; cursor: pointer; }
.share-close:hover { color: var(--red); }
.share-body { padding: 16px; }
.share-loading {
text-align: center;
padding: 30px;
color: var(--txt2);
}
.share-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(255,170,0,.2);
border-top-color: var(--gold);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.share-loading p { margin: 4px 0; font-size: .78rem; }
.share-result { }
.share-headline {
font-size: 1.1rem;
font-weight: 700;
color: var(--gold);
line-height: 1.5;
margin-bottom: 10px;
font-family: var(--fn);
text-shadow: 0 0 12px rgba(255,170,0,.15);
}
.share-text-content {
font-size: .9rem;
color: var(--txt1);
line-height: 1.7;
margin-bottom: 10px;
font-family: var(--fn);
}
.share-hook {
font-size: .88rem;
color: rgba(255,170,0,.9);
font-weight: 600;
margin-bottom: 12px;
font-family: var(--fn);
}
.share-link {
font-size: .82rem;
color: var(--gold);
word-break: break-all;
margin-bottom: 14px;
padding: 8px 12px;
background: rgba(255,170,0,.08);
border-radius: 6px;
border: 1px solid rgba(255,170,0,.2);
}
.share-link a { color: var(--gold); text-decoration: underline; }
.share-link-label { font-weight: 700; }
/* ── Platform share buttons row ── */
.share-platforms {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.sp-btn {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .25s;
font-size: 0;
}
.sp-btn:hover { transform: scale(1.15); }
.sp-x:hover { background: #000; border-color: #fff; }
.sp-reddit:hover { background: #ff4500; border-color: #ff4500; }
.sp-tg:hover { background: #0088cc; border-color: #0088cc; }
.sp-li:hover { background: #0a66c2; border-color: #0a66c2; }
.sp-wa:hover { background: #25d366; border-color: #25d366; }
.share-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.share-actions button {
padding: 8px 18px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.1);
font-size: .75rem;
cursor: pointer;
font-family: var(--fn);
transition: all .2s;
}
.share-copy-btn { background: var(--gold); color: #000; border-color: var(--gold); font-weight: 600; flex: 1; }
.share-copy-btn:hover { background: #ffcc00; }
.share-regen-btn { background: rgba(255,255,255,.05); color: var(--txt2); }
.share-regen-btn:hover { background: rgba(255,255,255,.1); }
.share-error {
text-align: center;
padding: 20px;
color: var(--red);
font-size: .8rem;
}
/* ═══════════════════════════════════════════════════════
MOBILE RESPONSIVE — Full Adaptation
═══════════════════════════════════════════════════════ */
/* Tablet breakpoint */
@media (max-width: 1024px) {
.dual-panel {
grid-template-columns: 1fr !important;
gap: 0;
}
.panel-intel {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
order: 2;
max-height: 60vh;
}
.panel-compare {
order: 1;
width: 100% !important;
}
.topbar {
flex-wrap: wrap;
padding: 6px 10px;
gap: 4px;
}
.topbar-center {
order: 3;
width: 100%;
text-align: center;
}
.force-grid { grid-template-columns: 1fr !important; }
.risk-matrix-grid { grid-template-columns: 1fr !important; }
.stat-hero-row {
grid-template-columns: repeat(2, 1fr) !important;
}
.model-detail-modal {
width: 95vw !important;
max-width: 95vw !important;
margin: 10px;
}
}
/* Mobile breakpoint */
@media (max-width: 768px) {
:root {
--panel-pad: 8px;
}
body { font-size: 14px; }
/* Globe: fullscreen on mobile too, toggle button repositioned */
.hz-dim-toggle {
bottom: 56px;
left: 8px;
padding: 6px 10px;
font-size: 10px;
gap: 4px;
}
.hz-dim-toggle .hz-dim-icon {
font-size: 14px;
}
.hz-globe-full-hud {
top: 8px;
}
.hz-globe-full-hud .hz-globe-full-label {
font-size: 7px;
letter-spacing: 1px;
}
.hz-globe-full-hud .hz-globe-full-count {
font-size: 8px;
padding: 1px 5px;
}
.topbar {
flex-wrap: wrap;
padding: 6px 8px;
gap: 2px;
}
.topbar-left { gap: 6px; }
.logo-txt { font-size: .55rem; }
.theater-label { font-size: .55rem; }
.topbar-right {
gap: 4px;
}
.refresh-btn {
padding: 4px 8px;
font-size: .6rem;
}
.auth-btn {
padding: 4px 8px;
font-size: .6rem;
}
.q-badge { display: none; }
.ticker-bar {
font-size: .65rem;
padding: 3px 8px;
}
/* Dual panel → single column */
.dual-panel {
grid-template-columns: 1fr !important;
padding: 0 4px;
}
.panel-intel,
.panel-compare {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-radius: 8px;
}
.panel-intel {
order: 2;
max-height: none;
}
.panel-compare {
order: 1;
}
.panel-header {
flex-wrap: wrap;
padding: 6px 8px;
gap: 4px;
}
.ph-title { font-size: .7rem; }
.panel-compare .ph-title { font-size: .9rem; letter-spacing: 1.5px; }
.model-indicators { font-size: .55rem; gap: 3px; }
.mi { padding: 2px 6px; }
/* Dashboard */
.stat-hero-row {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.stat-hero { padding: 8px !important; }
.stat-hero-icon { font-size: 1rem; }
.stat-hero-num { font-size: 1.3rem; }
.stat-hero-label { font-size: .55rem; }
.threat-status-bar {
grid-template-columns: repeat(2, 1fr) !important;
gap: 4px;
}
.esc-gauge { padding: 8px; }
.esc-gauge-title { font-size: .7rem; }
.force-header { flex-wrap: wrap; gap: 4px; padding: 6px; }
.force-side { font-size: .65rem; }
.force-vs { font-size: .8rem; }
.force-grid { grid-template-columns: 1fr !important; gap: 6px; }
.force-card { padding: 8px; }
/* Comparison tables */
.risk-matrix-grid { grid-template-columns: 1fr !important; }
.rmc-bars { flex-direction: column; }
/* Compare tables */
.compare-tables { font-size: .7rem; }
.wgt-row { flex-direction: column; gap: 4px; }
.wgt-cell { min-width: 0; }
/* Leaders */
.ldr2-card { padding: 8px; }
.ldr2-name { font-size: .78rem; }
.ldr2-pred { padding: 6px; }
/* Model detail */
.model-detail-modal {
width: 98vw !important;
max-width: 98vw !important;
height: 90vh !important;
margin: 5vh 1vw;
border-radius: 12px;
}
.mdm-header { padding: 8px 12px; }
.mdm-title { font-size: .8rem; }
/* Model detail bar */
.model-detail-bar {
flex-wrap: wrap;
gap: 4px;
padding: 8px;
}
.mdb-btn { padding: 6px 10px; font-size: .6rem; }
.mdb-label { font-size: .6rem; width: 100%; }
/* Chat */
.chat-section-inline { padding: 8px; }
.chat-msgs { max-height: 200px; }
.chat-row textarea { font-size: .75rem; }
/* News items */
.news-card { padding: 8px; }
.news-card-title { font-size: .75rem; }
/* Social bar */
.social-bar { padding: 4px 6px; }
.social-btn { padding: 4px 8px; font-size: .62rem; }
.sb-svg { width: 12px; height: 12px; }
.sb-forward .sb-label { display: none; }
/* Force AI commentary */
.force-ai-commentary { padding: .45rem .55rem; }
.fac-text { font-size: .72rem; }
.fac-header { font-size: .6rem; }
/* Footer */
.wfooter { font-size: .55rem; padding: 6px 8px; flex-wrap: wrap; gap: 4px; }
/* Hormuz section — auto height on mobile for flow layout */
.hz-surveillance { min-height: auto; height: auto; }
/* Don't set fixed overlay widths — let flow layout from earlier breakpoint handle it */
}
/* Small phone */
@media (max-width: 480px) {
/* Don't set fixed overlay widths — let full-width flow from 768px handle it */
.hz-intel-body { max-height: none; overflow: visible; }
.hz-rec-center { display: none; }
.stat-hero-row {
grid-template-columns: 1fr 1fr !important;
}
.force-header .force-name { font-size: .55rem; }
.force-vs { font-size: .65rem; }
/* Comment/Share modals full width */
.cmt2-modal { max-width: 100%; border-radius: 12px 12px 0 0; }
.share-modal { max-width: 95%; }
.social-bar-inner { gap: 4px; }
.social-btn { padding: 3px 6px; }
.sb-svg { width: 11px; height: 11px; }
.v-social-btn { font-size: .55rem; padding: .15rem .3rem; }
.vp-svg { width: 10px; height: 10px; }
}
/* Touch-friendly enhancements */
@media (hover: none) and (pointer: coarse) {
.social-btn {
min-height: 36px;
min-width: 36px;
}
.comment-like-btn {
min-height: 30px;
padding: 4px 10px;
}
.share-actions button {
min-height: 38px;
padding: 8px 16px;
}
.mdb-btn {
min-height: 40px;
}
.mi { min-height: 28px; }
}
/* ═══════════════════════════════════════════════════════
HORMUZ INTEL — TENSION UI (紧张感极限设计)
═══════════════════════════════════════════════════════ */
/* Critical pulse animation for threat badge */
.hz-threat-critical-pulse {
animation: threatCriticalPulse 1.2s ease-in-out infinite;
}
@keyframes threatCriticalPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.08); text-shadow: 0 0 12px #ff0000, 0 0 25px rgba(255,0,0,0.5); }
}
/* Critical flash for summary text */
.hz-intel-critical-flash {
border-left-color: #ff0000 !important;
background: rgba(255,0,0,0.06) !important;
animation: summaryFlash 3s ease-in-out infinite;
}
@keyframes summaryFlash {
0%, 100% { border-left-color: #ff0000; }
50% { border-left-color: #ff4444; background: rgba(255,0,0,0.1); }
}
/* Intel critical state badge */
.hz-intel-critical-state {
background: rgba(255,0,0,0.12) !important;
border-color: rgba(255,0,0,0.3) !important;
animation: badgeCritical 2s infinite;
}
@keyframes badgeCritical {
0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); }
50% { box-shadow: 0 0 8px rgba(255,0,0,0.3); }
}
/* Scan line in loading state */
.hz-intel-scan-line {
display: inline-block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, transparent, #a78bfa, transparent);
animation: scanLine 1.5s linear infinite;
margin-left: 6px;
vertical-align: middle;
}
@keyframes scanLine {
0% { transform: translateX(-20px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(20px); opacity: 0; }
}
/* Meta count in status bar */
.hz-intel-meta-sm {
font-size: 0.42rem;
color: rgba(255,255,255,0.3);
margin-left: 4px;
}
/* News count badge */
.hz-intel-newscount {
font-size: 0.42rem;
color: rgba(167,139,250,0.5);
background: rgba(167,139,250,0.08);
padding: 2px 7px;
border-radius: 8px;
margin-left: auto;
display: flex;
align-items: center;
gap: 0;
font-family: var(--fd);
letter-spacing: 0.5px;
border: 1px solid rgba(167,139,250,0.08);
}
.nc-item {
display: inline-flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.nc-sep {
color: rgba(167,139,250,0.2);
margin: 0 3px;
font-size: 0.35rem;
}
[lang="en"] .hz-intel-newscount {
font-size: 0.38rem;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* Live dot indicator */
.hz-live-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
margin-right: 4px;
vertical-align: middle;
box-shadow: 0 0 4px rgba(34,197,94,0.6);
animation: liveDotPulse 1.5s ease-in-out infinite;
}
@keyframes liveDotPulse {
0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(34,197,94,0.6); }
50% { opacity: 0.4; box-shadow: 0 0 8px rgba(34,197,94,0.9); }
}
/* Urgency text */
.hz-intel-urgency {
color: #ff4444;
font-size: 0.55rem;
font-weight: 700;
padding: 5px 10px;
letter-spacing: 1.5px;
animation: urgencyGlow 2s ease-in-out infinite;
text-transform: uppercase;
font-family: var(--fd);
background: linear-gradient(90deg,rgba(255,68,68,.08),rgba(255,68,68,.03));
border-radius: 4px;
border-left: 3px solid rgba(255,68,68,0.5);
line-height:1.4;
}
[lang="en"] .hz-intel-urgency {
letter-spacing: 2px;
font-size: 0.5rem;
}
@keyframes urgencyGlow {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; text-shadow: 0 0 8px rgba(255,68,68,0.5); background: rgba(255,68,68,0.09); }
}
/* Enhanced intel body */
.hz-intel-body-enhanced {
max-height: calc(100vh - 200px) !important;
}
/* ═══ SECTION LABELS — PREMIUM INTEL BANNERS ═══ */
.hz-intel-section-label {
font-family: var(--fd);
font-size: 0.72rem;
color: var(--gold);
font-weight: 700;
letter-spacing: 2px;
padding: 10px 14px 9px;
margin-top: 4px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
position: relative;
flex-shrink: 0;
background: linear-gradient(135deg,
rgba(200,164,90,.06) 0%,
rgba(196,60,60,.04) 30%,
rgba(167,139,250,.05) 70%,
transparent 100%);
border: 1px solid rgba(200,164,90,.15);
border-radius: 3px;
overflow: hidden;
text-shadow: 0 0 12px rgba(200,164,90,.25);
transition: border-color .3s, box-shadow .3s;
}
.hz-intel-section-label:hover {
border-color: rgba(200,164,90,.35);
box-shadow: 0 0 20px rgba(200,164,90,.08), inset 0 0 30px rgba(200,164,90,.03);
}
/* Animated scan sweep */
.hz-intel-section-label::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(200,164,90,.08) 45%,
rgba(196,60,60,.06) 55%,
transparent 100%);
background-size: 250% 100%;
animation: islScanSweep 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes islScanSweep {
0% { background-position: -100% 0 }
100% { background-position: 200% 0 }
}
/* Gold accent line at bottom */
.hz-intel-section-label::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), rgba(196,60,60,.5), var(--gold), transparent);
opacity: .4;
animation: islLineGlow 3s ease-in-out infinite;
}
@keyframes islLineGlow {
0%,100% { opacity: .25 }
50% { opacity: .6 }
}
/* Tag badge — premium chip */
.hz-isl-tag {
font-size: 0.5rem;
color: var(--gold);
background: linear-gradient(135deg, rgba(200,164,90,.15), rgba(196,60,60,.08));
padding: 3px 12px 3px 10px;
border-radius: 2px;
letter-spacing: 3px;
font-family: var(--fd);
text-transform: uppercase;
border: 1px solid rgba(200,164,90,.25);
position: relative;
box-shadow: 0 0 10px rgba(200,164,90,.1), inset 0 0 8px rgba(200,164,90,.05);
animation: islTagPulse 3s ease-in-out infinite;
z-index: 1;
}
.hz-isl-tag::before {
content: '';
position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
width: 4px; height: 4px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 6px var(--gold);
animation: islTagDot 2s ease-in-out infinite;
}
@keyframes islTagPulse {
0%,100% { box-shadow: 0 0 10px rgba(200,164,90,.1), inset 0 0 8px rgba(200,164,90,.05) }
50% { box-shadow: 0 0 18px rgba(200,164,90,.2), inset 0 0 12px rgba(200,164,90,.08) }
}
@keyframes islTagDot {
0%,100% { opacity: .5; box-shadow: 0 0 4px var(--gold) }
50% { opacity: 1; box-shadow: 0 0 8px var(--gold), 0 0 14px rgba(200,164,90,.3) }
}
[lang="en"] .hz-intel-section-label {
font-size: 0.62rem;
letter-spacing: 3.5px;
}
/* Event severity variants */
.hz-ie-sev-critical {
border-left: 2px solid #ff0000 !important;
background: rgba(255,0,0,0.04) !important;
}
.hz-ie-sev-danger {
border-left: 2px solid #ff4444 !important;
}
.hz-ie-sev-warning {
border-left: 2px solid #ffab00 !important;
}
.hz-ie-sev-badge {
font-size: 0.6rem;
margin-left: auto;
}
.hz-ie-entity {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.48rem;
color: rgba(167,139,250,0.6);
padding: 2px 0 2px 22px;
font-style: italic;
}
/* ─── Intel popup entity row ─── */
.intel-popup-entity {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 0;
font-size: 0.65rem;
color: #a78bfa;
border-bottom: 1px solid rgba(167,139,250,0.1);
}
.ipe-icon { font-size: 0.8rem; }
.ipe-name { font-weight: 500; }
/* ─── Intel popup news image ─── */
.intel-popup-img {
width: 100%;
max-height: 120px;
overflow: hidden;
border-radius: 4px 4px 0 0;
margin: -4px -4px 4px -4px;
padding: 0;
}
.intel-popup-img img {
width: calc(100% + 8px);
height: 120px;
object-fit: cover;
display: block;
filter: brightness(0.85) contrast(1.1);
}
/* ─── Intel event list news image ─── */
.hz-ie-img {
width: 100%;
max-height: 60px;
overflow: hidden;
border-radius: 3px;
margin-bottom: 4px;
}
.hz-ie-img img {
width: 100%;
height: 60px;
object-fit: cover;
display: block;
filter: brightness(0.8) contrast(1.1);
}
.hz-ie-entity-inline {
display: inline-block;
font-size: 0.46rem;
color: rgba(167,139,250,0.7);
font-style: italic;
padding: 1px 0 1px 22px;
}
/* ─── Intel marker enhanced ─── */
.intel-ring-outer {
position: absolute;
inset: -2px;
border: 1px dashed;
border-radius: 50%;
opacity: 0.3;
animation: outerRingSpin 8s linear infinite;
}
@keyframes outerRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.intel-entity-badge {
position: absolute;
bottom: -4px; right: -4px;
font-size: 0.6rem;
background: rgba(0,0,0,0.8);
border-radius: 50%;
width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(167,139,250,0.3);
}
.intel-marker-critical .intel-ring {
animation: criticalRingPulse 2s ease-in-out infinite !important;
}
@keyframes criticalRingPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(255,0,0,0.4); }
50% { transform: scale(1.2); box-shadow: 0 0 24px rgba(255,0,0,0.8), 0 0 40px rgba(255,0,0,0.3); }
}
.intel-radius-outer {
animation: outerRadiusPulse 4s ease-in-out infinite;
}
@keyframes outerRadiusPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
/* ─── Leadership Stances Cards ─── */
.hz-leaders-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.hz-leader-card {
background: rgba(255,255,255,0.02);
border-radius: 4px;
padding: 6px 8px;
border-left: 3px solid rgba(167,139,250,0.2);
transition: all 0.2s;
}
.hz-leader-card:hover {
background: rgba(255,255,255,0.05);
border-left-color: rgba(167,139,250,0.5);
}
.hz-lc-head {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 3px;
}
.hz-lc-flag { font-size: 0.85rem; }
.hz-lc-name {
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.85);
}
.hz-lc-pos {
font-size: 0.6rem;
color: rgba(255,255,255,0.3);
margin-left: auto;
}
.hz-lc-stance {
display: inline-block;
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 1.5px;
padding: 2px 8px;
border: 1px solid;
border-radius: 2px;
margin-bottom: 3px;
font-family: var(--fd);
}
.hz-lc-intensity {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 3px;
}
.hz-lc-il {
font-size: 0.4rem;
color: rgba(255,255,255,0.3);
margin-right: 4px;
}
.hz-intensity-bar {
width: 10px;
height: 3px;
background: rgba(255,255,255,0.1);
border-radius: 1px;
transition: background 0.3s;
}
.hz-intensity-bar.active {
background: currentColor;
}
.hz-lc-quote {
font-size: 0.68rem;
color: rgba(255,255,255,0.55);
font-style: italic;
line-height: 1.5;
padding: 2px 0;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
.hz-lc-redline {
font-size: 0.62rem;
color: #ff4444;
padding: 2px 0;
font-weight: 500;
}
/* ─── Next-Move Forecast Cards ─── */
.hz-nextmove-card {
background: rgba(255,255,255,0.02);
border-radius: 4px;
padding: 6px 8px;
margin-bottom: 4px;
border-left: 2px solid rgba(255,171,0,0.2);
transition: all 0.2s;
}
.hz-nextmove-card:hover {
background: rgba(255,255,255,0.05);
}
.hz-nm-head {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 2px;
}
.hz-nm-rank {
font-size: 0.42rem;
color: rgba(255,255,255,0.3);
font-family: var(--fd);
}
.hz-nm-method { font-size: 0.7rem; }
.hz-nm-leader {
font-size: 0.72rem;
font-weight: 600;
color: rgba(255,255,255,0.8);
}
.hz-nm-conf {
font-size: 0.4rem;
font-weight: 700;
letter-spacing: 1px;
margin-left: auto;
font-family: var(--fd);
}
.hz-nm-action {
font-size: 0.7rem;
color: rgba(255,255,255,0.65);
line-height: 1.5;
padding: 2px 0;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
.hz-nm-meta {
display: flex;
gap: 8px;
font-size: 0.42rem;
color: rgba(255,255,255,0.3);
}
.hz-nm-rationale {
font-size: 0.42rem;
color: rgba(255,171,0,0.5);
padding: 2px 0;
line-height: 1.3;
font-style: italic;
}
/* ─── Cross-Leader Interaction Map ─── */
.hz-cm-section {
margin-bottom: 4px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.hz-cm-label {
font-size: 0.44rem;
color: rgba(255,255,255,0.4);
font-weight: 600;
min-width: 60px;
}
.hz-cm-tag {
font-size: 0.42rem;
padding: 1px 6px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
}
.hz-cm-coop {
color: #6a9a4a;
border: 1px solid rgba(106,154,74,0.2);
}
.hz-cm-fault {
color: #ff4444;
border: 1px solid rgba(255,68,68,0.2);
}
.hz-cm-bridge {
color: #4a90d9;
border: 1px solid rgba(74,144,217,0.2);
}
/* ─── China Lens ─── */
.hz-ai-intel-china {
font-size: 0.72rem;
color: rgba(255,255,255,0.6);
line-height: 1.6;
padding: 5px 8px;
background: rgba(255,59,48,0.03);
border-radius: 3px;
border-left: 2px solid rgba(255,59,48,0.2);
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
/* ─── Risk & Insurance badges ─── */
.hz-ai-intel-risk,
.hz-ai-intel-insurance {
font-size: 0.65rem;
color: rgba(255,255,255,0.45);
padding: 3px 8px;
margin-top: 2px;
}
.hz-ai-intel-risk { border-left: 2px solid rgba(255,68,68,0.15); }
.hz-ai-intel-insurance { border-left: 2px solid rgba(255,171,0,0.15); }
/* ─── Refresh button pulse ─── */
.hz-cam-btn-pulse {
animation: refreshBtnGlow 3s ease-in-out infinite;
}
@keyframes refreshBtnGlow {
0%, 100% { box-shadow: none; }
50% { box-shadow: 0 0 6px rgba(167,139,250,0.3); }
}
/* ─── Enhanced marker wrap for larger size ─── */
.intel-marker-wrap {
width: 48px !important;
height: 48px !important;
}
.intel-ring {
/* Use inset for proper centering instead of fixed width/height */
inset: 4px !important;
width: auto !important;
height: auto !important;
}
/* ══════ CRITICAL ALERT OVERLAY ══════ */
.critical-alert-overlay{
position:fixed;inset:0;z-index:99999;
background:rgba(0,0,0,.85);
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(8px);
animation:alertFadeIn .3s ease-out;
}
.critical-alert-overlay.hidden{display:none}
@keyframes alertFadeIn{from{opacity:0}to{opacity:1}}
@keyframes alertPulseRed{0%,100%{box-shadow:0 0 30px rgba(196,60,60,.4),inset 0 0 20px rgba(196,60,60,.05)}50%{box-shadow:0 0 60px rgba(196,60,60,.6),inset 0 0 40px rgba(196,60,60,.1)}}
.ca-inner{
width:90%;max-width:520px;
background:linear-gradient(135deg,rgba(16,22,32,.98),rgba(196,60,60,.08),rgba(16,22,32,.98));
border:2px solid rgba(196,60,60,.5);border-radius:6px;
animation:alertPulseRed 2s infinite;
overflow:hidden;
}
.ca-header{
display:flex;align-items:center;gap:.5rem;
padding:.6rem 1rem;
background:linear-gradient(90deg,rgba(196,60,60,.15),transparent);
border-bottom:1px solid rgba(196,60,60,.3);
}
.ca-icon{font-size:1.2rem;animation:pulse 1s infinite}
.ca-title{font-family:'Noto Sans SC',var(--fd),sans-serif;font-size:.9rem;font-weight:800;color:var(--red);letter-spacing:3px;flex:1}
.ca-close{color:var(--txt3);cursor:pointer;font-size:1rem;padding:.2rem;transition:color .3s}
.ca-close:hover{color:var(--red)}
.ca-body{padding:.8rem 1rem;max-height:60vh;overflow-y:auto}
.ca-alert-item{
padding:.6rem .8rem;margin-bottom:.5rem;
border-radius:4px;border-left:3px solid var(--red);
background:rgba(196,60,60,.04);
animation:cardReveal .4s ease-out both;
}
.ca-alert-item:last-child{margin-bottom:0}
.ca-sev-critical{border-left-color:var(--red);background:rgba(196,60,60,.06)}
.ca-sev-warning{border-left-color:var(--gold);background:rgba(200,164,90,.04)}
.ca-alert-title{font-family:'Noto Sans SC',sans-serif;font-size:.85rem;font-weight:700;color:var(--txt);margin-bottom:.3rem}
.ca-alert-msg{font-family:'Noto Sans SC',sans-serif;font-size:.78rem;color:var(--txt2);line-height:1.7;margin-bottom:.2rem}
.ca-alert-detail{font-family:var(--fm);font-size:.68rem;color:var(--txt3);line-height:1.5}
.ca-footer{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.3rem;
padding:.4rem 1rem;
border-top:1px solid rgba(196,60,60,.15);
background:rgba(196,60,60,.02);
}
.ca-time{font-family:var(--fm);font-size:.65rem;color:var(--txt3)}
.ca-source{font-family:var(--fm);font-size:.62rem;color:var(--txt3);letter-spacing:1px}
/* ── Alert "Locate on Map" button ── */
.ca-locate-btn{
font-size:.7rem !important;padding:.25rem .6rem !important;
background:linear-gradient(135deg,rgba(0,188,212,.15),rgba(0,188,212,.05)) !important;
border:1px solid rgba(0,188,212,.4) !important;color:#00e5ff !important;
border-radius:3px;cursor:pointer;transition:all .3s;letter-spacing:.5px;
display:inline-flex;align-items:center;gap:.3rem;
}
.ca-locate-btn:hover{
background:rgba(0,188,212,.25) !important;
box-shadow:0 0 12px rgba(0,188,212,.3);
}
.ca-mini-locate{
float:right;background:transparent;border:1px solid rgba(0,188,212,.3);
color:#00e5ff;font-size:.65rem;padding:.1rem .35rem;border-radius:3px;
cursor:pointer;margin-left:.5rem;transition:all .3s;
}
.ca-mini-locate:hover{background:rgba(0,188,212,.15);box-shadow:0 0 8px rgba(0,188,212,.3)}
/* ── Alert-highlight marker pulse (extra dramatic) ── */
@keyframes alertHighlightPulse{
0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 6px rgba(255,0,0,.4))}
25%{transform:scale(1.5);filter:brightness(2) drop-shadow(0 0 20px rgba(255,0,0,.8))}
50%{transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 0 10px rgba(255,0,0,.5))}
75%{transform:scale(1.4);filter:brightness(1.8) drop-shadow(0 0 18px rgba(255,0,0,.7))}
100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 6px rgba(255,0,0,.4))}
}
.intel-marker-alert-highlight{
animation:alertHighlightPulse 1s ease-in-out 4 !important;
z-index:9999 !important;
}
/* Alert-highlighted sidebar card */
.alert-highlight-card{
border-left:3px solid #ff0000 !important;
background:rgba(255,0,0,.08) !important;
box-shadow:0 0 16px rgba(255,0,0,.15),inset 0 0 10px rgba(255,0,0,.05) !important;
animation:cardAlertFlash 1.5s ease-in-out 3;
}
@keyframes cardAlertFlash{
0%,100%{border-left-color:#ff0000;background:rgba(255,0,0,.08)}
50%{border-left-color:#ff4444;background:rgba(255,0,0,.15)}
}
/* ═══ PREDICTION CARD STYLES ═══ */
.hz-isl-predict {
color: #e040fb !important;
background: linear-gradient(135deg, rgba(224,64,251,.15), rgba(196,60,60,.08)) !important;
border-color: rgba(224,64,251,.3) !important;
box-shadow: 0 0 12px rgba(224,64,251,.15), inset 0 0 8px rgba(224,64,251,.06) !important;
}
.hz-isl-predict::before {
background: #e040fb !important;
box-shadow: 0 0 6px #e040fb !important;
}
.hz-predict-label {
margin-top: 0;
color: #e040fb;
background: linear-gradient(135deg,
rgba(224,64,251,.06) 0%,
rgba(196,60,60,.04) 40%,
rgba(138,43,226,.05) 100%) !important;
border-color: rgba(224,64,251,.18) !important;
text-shadow: 0 0 12px rgba(224,64,251,.3);
}
.hz-predict-label:hover {
border-color: rgba(224,64,251,.4) !important;
box-shadow: 0 0 22px rgba(224,64,251,.1), inset 0 0 30px rgba(224,64,251,.03);
}
.hz-predict-label::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(224,64,251,.08) 45%,
rgba(196,60,60,.06) 55%,
transparent 100%) !important;
background-size: 250% 100% !important;
}
.hz-predict-label::after {
background: linear-gradient(90deg, transparent, #e040fb, rgba(196,60,60,.5), #e040fb, transparent) !important;
}
.hz-pred-card {
background: linear-gradient(135deg,rgba(138,43,226,0.06),rgba(138,43,226,0.02));
border-radius: 5px;
padding: 8px 10px;
margin-bottom: 6px;
border-left: 3px solid rgba(138,43,226,0.5);
transition: all 0.25s ease;
position:relative;
}
.hz-pred-card::after{
content:'';position:absolute;top:0;right:0;bottom:0;width:1px;
background:linear-gradient(180deg,rgba(138,43,226,.15),transparent);
}
.hz-pred-card[data-lat] {
cursor: pointer;
}
.hz-pred-card[data-lat]:hover {
background: linear-gradient(135deg,rgba(138,43,226,0.14),rgba(138,43,226,0.06));
transform: translateX(3px);
box-shadow: 0 0 14px rgba(138,43,226,0.3);
}
.hz-pred-card:hover {
background: linear-gradient(135deg,rgba(138,43,226,0.1),rgba(138,43,226,0.04));
}
.hz-pred-anchor {
font-family: var(--fd);
letter-spacing: 0.5px;
}
.hz-pred-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.hz-pred-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
border-radius: 50%;
font-size: 0.55rem;
font-weight: 700;
color: #fff;
font-family: var(--fd);
}
.hz-pred-conf {
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 1px;
font-family: var(--fd);
}
.hz-pred-tw {
font-size: 0.48rem;
color: rgba(255,255,255,0.45);
margin-left: auto;
font-family: var(--fd);
letter-spacing:.5px;
}
.hz-pred-text {
font-size: 0.72rem;
color: rgba(255,255,255,0.88);
line-height: 1.55;
margin-bottom: 4px;
font-family: 'LXGW WenKai SC', 'Noto Sans SC', sans-serif;
}
[lang="en"] .hz-pred-text {
font-family: 'SF Pro Text', 'Inter', -apple-system, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.15px;
}
.hz-pred-loc {
font-size: 0.5rem;
color: rgba(138,43,226,0.65);
margin-bottom: 3px;
letter-spacing:.3px;
}
.hz-pred-evidence {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 3px;
}
.hz-pred-ev-tag {
font-size: 0.46rem;
color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.04);
padding: 1px 5px;
border-radius: 2px;
font-family: var(--fd);
}
.hz-pred-impact {
font-size: 0.52rem;
color: rgba(255,160,0,0.7);
margin-top: 4px;
font-style: italic;
}
/* Prediction metadata (model + timestamp) */
.hz-pred-meta {
font-size: 0.48rem;
color: rgba(138,43,226,0.6);
font-family: var(--fm);
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed rgba(138,43,226,0.15);
letter-spacing: 0.3px;
}
/* Confirmed prediction banner */
.hz-pred-confirmed {
background: linear-gradient(90deg, rgba(0,230,118,0.15), rgba(0,230,118,0.05));
border: 1px solid rgba(0,230,118,0.4);
border-radius: 3px;
padding: 4px 8px;
margin-bottom: 6px;
font-size: 0.56rem;
font-weight: 700;
color: #00e676;
font-family: var(--fd);
letter-spacing: 0.5px;
animation: confirmedGlow 2s ease-in-out infinite;
}
@keyframes confirmedGlow {
0%, 100% { box-shadow: 0 0 6px rgba(0,230,118,0.3); }
50% { box-shadow: 0 0 18px rgba(0,230,118,0.6); }
}
/* Prediction marker pulse */
.pred-marker-div .intel-marker-wrap {
animation: predPulse 2s ease-in-out infinite;
}
.pred-marker-div .intel-ring {
border-color: #8a2be2 !important;
box-shadow: 0 0 18px rgba(138,43,226,0.6) !important;
}
.pred-marker-div .intel-icon {
background: #8a2be2 !important;
}
@keyframes predPulse {
0%, 100% { box-shadow: 0 0 12px rgba(138,43,226,0.4); }
50% { box-shadow: 0 0 28px rgba(138,43,226,0.8); }
}
/* ══════ LANGUAGE TOGGLE ══════ */
.lang-toggle{
display:flex;align-items:center;gap:0;
border:1px solid var(--border);border-radius:2px;overflow:hidden;
}
.lang-toggle-btn{
background:none;border:none;color:var(--txt3);
font-family:var(--fd);font-size:.62rem;letter-spacing:1px;
padding:.22rem .45rem;cursor:pointer;transition:all .3s;
border-right:1px solid var(--border);
}
.lang-toggle-btn:last-child{border-right:none}
.lang-toggle-btn.active{background:rgba(200,164,90,.12);color:var(--gold);font-weight:700}
.lang-toggle-btn:hover{color:var(--gold)}
/* ═══════════════════════════════════════════════════════
ROUND 9: COMPREHENSIVE MOBILE / TABLET ADAPTATION
iOS (iPhone SE → 16 Pro Max) · Android · iPad
20260307l
═══════════════════════════════════════════════════════ */
/* ── iOS Safe Area (viewport-fit=cover) ── */
@supports(padding: env(safe-area-inset-top)){
body{
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.topbar{
padding-top: max(.4rem, env(safe-area-inset-top));
padding-left: max(.6rem, env(safe-area-inset-left));
padding-right: max(.6rem, env(safe-area-inset-right));
}
.wfooter{
padding-bottom: max(.5rem, env(safe-area-inset-bottom));
}
/* Fullscreen modals need safe areas */
.news-float-popup{
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.model-detail-modal{
padding-top: env(safe-area-inset-top);
}
.critical-alert-overlay{
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Cinematic overlay respects notch */
.cine-overlay{
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
}
/* ── Global overflow prevention ── */
html,body{ overflow-x:hidden; max-width:100vw; }
.topbar,.ticker-bar,.compare-body,.hormuz-section,.dual-panel{ max-width:100vw; }
img,video,iframe,.leaflet-container{ max-width:100%; }
/* ── iPad Pro 12.9" / iPad Air landscape (769–1024px) ── */
@media(min-width:769px) and (max-width:1024px){
/* Keep richer grid layouts on iPad */
.stat-hero-row{ grid-template-columns:repeat(4,1fr)!important }
.force-grid{ grid-template-columns:repeat(2,1fr)!important }
.risk-matrix-grid{ grid-template-columns:repeat(2,1fr)!important }
.worst-case-cards{ grid-template-columns:repeat(2,1fr)!important }
.leader-grid-v2{ grid-template-columns:repeat(2,1fr)!important }
.wg-cards{ grid-template-columns:repeat(2,1fr)!important }
.fc-breakdown-grid{ grid-template-columns:repeat(2,1fr) }
/* Hormuz keeps sidebar on iPad */
.hormuz-body{ grid-template-columns:1fr 260px!important }
.hormuz-map{ min-height:400px }
/* Auth CTA properly sized */
.auth-btn-cta{ padding:.35rem .8rem; font-size:.65rem }
/* Modal not fullscreen on iPad */
.model-detail-modal{ width:88vw!important; max-width:88vw!important; border-radius:10px }
/* News list scrollable */
.panel-intel .news-list-wrap{ max-height:50vh }
/* Better tab sizing */
.mi{ padding:.3rem .65rem; font-size:.58rem }
/* Timeline scroll area */
.timeline-track{ padding-bottom:.8rem }
}
/* ── iPad Mini portrait / large phone landscape (481–768px) ── */
@media(min-width:481px) and (max-width:768px){
.stat-hero-row{ grid-template-columns:repeat(2,1fr)!important; gap:6px }
.threat-status-bar{ grid-template-columns:repeat(2,1fr)!important }
.worst-case-cards{ grid-template-columns:1fr }
.leader-grid-v2{ grid-template-columns:1fr }
/* Hormuz stacked but map larger */
.hormuz-body{ grid-template-columns:1fr; min-height:auto }
.hormuz-map{ min-height:320px }
.hormuz-stats{ flex-direction:row; flex-wrap:wrap; border-left:none; border-top:1px solid var(--border); padding:.5rem }
/* Better spacing for touch */
.news-item{ padding:10px 12px; min-height:56px }
.social-btn{ min-height:40px; padding:6px 10px }
.chat-msgs{ max-height:250px }
/* Oil cards side by side on tablet */
.hz-oil-cards{ flex-direction:row; flex-wrap:wrap }
.hz-oil-card{ flex:1; min-width:140px }
/* Intel events scrollable */
.hz-ai-intel-events{ max-height:180px }
}
/* ── Phones 430px (iPhone 14/15 Pro Max) ── */
@media(max-width:430px){
/* Auth CTA compact but visible */
.auth-btn-cta{
padding:.22rem .5rem!important;
font-size:.52rem!important;
letter-spacing:.3px!important;
white-space:nowrap;
}
.auth-cta-icon{ font-size:.6rem }
/* Language toggle tight */
.lang-toggle-btn{ padding:.2rem .35rem; font-size:.55rem }
/* Prediction cards */
.hz-pred-card{ padding:6px 8px; margin-bottom:4px }
.hz-pred-text{ font-size:.64rem; line-height:1.5 }
.hz-pred-evidence{ gap:2px }
.hz-pred-ev-tag{ font-size:.44rem; padding:1px 4px }
.hz-pred-head{ gap:4px }
.hz-pred-num{ width:16px; height:16px; font-size:.48rem }
.hz-pred-conf{ font-size:.48rem }
.hz-pred-tw{ font-size:.46rem }
/* Leadership stance cards */
.hz-leader-card{ padding:5px 7px }
.hz-lc-name{ font-size:.72rem }
.hz-lc-quote{ font-size:.64rem }
.hz-lc-redline{ font-size:.6rem }
.hz-lc-stance{ font-size:.52rem; padding:2px 6px }
.hz-lc-flag{ font-size:.75rem }
/* Next-move cards */
.hz-nextmove-card{ padding:5px 7px }
.hz-nm-leader{ font-size:.68rem }
.hz-nm-action{ font-size:.64rem }
/* Critical alert compact */
.ca-inner{ width:96%; max-width:none }
.ca-title{ font-size:.78rem; letter-spacing:2px }
.ca-alert-title{ font-size:.78rem }
.ca-alert-msg{ font-size:.72rem; line-height:1.7 }
.ca-alert-detail{ font-size:.64rem }
.ca-header{ padding:.5rem .8rem }
.ca-body{ padding:.6rem .8rem }
/* Flights panel */
.hz-flights-title{ font-size:.65rem }
.hz-flight-item{ padding:.2rem .25rem }
.hz-fi-fn{ font-size:.55rem }
.hz-fi-meta{ font-size:.48rem }
.hz-flights-list{ max-height:100px }
/* Collapsible sidebar sections */
.hz-sec-hdr{ padding:.3rem .35rem; font-size:.52rem }
.hz-sec-num{ width:16px; height:16px; font-size:.42rem }
.hz-sec-tag{ font-size:.38rem }
/* China lens & risk/insurance */
.hz-ai-intel-china{ font-size:.66rem; padding:4px 6px }
.hz-ai-intel-risk,.hz-ai-intel-insurance{ font-size:.6rem; padding:3px 6px }
/* Intel marker smaller on phone */
.intel-marker-wrap{ width:36px!important; height:36px!important }
.intel-icon{ width:18px; height:18px; font-size:.6rem }
.intel-idx{ width:12px; height:12px; font-size:.4rem }
/* Vessel marker smaller */
.v-marker-wrap{ width:28px; height:28px }
.v-svg-marker{ width:24px; height:24px }
/* Share overlay */
.share-overlay{ padding:.3rem }
.share-modal{ padding:1rem; border-radius:8px }
.share-textarea{ font-size:.72rem; min-height:100px }
.share-actions{ flex-direction:column; gap:.3rem }
.share-actions button{ width:100% }
/* Comment panel */
.cmt2-modal{ border-radius:12px 12px 0 0; max-width:100% }
}
/* ── Small phones 375px (iPhone 12/13/14 standard) ── */
@media(max-width:375px){
html{ font-size:13px }
/* Ultra-compact 2-row topbar */
.topbar{ padding:.28rem .4rem .22rem; gap:0 }
.topbar-center{ margin-top:.2rem }
.logo-icon{ font-size:.9rem }
.logo-txt{ font-size:.52rem; letter-spacing:.8px }
.logo-quewi{ display:none }
.sfx-toggle{ font-size:.62rem; padding:.14rem .22rem; min-width:28px; min-height:28px }
.bgm-btn{ font-size:.5rem; padding:.14rem .22rem; min-width:28px; min-height:28px }
.quewi-cta-badge{ font-size:.36rem; padding:.1rem .24rem; gap:.1rem; border-radius:10px }
.qcta-txt{ display:none }
.qcta-models{ font-size:.36rem }
.qcta-bolt{ font-size:.45rem }
/* Auth CTA minimal — icon only feel */
.auth-btn-cta{
padding:.16rem .32rem!important;
font-size:.42rem!important;
animation-duration:3.5s;
border-radius:6px!important;
}
#auth-label{
max-width:55px;
}
/* Ticker ultra-compact */
.ticker-bar{ height:26px }
.ticker-label{ font-size:.48rem; padding:0 .35rem }
.ticker-content{ font-size:.65rem; gap:1.5rem }
/* Force balance gauge */
.gauge-bar{ height:18px }
.gauge-labels{ font-size:.52rem }
.balance-gauge{ padding:.35rem }
/* Map smaller */
.hormuz-map{ min-height:200px!important }
.hz-map-stats{ flex-wrap:wrap }
.hz-mstat{ min-width:50%; padding:.3rem .15rem }
.hz-mstat-val{ font-size:.78rem }
.hz-mstat-label{ font-size:.45rem }
/* Hide secondary sections on tiny screens */
.hz-flights-panel{ display:none }
.hz-sat-section .hz-sat-ref{ display:none }
/* Timeline tighter */
.timeline-node{ min-width:100px; padding-top:1.5rem }
.timeline-dot{ width:14px; height:14px; font-size:.4rem }
.timeline-label{ font-size:.55rem }
/* Footer compact */
.wfooter{ padding:.4rem .6rem; font-size:.52rem }
/* News items */
.news-item-thumb{ width:44px; height:33px }
.news-item-title{ font-size:.8rem; -webkit-line-clamp:2 }
.news-item-summary{ font-size:.7rem; -webkit-line-clamp:2 }
/* News popup reading comfort at 375px */
.nfp-scroll{ padding:1rem 1.1rem }
.nfp-title{ font-size:.98rem; line-height:1.8 }
.nfp-body{ font-size:.88rem; line-height:1.95 }
.nfp-body .nfp-para{ margin-bottom:.85em }
}
/* ── Tiny phones 320px (iPhone SE 1st gen, old Android) ── */
@media(max-width:320px){
html{ font-size:12px }
.topbar-left .live-ind{ display:none }
.sfx-toggle{ display:none }
.auth-btn-cta span:not(.auth-cta-icon){ font-size:.4rem }
.news-item-thumb{ display:none }
.hz-zoom-btns{ display:none }
.hz-flights-panel{ display:none }
.hz-sat-section{ display:none }
.timeline-track{ display:none }
.stat-hero-row{ grid-template-columns:1fr 1fr!important; gap:.2rem }
.stat-hero{ padding:.35rem!important }
.stat-hero-num{ font-size:.82rem }
.stat-hero-icon{ font-size:1rem }
}
/* ── Landscape phones (short + wide) ── */
@media(max-height:500px) and (orientation:landscape){
.topbar{ padding:.25rem .5rem }
.ticker-bar{ height:24px }
.hormuz-map{ min-height:180px!important }
.panel-intel .news-list-wrap{ max-height:30vh }
.chat-msgs{ max-height:120px }
.ca-inner{ max-height:85vh; overflow-y:auto }
.ca-body{ max-height:55vh }
}
/* ── Tall phones (iPhone Pro Max, Samsung Ultra) ── */
@media(min-height:800px) and (max-width:430px){
/* Take advantage of vertical space */
.hormuz-map{ min-height:280px!important }
.chat-msgs{ max-height:220px }
.hz-ai-intel-events{ max-height:200px }
.panel-intel .news-list-wrap{ max-height:55vh }
}
/* ── All mobile: smooth scroll & overscroll ── */
@media(max-width:1024px){
body{ overscroll-behavior-y:none; -webkit-text-size-adjust:100%; text-size-adjust:100% }
.compare-body,.news-list-wrap,.hormuz-stats,.mdm-body,.nfp-scroll,
.hz-ai-intel-events,.hz-flights-list,.ca-body{
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain;
scroll-behavior:smooth;
}
/* Prevent zoom on double-tap for inputs */
input,select,textarea{ font-size:16px!important }
/* Kill layout shift on panel transitions */
.dual-panel,.panel-intel,.panel-compare{ transition:none!important }
/* Allow popups to overflow, tiles are clipped by their own pane */
.hormuz-map-wrap{ overflow:visible }
.leaflet-container{ touch-action:pan-x pan-y }
/* Social bar inline layout on mobile */
.social-bar-inner{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch }
.social-bar-inner::-webkit-scrollbar{ display:none }
/* QueWi forward button mobile-friendly */
.hz-quewi-fwd,.nfp-quewi-fwd{ min-height:40px; font-size:.6rem; padding:.3rem .6rem }
}
/* ── Enhanced touch targets (Apple HIG: 44pt, Material: 48dp) ── */
@media(hover:none) and (pointer:coarse){
.hz-sec-hdr{ min-height:44px; display:flex; align-items:center }
.hz-pred-card{ min-height:44px }
.hz-pred-card[data-lat]{ cursor:pointer }
.hz-intel-event{ min-height:44px }
.hz-leader-card{ min-height:44px }
.lang-toggle-btn{ min-height:36px; min-width:36px }
.v-social-btn{ min-height:36px; min-width:36px }
.share-copy-btn,.share-regen-btn{ min-height:44px }
.ca-close{ min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center }
.hz-zoom-btn{ min-height:40px; min-width:40px }
.hz-track-btn{ min-height:44px }
.hz-intel-refresh-btn{ min-height:36px }
.hz-flights-refresh-btn{ min-height:36px }
.intel-custom-btn{ min-height:40px }
.ips-btn{ min-height:36px }
/* Remove hover transforms that cause jank on touch */
.hz-pred-card:hover,.hz-pred-card[data-lat]:hover{ transform:none }
.hz-nextmove-card:hover{ transform:none }
.hz-leader-card:hover{ transform:none }
.hz-oil-card:hover{ transform:none }
.hz-stat-card:hover{ transform:none }
.hz-flight-item:hover{ background:transparent }
.intel-popup-social .ips-btn:hover{ transform:none }
/* Active state feedback instead of hover */
.hz-pred-card[data-lat]:active{ background:rgba(138,43,226,.12); border-left-color:rgba(138,43,226,.6) }
.hz-intel-event:active{ background:rgba(200,164,90,.06) }
.hz-leader-card:active{ background:rgba(255,255,255,.06) }
.hz-flight-item:active{ background:rgba(74,144,217,.08) }
}
/* ── Fix auth CTA animation performance on mobile ── */
@media(max-width:768px){
.auth-btn-cta{
will-change:auto;
animation:authCtaPulse 3s ease-in-out infinite;
}
/* Reduce glow complexity for GPU perf */
.auth-btn-cta:hover{
box-shadow:0 0 10px rgba(200,164,90,.2);
}
}
/* ── Cinematic overlay phone fixes ── */
@media(max-width:480px){
.cine-overlay{
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.title-vs{
flex-direction:column;
gap:.3rem;
max-width:90vw;
}
.title-models{
flex-wrap:wrap;
justify-content:center;
gap:.25rem;
}
.cine-go-btn{
width:100px;height:100px;
}
.ceb-go{font-size:1.6rem!important;letter-spacing:5px!important}
/* Ensure cinematic items don't overflow */
.cine-overlay *{ max-width:100vw; box-sizing:border-box }
}
/* ── Print / accessibility ── */
@media print{
.topbar,.ticker-bar,.cine-overlay,.wfooter,.social-bar,.chat-section-inline{ display:none!important }
body{ background:#fff; color:#000 }
.panel-intel,.panel-compare{ break-inside:avoid }
}
/* ═══════════════════════════════════════════════════════════════
MULTI-SOURCE INTELLIGENCE UPGRADE v20260310c
Full-Screen 2D↔3D Globe Toggle · Strategic Globe.GL Overlay
═══════════════════════════════════════════════════════════════ */
/* ── Fullscreen 3D Globe Overlay ── */
.hz-globe-full {
position: absolute;
inset: 0;
z-index: 2;
background: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1);
}
.hz-globe-full.hz-view-active {
opacity: 1;
pointer-events: auto;
}
/* ── Globe.GL / CesiumJS Container (fills overlay) ── */
.hz-globe-container-full {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
position: relative;
}
.hz-globe-container-full canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/* Override CesiumJS default widget styles for clean military look */
.hz-globe-container-full .cesium-viewer,
.hz-globe-container-full .cesium-viewer-cesiumWidgetContainer,
.hz-globe-container-full .cesium-widget,
.hz-globe-container-full .cesium-widget canvas {
width: 100% !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
}
.hz-globe-container-full .cesium-viewer-bottom,
.hz-globe-container-full .cesium-viewer-toolbar,
.hz-globe-container-full .cesium-performanceDisplay-defaultContainer {
display: none !important;
}
/* ── 3D HUD Overlay (top label) ── */
.hz-globe-full-hud {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
align-items: center;
pointer-events: none;
z-index: 10;
opacity: 0;
transition: opacity 0.4s 0.3s;
}
.hz-globe-full.hz-view-active .hz-globe-full-hud {
opacity: 1;
}
.hz-globe-full-label {
font-family: var(--fd);
font-size: 9px;
letter-spacing: 2px;
color: rgba(0,229,255,0.7);
text-transform: uppercase;
text-shadow: 0 0 12px rgba(0,229,255,0.4);
}
.hz-globe-full-count {
font-family: var(--fm);
font-size: 10px;
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.5);
padding: 2px 8px;
border-radius: 4px;
backdrop-filter: blur(4px);
}
/* ── 2D/3D Dimension Toggle Button ── */
.hz-dim-toggle {
position: absolute;
bottom: 70px;
left: 16px;
z-index: 900;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 24px;
border: 1px solid rgba(0,229,255,0.25);
background: rgba(0,10,20,0.75);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
color: rgba(0,229,255,0.8);
font-family: var(--fd);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
box-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 0 0 0 rgba(0,229,255,0);
user-select: none;
-webkit-user-select: none;
}
.hz-dim-toggle:hover {
border-color: rgba(0,229,255,0.5);
background: rgba(0,20,40,0.85);
box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 20px rgba(0,229,255,0.12);
transform: scale(1.05);
}
.hz-dim-toggle:active {
transform: scale(0.96);
}
.hz-dim-toggle .hz-dim-icon {
font-size: 16px;
line-height: 1;
filter: drop-shadow(0 0 4px rgba(0,229,255,0.4));
}
.hz-dim-toggle .hz-dim-label {
font-weight: 600;
}
/* Active 3D state */
.hz-dim-toggle.hz-dim-3d-active {
border-color: rgba(0,229,255,0.5);
background: rgba(0,229,255,0.15);
box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 0 24px rgba(0,229,255,0.2);
color: #00e5ff;
}
.hz-dim-toggle.hz-dim-3d-active .hz-dim-icon {
animation: hz-pulse-glow 2s ease-in-out infinite;
}
@keyframes hz-pulse-glow {
0%, 100% { filter: drop-shadow(0 0 4px rgba(0,229,255,0.4)); }
50% { filter: drop-shadow(0 0 12px rgba(0,229,255,0.8)); }
}
/* ── 2D Map / 3D Globe view state helpers ── */
.hz-view-active {
opacity: 1;
pointer-events: auto;
}
.hz-view-hidden {
opacity: 0;
pointer-events: none;
}
/* ── Satellite Marker Styles ── */
.sat-marker-div { background: none !important; border: none !important; will-change: transform; contain: layout style; }
.sat-marker-wrap {
display: flex; flex-direction: column; align-items: center;
pointer-events: auto; cursor: pointer;
transition: transform .2s;
}
.sat-marker-wrap:hover { transform: scale(1.3); }
.sat-icon {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
position: relative;
}
/* GPU-friendly pulse: animate a pseudo-element's transform+opacity instead of box-shadow */
.sat-isr .sat-icon::after {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,45,85,.45) 0%, transparent 70%);
animation: satPulseGPU 2s ease-in-out infinite;
pointer-events: none;
will-change: transform, opacity;
}
.sat-isr .sat-icon {
border-color: rgba(255,45,85,.5);
}
.sat-label {
font-family: var(--fm);
font-size: 9px;
white-space: nowrap;
text-shadow: 0 1px 3px rgba(0,0,0,.9);
margin-top: 1px;
}
.sat-over-me .sat-icon { border-color: rgba(0,229,255,.5); }
@keyframes satPulseGPU {
0%, 100% { transform: scale(1); opacity: .5; }
50% { transform: scale(1.8); opacity: .1; }
}
/* Legacy satPulse kept for legend dot (low count, negligible cost) */
@keyframes satPulse {
0%, 100% { box-shadow: 0 0 6px rgba(255,45,85,.4); }
50% { box-shadow: 0 0 18px rgba(255,45,85,.7), 0 0 30px rgba(255,45,85,.2); }
}
/* Ground track lines */
.sat-ground-track { opacity: .6; }
/* Satellite Popup */
.sat-popup-container .leaflet-popup-content-wrapper {
background: rgba(10,14,20,.95);
border: 1px solid rgba(0,229,255,.2);
border-radius: 8px;
color: var(--txt);
font-family: var(--fb);
}
.sat-popup-container .leaflet-popup-tip { background: rgba(10,14,20,.95); }
.sat-popup { padding: 6px 2px; }
.sat-popup-hdr {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px;
font-weight: 600;
border-radius: 4px 4px 0 0;
background: rgba(0,229,255,.05);
}
.sat-popup-name { font-family: var(--fm); font-size: 13px; }
.sat-isr-badge {
font-size: 9px; font-weight: 700;
padding: 1px 5px; border-radius: 3px;
background: rgba(255,45,85,.2);
color: #ff2d55;
border: 1px solid rgba(255,45,85,.3);
font-family: var(--fd);
letter-spacing: 1px;
}
.sat-popup-grid { padding: 6px 8px; }
.spg { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.spg-l { font-size: 11px; color: var(--txt3); }
.spg-v { font-size: 11px; font-family: var(--fm); color: var(--txt); }
.sat-popup-foot {
padding: 4px 8px;
font-size: 9px;
color: var(--txt3);
border-top: 1px solid rgba(255,255,255,.05);
}
/* ── Satellite Panel (left overlay) ── */
.hz-tag-sat {
background: rgba(0,229,255,.12) !important;
color: #00e5ff !important;
border: 1px solid rgba(0,229,255,.25) !important;
}
.hz-sat-live-dot {
display: inline-block; width: 6px; height: 6px;
background: #00e5ff; border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
margin-left: 6px;
}
.hz-sat-info {
font-size: 11px; color: var(--txt2);
padding: 4px 10px;
font-family: var(--fm);
}
.hz-sat-isr-count { color: #ff2d55; font-weight: 600; }
.hz-sat-me-count { color: #00e5ff; font-weight: 600; }
.hz-sat-scroll {
max-height: 120px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,229,255,.2) transparent;
}
.hz-sat-item {
display: flex; align-items: center; gap: 4px;
padding: 3px 10px;
font-size: 11px;
cursor: pointer;
transition: background .2s;
border-bottom: 1px solid rgba(255,255,255,.03);
}
.hz-sat-item:hover { background: rgba(0,229,255,.08); }
.hz-sat-item-icon { font-size: 12px; }
.hz-sat-item-name {
flex: 1;
font-family: var(--fm);
font-size: 10px;
color: var(--txt2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hz-sat-isr-tag {
font-size: 8px; font-weight: 700;
padding: 0 3px; border-radius: 2px;
background: rgba(255,45,85,.15);
color: #ff2d55;
font-family: var(--fd);
}
.hz-sat-item-alt {
font-family: var(--fm);
font-size: 9px;
color: var(--txt3);
}
.hz-sat-empty {
padding: 8px 10px;
font-size: 11px;
color: var(--txt3);
text-align: center;
}
/* ── Legend satellite dot ── */
.hz-sat-dot-legend {
width: 8px; height: 8px;
background: #00e5ff;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 6px rgba(0,229,255,.5);
animation: satPulse 3s ease-in-out infinite;
}
.hz-lg-src {
font-size: 9px !important;
color: var(--txt3) !important;
font-family: var(--fm) !important;
opacity: .7;
}
/* ── ADSB.lol source badge in military popup ── */
.mfp-val { font-family: var(--fm); }
/* ── War-room tension radar sweep ── */
@keyframes radarSweep {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hz-radar-sweep {
position: absolute;
top: 50%; left: 50%;
width: 300px; height: 300px;
margin: -150px 0 0 -150px;
border-radius: 50%;
pointer-events: none;
z-index: 2;
opacity: .12;
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(0,229,255,.3) 30deg,
transparent 60deg
);
animation: radarSweep 6s linear infinite;
}
/* ── Enhanced wartime tension indicators ── */
.hz-intel-body-enhanced {
border-left: 2px solid rgba(196,60,60,.15);
}
.hz-intel-critical-flash {
animation: criticalFlash 1.5s ease-in-out 3;
}
@keyframes criticalFlash {
0%, 100% { background: transparent; }
50% { background: rgba(255,0,0,.08); }
}
/* ── Threat-level glow borders (war-room tension feel) ── */
.hz-surveillance {
position: relative;
}
.hz-surveillance::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
border: 1px solid rgba(196,60,60,.08);
box-shadow: inset 0 0 60px rgba(196,60,60,.03), inset 0 0 120px rgba(0,0,0,.15);
}
/* ── ADSB.lol confirmed military flight enhanced marker ── */
.mil-flight-marker-wrap[data-source="adsb.lol"] .mil-threat-ring {
border-style: dashed;
}
/* ── Multi-source data fusion status bar ── */
.hz-intel-src {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.hz-intel-newscount {
font-family: var(--fm) !important;
font-size: 10px !important;
letter-spacing: .5px;
}
/* ── Enhanced glass panels with war-room borders ── */
.hz-glass {
border: 1px solid rgba(200,164,90,.08);
position: relative;
overflow: hidden;
}
.hz-glass::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(200,164,90,.2), transparent);
pointer-events: none;
}
/* ── Enhanced corner brackets with glow ── */
.hz-corner { box-shadow: none; }
.hz-corner-tl { border-top: 2px solid rgba(0,229,255,.3); border-left: 2px solid rgba(0,229,255,.3); }
.hz-corner-tr { border-top: 2px solid rgba(0,229,255,.3); border-right: 2px solid rgba(0,229,255,.3); }
.hz-corner-bl { border-bottom: 2px solid rgba(255,45,85,.3); border-left: 2px solid rgba(255,45,85,.3); }
.hz-corner-br { border-bottom: 2px solid rgba(255,45,85,.3); border-right: 2px solid rgba(255,45,85,.3); }
/* ── REC bar enhancement ── */
/* background removed — no dark overlay bar */
/* ═══════════════════════════════════════════════════
MULTI-SOURCE INTELLIGENCE STATUS BAR
═══════════════════════════════════════════════════ */
.hz-msrc-bar {
position: absolute;
bottom: 12px; left: 50%;
transform: translateX(-50%);
z-index: 1200;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(8,12,18,.92);
border: 1px solid rgba(0,229,255,.18);
border-radius: 8px;
backdrop-filter: blur(12px);
box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 30px rgba(0,229,255,.06);
font-family: var(--fm);
font-size: 11px;
white-space: nowrap;
animation: msrcSlideIn 0.8s ease-out;
}
@keyframes msrcSlideIn {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.hz-msrc-title {
display: flex;
align-items: center;
gap: 4px;
color: #00e5ff;
font-family: var(--fd);
font-size: 9px;
letter-spacing: 1.5px;
font-weight: 700;
padding-right: 10px;
border-right: 1px solid rgba(0,229,255,.15);
}
.hz-msrc-icon { font-size: 13px; }
.hz-msrc-sources {
display: flex;
align-items: center;
gap: 2px;
}
.hz-msrc-src {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 4px;
transition: all .3s;
cursor: default;
}
.hz-msrc-src:hover {
background: rgba(0,229,255,.08);
}
.hz-msrc-dot {
width: 7px; height: 7px;
border-radius: 50%;
flex-shrink: 0;
transition: all .3s;
}
.hz-msrc-pending {
background: #555;
animation: msrcBlink 1.5s ease-in-out infinite;
}
.hz-msrc-on {
background: #00e676;
box-shadow: 0 0 8px rgba(0,230,118,.5);
}
.hz-msrc-warn {
background: #ffab00;
box-shadow: 0 0 8px rgba(255,171,0,.5);
}
.hz-msrc-off {
background: #555;
}
.hz-msrc-err {
background: #ff2d55;
box-shadow: 0 0 8px rgba(255,45,85,.5);
}
@keyframes msrcBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.hz-msrc-name {
color: var(--txt2);
font-size: 10px;
font-weight: 500;
}
.hz-msrc-val {
color: #fff;
font-family: var(--fm);
font-size: 10px;
font-weight: 600;
min-width: 16px;
text-align: center;
}
/* Active source highlight */
.hz-msrc-src.msrc-active .hz-msrc-name { color: #00e5ff; }
.hz-msrc-src.msrc-active .hz-msrc-val { color: #00e5ff; font-weight: 700; }
/* ═══ DATA FRESHNESS CLOCK ═══ */
.hz-freshness-clock {
display: none;
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
z-index: 1080;
background: rgba(0,10,20,.85);
border: 1px solid rgba(0,229,255,.25);
border-radius: 6px;
padding: 4px 14px;
font-family: var(--fm);
font-size: 10px;
color: #8cf;
letter-spacing: .3px;
pointer-events: none;
transition: border-color .4s, background .4s;
}
.hz-freshness-clock.hz-fc-stale {
border-color: rgba(255,80,80,.6);
text-shadow: 0 0 12px rgba(255,80,80,.18);
color: #ffa;
animation: freshness-pulse 1.5s infinite;
}
@keyframes freshness-pulse {
0%,100% { opacity: 1; }
50% { opacity: .7; }
}
.fc-waiting { color: #889; }
.hz-stale-badge {
position: absolute;
top: 106px;
left: 50%;
transform: translateX(-50%);
z-index: 1081;
background: rgba(40,120,255,.85);
color: #fff;
font-family: var(--fm);
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
border-radius: 4px;
letter-spacing: .5px;
pointer-events: none;
animation: badge-fade-in .3s ease;
transition: opacity .5s ease;
}
.hz-stale-badge.hz-badge-stale {
background: rgba(255,40,40,.88);
}
.hz-stale-badge.hz-badge-refreshing {
background: rgba(40,120,255,.85);
}
@keyframes badge-fade-in {
from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Heatmap no-data overlay */
.heatmap-nodata {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 900;
text-align: center;
pointer-events: none;
}
.heatmap-nodata-warn {
font-size: 28px;
color: rgba(255,255,255,.4);
font-family: var(--fm);
letter-spacing: 2px;
}
/* Heatmap live timestamp label */
.heatmap-ts-label {
position: absolute;
bottom: 4px;
right: 10px;
z-index: 910;
pointer-events: none;
}
.hm-ts {
font-family: var(--fm);
font-size: 9px;
color: rgba(0,229,255,.5);
background: rgba(0,10,20,.6);
padding: 2px 6px;
border-radius: 3px;
}
/* ── Satellite orbit arc on map (visible at all zoom) ── */
.sat-orbit-arc { opacity: .5; will-change: opacity; }
.sat-ground-track { will-change: transform; }
/* ═══════════════════════════════════════════════════
BATTLEFIELD VISUALIZATION — Heatmap, Patrols, Strikes
═══════════════════════════════════════════════════ */
/* ── GPS Jamming Zone ── */
.gps-jam-zone { animation: jamPulse 3s ease-in-out infinite; }
.gps-jam-pulse { animation: jamPulse 2s ease-in-out infinite alternate; }
@keyframes jamPulse {
0% { opacity: 0.3; }
50% { opacity: 0.8; }
100% { opacity: 0.3; }
}
/* ── No-Fly Zone ── */
.nofly-zone { transition: fill-opacity 0.3s; }
.nofly-zone:hover { fill-opacity: 0.15 !important; }
.nofly-label { background: none !important; border: none !important; pointer-events: none; z-index: 600 !important; }
.nofly-label-inner {
font: 700 11px var(--fm);
letter-spacing: 2px;
opacity: 0.5;
animation: noflyBlink 4s ease-in-out infinite;
}
@keyframes noflyBlink {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
.hz-nofly-tooltip {
background: rgba(10,14,26,0.92) !important;
border: 1px solid rgba(255,34,34,0.3) !important;
color: #ff6644 !important;
font: 600 12px var(--fm) !important;
}
/* ── Strike Zones ── */
.strike-zone-pulse { animation: strikePulse 2s ease-in-out infinite; }
.strike-core-pulse { animation: strikePulse 1.5s ease-in-out infinite alternate; }
@keyframes strikePulse {
0% { opacity: 0.3; stroke-opacity: 0.3; }
50% { opacity: 1; stroke-opacity: 1; }
100% { opacity: 0.3; stroke-opacity: 0.3; }
}
.strike-marker { background: none !important; border: none !important; pointer-events: auto; z-index: 700 !important; }
.strike-marker-inner {
font-size: 20px;
text-align: center;
animation: strikeGlow 2s ease-in-out infinite;
cursor: pointer;
}
@keyframes strikeGlow {
0%, 100% { filter: brightness(1); transform: scale(1); }
50% { filter: brightness(1.5); transform: scale(1.15); }
}
.strike-marker-label {
font: 600 9px var(--fm);
text-align: center;
margin-top: 2px;
opacity: 0.8;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.strike-popup-container .leaflet-popup-content-wrapper {
background: rgba(10,14,26,0.95) !important;
border: 1px solid rgba(255,0,0,0.3) !important;
border-radius: 6px !important;
}
.strike-popup-container .leaflet-popup-tip { background: rgba(10,14,26,0.95) !important; }
.strike-popup { font: 12px var(--fm); color: #e8e4dc; }
.strike-popup-hdr {
padding: 6px 10px;
margin-bottom: 6px;
font-size: 13px;
}
.strike-popup-body {
padding: 4px 10px 8px;
font-size: 11px;
line-height: 1.6;
color: #a8a49a;
}
.strike-popup-body div { margin-bottom: 2px; }
/* ── Missile Fan & Ballistic Arc ── */
.missile-fan { transition: fill-opacity 0.3s; }
.missile-fan:hover { fill-opacity: 0.12 !important; }
.ballistic-arc { animation: arcFlow 2s linear infinite; }
@keyframes arcFlow {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -28; }
}
.ballistic-impact { animation: impactPulse 2s ease-in-out infinite; }
@keyframes impactPulse {
0%, 100% { r: 4; opacity: 0.5; }
50% { r: 8; opacity: 1; }
}
/* ── Patrol Routes ── */
.patrol-route { transition: opacity 0.3s; }
.patrol-trail { opacity: 0.9; }
.patrol-ship-marker { background: none !important; border: none !important; z-index: 750 !important; }
.patrol-ship {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.patrol-ship-icon {
font-size: 18px;
animation: shipBob 3s ease-in-out infinite;
}
@keyframes shipBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.patrol-ship-name {
font: 600 10px var(--fm);
opacity: 0.9;
}
/* ── Aircraft Patrol ── */
.patrol-aircraft-marker { background: none !important; border: none !important; z-index: 780 !important; }
.patrol-aircraft {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.patrol-ac-label {
font: 500 9px var(--fm);
opacity: 0.85;
}
.route-arrow { background: none !important; border: none !important; pointer-events: none; }
/* ── Live Flight Trails ── */
.live-flight-trail { opacity: 0.6; }
.live-flight-trail-ghost { opacity: 0.12; }
/* ── Mil Patrol Route ── */
.mil-patrol-route { opacity: 0.5; }
.mil-patrol-shadow { opacity: 0.15; }
/* ══════════════ Carrier Strike Group Tracker ══════════════ */
.carrier-marker-div{
background:none!important;border:none!important;
filter:drop-shadow(0 0 10px rgba(0,191,255,.35));
cursor:pointer;
transition:filter .3s;
}
.carrier-marker-div:hover{
filter:drop-shadow(0 0 20px rgba(0,191,255,.6)) brightness(1.2);
}
@keyframes carrierPulse{
0%{transform:scale(1);opacity:.6}
50%{transform:scale(1.45);opacity:.15}
100%{transform:scale(1);opacity:.6}
}
.carrier-popup .leaflet-popup-content-wrapper{
background:rgba(10,14,20,.97)!important;
border:1px solid rgba(0,191,255,.3)!important;
border-radius:6px!important;
box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 40px rgba(0,191,255,.08)!important;
}
.carrier-popup .leaflet-popup-tip{
background:rgba(10,14,20,.97)!important;
border:1px solid rgba(0,191,255,.15)!important;
}
.carrier-popup .leaflet-popup-content{
margin:0!important;
padding:0!important;
}
.carrier-popup .leaflet-popup-close-button{
color:#555!important;
font-size:18px!important;
top:6px!important;right:8px!important;
}
.carrier-popup .leaflet-popup-close-button:hover{
color:#00bfff!important;
}
/* ═══ FIRMS Thermal Anomaly Markers ═══ */
.firms-marker-div{ background:transparent!important; border:none!important; }
.firms-hotspot{ transition: box-shadow 0.3s ease; }
.firms-pulse-sig{
animation: firms-pulse 1.5s ease-in-out infinite;
}
.firms-pulse-near{
animation: firms-pulse 2.5s ease-in-out infinite;
}
@keyframes firms-pulse{
0%,100%{ transform:scale(1); opacity:1; }
50%{ transform:scale(1.4); opacity:0.7; }
}
.firms-popup .leaflet-popup-content-wrapper{
background:#0a0e14!important; border:1px solid #ff440066!important;
border-radius:6px!important; box-shadow:0 4px 20px rgba(255,68,0,0.2)!important;
}
.firms-popup .leaflet-popup-tip{ background:#0a0e14!important; border:1px solid #ff440044!important; }
.firms-popup .leaflet-popup-content{ margin:0!important; }
.firms-popup .leaflet-popup-close-button{ color:#555!important; font-size:18px!important; top:6px!important;right:8px!important; }
.firms-popup .leaflet-popup-close-button:hover{ color:#ff6600!important; }
.firms-summary{ pointer-events:none; }
.firms-nodata{ pointer-events:none; }
/* ═══ USGS Seismic Event Markers ═══ */
.seismic-marker-div{ background:transparent!important; border:none!important; }
.seismic-pulse{
animation: seismic-ring 2s ease-out infinite;
}
@keyframes seismic-ring{
0%{ transform:scale(1); opacity:1; }
70%{ transform:scale(1.6); opacity:0.3; }
100%{ transform:scale(1.8); opacity:0; }
}
.seismic-popup .leaflet-popup-content-wrapper{
background:#0a0e14!important; border:1px solid #ff660066!important;
border-radius:6px!important; box-shadow:0 4px 20px rgba(255,102,0,0.2)!important;
}
.seismic-popup .leaflet-popup-tip{ background:#0a0e14!important; border:1px solid #ff660044!important; }
.seismic-popup .leaflet-popup-content{ margin:0!important; }
.seismic-popup .leaflet-popup-close-button{ color:#555!important; font-size:18px!important; top:6px!important;right:8px!important; }
.seismic-popup .leaflet-popup-close-button:hover{ color:#ff8800!important; }
.seismic-summary{ pointer-events:none; }
.seismic-nodata{ pointer-events:none; }
/* ═══ Weather Station Markers ═══ */
.wx-marker-div{ background:transparent!important; border:none!important; }
.wx-severe{
animation: wx-blink 1.2s ease-in-out infinite;
}
@keyframes wx-blink{
0%,100%{ opacity:1; }
50%{ opacity:0.5; }
}
.weather-popup .leaflet-popup-content-wrapper{
background:#0a0e14!important; border:1px solid #00bcd466!important;
border-radius:6px!important; box-shadow:0 4px 20px rgba(0,188,212,0.15)!important;
}
.weather-popup .leaflet-popup-tip{ background:#0a0e14!important; border:1px solid #00bcd444!important; }
.weather-popup .leaflet-popup-content{ margin:0!important; }
.weather-popup .leaflet-popup-close-button{ color:#555!important; font-size:18px!important; top:6px!important;right:8px!important; }
.weather-popup .leaflet-popup-close-button:hover{ color:#00bcd4!important; }
.weather-summary{ pointer-events:none; }
.weather-nodata{ pointer-events:none; }
/* ═══════════════════════════════════════════════════════
INSS LIONS' ROAR — Premium War Stats Dashboard
═══════════════════════════════════════════════════════ */
.inss-dashboard{
position:relative;
background:linear-gradient(135deg,rgba(8,12,20,.95) 0%,rgba(15,22,36,.92) 50%,rgba(8,12,20,.95) 100%);
border:1px solid rgba(200,164,90,.15);
border-radius:14px;
padding:0;
margin-bottom:1.2rem;
overflow:hidden;
backdrop-filter:blur(20px);
box-shadow:
0 4px 40px rgba(0,0,0,.5),
0 0 80px rgba(200,164,90,.04),
inset 0 1px 0 rgba(200,164,90,.08);
}
.inss-dashboard::before{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse at 20% 0%,rgba(200,164,90,.06) 0%,transparent 50%),
radial-gradient(ellipse at 80% 100%,rgba(196,60,60,.04) 0%,transparent 50%);
pointer-events:none;z-index:0;
}
.inss-dashboard::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(200,164,90,.4) 30%,rgba(200,164,90,.6) 50%,rgba(200,164,90,.4) 70%,transparent 100%);
z-index:2;
}
/* ── Header ── */
.inss-header{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.4rem;
border-bottom:1px solid rgba(200,164,90,.1);
position:relative;z-index:1;
}
.inss-header-left{display:flex;align-items:center;gap:.8rem}
.inss-logo-mark{
position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
}
.inss-logo-icon{font-size:1.6rem;position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(200,164,90,.4))}
.inss-logo-glow{
position:absolute;inset:-4px;border-radius:50%;
background:radial-gradient(circle,rgba(200,164,90,.2),transparent 70%);
animation:inssLogoGlow 3s ease-in-out infinite;
}
@keyframes inssLogoGlow{
0%,100%{opacity:.4;transform:scale(1)}
50%{opacity:.8;transform:scale(1.15)}
}
.inss-title{
font-family:var(--fo);font-size:.95rem;font-weight:700;
letter-spacing:3px;color:var(--gold);
text-shadow:0 0 20px rgba(200,164,90,.3);
}
.inss-subtitle{
font-family:var(--fn);font-size:.72rem;color:var(--txt3);
letter-spacing:.5px;margin-top:2px;
}
.inss-header-right{display:flex;align-items:center;gap:1rem}
.inss-war-day{
display:flex;flex-direction:column;align-items:center;
background:rgba(196,60,60,.12);
border:1px solid rgba(196,60,60,.3);
border-radius:8px;padding:.3rem .7rem;
position:relative;overflow:hidden;
}
.inss-war-day::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(196,60,60,.1),transparent);
pointer-events:none;
}
.inss-day-label{
font-family:var(--fo);font-size:.55rem;color:rgba(196,60,60,.7);
letter-spacing:2px;font-weight:600;
}
.inss-day-num{
font-family:var(--fo);font-size:1.5rem;font-weight:800;
color:#ff4444;text-shadow:0 0 15px rgba(255,68,68,.4);
line-height:1.1;
}
.inss-refresh-btn{
width:36px;height:36px;border-radius:8px;border:1px solid rgba(200,164,90,.2);
background:rgba(200,164,90,.08);color:var(--gold);font-size:1.1rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .3s ease;
}
.inss-refresh-btn:hover{
background:rgba(200,164,90,.2);border-color:rgba(200,164,90,.4);
transform:rotate(180deg);
}
.inss-refresh-btn.loading .inss-refresh-icon{
animation:spin 1s linear infinite;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* ── Hero Stats Row ── */
.inss-hero-row{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:0;
position:relative;z-index:1;
border-bottom:1px solid rgba(200,164,90,.08);
}
.inss-hero-card{
position:relative;
padding:1.1rem .6rem .9rem;
text-align:center;
border-right:1px solid rgba(200,164,90,.06);
transition:all .4s cubic-bezier(.23,1,.32,1);
overflow:hidden;
cursor:default;
}
.inss-hero-card:last-child{border-right:none}
.inss-hero-card:hover{
background:rgba(200,164,90,.04);
}
.inss-hero-card:hover .inss-hero-glow{opacity:1}
.inss-hero-glow{
position:absolute;bottom:0;left:50%;transform:translateX(-50%);
width:60%;height:3px;border-radius:3px 3px 0 0;
opacity:.5;transition:opacity .4s ease;
}
.inss-hero-rockets .inss-hero-glow{background:linear-gradient(90deg,transparent,#ff6b35,transparent);box-shadow:0 0 15px rgba(255,107,53,.4)}
.inss-hero-intercept .inss-hero-glow{background:linear-gradient(90deg,transparent,#4caf50,transparent);box-shadow:0 0 15px rgba(76,175,80,.4)}
.inss-hero-idf .inss-hero-glow{background:linear-gradient(90deg,transparent,#2196f3,transparent);box-shadow:0 0 15px rgba(33,150,243,.4)}
.inss-hero-strikes .inss-hero-glow{background:linear-gradient(90deg,transparent,#ffd740,transparent);box-shadow:0 0 15px rgba(255,215,64,.4)}
.inss-hero-displaced .inss-hero-glow{background:linear-gradient(90deg,transparent,#ff9800,transparent);box-shadow:0 0 15px rgba(255,152,0,.4)}
.inss-hero-iran-cas .inss-hero-glow{background:linear-gradient(90deg,transparent,#ff6e40,transparent);box-shadow:0 0 15px rgba(255,110,64,.4)}
.inss-hero-icon{
font-size:1.4rem;margin-bottom:.3rem;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.inss-hero-num{
font-family:var(--fo);font-size:2rem;font-weight:800;
color:#fff;letter-spacing:1px;
line-height:1.1;margin-bottom:.3rem;
text-shadow:0 2px 12px rgba(0,0,0,.5);
transition:all .3s ease;
}
.inss-hero-rockets .inss-hero-num{color:#ff6b35}
.inss-hero-intercept .inss-hero-num{color:#4caf50}
.inss-hero-idf .inss-hero-num{color:#5c9df5}
.inss-hero-strikes .inss-hero-num{color:#ffd740}
.inss-hero-displaced .inss-hero-num{color:#ff9800}
.inss-hero-iran-cas .inss-hero-num{color:#ff6e40}
.inss-hero-label{
font-family:var(--fn);font-size:.72rem;color:rgba(255,255,255,.75);
line-height:1.3;letter-spacing:.3px;
}
.inss-hero-sub{display:none}
/* INSS source link */
.inss-source-link{
color:rgba(200,164,90,.6);text-decoration:none;
border-bottom:1px dotted rgba(200,164,90,.3);
transition:all .3s ease;
}
.inss-source-link:hover{
color:var(--gold);border-bottom-color:var(--gold);
}
/* Number count-up animation */
.inss-hero-num.counting{
animation:inssCountPulse .08s ease-in-out infinite alternate;
}
@keyframes inssCountPulse{
from{opacity:.85}to{opacity:1}
}
/* Glitch micro-effect on hover */
.inss-hero-card:hover .inss-hero-num{
text-shadow:0 0 20px currentColor,.5px 0 0 rgba(255,0,0,.3),-.5px 0 0 rgba(0,255,255,.3);
}
/* ── Multi-Front Cards ── */
.inss-fronts{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:.6rem;
padding:.9rem 1rem;
position:relative;z-index:1;
}
.inss-front-card{
position:relative;
background:rgba(255,255,255,.03);
border:1px solid rgba(200,164,90,.1);
border-radius:10px;
padding:.8rem .9rem;
transition:all .4s cubic-bezier(.23,1,.32,1);
overflow:hidden;
}
.inss-front-card::before{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);
pointer-events:none;border-radius:10px;
}
.inss-front-card:hover{
border-color:rgba(200,164,90,.2);
background:rgba(200,164,90,.04);
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(0,0,0,.3);
}
.inss-front-indicator{
position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0;
}
.inss-status-active .inss-front-indicator,
.inss-front-indicator.inss-status-active{
background:linear-gradient(90deg,rgba(255,68,68,.8),rgba(255,107,53,.6));
box-shadow:0 0 10px rgba(255,68,68,.3);
animation:inssStatusPulse 2s ease-in-out infinite;
}
.inss-status-moderate .inss-front-indicator,
.inss-front-indicator.inss-status-moderate{
background:linear-gradient(90deg,rgba(255,152,0,.7),rgba(255,193,7,.5));
box-shadow:0 0 8px rgba(255,152,0,.2);
}
.inss-status-critical .inss-front-indicator,
.inss-front-indicator.inss-status-critical{
background:linear-gradient(90deg,rgba(255,0,0,.9),rgba(255,68,68,.7));
box-shadow:0 0 12px rgba(255,0,0,.4);
animation:inssStatusPulse 1.2s ease-in-out infinite;
}
.inss-status-ceasefire .inss-front-indicator,
.inss-front-indicator.inss-status-ceasefire{
background:linear-gradient(90deg,rgba(76,175,80,.6),rgba(129,199,132,.4));
}
@keyframes inssStatusPulse{
0%,100%{opacity:1}50%{opacity:.4}
}
.inss-front-header{
display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;
}
.inss-front-flag{font-size:1.1rem;flex-shrink:0}
.inss-front-name{
font-family:var(--fn);font-size:.85rem;font-weight:700;color:#fff;
white-space:nowrap;flex-shrink:0;
}
.inss-front-status{
font-family:var(--fm);font-size:.58rem;
padding:2px 8px;border-radius:4px;
background:rgba(196,60,60,.15);color:#ff6b6b;
border:1px solid rgba(196,60,60,.2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:180px;
flex-shrink:1;min-width:0;
}
.inss-front-stats{
display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
}
.inss-fs{
display:flex;flex-direction:column;
padding:.35rem .45rem;
background:rgba(0,0,0,.2);
border-radius:6px;
border:1px solid rgba(255,255,255,.05);
}
.inss-fs-val{
font-family:var(--fo);font-size:1.1rem;font-weight:800;
color:#fff;letter-spacing:.5px;
text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.inss-fs-lbl{
font-family:var(--fn);font-size:.62rem;color:rgba(255,255,255,.5);
letter-spacing:.3px;margin-top:1px;
}
/* ── Footer / 24h Changes ── */
.inss-footer{
padding:.6rem 1rem;
border-top:1px solid rgba(200,164,90,.08);
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:.4rem;
}
.inss-changes{
display:flex;gap:.6rem;flex-wrap:wrap;flex:1;
}
.inss-change-tag{
font-family:var(--fm);font-size:.66rem;
padding:3px 10px;border-radius:5px;
background:rgba(255,107,53,.1);
color:#ffab76;border:1px solid rgba(255,107,53,.18);
display:flex;align-items:center;gap:.3rem;
line-height:1.4;
}
.inss-change-tag .up{color:#ff4444}
.inss-change-tag .down{color:#4caf50}
.inss-meta{
display:flex;gap:.8rem;align-items:center;
}
.inss-confidence{
font-family:var(--fm);font-size:.6rem;
padding:2px 8px;border-radius:4px;
background:rgba(76,175,80,.1);color:#81c784;
border:1px solid rgba(76,175,80,.15);
}
.inss-ts{
font-family:var(--fm);font-size:.58rem;color:var(--txt3);
}
/* ── Ambient animated scanline for INSS ── */
.inss-dashboard>.inss-scan{
position:absolute;left:0;right:0;height:1px;top:0;z-index:3;pointer-events:none;
background:linear-gradient(90deg,transparent 10%,rgba(200,164,90,.2) 50%,transparent 90%);
animation:inssScan 8s linear infinite;
}
@keyframes inssScan{
0%{top:0;opacity:0}5%{opacity:.8}95%{opacity:.8}100%{top:100%;opacity:0}
}
/* ── Responsive: tablet ── */
@media(max-width:1024px){
.inss-hero-row{grid-template-columns:repeat(3,1fr)}
.inss-fronts{grid-template-columns:repeat(2,1fr)}
}
/* ── Responsive: mobile ── */
@media(max-width:640px){
.inss-hero-row{grid-template-columns:repeat(2,1fr)}
.inss-fronts{grid-template-columns:1fr}
.inss-hero-num{font-size:1.3rem}
.inss-header{flex-wrap:wrap;gap:.5rem;padding:.8rem 1rem}
.inss-title{font-size:.8rem;letter-spacing:2px}
.inss-footer{flex-direction:column;align-items:flex-start}
}
/* ═══════════════════════════════════════════════════════
GCC IRAN MISSILE TRACKER — Premium Dashboard
Tension-filled, dynamic, dark military HUD aesthetic
═══════════════════════════════════════════════════════ */
.gcc-dashboard{
position:relative;
background:linear-gradient(145deg,#060a14 0%,#0c1426 30%,#0a1020 60%,#060a14 100%);
border:1px solid rgba(0,200,120,.12);
border-radius:16px;
padding:0;
margin-bottom:1.2rem;
overflow:hidden;
box-shadow:
0 4px 60px rgba(0,0,0,.6),
0 0 120px rgba(0,200,120,.03),
inset 0 1px 0 rgba(0,200,120,.1),
inset 0 -1px 0 rgba(200,40,40,.05);
}
/* Grid background pattern */
.gcc-grid-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(0,200,120,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,200,120,.03) 1px,transparent 1px);
background-size:40px 40px;
mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
}
/* Scanning line */
.gcc-scan-line{
position:absolute;left:0;right:0;height:2px;top:0;z-index:10;pointer-events:none;
background:linear-gradient(90deg,transparent 5%,rgba(0,200,120,.35) 30%,rgba(0,255,150,.5) 50%,rgba(0,200,120,.35) 70%,transparent 95%);
box-shadow:0 0 20px rgba(0,200,120,.3),0 0 60px rgba(0,200,120,.1);
animation:gccScan 6s linear infinite;
}
@keyframes gccScan{
0%{top:-2px;opacity:0}3%{opacity:1}97%{opacity:1}100%{top:100%;opacity:0}
}
/* ── Header ── */
.gcc-header{
display:flex;align-items:center;justify-content:space-between;
padding:1rem 1.4rem;
border-bottom:1px solid rgba(0,200,120,.08);
position:relative;z-index:2;
background:linear-gradient(180deg,rgba(0,200,120,.04),transparent);
}
.gcc-header-left{display:flex;align-items:center;gap:.9rem}
.gcc-logo-pulse{
position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
}
.gcc-logo-icon{font-size:1.7rem;position:relative;z-index:2;filter:drop-shadow(0 0 12px rgba(0,200,120,.5))}
.gcc-logo-ring{
position:absolute;inset:-6px;border-radius:50%;
border:2px solid rgba(0,200,120,.3);
animation:gccRingPulse 2.5s ease-in-out infinite;
}
.gcc-ring-2{
inset:-12px;border-color:rgba(0,200,120,.15);
animation-delay:.6s;animation-duration:3s;
}
@keyframes gccRingPulse{
0%,100%{transform:scale(.9);opacity:.3}
50%{transform:scale(1.1);opacity:.8}
}
.gcc-header-text{display:flex;flex-direction:column;gap:2px}
.gcc-title{
font-family:var(--fo);font-size:1rem;font-weight:800;
letter-spacing:4px;
color:#00e87b;
text-shadow:0 0 30px rgba(0,232,123,.4),0 0 60px rgba(0,232,123,.1);
text-transform:uppercase;
}
.gcc-subtitle{
font-family:var(--fn);font-size:.7rem;color:rgba(255,255,255,.45);
display:flex;align-items:center;gap:.5rem;
}
.gcc-live-dot{
width:6px;height:6px;border-radius:50%;
background:#00e87b;
box-shadow:0 0 8px #00e87b,0 0 20px rgba(0,232,123,.4);
animation:gccLiveDot 1.5s ease-in-out infinite;
}
@keyframes gccLiveDot{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.3;transform:scale(.7)}
}
.gcc-source-link{
color:rgba(0,200,120,.5);text-decoration:none;font-weight:700;
transition:all .3s;
}
.gcc-source-link:hover{color:#00e87b;text-shadow:0 0 10px rgba(0,232,123,.5)}
.gcc-header-right{display:flex;align-items:center;gap:1rem}
.gcc-war-day{
position:relative;display:flex;flex-direction:column;align-items:center;
background:linear-gradient(180deg,rgba(255,40,40,.15),rgba(255,40,40,.05));
border:1px solid rgba(255,68,68,.35);
border-radius:10px;padding:.35rem .8rem;
overflow:hidden;
}
.gcc-day-glow{
position:absolute;inset:0;
background:radial-gradient(circle at center,rgba(255,68,68,.15),transparent 70%);
animation:gccDayGlow 2s ease-in-out infinite;
}
@keyframes gccDayGlow{0%,100%{opacity:.5}50%{opacity:1}}
.gcc-day-label{
font-family:var(--fo);font-size:.5rem;color:rgba(255,80,80,.7);
letter-spacing:3px;font-weight:700;position:relative;z-index:1;
}
.gcc-day-num{
font-family:var(--fo);font-size:1.7rem;font-weight:900;
color:#ff4444;text-shadow:0 0 20px rgba(255,68,68,.5),0 0 40px rgba(255,68,68,.2);
line-height:1;position:relative;z-index:1;
}
.gcc-refresh-btn{
width:38px;height:38px;border-radius:10px;
border:1px solid rgba(0,200,120,.2);
background:rgba(0,200,120,.06);color:#00e87b;font-size:1.2rem;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:all .4s cubic-bezier(.23,1,.32,1);
}
.gcc-refresh-btn:hover{
background:rgba(0,200,120,.15);border-color:rgba(0,200,120,.4);
transform:rotate(180deg);box-shadow:0 0 20px rgba(0,200,120,.2);
}
.gcc-refresh-btn.loading .gcc-refresh-icon{animation:spin 1s linear infinite}
/* ── Hero Cards Row ── */
.gcc-hero-row{
display:grid;grid-template-columns:repeat(6,1fr);
gap:0;position:relative;z-index:2;
border-bottom:1px solid rgba(0,200,120,.06);
}
.gcc-hero-card{
position:relative;padding:1.2rem .5rem 1rem;text-align:center;
border-right:1px solid rgba(255,255,255,.03);
transition:all .5s cubic-bezier(.23,1,.32,1);overflow:hidden;cursor:default;
}
.gcc-hero-card:last-child{border-right:none}
.gcc-card-accent{
position:absolute;bottom:0;left:0;right:0;height:3px;
transition:all .4s ease;opacity:.6;
}
.gcc-hero-card:hover .gcc-card-accent{opacity:1;height:4px}
.gcc-hero-card:hover{background:rgba(255,255,255,.02)}
.gcc-card-particles{
position:absolute;inset:0;pointer-events:none;opacity:0;
transition:opacity .5s;
}
.gcc-hero-card:hover .gcc-card-particles{opacity:1}
/* Card accent colors */
.gcc-card-detected .gcc-card-accent{background:linear-gradient(90deg,transparent,#ff6b35,transparent);box-shadow:0 0 15px rgba(255,107,53,.3)}
.gcc-card-intercepted .gcc-card-accent{background:linear-gradient(90deg,transparent,#00e87b,transparent);box-shadow:0 0 15px rgba(0,232,123,.3)}
.gcc-card-impacted .gcc-card-accent{background:linear-gradient(90deg,transparent,#ff2d55,transparent);box-shadow:0 0 15px rgba(255,45,85,.3)}
.gcc-card-sea .gcc-card-accent{background:linear-gradient(90deg,transparent,#2ea6ff,transparent);box-shadow:0 0 15px rgba(46,166,255,.3)}
.gcc-card-killed .gcc-card-accent{background:linear-gradient(90deg,transparent,#ff0044,transparent);box-shadow:0 0 15px rgba(255,0,68,.3)}
.gcc-card-injured .gcc-card-accent{background:linear-gradient(90deg,transparent,#ff9500,transparent);box-shadow:0 0 15px rgba(255,149,0,.3)}
.gcc-hero-icon-wrap{margin-bottom:.35rem}
.gcc-hi{font-size:1.5rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.gcc-hero-num{
font-family:var(--fo);font-size:2.2rem;font-weight:900;
color:#fff;letter-spacing:1px;line-height:1.05;margin-bottom:.25rem;
text-shadow:0 2px 15px rgba(0,0,0,.6);
transition:all .3s ease;
}
/* Per-card number colors */
.gcc-card-detected .gcc-hero-num{color:#ff6b35}
.gcc-card-intercepted .gcc-hero-num{color:#00e87b}
.gcc-card-impacted .gcc-hero-num{color:#ff2d55}
.gcc-card-sea .gcc-hero-num{color:#2ea6ff}
.gcc-card-killed .gcc-hero-num{color:#ff0044}
.gcc-card-injured .gcc-hero-num{color:#ff9500}
.gcc-hero-label{
font-family:var(--fo);font-size:.6rem;font-weight:700;
color:rgba(255,255,255,.7);letter-spacing:1.5px;text-transform:uppercase;
}
.gcc-hero-sub{
font-family:var(--fn);font-size:.58rem;color:rgba(255,255,255,.3);
margin-top:2px;
}
/* Glitch on hover */
.gcc-hero-card:hover .gcc-hero-num{
text-shadow:0 0 25px currentColor,1px 0 0 rgba(255,0,0,.4),-1px 0 0 rgba(0,255,255,.4);
animation:gccNumGlitch .15s ease 1;
}
@keyframes gccNumGlitch{
0%{transform:translate(0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-1px,0)}100%{transform:translate(0)}
}
/* Counting animation */
.gcc-hero-num.counting{animation:gccCountPulse .06s ease-in-out infinite alternate}
@keyframes gccCountPulse{from{opacity:.8}to{opacity:1}}
/* ── Interception Rate Bar ── */
.gcc-rate-bar-wrap{
padding:.6rem 1.2rem;position:relative;z-index:2;
border-bottom:1px solid rgba(0,200,120,.06);
}
.gcc-rate-bar-track{
position:relative;height:8px;border-radius:8px;
background:rgba(255,255,255,.05);
overflow:hidden;
box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.gcc-rate-bar-fill{
height:100%;border-radius:8px;
background:linear-gradient(90deg,#00c853,#00e87b,#69f0ae);
box-shadow:0 0 12px rgba(0,200,120,.4);
transition:width 2s cubic-bezier(.23,1,.32,1);
position:relative;
}
.gcc-rate-bar-fill::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,.2) 80%,transparent 100%);
animation:gccBarShimmer 2.5s linear infinite;
}
@keyframes gccBarShimmer{
0%{transform:translateX(-100%)}100%{transform:translateX(200%)}
}
.gcc-rate-bar-glow{
position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;
background:radial-gradient(circle,rgba(0,232,123,.8),transparent);
filter:blur(4px);transition:left 2s cubic-bezier(.23,1,.32,1);
pointer-events:none;
}
.gcc-rate-labels{
display:flex;justify-content:space-between;align-items:center;
margin-top:.3rem;
}
.gcc-rate-labels span:first-child{
font-family:var(--fn);font-size:.65rem;color:rgba(255,255,255,.4);letter-spacing:.5px;
}
.gcc-rate-pct{
font-family:var(--fo);font-size:1rem;font-weight:800;
color:#00e87b;text-shadow:0 0 15px rgba(0,232,123,.4);
}
/* ── Iran Hero Section (new top-level) ── */
.iran-hero{
margin:.6rem 1rem;padding:1rem;
background:linear-gradient(135deg,rgba(200,40,40,.10),rgba(140,30,30,.04));
border:1px solid rgba(255,68,68,.2);
border-radius:14px;position:relative;z-index:2;overflow:hidden;
}
.iran-hero::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(255,68,68,.7),transparent);
box-shadow:0 0 12px rgba(255,68,68,.3);
}
.iran-hero-header{
display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;
}
.iran-hero-left{display:flex;align-items:center;gap:.6rem}
.iran-hero-flag{font-size:1.6rem}
.iran-hero-title{
font-family:var(--fo);font-size:.9rem;font-weight:700;
color:#ff6b6b;letter-spacing:2.5px;text-transform:uppercase;
}
.iran-hero-sub{
display:flex;align-items:center;gap:.4rem;
font-family:var(--fn);font-size:.6rem;color:rgba(255,255,255,.4);
}
/* Iran Hero 5 Cards */
.iran-hero-cards{
display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;
margin-bottom:.8rem;
}
.iran-hc{
position:relative;padding:.7rem .5rem .5rem;text-align:center;
background:rgba(0,0,0,.25);border-radius:10px;
border:1px solid rgba(255,68,68,.12);overflow:hidden;
transition:transform .2s,border-color .3s;
}
.iran-hc:hover{transform:translateY(-2px);border-color:rgba(255,68,68,.3)}
.iran-hc-accent{
position:absolute;top:0;left:0;right:0;height:2px;
}
.iran-hc-strikes .iran-hc-accent{background:linear-gradient(90deg,#ff4444,#ff6b35)}
.iran-hc-strikes .iran-hc-num{color:#ff4444}
.iran-hc-strikes{border-color:rgba(255,68,68,.2)}
.iran-hc-sorties .iran-hc-accent{background:linear-gradient(90deg,#ff9500,#ffb84d)}
.iran-hc-sorties .iran-hc-num{color:#ff9500}
.iran-hc-sorties{border-color:rgba(255,149,0,.2)}
.iran-hc-killed .iran-hc-accent{background:linear-gradient(90deg,#ff2d55,#ff4444)}
.iran-hc-killed .iran-hc-num{color:#ff2d55}
.iran-hc-killed{border-color:rgba(255,45,85,.2)}
.iran-hc-injured .iran-hc-accent{background:linear-gradient(90deg,#ff9500,#ffd700)}
.iran-hc-injured .iran-hc-num{color:#ff9500}
.iran-hc-injured{border-color:rgba(255,149,0,.15)}
.iran-hc-launchers .iran-hc-accent{background:linear-gradient(90deg,#2ea6ff,#69d2e7)}
.iran-hc-launchers .iran-hc-num{color:#2ea6ff}
.iran-hc-launchers{border-color:rgba(46,166,255,.2)}
.iran-hc-num{
font-family:var(--fo);font-size:1.8rem;font-weight:900;
line-height:1;margin-bottom:2px;
text-shadow:0 2px 15px rgba(0,0,0,.5);
}
.iran-hc-label{
font-family:var(--fo);font-size:.55rem;font-weight:700;
color:rgba(255,255,255,.6);letter-spacing:1.5px;text-transform:uppercase;
}
.iran-hc-sub{
font-family:var(--fn);font-size:.5rem;color:rgba(255,255,255,.3);
margin-top:1px;
}
/* Iran Daily Strikes Chart */
.iran-chart-wrap{
margin-top:.5rem;padding:.6rem;
background:rgba(0,0,0,.15);border-radius:10px;
border:1px solid rgba(255,68,68,.08);
}
.iran-chart-title{
font-family:var(--fo);font-size:.65rem;font-weight:600;
color:#ff4444;letter-spacing:1.5px;margin-bottom:.5rem;
}
.iran-chart{
height:170px;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.iran-chart-svg{width:100%;height:100%}
.iran-chart-ylabel{
font-size:8px;fill:rgba(255,255,255,.3);font-family:var(--fm);
text-anchor:start;dominant-baseline:middle;
}
.iran-chart-ylabel-r{
font-size:8px;fill:rgba(255,160,120,.4);font-family:var(--fm);
text-anchor:end;dominant-baseline:middle;
}
.iran-chart-xlabel{
font-size:7px;fill:rgba(255,255,255,.35);font-family:var(--fn);
text-anchor:middle;dominant-baseline:hanging;
}
.iran-chart-legend{
display:flex;align-items:center;gap:.6rem;
margin-top:.4rem;justify-content:center;
font-family:var(--fn);font-size:.55rem;color:rgba(255,255,255,.35);
}
.iran-legend-bar{
display:inline-block;width:14px;height:10px;border-radius:2px;
background:#ff4444;opacity:.85;
}
.iran-legend-line{
display:inline-block;width:14px;height:2px;border-radius:1px;
background:rgba(255,160,120,.7);position:relative;
}
.iran-legend-line::after{
content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:5px;height:5px;border-radius:50%;background:#ffa078;
}
/* ── GCC Tab Selector ── */
.gcc-tabs{
display:flex;gap:.4rem;padding:.5rem 1rem;
position:relative;z-index:2;flex-wrap:wrap;
}
.gcc-tab{
display:flex;align-items:center;gap:.3rem;
padding:.35rem .7rem;border-radius:20px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.5);font-family:var(--fn);font-size:.65rem;
cursor:pointer;transition:all .25s;
}
.gcc-tab:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.gcc-tab-active{
background:rgba(0,232,123,.12);border-color:rgba(0,232,123,.3);
color:#00e87b;font-weight:600;
}
/* ── GCC Defence Summary Row ── */
.gcc-defence-row{
display:flex;align-items:center;gap:.3rem;
margin:.3rem 1rem;padding:.5rem .6rem;
background:rgba(0,0,0,.2);border-radius:10px;
border:1px solid rgba(0,232,123,.08);
position:relative;z-index:2;flex-wrap:wrap;justify-content:space-between;
}
.gcc-def-stat{text-align:center;flex:1;min-width:50px}
.gcc-def-num{
font-family:var(--fo);font-size:1.1rem;font-weight:800;
line-height:1.1;
}
.gcc-def-lbl{
font-family:var(--fn);font-size:.5rem;color:rgba(255,255,255,.35);
letter-spacing:.3px;text-transform:uppercase;margin-top:1px;
}
.gcc-def-rate{
text-align:center;flex:0 0 auto;padding:0 .4rem;
border-left:1px solid rgba(255,255,255,.06);
}
.gcc-def-rate-num{
font-family:var(--fo);font-size:1.2rem;font-weight:900;
color:#00e87b;text-shadow:0 0 10px rgba(0,232,123,.3);
}
.gcc-def-rate-lbl{
font-family:var(--fn);font-size:.45rem;color:rgba(0,232,123,.5);
text-transform:uppercase;letter-spacing:.5px;
}
.gcc-rate-bar-mini{
width:60px;height:3px;background:rgba(255,255,255,.06);
border-radius:2px;margin-top:3px;overflow:hidden;
}
.gcc-rate-bar-fill-mini{
height:100%;border-radius:2px;
background:linear-gradient(90deg,#00c853,#00e87b);
transition:width 1.5s cubic-bezier(.23,1,.32,1);
}
/* ── Old Iran section (kept for compat, hidden) ── */
.gcc-iran-section{display:none}
/* ── Footer ── */
.gcc-footer{
padding:.5rem 1.2rem;
border-top:1px solid rgba(0,200,120,.06);
position:relative;z-index:2;
display:flex;align-items:center;justify-content:space-between;
}
.gcc-footer-left{display:flex;align-items:center;gap:.5rem}
.gcc-live-indicator{
display:flex;align-items:center;gap:.4rem;
font-family:var(--fo);font-size:.6rem;color:rgba(0,232,123,.6);
letter-spacing:1.5px;text-transform:uppercase;
}
.gcc-ts{
font-family:var(--fm);font-size:.58rem;color:rgba(255,255,255,.3);
}
/* ── Responsive: tablet ── */
@media(max-width:1024px){
.iran-hero-cards{grid-template-columns:repeat(3,1fr)}
.gcc-defence-row{gap:.2rem}
.gcc-def-num{font-size:.9rem}
}
/* ── Responsive: mobile ── */
@media(max-width:640px){
.iran-hero-cards{grid-template-columns:repeat(2,1fr)}
.iran-hc-num{font-size:1.3rem}
.iran-hero-title{font-size:.7rem;letter-spacing:1.5px}
.gcc-defence-row{flex-wrap:wrap;gap:.3rem}
.gcc-def-stat{min-width:40px}
.gcc-def-num{font-size:.8rem}
.gcc-tabs{gap:.3rem}
.gcc-tab{font-size:.6rem;padding:.3rem .5rem}
.gcc-header-right{gap:.4rem}
.gcc-footer{flex-direction:column;align-items:flex-start;gap:.3rem}
}
/* ═══════════════════════════════════════════════════
PREDICTION HITS — "QueWi War Room 成功预测" Banner
═══════════════════════════════════════════════════ */
/* ── Banner container ── */
.pred-hits-wrap {
margin: 1rem 0;
border: 1px solid rgba(255,215,0,0.3);
border-radius: 12px;
background: linear-gradient(135deg, rgba(255,215,0,0.06) 0%, rgba(255,180,0,0.03) 100%);
overflow: hidden;
animation: predHitsGlow 3s ease-in-out infinite;
}
@keyframes predHitsGlow {
0%,100% { box-shadow: 0 0 15px rgba(255,215,0,0.1); }
50% { box-shadow: 0 0 25px rgba(255,215,0,0.25); }
}
.pred-hits-header {
display: flex;
align-items: center;
gap: .6rem;
padding: .8rem 1.2rem;
background: linear-gradient(90deg, rgba(255,215,0,0.12), transparent);
border-bottom: 1px solid rgba(255,215,0,0.15);
}
.pred-hits-icon {
font-size: 1.3rem;
animation: predPulse 2s ease-in-out infinite;
}
@keyframes predPulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
.pred-hits-title {
font-family: var(--fd);
font-size: .75rem;
letter-spacing: 2px;
color: var(--gold);
text-transform: uppercase;
font-weight: 600;
}
.pred-hits-count {
margin-left: auto;
font-family: var(--fd);
font-size: .65rem;
letter-spacing: 1px;
color: var(--txt3);
background: rgba(255,215,0,0.1);
padding: .2rem .6rem;
border-radius: 20px;
border: 1px solid rgba(255,215,0,0.2);
}
/* ── Hit cards list ── */
.pred-hits-list {
padding: .6rem;
display: flex;
flex-direction: column;
gap: .5rem;
max-height: 400px;
overflow-y: auto;
}
.pred-hit-card {
background: rgba(255,215,0,0.04);
border: 1px solid rgba(255,215,0,0.12);
border-radius: 8px;
padding: .7rem .9rem;
transition: all .25s;
}
.pred-hit-card:hover {
background: rgba(255,215,0,0.08);
border-color: rgba(255,215,0,0.25);
}
.pred-hit-badge {
display: inline-block;
font-family: var(--fd);
font-size: .6rem;
letter-spacing: 1.5px;
color: #000;
background: linear-gradient(135deg, #ffd700, #ffaa00);
padding: .15rem .5rem;
border-radius: 4px;
font-weight: 700;
margin-bottom: .4rem;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pred-hit-badge-dynamic{
position:relative;
overflow:hidden;
animation:predBadgeShock 1.4s ease-in-out infinite;
}
.pred-hit-badge-dynamic::after{
content:'';
position:absolute;inset:-1px;
background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.45) 45%,transparent 70%);
transform:translateX(-120%);
animation:predBadgeSweep 2.2s linear infinite;
pointer-events:none;
}
.pred-hit-medal{display:inline-block;margin-right:.28rem;animation:predMedalPulse .9s ease-in-out infinite}
@keyframes predBadgeShock{
0%,100%{box-shadow:0 0 0 rgba(255,215,0,0)}
50%{box-shadow:0 0 14px rgba(255,185,0,.5),0 0 26px rgba(255,90,0,.28)}
}
@keyframes predBadgeSweep{0%{transform:translateX(-120%)}100%{transform:translateX(140%)}}
@keyframes predMedalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-5deg)}}
.pred-hit-meta {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .3rem;
}
.pred-hit-model {
font-family: var(--fd);
font-size: .6rem;
letter-spacing: 1px;
font-weight: 600;
}
.pred-hit-tier{
font-size:.58rem;
color:#cde9ff;
border:1px solid rgba(90,170,255,.35);
background:rgba(90,170,255,.12);
border-radius:10px;
padding:.08rem .42rem;
}
.pred-hit-delta {
font-size: .65rem;
color: var(--green);
font-weight: 600;
background: rgba(0,230,118,0.1);
padding: .1rem .4rem;
border-radius: 10px;
border: 1px solid rgba(0,230,118,0.2);
}
.pred-hit-validator{
font-size:.58rem;
color:var(--txt3);
border:1px solid rgba(200,164,90,.25);
background:rgba(200,164,90,.08);
border-radius:10px;
padding:.1rem .42rem;
}
.pred-hit-label {
font-weight: 600;
color: var(--txt3);
font-size: .7rem;
}
.pred-hit-prediction {
font-size: .78rem;
color: var(--txt1);
line-height: 1.5;
margin-bottom: .25rem;
padding: .3rem .5rem;
background: rgba(255,215,0,0.06);
border-radius: 4px;
border-left: 3px solid var(--gold);
}
.pred-hit-frag{
font-size:.7rem;
color:#ffe8a6;
line-height:1.45;
margin-bottom:.28rem;
padding:.35rem .5rem;
border-left:3px solid rgba(0,255,170,.45);
background:linear-gradient(90deg,rgba(0,255,170,.08),rgba(0,255,170,.02));
border-radius:4px;
}
.pred-hit-full{margin:.2rem 0 .35rem}
.pred-hit-full summary{
cursor:pointer;
color:var(--txt3);
font-size:.62rem;
list-style:none;
}
.pred-hit-full summary::-webkit-details-marker{display:none}
.pred-hit-full summary::before{content:'▸ ';color:var(--gold)}
.pred-hit-full[open] summary::before{content:'▾ '}
.pred-hit-fulltext{
margin-top:.22rem;
font-size:.68rem;
line-height:1.5;
color:var(--txt2);
padding:.35rem .45rem;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.08);
border-radius:4px;
}
.pred-hit-mark{
background:linear-gradient(90deg,rgba(0,255,170,.35),rgba(255,215,0,.35));
color:#fff7d6;
padding:0 .12rem;
border-radius:2px;
box-shadow:0 0 8px rgba(255,215,0,.25);
}
.pred-hit-news {
font-size: .72rem;
color: var(--txt2);
line-height: 1.4;
margin-bottom: .3rem;
}
.pred-hit-news a {
color: var(--accent);
text-decoration: none;
}
.pred-hit-news a:hover {
text-decoration: underline;
}
.pred-hit-evidence{
font-size:.68rem;
color:var(--txt2);
margin:.28rem 0 .1rem;
padding:.32rem .45rem;
border-left:2px solid rgba(255,215,0,.4);
background:rgba(255,215,0,.04);
border-radius:3px;
line-height:1.45;
}
.pred-hit-fact-basis{
font-size:.67rem;
color:var(--txt2);
margin:.24rem 0 .1rem;
padding:.3rem .45rem;
border-left:2px solid rgba(0,255,170,.45);
background:rgba(0,255,170,.06);
border-radius:3px;
}
.pred-hit-fact-item{display:block;line-height:1.38;margin-top:.1rem}
.pred-hit-reason{
font-size:.67rem;
color:var(--txt2);
margin:.24rem 0 .12rem;
padding:.3rem .45rem;
border-left:2px solid rgba(139,92,246,.45);
background:rgba(139,92,246,.06);
border-radius:3px;
}
.pred-hit-reason-item{display:block;line-height:1.4;margin-top:.12rem}
.pred-hit-stamp {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .4rem;
margin-top: .3rem;
}
.pred-hit-quewi {
font-family: var(--fd);
font-size: .6rem;
letter-spacing: .8px;
color: var(--gold);
font-style: italic;
opacity: .9;
}
.pred-hit-kw {
display: flex;
flex-wrap: wrap;
gap: .2rem;
}
.pred-kw-tag {
font-size: .55rem;
padding: .1rem .3rem;
border-radius: 3px;
background: rgba(255,215,0,0.1);
border: 1px solid rgba(255,215,0,0.15);
color: var(--txt3);
font-family: var(--fd);
letter-spacing: .5px;
}
/* ── Inline hit badge in leader predictions ── */
.ldr2-pred-hit {
background: rgba(255,215,0,0.06) !important;
border: 1px solid rgba(255,215,0,0.2) !important;
position: relative;
}
.tl-block-hit{
background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(255,120,0,.03));
border-left-color:rgba(255,215,0,.55)!important;
box-shadow:inset 0 0 18px rgba(255,215,0,.06),0 0 0 1px rgba(255,215,0,.06);
}
.ldr2-pred-hit::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: inherit;
box-shadow: inset 0 0 20px rgba(255,215,0,0.08);
pointer-events: none;
}
.ldr2-hit-badge {
font-family: var(--fd);
font-size: .5rem;
letter-spacing: 1px;
color: #000;
background: linear-gradient(135deg, #ffd700, #ffaa00);
padding: .12rem .4rem;
border-radius: 3px;
font-weight: 700;
text-shadow: 0 1px 1px rgba(0,0,0,0.15);
margin-left: auto;
animation: hitBadgePulse 2s ease-in-out infinite;
}
@keyframes hitBadgePulse {
0%,100% { opacity: 1; }
50% { opacity: .7; }
}
.pred-inline-seal{
appearance:none;
border:none;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:.28rem;
margin-left:auto;
padding:.16rem .48rem;
border-radius:999px;
font-family:var(--fd);
font-size:.52rem;
letter-spacing:1.1px;
font-weight:700;
color:#120700;
background:linear-gradient(135deg,#ffe17a 0%,#ffd200 35%,#ff9900 100%);
box-shadow:0 0 0 1px rgba(255,239,190,.45),0 6px 18px rgba(255,166,0,.18);
position:relative;
overflow:hidden;
text-transform:uppercase;
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.pred-inline-seal::before{
content:'';
position:absolute;
inset:-1px;
background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.55) 46%,transparent 72%);
transform:translateX(-135%);
animation:predInlineSealSweep 2.8s linear infinite;
pointer-events:none;
}
.pred-inline-seal:hover{
transform:translateY(-1px) scale(1.02);
box-shadow:0 0 0 1px rgba(255,239,190,.6),0 10px 24px rgba(255,166,0,.28);
filter:saturate(1.08);
}
.pred-inline-seal:active{transform:translateY(0) scale(.98)}
.pred-inline-seal-medal{
display:inline-block;
font-size:.68rem;
animation:predInlineMedalPulse 1.15s ease-in-out infinite;
}
.pred-inline-seal-leader{margin-left:auto}
.pred-inline-seal-timeline{
margin-left:.5rem;
font-size:.48rem;
padding:.12rem .42rem;
}
@keyframes predInlineSealSweep{0%{transform:translateX(-135%)}100%{transform:translateX(155%)}}
@keyframes predInlineMedalPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14) rotate(-5deg)}}
.ldr2-pred-hit-stamp {
font-family: var(--fd);
font-size: .58rem;
letter-spacing: .5px;
color: var(--gold);
font-style: italic;
margin-top: .3rem;
padding: .25rem .4rem;
background: linear-gradient(90deg, rgba(255,215,0,0.08), transparent);
border-radius: 4px;
border-left: 2px solid var(--gold);
}
.tl-block-hit-source{
margin-top:.28rem;
font-family:var(--fd);
font-size:.55rem;
letter-spacing:.4px;
color:rgba(255,225,160,.9);
background:rgba(255,215,0,.05);
border:1px solid rgba(255,215,0,.1);
border-radius:6px;
padding:.22rem .42rem;
}
/* ── Prediction hit evidence modal ── */
.prediction-hit-overlay{
position:fixed;
inset:0;
z-index:61000;
display:flex;
align-items:center;
justify-content:center;
padding:1rem;
background:radial-gradient(circle at top,rgba(255,215,0,.08),transparent 32%),rgba(5,8,14,.88);
backdrop-filter:blur(14px);
}
.prediction-hit-modal{
width:min(1080px,96vw);
max-height:90vh;
overflow:auto;
border-radius:18px;
border:1px solid rgba(255,215,0,.18);
background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 28%),linear-gradient(135deg,rgba(255,215,0,.05),rgba(10,16,26,.96) 28%,rgba(9,12,20,.98));
box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,215,0,.06) inset;
position:relative;
overflow-x:hidden;
}
.prediction-hit-modal::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(115deg,transparent 0%,rgba(255,215,0,.08) 18%,transparent 34%);
pointer-events:none;
}
.prediction-hit-modal-head{
position:sticky;
top:0;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
padding:1rem 1.15rem .85rem;
background:linear-gradient(180deg,rgba(8,12,20,.96),rgba(8,12,20,.78));
border-bottom:1px solid rgba(255,215,0,.08);
backdrop-filter:blur(10px);
}
.prediction-hit-modal-kicker{
font-family:var(--fd);
font-size:.58rem;
letter-spacing:2.4px;
color:rgba(255,215,0,.82);
text-transform:uppercase;
margin-bottom:.2rem;
}
.prediction-hit-modal-title{
font-family:var(--fh);
font-size:1.15rem;
color:#fff0c7;
letter-spacing:.4px;
}
.prediction-hit-modal-close{
appearance:none;
border:none;
width:36px;
height:36px;
border-radius:50%;
cursor:pointer;
color:#ffe2a7;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,215,0,.16);
box-shadow:0 8px 24px rgba(0,0,0,.18);
transition:all .2s ease;
}
.prediction-hit-modal-close:hover{background:rgba(255,215,0,.1);transform:scale(1.04)}
.prediction-hit-modal-body{padding:1rem 1.15rem 1.2rem;position:relative;z-index:1}
.prediction-hit-modal-meta{
display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-bottom:.9rem;
}
.prediction-hit-modal-model,
.prediction-hit-modal-tier,
.prediction-hit-modal-delta,
.prediction-hit-modal-validator{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:.18rem .62rem;
font-family:var(--fd);
font-size:.58rem;
letter-spacing:1px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
}
.prediction-hit-modal-tier{color:#cfe8ff;border-color:rgba(95,171,255,.28);background:rgba(95,171,255,.1)}
.prediction-hit-modal-delta{color:#85efac;border-color:rgba(46,204,113,.24);background:rgba(46,204,113,.08)}
.prediction-hit-modal-validator{color:var(--txt2)}
.prediction-hit-modal-grid{
display:grid;
grid-template-columns:1.15fr .95fr .85fr;
gap:.85rem;
}
.prediction-hit-panel{
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
padding:.9rem;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.prediction-hit-panel-primary{
border-color:rgba(255,215,0,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 0 30px rgba(255,215,0,.04);
}
.prediction-hit-panel-title{
font-family:var(--fd);
font-size:.62rem;
letter-spacing:2px;
color:var(--gold);
text-transform:uppercase;
margin-bottom:.65rem;
}
.prediction-hit-modal-prediction{
font-family:var(--fh);
font-size:.98rem;
line-height:1.9;
color:#fff6da;
}
.prediction-hit-modal-frag{
margin-top:.75rem;
display:grid;
gap:.28rem;
padding:.65rem .72rem;
border-radius:10px;
background:rgba(255,215,0,.06);
border:1px solid rgba(255,215,0,.12);
}
.prediction-hit-modal-frag span,
.prediction-hit-modal-time-item span{
font-family:var(--fd);
font-size:.58rem;
letter-spacing:1.4px;
color:var(--txt3);
text-transform:uppercase;
}
.prediction-hit-modal-full{
margin-top:.75rem;
font-size:.84rem;
line-height:1.8;
color:var(--txt2);
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.05);
border-radius:10px;
padding:.75rem;
}
.prediction-hit-modal-source{font-size:.84rem;color:var(--txt);line-height:1.75}
.prediction-hit-modal-link{
display:inline-flex;
margin-top:.65rem;
color:#9fd4ff;
text-decoration:none;
font-family:var(--fd);
font-size:.62rem;
letter-spacing:1px;
}
.prediction-hit-modal-link:hover{text-decoration:underline}
.prediction-hit-modal-quote{
margin:.8rem 0 0;
padding:.8rem .9rem;
border-left:3px solid rgba(255,215,0,.45);
background:rgba(255,215,0,.05);
border-radius:0 10px 10px 0;
color:#ffecc4;
font-size:.86rem;
line-height:1.85;
}
.prediction-hit-modal-facts{
display:flex;
flex-wrap:wrap;
gap:.35rem;
margin-top:.75rem;
}
.prediction-hit-modal-time-item{
display:flex;
flex-direction:column;
gap:.2rem;
padding:.62rem .72rem;
border-radius:10px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
margin-bottom:.55rem;
}
.prediction-hit-modal-time-item strong{color:#fff0c9;font-size:.88rem;font-family:var(--fm)}
.prediction-hit-modal-reasons{
display:flex;
flex-direction:column;
gap:.4rem;
margin-top:.75rem;
}
.prediction-hit-modal-reason,
.prediction-hit-modal-reasoning{
font-size:.78rem;
line-height:1.75;
color:var(--txt2);
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.05);
border-radius:10px;
padding:.65rem .75rem;
}
/* ── Responsive ── */
@media(max-width:640px){
.pred-hits-header { flex-wrap:wrap; padding:.6rem .8rem; }
.pred-hits-title { font-size:.65rem; }
.pred-hit-card { padding:.5rem .6rem; }
.pred-hit-prediction { font-size:.72rem; }
.pred-hit-stamp { flex-direction:column; align-items:flex-start; }
.pred-inline-seal{font-size:.48rem;padding:.14rem .42rem}
.prediction-hit-overlay{padding:.4rem}
.prediction-hit-modal{width:100%;max-height:94vh;border-radius:14px}
.prediction-hit-modal-head{padding:.85rem .8rem .72rem}
.prediction-hit-modal-body{padding:.8rem}
.prediction-hit-modal-grid{grid-template-columns:1fr}
.prediction-hit-modal-title{font-size:1rem}
}
@media(max-width:960px){
.prediction-hit-modal-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
.prediction-hit-modal-grid{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════════════════════════════
ROUND 10: ULTRA VISUAL COMFORT — iOS / Android / iPad
Full device adaptation for high visual comfort (高度视觉舒适感)
═══════════════════════════════════════════════════════════════════ */
/* ── 1. Global Mobile Typography & Rendering ── */
@media(max-width:1024px){
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
body{
/* Prevent overscroll bounce (iOS Safari) */
overscroll-behavior-y:none;
/* Better Chinese text rendering */
font-feature-settings:'palt','kern';
word-break:break-word;
-webkit-hyphens:auto;
hyphens:auto;
}
/* Smoother Chinese text line heights for readability */
.wg-section-body,
.dash-event,
.nfp-body,
.nr-body-cn,
.div-model-val,
.tl-block-body,
.ldr2-stance,
.ldr2-quote,
.ldr2-pred-move,
.fac-text,
.hz-ai-intel-summary{
line-height:2;
letter-spacing:.3px;
}
}
/* ── 2. iPad Pro / iPad Air (landscape & portrait) 769–1366px ── */
@media(min-width:769px) and (max-width:1366px){
/* Hormuz: stack sidebar below map on iPad portrait */
.hormuz-body{
grid-template-columns:1fr!important;
grid-template-rows:auto auto;
}
.hormuz-stats{
border-left:none;
border-top:1px solid var(--border);
display:grid;
grid-template-columns:repeat(3,1fr);
gap:.4rem;
padding:.6rem;
max-height:none;
overflow-y:visible;
}
.hormuz-map{min-height:380px!important}
/* Map stats bar: better spacing on iPad */
.hz-map-stats{
flex-wrap:wrap;
justify-content:center;
}
.hz-mstat{
min-width:auto;
flex:1 1 16%;
padding:.5rem .4rem;
}
/* INSS hero row: 3 cols on iPad */
.inss-hero-row{grid-template-columns:repeat(3,1fr)}
.inss-fronts{grid-template-columns:repeat(2,1fr)}
.inss-hero-num{font-size:1.8rem}
/* Multi-source bar: grid layout for iPad */
.hz-msrc-bar{
flex-direction:column;
align-items:center;
gap:6px;
padding:8px 14px;
max-width:420px;
white-space:normal;
}
.hz-msrc-sources{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px 8px;
width:100%;
}
.hz-msrc-src{
justify-content:center;
}
/* Wargame card grids */
.wg-cards{grid-template-columns:repeat(2,1fr)}
.leader-grid-v2{grid-template-columns:repeat(2,1fr)}
/* Better risk matrix on iPad */
.risk-matrix-grid{grid-template-columns:1fr 1fr}
/* Compare tables: ensure they don't overflow */
.ct-table{font-size:.78rem}
/* News popup: centered with nice size */
.news-float-popup{
width:min(600px,88vw)!important;
max-height:88vh;
border-radius:10px!important;
}
/* Model detail modal: nice iPad frame */
.model-detail-modal{
max-width:88vw;
max-height:88vh;
border-radius:8px;
}
/* Prediction hits: 2 col on wider iPads */
.pred-hits-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:.5rem;
}
}
/* ── 3. iPad Portrait specific (768-834px) ── */
@media(min-width:768px) and (max-width:834px){
/* Slightly smaller fonts for iPad Mini */
html{font-size:15.5px}
.hormuz-map{min-height:340px!important}
/* Stack Hormuz overlays */
.hormuz-stats{
grid-template-columns:repeat(2,1fr);
}
/* Force comparison bars: ensure readable */
.fcb-track{height:30px}
.fcb-fill-red,.fcb-fill-blue{font-size:.62rem}
/* INSS cards: prevent cramping */
.inss-front-card{padding:.7rem}
.inss-front-stats{gap:.35rem}
}
/* ── 4. Phone Visual Comfort (max-width:480px) ── */
@media(max-width:480px){
/* Breathing room: generous padding for thumb navigation */
.compare-body{padding:.6rem!important}
.panel-header{padding:.55rem .7rem}
/* Larger, more readable text on phones */
.dash-event{
font-size:.85rem;
line-height:2;
padding:.4rem 0;
}
.dash-card{padding:.7rem}
.dash-value{font-size:1.1rem}
.dash-label{font-size:.72rem}
/* Better force comparison readability */
.fcb-track{height:28px;border-radius:14px}
.fcb-fill-red,.fcb-fill-blue{font-size:.6rem}
.fcb-label{font-size:.78rem;margin-bottom:.2rem}
/* Escalation gauge: taller for readability */
.esc-gauge-track{height:24px}
.esc-gauge-val{font-size:.78rem;letter-spacing:1px}
.esc-gauge-labels{font-size:.62rem}
/* INSS dashboard phone comfort */
.inss-header{
padding:.7rem .8rem;
flex-wrap:wrap;
gap:.4rem;
}
.inss-logo-mark{width:32px;height:32px}
.inss-logo-icon{font-size:1.3rem}
.inss-title{font-size:.78rem;letter-spacing:2px}
.inss-hero-row{grid-template-columns:repeat(2,1fr)!important}
.inss-hero-card{padding:.8rem .5rem .7rem}
.inss-hero-num{font-size:1.4rem!important}
.inss-hero-label{font-size:.68rem}
.inss-fronts{
grid-template-columns:1fr!important;
gap:.5rem;
padding:.7rem;
}
.inss-front-card{padding:.7rem .8rem}
.inss-front-name{font-size:.82rem}
.inss-fs-val{font-size:1rem}
.inss-fs-lbl{font-size:.62rem}
.inss-footer{
padding:.5rem .7rem;
flex-direction:column;
gap:.4rem;
align-items:flex-start;
}
.inss-change-tag{font-size:.62rem;padding:3px 8px}
/* Better Hormuz on phone */
.hormuz-body{
grid-template-columns:1fr!important;
grid-template-rows:auto auto;
}
.hormuz-stats{
border-left:none!important;
border-top:1px solid var(--border);
display:flex;
flex-direction:column;
max-height:none;
overflow-y:visible;
padding:.5rem;
gap:.4rem;
}
.hormuz-map{min-height:240px!important}
/* Map stats: scrollable on phone */
.hz-map-stats{
flex-wrap:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.hz-map-stats::-webkit-scrollbar{display:none}
.hz-mstat{
min-width:80px;
flex:0 0 auto;
padding:.4rem .3rem;
}
/* Multi-source intelligence bar: compact on phone */
.hz-msrc-bar{
flex-direction:column;
align-items:center;
gap:5px;
padding:6px 10px;
font-size:10px;
max-width:100% !important;
white-space:normal;
border-radius:0;
}
.hz-msrc-title{
font-size:8px;
padding-right:0;
border-right:none;
width:100%;
justify-content:center;
padding-bottom:4px;
margin-bottom:2px;
border-bottom:1px solid rgba(0,229,255,.12);
}
.hz-msrc-icon{font-size:11px}
.hz-msrc-sources{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:4px 6px;
width:100%;
}
.hz-msrc-src{
padding:3px 4px;
justify-content:center;
gap:3px;
border-radius:4px;
background:rgba(0,229,255,.04);
}
.hz-msrc-dot{width:6px;height:6px}
.hz-msrc-name{font-size:8.5px;letter-spacing:.2px}
.hz-msrc-val{font-size:8.5px;min-width:14px}
/* AI Intel panel: better readability */
.hz-ai-intel-summary{
font-size:.78rem;
line-height:1.8;
padding:.45rem .55rem;
}
.hz-intel-event{
padding:.4rem .5rem;
min-height:48px;
}
.hz-ie-title{font-size:.72rem}
.hz-ie-detail{font-size:.65rem;line-height:1.6}
/* Oil prices: better tap targets */
.hz-oil-card{
padding:.5rem .65rem;
min-height:44px;
}
.hz-oil-price{font-size:.92rem}
.hz-oil-label{font-size:.62rem}
.hz-oil-change{font-size:.68rem;padding:.15rem .4rem}
/* Prediction hits on phone */
.pred-hits-list{
max-height:300px;
}
.pred-hit-card{padding:.6rem .7rem}
.pred-hit-prediction{font-size:.78rem;line-height:1.7}
/* Globe toggle: repositioned for phone */
.hz-dim-toggle{
bottom:55px;
left:10px;
padding:6px 10px;
font-size:10px;
border-radius:20px;
}
/* Freshness clock: flow layout on phone */
.hz-freshness-clock{
font-size:9px;
padding:3px 10px;
}
/* Better chat on phone */
.chat-msgs{
max-height:200px;
padding:.5rem .7rem;
}
.chat-msg{
padding:.5rem .7rem;
font-size:.85rem;
line-height:1.85;
border-radius:6px;
}
.chat-msg.user{margin-left:.5rem}
.chat-msg.ai{margin-right:.5rem}
.chat-row textarea{
min-height:44px;
padding:.45rem;
font-size:.85rem;
border-radius:6px;
}
.chat-send-btn{
min-height:44px;
min-width:52px;
border-radius:6px;
font-size:.78rem;
}
/* Personal wargame modal: fullscreen on phone */
.personal-wg-modal{
width:100%!important;
max-width:100vw!important;
max-height:100vh!important;
border-radius:0!important;
}
.pwg-body{
font-size:.88rem;
line-height:2;
}
}
/* ── 5. iPhone Pro Max / Samsung Ultra (tall phones 430px) ── */
@media(max-width:430px){
/* Take advantage of extra height */
.hormuz-map{min-height:260px!important}
.chat-msgs{max-height:220px}
.hz-ai-intel-events{max-height:180px}
/* Multi-source Intel: compact 430px fit */
.hz-msrc-bar{
max-width:100% !important;
padding:5px 8px;
gap:4px;
}
.hz-msrc-sources{
grid-template-columns:repeat(3, 1fr);
gap:3px 5px;
}
.hz-msrc-src{
padding:3px 3px;
gap:2px;
}
.hz-msrc-name{font-size:8px}
.hz-msrc-val{font-size:8px}
/* Better spaced INSS */
.inss-hero-card{padding:.85rem .5rem .75rem}
/* News items: comfortable thumb reach */
.news-item{
padding:.65rem .75rem;
gap:.5rem;
min-height:56px;
}
.news-item-title{
font-size:.9rem;
line-height:1.65;
}
.news-item-summary{
font-size:.78rem;
line-height:1.55;
-webkit-line-clamp:2;
}
/* News popup: reading comfort for large phones */
.nfp-scroll{padding:1.2rem 1.3rem}
.nfp-body{font-size:.92rem;line-height:2.05}
.nfp-body .nfp-para{margin-bottom:1em}
.nfp-title{font-size:1.08rem;line-height:1.85}
}
/* ── 6. iPhone SE / Small Android (375px and below) ── */
@media(max-width:375px){
html{font-size:14px}
/* INSS: tighter but readable */
.inss-hero-num{font-size:1.2rem!important}
.inss-hero-label{font-size:.62rem}
.inss-hero-card{padding:.7rem .4rem .6rem}
.inss-front-stats{grid-template-columns:1fr}
/* Topbar: ultra-compact single-row */
.topbar{padding:.28rem .38rem}
.logo-txt{font-size:.52rem;letter-spacing:.8px}
/* Smaller map */
.hormuz-map{min-height:200px!important}
/* Oil section: stack on tiny screens */
.hz-oil-card{
flex-wrap:wrap;
gap:.3rem;
}
.hz-oil-label{min-width:auto;flex:1 1 100%}
/* Multi-source Intel: 2-col ultra-compact on small phones */
.hz-msrc-bar{
max-width:100% !important;
padding:5px 6px;
gap:3px;
}
.hz-msrc-title{
font-size:7px;
letter-spacing:1px;
padding-bottom:3px;
}
.hz-msrc-sources{
grid-template-columns:repeat(2, 1fr);
gap:3px 4px;
}
.hz-msrc-src{
padding:2px 3px;
gap:2px;
}
.hz-msrc-dot{width:5px;height:5px}
.hz-msrc-name{font-size:7.5px}
.hz-msrc-val{font-size:7.5px;min-width:12px}
/* Hide non-essential on tiny screens */
.hz-flights-panel{display:none}
.hz-sat-section .hz-sat-ref{display:none}
.hz-dim-toggle{display:none}
.hz-freshness-clock{display:none!important}
/* Prediction hits: single col compact */
.pred-hits-list{max-height:250px}
.pred-hit-card{padding:.4rem .5rem}
/* Force header: ultra-compact */
.force-header{padding:.45rem;gap:.3rem}
.force-flag{font-size:1.1rem}
.force-name{font-size:.6rem;letter-spacing:1.5px}
.force-vs{font-size:.75rem;letter-spacing:2px}
}
/* ── 7. iOS Safe Area Enhancements ── */
@supports(padding:env(safe-area-inset-top)){
/* Full safe area coverage */
.topbar{
padding-top:max(.5rem,env(safe-area-inset-top));
padding-left:max(.6rem,env(safe-area-inset-left));
padding-right:max(.6rem,env(safe-area-inset-right));
}
.wfooter{
padding-bottom:max(.6rem,env(safe-area-inset-bottom));
}
/* Fullscreen modals: respect notch */
@media(max-width:480px){
.news-float-popup{
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.nfp-header{
padding-top:max(.55rem,env(safe-area-inset-top));
}
.nfp-footer{
padding-bottom:max(.5rem,env(safe-area-inset-bottom));
}
.model-detail-modal{
padding-top:env(safe-area-inset-top);
}
.personal-wg-modal{
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.cine-overlay{
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
}
/* Hormuz bottom controls: above home indicator (desktop only — on mobile it flows) */
@media(min-width:769px){
.hz-msrc-bar{
bottom:max(12px,calc(env(safe-area-inset-bottom) + 4px));
}
}
}
/* ── 8. Android-Specific Fixes ── */
@media(max-width:480px){
/* Android Chrome address bar: avoid layout jump */
.cine-overlay{
height:100dvh;
min-height:-webkit-fill-available;
}
.hormuz-map-wrap{
min-height:240px;
}
/* Better font rendering on Android */
body{
text-rendering:optimizeSpeed;
-webkit-font-smoothing:subpixel-antialiased;
}
}
/* ── 9. Enhanced Touch Feedback (all mobile) ── */
@media(hover:none) and (pointer:coarse){
/* Ripple-style active state for key interactive elements */
.news-item:active{
background:rgba(200,164,90,.06)!important;
transition:background .1s;
}
.inss-hero-card:active{
background:rgba(200,164,90,.06);
transition:background .1s;
}
.inss-front-card:active{
background:rgba(200,164,90,.06);
transition:background .1s;
}
.hz-intel-event:active{
background:rgba(200,164,90,.08);
}
.pred-hit-card:active{
background:rgba(255,215,0,.1);
border-color:rgba(255,215,0,.3);
}
/* Ensure all clickable elements have 44px minimum */
.inss-refresh-btn{
min-width:44px;min-height:44px;
display:flex;align-items:center;justify-content:center;
}
.hz-flights-refresh-btn,
.hz-intel-refresh-btn{
min-height:36px;
padding:.3rem .6rem;
}
.dash-refresh{
min-height:40px;
display:inline-flex;
align-items:center;
}
/* Remove all hover transforms that cause jank on mobile */
.inss-hero-card:hover,
.inss-front-card:hover,
.force-card:hover,
.stat-hero:hover,
.dash-card:hover,
.wc-card:hover,
.risk-matrix-card:hover,
.ldr2-card:hover,
.ratio-item:hover,
.pred-hit-card:hover{
transform:none!important;
}
/* Smoother scrolling for all scrollable regions */
.hz-ai-intel-events,
.hz-flights-list,
.pred-hits-list,
.hz-sat-scroll,
.chat-msgs,
.mdm-body,
.nfp-scroll,
.compare-body,
.news-list-wrap,
.pwg-body{
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
overscroll-behavior:contain;
}
}
/* ── 10. Landscape Phone Optimization ── */
@media(max-height:500px) and (orientation:landscape){
/* Compact everything for landscape phones */
.inss-hero-row{grid-template-columns:repeat(3,1fr)!important}
.inss-hero-card{padding:.5rem .3rem .4rem}
.inss-hero-num{font-size:1.1rem!important}
.inss-fronts{grid-template-columns:repeat(2,1fr)!important}
/* Hormuz: wider map in landscape */
.hormuz-map{min-height:200px!important}
.hormuz-body{
grid-template-columns:1fr 200px!important;
}
/* Hide verbose elements */
.hz-msrc-title{display:none}
.hz-msrc-bar{
flex-direction:row;
max-width:100% !important;
padding:4px 10px;
gap:4px;
white-space:normal;
}
.hz-msrc-sources{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:2px 6px;
}
.hz-msrc-dot{width:5px;height:5px}
.hz-msrc-name{font-size:8px}
.hz-msrc-val{font-size:8px}
.inss-subtitle{display:none}
}
/* ── 11. Dark Mode Contrast Enhancement (all mobile) ── */
@media(max-width:1024px){
/* Slightly brighter text for outdoor readability */
.dash-event{color:rgba(236,232,224,.95)}
.wg-section-body{color:rgba(236,232,224,.92)}
.nfp-body{color:rgba(236,232,224,.95)}
.ldr2-stance{color:rgba(180,176,168,.95)}
.hz-ai-intel-summary{color:rgba(236,232,224,.92)}
.tl-block-body{color:rgba(236,232,224,.92)}
/* Better contrast for small labels */
.stat-hero-label,
.dash-label,
.hz-mstat-label,
.tsb-label{
color:rgba(160,156,148,.85);
}
/* Stronger borders for panel separation */
.hormuz-section{
border-color:rgba(200,164,90,.12);
}
.inss-dashboard{
border-color:rgba(200,164,90,.18);
}
.mil-dashboard{
border-color:rgba(200,164,90,.1);
}
}
/* ── 12. Reduce Motion for Accessibility ── */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
.hz-radar-sweep{display:none}
.mil-dashboard::after{display:none}
.inss-dashboard>.inss-scan{display:none}
}
/* ── 13. High DPI / Retina Sharpness ── */
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
.inss-dashboard,
.mil-dashboard,
.hormuz-section{
border-width:0.5px;
}
/* Crisp 1px borders on retina */
.hz-stat-card,
.hz-oil-card,
.hz-intel-event,
.news-item,
.inss-front-card{
border-width:0.5px;
}
}
/* ═══════════════════════════════════════════════════════
ROUND 11: ULTIMATE MOBILE VISUAL IMPACT (極致視覺衝擊)
iOS · Android · iPad — 最高級視覺 + 極度舒適
═══════════════════════════════════════════════════════ */
/* ── 1. Enhanced Glassmorphism on Mobile ── */
@media(max-width:1024px){
.panel-intel,
.panel-compare{
background:rgba(16,24,36,.82);
backdrop-filter:blur(20px) saturate(1.6);
-webkit-backdrop-filter:blur(20px) saturate(1.6);
border:1px solid rgba(200,164,90,.08);
box-shadow:
0 8px 32px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.04);
}
/* Hormuz summary — collapsible on mobile, full text on tablet+ */
.hz-ai-intel-summary{
word-break:break-word;
overflow-wrap:break-word;
background:linear-gradient(135deg,rgba(167,139,250,.08),rgba(255,60,60,.05),rgba(200,164,90,.04));
border-left:3px solid rgba(167,139,250,.55);
border-radius:8px;
box-shadow:0 4px 16px rgba(167,139,250,.06);
}
/* Hero stat cards — cinematic depth */
.stat-hero{
background:linear-gradient(145deg,rgba(16,24,36,.9),rgba(22,32,48,.85));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(200,164,90,.12);
box-shadow:
0 4px 20px rgba(0,0,0,.3),
inset 0 1px 0 rgba(200,164,90,.06);
transition:transform .25s ease,box-shadow .25s ease;
}
.stat-hero:active{
transform:scale(.97);
box-shadow:0 2px 10px rgba(0,0,0,.4);
}
/* Hero numbers — gradient text for impact */
.stat-hero-num{
background:linear-gradient(135deg,var(--gold),#fff,var(--gold));
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:heroNumShimmer 4s linear infinite;
font-weight:800;
}
@keyframes heroNumShimmer{
0%{background-position:0% center}
100%{background-position:200% center}
}
/* Wargame section — premium glass */
.wg-section{
background:rgba(16,24,36,.85);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(200,164,90,.1);
box-shadow:0 6px 24px rgba(0,0,0,.25);
border-radius:10px;
overflow:hidden;
}
/* Force comparison cards — depth on mobile */
.force-card{
border:1px solid rgba(200,164,90,.08);
box-shadow:0 3px 12px rgba(0,0,0,.2);
border-radius:8px;
}
/* Leader cards — enhanced mobile presence */
.ldr2-card{
background:linear-gradient(145deg,rgba(22,32,48,.9),rgba(16,24,36,.85));
border:1px solid rgba(167,139,250,.1);
box-shadow:0 4px 16px rgba(0,0,0,.25);
border-radius:10px;
}
/* Smooth GPU-accelerated animations */
.panel-intel,
.panel-compare,
.stat-hero,
.wg-section,
.force-card,
.ldr2-card,
.hz-intel-event,
.news-item{
will-change:transform;
transform:translateZ(0);
-webkit-transform:translateZ(0);
}
/* News cards — subtle glass */
.news-item,.news-card{
background:rgba(22,32,48,.85);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(200,164,90,.06);
box-shadow:0 3px 12px rgba(0,0,0,.2);
border-radius:8px;
transition:transform .2s ease;
}
.news-item:active,.news-card:active{
transform:scale(.98);
}
/* Ticker bar — premium gradient on mobile */
.ticker-bar{
background:linear-gradient(90deg,rgba(196,60,60,.12),rgba(16,24,36,.95),rgba(200,164,90,.08));
border-top:1px solid rgba(200,164,90,.1);
border-bottom:1px solid rgba(200,164,90,.1);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
}
/* ── 2. Phone-Specific Visual Impact (≤480px) ── */
@media(max-width:480px){
/* Topbar — cinematic compact */
.topbar{
background:linear-gradient(180deg,rgba(16,24,36,.95),rgba(16,24,36,.88));
backdrop-filter:blur(16px) saturate(1.8);
-webkit-backdrop-filter:blur(16px) saturate(1.8);
border-bottom:1px solid rgba(200,164,90,.12);
box-shadow:0 4px 20px rgba(0,0,0,.4);
padding:8px 10px;
}
/* Summary text — scrollable on phones */
.hz-ai-intel-summary{
font-size:.68rem;
line-height:1.65;
padding:6px 8px;
border-radius:8px;
background:linear-gradient(145deg,rgba(167,139,250,.1),rgba(255,60,60,.06),rgba(200,164,90,.05));
max-height:12vh;
}
/* Stat hero — phone-optimized impact */
.stat-hero{
padding:12px 10px;
border-radius:10px;
}
.stat-hero-num{
font-size:1.5rem;
font-weight:900;
}
.stat-hero-label{
font-size:.58rem;
letter-spacing:1.5px;
margin-top:4px;
}
.stat-hero-icon{
font-size:1.1rem;
margin-bottom:4px;
}
/* Panel headers — bold on phones */
.panel-header{
padding:10px 12px;
background:linear-gradient(135deg,rgba(200,164,90,.06),rgba(16,24,36,.9));
border-bottom:1px solid rgba(200,164,90,.1);
}
.ph-title{
font-size:.75rem;
letter-spacing:2px;
text-shadow:0 0 12px rgba(200,164,90,.2);
}
/* Threat level badges — bigger on phones */
.threat-status-bar{
gap:6px;
}
/* Escalation gauge — premium on phone */
.esc-gauge{
background:linear-gradient(145deg,rgba(16,24,36,.9),rgba(22,32,48,.85));
border:1px solid rgba(200,164,90,.1);
border-radius:10px;
padding:12px;
box-shadow:0 4px 16px rgba(0,0,0,.25);
}
/* Chat inline — comfortable on phones */
.chat-section-inline{
padding:12px;
border-radius:10px;
background:rgba(16,24,36,.88);
border:1px solid rgba(167,139,250,.08);
}
.chat-msgs{
max-height:250px;
border-radius:8px;
}
/* Footer — subtle on phone */
.wfooter{
background:linear-gradient(180deg,rgba(16,24,36,.9),rgba(10,16,24,.95));
padding:10px 12px;
border-top:1px solid rgba(200,164,90,.08);
}
/* Social bar — premium compact */
.social-bar{
background:linear-gradient(180deg,rgba(16,24,36,.92),rgba(16,24,36,.88));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-top:1px solid rgba(200,164,90,.08);
box-shadow:0 -4px 16px rgba(0,0,0,.3);
}
}
/* ── 3. iPad Split View & Slide Over Support ── */
@media(min-width:320px) and (max-width:500px) and (min-height:600px){
/* iPad Slide Over window (320pt wide) */
.dual-panel{
grid-template-columns:1fr!important;
padding:0 4px;
}
.stat-hero-row{
grid-template-columns:repeat(2,1fr)!important;
}
.force-grid{
grid-template-columns:1fr!important;
}
}
@media(min-width:500px) and (max-width:700px) and (min-height:600px){
/* iPad Split View 50/50 or 1/3 */
.dual-panel{
grid-template-columns:1fr!important;
padding:0 6px;
}
.stat-hero-row{
grid-template-columns:repeat(2,1fr)!important;
gap:8px!important;
}
.hormuz-body{
grid-template-columns:1fr!important;
}
}
/* ── 4. OLED Deep Black Enhancement ── */
@media(max-width:768px) and (prefers-color-scheme:dark){
body{
background:#000;
}
.topbar{
background:rgba(6,10,16,.96);
}
.panel-intel,
.panel-compare{
background:rgba(8,12,20,.9);
}
/* True black saves battery on OLED phones */
.wg-section{
background:rgba(6,10,16,.92);
}
.stat-hero{
background:linear-gradient(145deg,rgba(8,12,20,.95),rgba(14,20,32,.9));
}
/* Brighter text contrast on true black */
.stat-hero-num{
background:linear-gradient(135deg,#f0d078,#fff,#f0d078);
background-size:200% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hz-ai-intel-summary{
color:rgba(255,255,255,.92);
background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(255,60,60,.06));
border-left-color:rgba(167,139,250,.6);
}
}
/* ── 5. Scroll Momentum & Overscroll Polish ── */
@media(max-width:1024px){
.panel-intel,
.hz-intel-body,
.wg-section-body,
.chat-msgs{
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
overscroll-behavior:contain;
}
/* Custom scrollbar — thin elegant on mobile */
.panel-intel::-webkit-scrollbar,
.hz-intel-body::-webkit-scrollbar,
.wg-section-body::-webkit-scrollbar{
width:3px;
}
.panel-intel::-webkit-scrollbar-thumb,
.hz-intel-body::-webkit-scrollbar-thumb,
.wg-section-body::-webkit-scrollbar-thumb{
background:rgba(200,164,90,.2);
border-radius:3px;
}
.panel-intel::-webkit-scrollbar-track,
.hz-intel-body::-webkit-scrollbar-track,
.wg-section-body::-webkit-scrollbar-track{
background:transparent;
}
}
/* ── 6. Touch Ripple Effect ── */
@media(hover:none) and (pointer:coarse){
.stat-hero,
.force-card,
.ldr2-card,
.news-item,
.news-card,
.hz-intel-event{
position:relative;
overflow:hidden;
}
.stat-hero::after,
.force-card::after,
.ldr2-card::after,
.news-item::after,
.news-card::after,
.hz-intel-event::after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at var(--tap-x,50%) var(--tap-y,50%),rgba(200,164,90,.12) 0%,transparent 60%);
opacity:0;
transition:opacity .3s ease;
pointer-events:none;
}
.stat-hero:active::after,
.force-card:active::after,
.ldr2-card:active::after,
.news-item:active::after,
.news-card:active::after,
.hz-intel-event:active::after{
opacity:1;
transition:opacity .05s ease;
}
/* Larger comfortable tap targets */
.mi{
min-height:32px;
min-width:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.refresh-btn,
.auth-btn{
min-height:38px;
min-width:38px;
}
}
/* ── 7. iPhone Dynamic Island & Notch Safe Zone ── */
@supports(padding-top:env(safe-area-inset-top)){
@media(max-width:480px){
.topbar{
padding-top:calc(8px + env(safe-area-inset-top));
}
.social-bar,
.wfooter{
padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
/* Landscape notch sides */
body{
padding-left:env(safe-area-inset-left);
padding-right:env(safe-area-inset-right);
}
}
}
/* ── 8. Android Navigation Bar Spacing ── */
@media(max-width:480px){
@supports(padding-bottom:env(safe-area-inset-bottom)){
.social-bar{
padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
}
/* Android 3-button nav bar height (~48px) */
@supports not (padding-bottom:env(safe-area-inset-bottom)){
.social-bar{
padding-bottom:12px;
}
.wfooter{
padding-bottom:12px;
}
}
}
/* ── 9. Cinematic Loading States ── */
@media(max-width:1024px){
/* Skeleton shimmer for loading cards */
@keyframes mobileShimmer{
0%{background-position:-200% 0}
100%{background-position:200% 0}
}
.stat-hero[data-loading],
.wg-section[data-loading]{
background:linear-gradient(90deg,
rgba(22,32,48,.8) 25%,
rgba(32,44,64,.8) 50%,
rgba(22,32,48,.8) 75%);
background-size:200% 100%;
animation:mobileShimmer 1.5s ease-in-out infinite;
}
}
/* ── 10. Smooth Page Transitions ── */
@media(max-width:1024px){
.dual-panel{
animation:mobileFadeIn .4s ease-out;
}
@keyframes mobileFadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
/* Hormuz panel entrance */
.hormuz-section{
animation:hzSlideIn .5s ease-out;
}
@keyframes hzSlideIn{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
}
/* ── 11. Landscape Phone — Maximize Content ── */
@media(max-height:440px) and (orientation:landscape){
.topbar{
padding:4px 8px;
min-height:auto;
}
.logo-txt{font-size:.5rem}
.ticker-bar{
font-size:.6rem;
padding:2px 8px;
}
.stat-hero-row{
grid-template-columns:repeat(4,1fr)!important;
gap:4px!important;
}
.stat-hero{padding:6px!important}
.stat-hero-num{font-size:1.1rem}
.dual-panel{
max-height:calc(100vh - 60px);
overflow-y:auto;
}
.social-bar{
padding:3px 6px;
}
}
/* ── 12. Ultra-Wide Phone (Samsung Fold outer) ── */
@media(min-width:280px) and (max-width:300px){
.dual-panel{
padding:0 2px;
}
.stat-hero-row{
grid-template-columns:1fr 1fr!important;
gap:4px!important;
}
.stat-hero-num{font-size:1.1rem}
.topbar{padding:4px 6px}
.logo-txt{font-size:.48rem}
.panel-header{padding:6px 8px}
.ph-title{font-size:.65rem}
}
/* ── 13. Hormuz Intel Panel Rebalance ── */
.hz-crit-banner{
padding:.38rem .65rem;
margin-bottom:.32rem;
border-radius:5px;
background:linear-gradient(135deg,rgba(255,0,0,.1) 0%,rgba(140,0,0,.05) 60%,rgba(255,0,0,.08) 100%);
}
.hz-crit-inner{gap:.4rem}
.hz-crit-icon{
font-size:.9rem;
filter:drop-shadow(0 0 4px rgba(255,0,0,.65));
}
.hz-crit-label{
font-size:.86rem;
letter-spacing:4px;
line-height:1;
}
.hz-crit-pulse-dot{
width:6px;
height:6px;
}
.hz-crit-sub{
margin-top:.08rem;
font-size:.44rem;
letter-spacing:2.8px;
}
.hz-intel-head{
margin-bottom:4px;
}
.hz-intel-title-row{
margin-bottom:2px;
}
.hz-intel-status-row{
margin-bottom:1px;
gap:6px;
}
.hz-intel-src{
padding:1px 0 2px;
line-height:1.35;
}
.hz-intel-src:empty,
.hz-intel-urgency:empty{
display:none;
}
.hz-intel-urgency{
margin-top:0;
padding:1px 0 0;
}
.hz-intel-body,
.hz-intel-body-enhanced{
display:flex;
flex-direction:column;
gap:8px;
max-height:calc(100vh - 200px) !important;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
}
.hz-intel-section-wrap{
display:flex;
flex-direction:column;
min-height:0;
flex:0 1 auto;
margin-top:0;
background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.004));
border:1px solid rgba(255,255,255,.04);
border-radius:8px;
overflow:hidden;
}
.hz-summary-wrap{
flex:1 1 0;
}
.hz-summary-label{
border-color:rgba(167,139,250,.18);
}
.hz-summary-label::after{
background:linear-gradient(90deg,transparent,#a78bfa,rgba(196,60,60,.35),#a78bfa,transparent) !important;
}
.hz-isl-summary{
color:#d6c9ff;
border-color:rgba(167,139,250,.22);
background:rgba(167,139,250,.12);
}
.hz-ai-intel-summary{
flex:1 1 auto;
max-height:none;
min-height:0;
margin-bottom:0;
padding:12px 13px 13px;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:rgba(167,139,250,.22) transparent;
background:linear-gradient(180deg,rgba(17,24,39,.82),rgba(17,24,39,.62));
border-left:2px solid rgba(167,139,250,.42);
border-radius:0 0 8px 8px;
font-size:.74rem;
line-height:1.68;
}
.hz-ai-intel-summary::-webkit-scrollbar{width:3px}
.hz-ai-intel-summary::-webkit-scrollbar-thumb{background:rgba(167,139,250,.25);border-radius:3px}
.hz-intel-scroll-box{
flex:0 1 auto;
max-height:calc(100vh - 340px);
min-height:0;
padding:8px 8px 6px;
overflow-y:auto;
}
.hz-pred-scroll-box{
max-height:calc(100vh - 480px);
overflow-y:auto;
}
.hz-ai-intel-events,
.hz-ai-intel-predictions{
gap:6px;
margin-bottom:0;
}
.hz-intel-event{
margin-bottom:0;
padding:8px 10px 9px;
border:1px solid rgba(200,164,90,.08);
background:linear-gradient(135deg,rgba(24,31,41,.9),rgba(14,20,28,.86));
}
.hz-intel-event-mappable::after{
content:'MAP ↗';
position:absolute;
right:10px;
top:10px;
padding:2px 6px;
border-radius:999px;
border:1px solid rgba(200,164,90,.18);
background:rgba(200,164,90,.08);
color:rgba(232,214,170,.82);
font-size:.42rem;
letter-spacing:1px;
font-family:var(--fd);
pointer-events:none;
}
.hz-intel-event-mappable:hover{
border-left-color:rgba(200,164,90,.82);
border-color:rgba(200,164,90,.18);
box-shadow:-2px 0 16px rgba(200,164,90,.08),0 0 0 1px rgba(200,164,90,.04);
}
.hz-ie-head{
gap:7px;
margin-bottom:4px;
}
.hz-ie-title{
padding-right:56px;
}
.hz-pred-card{
margin-bottom:0;
padding:9px 10px;
border:1px solid rgba(138,43,226,.14);
background:linear-gradient(135deg,rgba(33,17,51,.9),rgba(20,14,34,.88));
}
.hz-pred-card[data-lat]:hover{
box-shadow:0 0 18px rgba(138,43,226,.18);
}
.hz-pred-anchor{
padding:2px 6px;
border-radius:999px;
background:rgba(138,43,226,.12);
border:1px solid rgba(138,43,226,.18);
}
@media(max-width:768px){
.hz-crit-banner{
padding:.32rem .55rem;
margin-bottom:.24rem;
}
.hz-crit-label{
font-size:.74rem;
letter-spacing:2.5px;
}
.hz-crit-sub{
font-size:.4rem;
letter-spacing:2px;
}
.hz-intel-body,
.hz-intel-body-enhanced{
display:flex;
flex-direction:column;
gap:4px;
max-height:none !important;
overflow:visible;
}
.hz-summary-wrap{
flex:0 0 auto;
}
.hz-intel-section-wrap{
border-radius:6px;
}
.hz-ai-intel-summary{
flex:0 0 auto;
max-height:13.5vh;
min-height:74px;
padding:8px 9px 9px;
font-size:.69rem;
line-height:1.58;
}
.hz-intel-scroll-box{
flex:0 0 auto;
max-height:29vh;
min-height:92px;
padding:6px 6px 4px;
}
.hz-pred-scroll-box{
max-height:30vh;
}
.hz-intel-event,
.hz-pred-card{
padding:7px 8px;
}
.hz-intel-event-mappable::after{
top:auto;
bottom:7px;
right:8px;
font-size:.34rem;
padding:1px 5px;
}
.hz-ie-title{
padding-right:0;
}
}
@media(max-width:480px){
.hz-ai-intel-summary{
max-height:11.5vh;
min-height:66px;
font-size:.66rem;
}
.hz-intel-scroll-box{
max-height:26vh;
}
.hz-pred-scroll-box{
max-height:28vh;
}
}
/* ══════ TOPBAR COMMAND REDESIGN ══════ */
.topbar.topbar-command{
padding:.78rem 1.25rem .72rem;
position:fixed; top:0; left:0; right:0; z-index:10000; /* keep fixed at top */
background:
radial-gradient(circle at 50% -45%, rgba(144,112,176,.24), transparent 34%),
radial-gradient(circle at 50% 0%, rgba(200,164,90,.14), transparent 44%),
linear-gradient(180deg, rgba(8,12,19,.98), rgba(7,10,17,.96));
border-bottom:1px solid rgba(200,164,90,.14);
box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.03);
overflow:visible; /* changed: overflow:hidden clips sticky children on Android Chrome */
}
.topbar.topbar-command::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(115deg,
transparent 0%,
rgba(196,60,60,.06) 18%,
transparent 34%,
rgba(144,112,176,.08) 54%,
transparent 70%,
rgba(200,164,90,.05) 86%,
transparent 100%);
background-size:180% 100%;
animation:topbarThreatSweep 12s linear infinite;
pointer-events:none;
}
.topbar.topbar-command > *{
position:relative;
z-index:1;
}
.topbar.topbar-command .topbar-left,
.topbar.topbar-command .topbar-right{
gap:.55rem;
}
.topbar.topbar-command .topbar-center{
flex:1 1 auto;
min-width:0;
display:flex !important;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.34rem;
}
.topbar.topbar-command .logo{
gap:.58rem;
padding:.42rem .78rem;
border:1px solid rgba(200,164,90,.14);
border-radius:12px;
background:linear-gradient(135deg, rgba(255,255,255,.035), rgba(200,164,90,.025));
box-shadow:0 8px 20px rgba(0,0,0,.18), inset 0 0 16px rgba(255,255,255,.02);
}
.topbar.topbar-command .logo-icon{
filter:drop-shadow(0 0 10px rgba(200,164,90,.28));
}
.topbar.topbar-command .logo-txt{
font-size:1.02rem;
letter-spacing:6px;
}
.topbar.topbar-command .live-ind{
padding:.28rem .62rem;
border-radius:999px;
border:1px solid rgba(196,60,60,.24);
background:linear-gradient(135deg, rgba(196,60,60,.12), rgba(196,60,60,.04));
box-shadow:0 0 18px rgba(196,60,60,.08), inset 0 0 12px rgba(196,60,60,.06);
}
.topbar.topbar-command .sfx-toggle{
border-radius:10px;
border-color:rgba(255,255,255,.08);
background:rgba(255,255,255,.02);
}
.topbar.topbar-command .bgm-btn.bgm-active{
box-shadow:0 0 14px rgba(200,164,90,.22), inset 0 0 12px rgba(200,164,90,.08);
}
.topbar-command-link{
position:relative;
width:min(100%, 580px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.22rem;
padding:.52rem 1.4rem .56rem;
border-radius:18px;
border:1px solid rgba(200,164,90,.22);
background:linear-gradient(135deg, rgba(19,27,40,.96), rgba(13,19,30,.92) 42%, rgba(47,24,60,.92) 100%);
box-shadow:
0 0 0 1px rgba(255,255,255,.03),
0 18px 48px rgba(0,0,0,.32),
0 0 24px rgba(144,112,176,.12),
inset 0 0 26px rgba(144,112,176,.05);
overflow:hidden;
/* promote to compositing layer — prevents Android Chrome animation jank */
-webkit-transform:translateZ(0);
transform:translateZ(0);
will-change:transform;
-webkit-transition:box-shadow .35s ease, border-color .35s ease;
transition:box-shadow .35s ease, border-color .35s ease;
}
.topbar-command-link::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(120deg,
transparent 0%,
rgba(255,255,255,.05) 22%,
transparent 34%,
rgba(144,112,176,.14) 54%,
transparent 68%,
rgba(196,60,60,.07) 100%);
background-size:220% 100%;
animation:topbarBrandSweep 8s ease-in-out infinite;
pointer-events:none;
}
.topbar-command-link::after{
content:'';
position:absolute;
left:16px;
right:16px;
bottom:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(200,164,90,.75), rgba(144,112,176,.85), transparent);
opacity:.75;
}
.topbar-command-kicker,
.topbar-command-title,
.topbar-command-sub,
.topbar.topbar-command .data-ts{
position:relative;
z-index:1;
}
.topbar-command-kicker{
font-family:var(--fd);
font-size:.52rem;
letter-spacing:3.6px;
color:rgba(210,198,232,.58);
text-transform:uppercase;
}
.topbar-command-title{
font-family:var(--f-impact);
font-size:clamp(1.08rem, 2.1vw, 1.62rem);
/* clamp fallback for older Android WebView */
font-size:1.12rem;
font-size:clamp(1.12rem, 2.25vw, 1.82rem);
font-weight:900;
letter-spacing:3.2px;
line-height:1.08;
/* Android Chrome requires -webkit-text-fill-color for background-clip:text */
color:#f0c777;
-webkit-text-fill-color:transparent;
background:linear-gradient(90deg, #fff6e4 0%, #f0c777 28%, #ffffff 48%, #c8b3ea 70%, #f0c777 100%);
background-size:220% auto;
-webkit-background-clip:text;
background-clip:text;
/* text-shadow incompatible with background-clip:text on Android — remove */
text-shadow:none;
animation:topbarTitleShift 7s ease-in-out infinite;
max-width:100%;
text-align:center;
text-wrap:balance;
overflow-wrap:anywhere;
}
/* Fallback: if background-clip:text not supported, show gold text */
@supports not (-webkit-background-clip:text){
.topbar-command-title{
-webkit-text-fill-color:#f0c777!important;
color:#f0c777!important;
background:none!important;
}
}
.topbar-command-sub{
display:inline-flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:.42rem;
font-family:var(--fd);
font-size:.58rem;
letter-spacing:2.2px;
color:rgba(232,236,245,.68);
text-transform:uppercase;
max-width:100%;
}
.topbar-command-subtext{
display:block;
max-width:36ch;
white-space:normal;
text-wrap:balance;
text-align:center;
line-height:1.28;
}
.topbar-command-pulse{
width:8px;
height:8px;
border-radius:50%;
background:linear-gradient(135deg, #ff6b35, #c43c3c);
box-shadow:0 0 0 0 rgba(196,60,60,.45), 0 0 12px rgba(196,60,60,.35);
animation:topbarAlertPulse 1.8s ease-out infinite;
}
.topbar.topbar-command .auth-btn-cta{
border-radius:12px;
padding:.48rem .98rem;
border-color:rgba(200,164,90,.38);
box-shadow:0 0 18px rgba(200,164,90,.12), inset 0 0 12px rgba(200,164,90,.06);
}
html[lang="en"] .topbar.topbar-command .topbar-center{
gap:.26rem;
}
html[lang="en"] .topbar-command-link{
width:min(100%, 520px);
padding:.52rem 1.5rem .56rem;
background:linear-gradient(135deg, rgba(17,24,36,.97), rgba(12,18,28,.94) 44%, rgba(38,22,52,.9) 100%);
}
html[lang="en"] .topbar-command-kicker{
letter-spacing:3.2px;
font-size:.54rem;
color:rgba(218,222,235,.66);
}
html[lang="en"] .topbar-command-title{
font-size:clamp(1.18rem, 2.3vw, 1.72rem);
letter-spacing:3.5px;
line-height:1.1;
max-width:min(100%, 22ch);
}
html[lang="en"] .topbar.topbar-command .data-ts{
font-size:.52rem;
letter-spacing:.75px;
}
html[lang="en"] .topbar.topbar-command .auth-btn-cta,
html[lang="en"] .topbar-search-badge{
letter-spacing:1px;
font-size:.68rem;
}
html[lang="en"] .topbar-search-badge{
padding:.46rem .88rem;
}
html[lang="zh-CN"] .topbar-command-link,
html[lang="zh-HK"] .topbar-command-link{
padding:.72rem 1.72rem .82rem;
}
html[lang="zh-CN"] .topbar-command-kicker,
html[lang="zh-HK"] .topbar-command-kicker{
letter-spacing:3.6px;
}
html[lang="zh-CN"] .topbar-command-title,
html[lang="zh-HK"] .topbar-command-title{
font-size:clamp(1.18rem, 2.3vw, 1.88rem);
letter-spacing:2.1px;
line-height:1.08;
max-width:min(100%, 12ch);
}
html[lang="zh-CN"] .topbar.topbar-command .data-ts,
html[lang="zh-HK"] .topbar.topbar-command .data-ts{
font-size:.54rem;
letter-spacing:.72px;
}
@keyframes topbarThreatSweep{
0%{background-position:0% 50%}
100%{background-position:180% 50%}
}
@keyframes topbarBrandSweep{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes topbarTitleShift{
0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}
@keyframes topbarAlertPulse{
0%{box-shadow:0 0 0 0 rgba(196,60,60,.44),0 0 8px rgba(196,60,60,.28)}
70%{box-shadow:0 0 0 10px rgba(196,60,60,0),0 0 18px rgba(196,60,60,.45)}
100%{box-shadow:0 0 0 0 rgba(196,60,60,0),0 0 8px rgba(196,60,60,.24)}
}
@media(max-width:1100px){
.topbar.topbar-command{
flex-wrap:wrap;
align-items:center;
}
.topbar.topbar-command .topbar-left{
flex:1 1 auto;
}
.topbar.topbar-command .topbar-right{
flex:0 1 auto;
justify-content:flex-end;
}
.topbar.topbar-command .topbar-center{
order:3;
width:100%;
padding-top:.42rem;
}
.topbar-command-link{
width:100%;
}
.topbar.topbar-command .topbar-command-link .data-ts{
align-self:center;
text-align:center;
padding-right:0;
}
}
@media(max-width:768px){
/* ═══ MOBILE TOPBAR — Clean 2-row: utility bar + brand strip ═══ */
.topbar.topbar-command{
padding:.5rem .7rem .4rem;
gap:0;
flex-wrap:wrap;
align-items:center;
}
/* Row 1 left: logo + audio controls */
.topbar.topbar-command .topbar-left{
order:1;
flex:1 1 auto;
gap:.45rem;
align-items:center;
}
.topbar.topbar-command .logo{
padding:.24rem .48rem;
border-radius:8px;
gap:.35rem;
}
.topbar.topbar-command .logo-icon{
font-size:1.15rem;
}
.topbar.topbar-command .logo-txt{
font-size:.72rem;
letter-spacing:2.5px;
}
.topbar.topbar-command .live-ind{
display:none;
}
/* SFX/BGM: icon-only, comfy touch targets */
.topbar.topbar-command .sfx-toggle{
font-size:.78rem;
padding:.22rem .32rem;
border-radius:8px;
min-width:32px;
min-height:32px;
display:flex;align-items:center;justify-content:center;
}
.topbar.topbar-command .bgm-btn{
font-size:.68rem;
padding:.22rem .38rem;
border-radius:8px;
min-width:32px;
min-height:32px;
display:flex;align-items:center;justify-content:center;
letter-spacing:.5px;
}
/* Row 1 right: nav controls + CTA badge */
.topbar.topbar-command .topbar-right{
order:2;
flex:0 0 auto;
gap:.35rem;
align-items:center;
}
.topbar.topbar-command .quewi-cta-badge{
font-size:.44rem;
padding:.16rem .4rem;
gap:.15rem;
border-radius:14px;
order:3;
}
.topbar.topbar-command .qcta-txt{display:none}
.topbar.topbar-command .qcta-models{font-size:.44rem}
.topbar.topbar-command .qcta-bolt{font-size:.55rem}
.topbar.topbar-command .auth-btn-cta{
padding:.3rem .6rem;
font-size:.54rem;
letter-spacing:.7px;
border-radius:8px;
order:4;
}
.topbar-search-badge{
display:none;
}
/* Row 2: slim brand strip, full width */
.topbar.topbar-command .topbar-center{
display:flex !important;
order:3;
width:100%;
margin-top:.4rem;
padding-top:0;
border-top:none;
}
.topbar-command-link{
width:100%;
padding:.28rem .8rem;
border-radius:10px;
border:1px solid rgba(200,164,90,.12);
background:linear-gradient(135deg,rgba(19,27,40,.75),rgba(13,19,30,.7) 50%,rgba(40,22,52,.68) 100%);
box-shadow:0 2px 10px rgba(0,0,0,.15),0 0 8px rgba(144,112,176,.04);
gap:.1rem;
}
.topbar-command-link::after{
display:none;
}
.topbar-command-kicker{
font-size:.42rem;
letter-spacing:3px;
opacity:.6;
}
.topbar-command-title{
font-size:.88rem;
letter-spacing:2px;
text-align:center;
line-height:1.15;
}
.topbar.topbar-command .data-ts{
display:none;
}
html[lang="en"] .topbar-command-title{
font-size:.88rem;
letter-spacing:2.5px;
}
html[lang="zh-CN"] .topbar-command-title,
html[lang="zh-HK"] .topbar-command-title{
letter-spacing:1.5px;
}
}
@media(max-width:480px){
/* ═══ PHONE TOPBAR — Tighter 2-row ═══ */
.topbar.topbar-command{
padding:.4rem .55rem .32rem;
gap:0;
}
.topbar.topbar-command .topbar-left{
gap:.35rem;
}
.topbar.topbar-command .logo{
padding:.18rem .35rem;
border-radius:7px;
gap:.22rem;
}
.topbar.topbar-command .logo-icon{
font-size:1rem;
}
.topbar.topbar-command .logo-txt{
font-size:.62rem;
letter-spacing:1.8px;
}
/* SFX/BGM: emoji-only, no text overflow */
.topbar.topbar-command .sfx-toggle{
font-size:.72rem;
padding:.18rem .28rem;
min-width:30px;
min-height:30px;
}
.topbar.topbar-command .bgm-btn{
font-size:.6rem;
padding:.18rem .32rem;
min-width:30px;
min-height:30px;
letter-spacing:.3px;
}
.topbar.topbar-command .topbar-right{
gap:.32rem;
}
.topbar.topbar-command .quewi-cta-badge{
font-size:.38rem;
padding:.12rem .3rem;
gap:.12rem;
border-radius:12px;
}
.topbar.topbar-command .qcta-txt{display:none}
.topbar.topbar-command .qcta-models{font-size:.38rem}
.topbar.topbar-command .qcta-bolt{font-size:.48rem}
.topbar.topbar-command .auth-btn-cta{
padding:.22rem .45rem;
font-size:.48rem;
letter-spacing:.5px;
}
.topbar.topbar-command .auth-btn-cta .auth-cta-icon{
font-size:.65rem;
}
#auth-label{
max-width:72px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Row 2: slimmer brand strip */
.topbar.topbar-command .topbar-center{
margin-top:.3rem;
}
.topbar-command-kicker{
display:none;
}
.topbar-command-link{
padding:.22rem .6rem;
border-radius:8px;
gap:.04rem;
}
.topbar-command-title{
font-size:.82rem;
letter-spacing:1.5px;
}
html[lang="en"] .topbar-command-title{
font-size:.8rem;
letter-spacing:2px;
}
html[lang="zh-CN"] .topbar-command-title,
html[lang="zh-HK"] .topbar-command-title{
font-size:.92rem;
letter-spacing:1px;
}
}
/* ── Small phones 375px: topbar-command ultra-compact 2-row ── */
@media(max-width:375px){
.topbar.topbar-command{
padding:.32rem .45rem .26rem;
gap:0;
}
.topbar.topbar-command .topbar-left{
gap:.3rem;
}
.topbar.topbar-command .logo{
padding:.15rem .28rem;
border-radius:6px;
gap:.18rem;
border-color:rgba(200,164,90,.1);
}
.topbar.topbar-command .logo-icon{
font-size:.88rem;
}
.topbar.topbar-command .logo-txt{
font-size:.5rem;
letter-spacing:1.2px;
}
.topbar-command-link{
padding:.18rem .4rem;
border-radius:7px;
border-color:rgba(200,164,90,.1);
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.topbar-command-title{
font-size:.68rem;
letter-spacing:1px;
}
html[lang="en"] .topbar-command-title{
font-size:.65rem;
letter-spacing:1.4px;
}
html[lang="zh-CN"] .topbar-command-title,
html[lang="zh-HK"] .topbar-command-title{
font-size:.78rem;
letter-spacing:.65px;
max-width:8ch;
}
.topbar.topbar-command .sfx-toggle,
.topbar.topbar-command .bgm-btn{
display:none;
}
.topbar.topbar-command .quewi-cta-badge{
font-size:.34rem;
padding:.1rem .22rem;
gap:.08rem;
border-radius:10px;
}
.topbar.topbar-command .qcta-txt{display:none}
.topbar.topbar-command .qcta-models{font-size:.34rem}
.topbar.topbar-command .qcta-bolt{font-size:.42rem}
.topbar.topbar-command .topbar-center{
margin-top:.22rem;
}
.topbar.topbar-command .auth-btn-cta{
padding:.16rem .3rem;
font-size:.42rem;
border-radius:6px;
}
#auth-label{
max-width:50px;
}
.topbar.topbar-command .topbar-right{
gap:.2rem;
}
.lang-toggle-btn{
padding:.15rem .28rem;
font-size:.48rem;
}
}
/* ══════════════════════════════════════════════════════
ANDROID CHROME COMPATIBILITY PATCH — 20260313
Fixes: gradient text invisible, sticky header overlap,
backdrop-filter fallback, touch interaction
══════════════════════════════════════════════════════ */
/* ── Android: backdrop-filter fallback ──
Android Chrome <76 doesn't support backdrop-filter.
Use semi-opaque background as fallback via @supports not query */
@supports not (backdrop-filter: blur(1px)){
.topbar{
background:rgba(10,14,22,.98) !important;
}
.news-float-popup{
background:rgba(8,12,20,.97) !important;
}
.hz-intel-overlay, .hz-right-overlay{
background:rgba(8,12,20,.95) !important;
}
}
/* ── Android: prevent topbar overflow / clipping ── */
@media screen and (max-width:768px){
/* Ensure topbar wraps cleanly into 2 rows on Android Chrome */
.topbar.topbar-command{
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:100%;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
/* Android: left/right share row 1, shrink if needed */
.topbar.topbar-command .topbar-left{
-webkit-flex-shrink:1;
flex-shrink:1;
min-width:0;
}
.topbar.topbar-command .topbar-right{
-webkit-flex-shrink:0;
flex-shrink:0;
}
/* Prevent auth button text from overflowing on small Android screens */
#auth-label{
max-width:72px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
/* ── Android: touch target minimum 44px (Material guideline) ── */
@media (hover:none) and (pointer:coarse){
.lang-toggle-btn{
min-height:36px;
min-width:36px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.sfx-toggle, .bgm-btn{
min-height:30px;
padding:.2rem .35rem;
font-size:.6rem;
}
.mobile-back-btn{
min-height:36px;
min-width:36px;
padding:.25rem .55rem;
}
/* Prevent 300ms tap delay on all interactive elements */
a, button, [role="button"], .news-item, .topbar-command-link{
-ms-touch-action:manipulation;
touch-action:manipulation;
}
}
/* ── Android: gradient text insurance ──
When background-clip:text works, -webkit-text-fill-color:transparent takes effect.
When it doesn't (very old WebView), color fallback shows instead. */
.topbar-command-title{
/* Ensure color fallback (#f0c777) is set — already defined above.
This rule re-asserts the fallback for Android 4.x / old WebView */
color:#f0c777; /* gold fallback — visible if gradient text fails */
}
/* ══════════════════════════════════════════════════════
MAIN SPLIT LAYOUT — v0314e1
三區域佈局: 情報流(左) · 量化戰場(右) · 兵棋推演(下)
══════════════════════════════════════════════════════ */
/* ── Outer wrapper ── */
.main-content-area{
display:grid;
grid-template-areas:"intel quant" "wargame wargame";
grid-template-columns:1fr 400px;
grid-template-rows:auto auto;
width:100%;
min-height:0;
}
/* Make the dual-panel transparent so its children (panel-intel, panel-compare)
participate directly in main-content-area's grid */
.dual-panel.mca-inner{
display:contents;
}
/* Override all mobile-breakpoint display overrides for mca-inner */
@media(max-width:9999px){
.dual-panel.mca-inner{display:contents!important}
}
/* ── Grid area assignments ── */
.panel-intel{grid-area:intel}
.macro-quant-arena{grid-area:quant}
.panel-compare{grid-area:wargame}
/* ── Panel-intel: left tall column ── */
.panel-intel{
display:flex;flex-direction:column;
border-right:1px solid rgba(70,100,155,.2);
min-height:720px;
}
/* ══ COMPACT QUANT SIDEBAR (right column, 400px) ══ */
.macro-quant-arena{
overflow-y:auto;
overflow-x:hidden;
max-height:900px;
border-left:1px solid rgba(70,100,155,.22);
background:#060a14;
scrollbar-width:thin;
scrollbar-color:rgba(70,100,155,.4) transparent;
position:relative;
z-index:1;
/* ★ Reset early-block styles so quant aligns flush with intel panel ★ */
margin:0;
border-radius:0;
padding:0;
box-shadow:none;
border:none;
border-left:1px solid rgba(70,100,155,.22);
align-self:stretch;
}
.macro-quant-arena::-webkit-scrollbar{width:3px}
.macro-quant-arena::-webkit-scrollbar-thumb{background:rgba(70,100,155,.45);border-radius:2px}
/* Compact header — sticky so scroll content passes UNDER title, with solid bg to mask scroll peek */
.macro-quant-arena .mq-header{padding:10px 12px 8px;gap:6px;position:sticky;top:0;z-index:12;background:#060a14;border-bottom:1px solid rgba(70,100,155,.22);
/* Prevent scroll content peeking above header */
box-shadow:0 -20px 0 0 #060a14;
}
.macro-quant-arena .mq-title{font-size:13px;letter-spacing:1px}
.macro-quant-arena .mq-sub{font-size:10px;opacity:.75}
.macro-quant-arena .mq-method-note{font-size:10.5px;line-height:1.48;opacity:.88;margin-top:6px;max-width:460px}
.macro-quant-arena .mq-head-right{gap:6px}
.macro-quant-arena .mq-regime{gap:4px}
.macro-quant-arena .mq-regime-k{font-size:9px}
.macro-quant-arena .mq-regime-v{font-size:10px}
.macro-quant-arena .mq-recompute-btn{font-size:10px;padding:4px 8px}
.macro-quant-arena .mq-ts{font-size:9px}
/* Compact market strip — 4 column in sidebar */
.macro-quant-arena .mq-market-strip{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:3px;padding:5px 8px;
}
.macro-quant-arena .mq-market-item{padding:4px 6px;gap:1px}
.macro-quant-arena .mq-market-item .k{font-size:8px}
.macro-quant-arena .mq-market-item .v{font-size:11px}
.macro-quant-arena .mq-market-item .c{font-size:9px}
/* Compact scoreboard — 2x2 grid in sidebar */
.macro-quant-arena .mq-scoreboard{
grid-template-columns:1fr 1fr;
gap:6px;padding:6px 8px;
}
.macro-quant-arena .mq-card{padding:8px 10px;gap:3px}
.macro-quant-arena .mq-card-h{font-size:10px;letter-spacing:2.5px;margin-bottom:2px}
.macro-quant-arena .mq-card-top{margin-bottom:1px}
.macro-quant-arena .mq-card-tagline{font-size:8px;margin-bottom:2px}
.macro-quant-arena .mq-card-roi{font-size:10px;padding:1px 5px}
.macro-quant-arena .mq-main{font-size:16px;margin:2px 0}
.macro-quant-arena .mq-card-stats{gap:0 8px;margin-top:4px;padding-top:4px}
.macro-quant-arena .mq-stat-k{font-size:8px}
.macro-quant-arena .mq-stat-v{font-size:9px}
.macro-quant-arena .mq-row{font-size:10px;padding:1px 0}
.macro-quant-arena .mq-dominant{font-size:8px;margin-top:3px;padding:2px 4px}
.macro-quant-arena .mq-pos-toggle{font-size:10px;padding:4px 8px;margin-top:4px}
/* Compact panels — single column, smaller canvas */
.macro-quant-arena .mq-grid{grid-template-columns:1fr;gap:5px;padding:4px 8px 8px}
.macro-quant-arena .mq-panel{padding:8px}
.macro-quant-arena .mq-panel-h{font-size:10px;letter-spacing:1px;padding:6px 8px}
.macro-quant-arena .mq-equity-panel{padding:8px 10px 6px}
.macro-quant-arena .mq-equity-header{margin-bottom:4px;gap:4px}
.macro-quant-arena #mq-equity-canvas{height:120px}
.macro-quant-arena .mq-trade-tape{max-height:160px}
.macro-quant-arena .mq-panel-wide{display:none} /* hide scenario matrix in sidebar */
.macro-quant-arena .mq-panel-wide.mq-equity-panel{display:block !important} /* but keep equity chart visible */
/* Position panel compact */
.macro-quant-arena .mq-pos-panel{margin:5px 8px 5px}
.macro-quant-arena .mq-pos-ph{padding:7px 10px;gap:8px}
.macro-quant-arena .mq-pos-ph-model{font-size:11px}
.macro-quant-arena .mq-pos-ph-equity,.macro-quant-arena .mq-pos-ph-cash{font-size:10px}
.macro-quant-arena .mq-pos-table{font-size:10px}
.macro-quant-arena .mq-pos-table th,.macro-quant-arena .mq-pos-table td{padding:4px 6px}
.macro-quant-arena .mq-pos-table-wrap{padding:6px 8px 8px}
/* ══════════════════════════════════════════════════════
WARGAME ARENA HERO HEADER — 作戰指揮室兵棋推演
══════════════════════════════════════════════════════ */
.wg-arena-hero{
position:relative;
padding:30px 40px 26px;
background:linear-gradient(180deg,rgba(3,6,16,.99) 0%,rgba(7,12,26,.96) 100%);
border-bottom:1px solid rgba(80,120,200,.2);
overflow:hidden;
flex-shrink:0;
}
/* Animated tactical grid background */
.wg-arena-hero::before{
content:'';position:absolute;inset:0;
background-image:
linear-gradient(rgba(40,80,165,.065) 1px,transparent 1px),
linear-gradient(90deg,rgba(40,80,165,.065) 1px,transparent 1px);
background-size:44px 44px;
animation:wgGridDrift 18s linear infinite;pointer-events:none;
}
@keyframes wgGridDrift{from{background-position:0 0}to{background-position:44px 44px}}
/* Scan sweep light */
.wg-arena-hero::after{
content:'';position:absolute;top:0;left:-50%;width:35%;height:100%;
background:linear-gradient(90deg,transparent,rgba(60,120,255,.055),transparent);
animation:wgScanSweep 5s ease-in-out infinite;pointer-events:none;
}
@keyframes wgScanSweep{0%{left:-50%}100%{left:140%}}
.wg-arena-inner{
position:relative;z-index:2;
display:flex;flex-direction:column;gap:10px;
}
.wg-arena-kicker{
font-family:'JetBrains Mono',monospace;
font-size:10px;letter-spacing:3.5px;
color:rgba(100,150,255,.55);text-transform:uppercase;
}
.wg-arena-title{
font-family:'Orbitron',sans-serif;
font-size:clamp(24px,3.2vw,42px);
font-weight:900;letter-spacing:4px;line-height:1.1;
background:linear-gradient(130deg,#dba94a 0%,#f5e0b0 28%,#ffffff 50%,#93c5fd 72%,#c084fc 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:#dba94a;
text-shadow:none;
}
.wg-arena-sep{
-webkit-text-fill-color:rgba(255,255,255,.25);color:rgba(255,255,255,.25);
}
.wg-arena-sub{
font-size:13px;color:rgba(150,190,255,.68);letter-spacing:2px;font-weight:500;
}
.wg-arena-pills{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px;
}
.wg-arena-pill{
font-family:'JetBrains Mono',monospace;
font-size:11px;font-weight:700;padding:5px 16px;
border-radius:4px;letter-spacing:2px;
position:relative;overflow:hidden;
transition:transform .2s,box-shadow .2s;
}
.wg-arena-pill:hover{transform:translateY(-1px)}
/* Sheen animation */
.wg-arena-pill::after{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
transform:translateX(-100%);
animation:wgPillSheen 3.5s ease-in-out infinite;
}
.wg-p-claude::after{animation-delay:0s}
.wg-p-gpt::after{animation-delay:1.2s}
.wg-p-gemini::after{animation-delay:2.4s}
@keyframes wgPillSheen{0%{transform:translateX(-100%)}60%{transform:translateX(-100%)}100%{transform:translateX(210%)}}
.wg-p-claude{
background:rgba(125,211,252,.1);border:1px solid rgba(125,211,252,.45);
color:#7dd3fc;box-shadow:0 0 12px rgba(125,211,252,.12);
}
.wg-p-gpt{
background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.4);
color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.1);
}
.wg-p-gemini{
background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.45);
color:#c4b5fd;box-shadow:0 0 12px rgba(167,139,250,.12);
}
.wg-arena-vs{
color:rgba(255,90,90,.75);font-size:15px;font-weight:900;
text-shadow:0 0 10px rgba(255,50,50,.5);
animation:wgVsPulse 1.8s ease-in-out infinite;
}
@keyframes wgVsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
/* Corner brackets */
.wg-arena-corners{position:absolute;inset:0;pointer-events:none;z-index:1}
.wg-ac{position:absolute;width:18px;height:18px;border-color:rgba(70,130,220,.45);border-style:solid}
.wg-ac-tl{top:10px;left:10px;border-width:2px 0 0 2px}
.wg-ac-tr{top:10px;right:10px;border-width:2px 2px 0 0}
.wg-ac-bl{bottom:10px;left:10px;border-width:0 0 2px 2px}
.wg-ac-br{bottom:10px;right:10px;border-width:0 2px 2px 0}
/* ── Upgrade wg-hero-strip to be more dramatic ── */
.wg-hero-strip{
padding:20px 24px;
background:linear-gradient(180deg,rgba(5,10,22,.95) 0%,rgba(8,14,30,.9) 100%);
border-bottom:1px solid rgba(60,100,180,.2);
}
.wg-hero-cards{gap:16px}
.wg-hero-card{
padding:20px 18px;
border-radius:10px;
transition:transform .25s,box-shadow .25s;
}
.wg-hero-card:hover{transform:translateY(-3px)}
.wg-hc-claude{box-shadow:0 4px 24px rgba(125,211,252,.1),0 0 0 1px rgba(125,211,252,.18)}
.wg-hc-gpt{box-shadow:0 4px 24px rgba(251,191,36,.1),0 0 0 1px rgba(251,191,36,.18)}
.wg-hc-gemini{box-shadow:0 4px 24px rgba(167,139,250,.1),0 0 0 1px rgba(167,139,250,.18)}
.wg-hc-icon{font-size:28px;margin-bottom:8px}
.wg-hc-name{font-size:13px;letter-spacing:2px;font-weight:800}
.wg-hc-label{
font-size:9px;letter-spacing:2px;color:rgba(140,170,220,.6);
margin-top:8px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;
}
/* ══════════════════════════════════════════════════════
MOBILE RESPONSIVE — iOS & Android
══════════════════════════════════════════════════════ */
/* ── Wide desktop (> 1400px): give quant more room ── */
@media(min-width:1400px){
.main-content-area{grid-template-columns:1fr 440px}
}
/* ── Medium desktop (1024-1200px): narrow quant ── */
@media(max-width:1200px){
.main-content-area{grid-template-columns:1fr 360px}
.macro-quant-arena{max-height:850px}
}
/* ── Tablet landscape / small desktop (961-1024px) ── */
@media(max-width:1024px){
.main-content-area{
grid-template-areas:"quant""intel""wargame";
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
}
.macro-quant-arena{
max-height:none;border-left:none;
border-bottom:1px solid rgba(70,100,155,.22);
}
.macro-quant-arena .mq-scoreboard{grid-template-columns:repeat(2,1fr);gap:8px}
.macro-quant-arena .mq-grid{grid-template-columns:1fr 1fr}
.macro-quant-arena .mq-panel-wide{display:block;grid-column:1 / -1}
.macro-quant-arena .mq-market-strip{grid-template-columns:repeat(7,minmax(0,1fr))}
.macro-quant-arena .mq-market-item.mq-vix-hero{grid-column:span 1}
.macro-quant-arena .mq-market-item.mq-vix-hero .v{font-size:14px}
.macro-quant-arena .mq-title{font-size:15px}
.panel-intel{min-height:auto;border-right:none;border-bottom:1px solid rgba(70,100,155,.2)}
.wg-arena-hero{padding:22px 24px 20px}
.wg-arena-title{font-size:clamp(20px,4vw,34px)}
}
/* ── Tablet portrait (601-768px) ── */
@media(max-width:768px){
.macro-quant-arena .mq-scoreboard{grid-template-columns:1fr 1fr}
.macro-quant-arena .mq-grid{grid-template-columns:1fr}
.macro-quant-arena .mq-panel-wide{grid-column:auto}
.macro-quant-arena .mq-market-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.wg-arena-title{font-size:clamp(18px,5vw,28px);letter-spacing:2px}
.wg-arena-hero{padding:18px 18px 16px}
.wg-arena-sub{font-size:11px;letter-spacing:1px}
.wg-hero-cards{flex-wrap:wrap}
.wg-hero-card{min-width:calc(50% - 8px);flex:0 0 calc(50% - 8px)}
}
/* ── Mobile portrait (≤ 600px): iOS + Android phones ── */
@media(max-width:600px){
.main-content-area{
grid-template-areas:"quant""intel""wargame";
grid-template-columns:1fr;
}
.macro-quant-arena .mq-title{font-size:13px}
.macro-quant-arena .mq-scoreboard{grid-template-columns:1fr 1fr}
.macro-quant-arena .mq-market-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.macro-quant-arena #mq-equity-canvas{height:110px}
.macro-quant-arena .mq-trade-tape{max-height:140px}
.wg-arena-hero{padding:16px 14px 14px}
.wg-arena-title{font-size:18px;letter-spacing:1.5px}
.wg-arena-kicker{font-size:8px;letter-spacing:2px}
.wg-arena-sub{font-size:10px}
.wg-arena-pills{gap:7px}
.wg-arena-pill{font-size:9px;padding:4px 10px;letter-spacing:1px}
.wg-arena-vs{font-size:12px}
.wg-hero-card{min-width:calc(100% - 0px);flex:1 1 auto}
}
/* ── iPhone safe area insets (notch + home indicator) ── */
@supports(padding-top:env(safe-area-inset-top)){
.macro-quant-arena{
padding-bottom:env(safe-area-inset-bottom,0px);
}
}
/* ══════════════════════════════════════════════════════
MOBILE READABILITY + PERFORMANCE HARDENING — v0314f1
══════════════════════════════════════════════════════ */
@media (max-width: 768px), (hover:none) and (pointer:coarse){
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:17px}
.topbar.topbar-command{padding-top:max(.15rem, env(safe-area-inset-top, 0px))}
.topbar .logo-txt{font-size:1.05rem;letter-spacing:3px}
.topbar-command-kicker{font-size:.78rem}
.topbar-command-title{font-size:1.08rem}
.topbar-command-subtext{font-size:.88rem}
.lang-toggle-btn,.refresh-btn,.auth-btn,.q-badge,.sfx-toggle,.bgm-btn{font-size:.9rem}
.ticker-bar{min-height:42px}
.ticker-content{font-size:1rem}
.panel-header{padding:.85rem 1rem}
.quewi-intel-combined{font-size:1rem}
.ph-badge{font-size:.9rem}
.intel-search-input{font-size:.98rem;padding:.62rem .8rem .62rem 2.3rem}
.search-icon{font-size:.92rem}
.news-item{padding:.9rem .9rem .85rem}
.news-item-source{font-size:.84rem}
.news-item-title{font-size:1.06rem;line-height:1.45}
.news-item-summary{font-size:.92rem;line-height:1.6}
.news-item-time{font-size:.76rem}
.ns-btn,.ns-orig-link,.intel-src-note,.intel-custom-btn{font-size:.8rem}
.macro-quant-arena .mq-header{padding:12px 12px 10px}
.macro-quant-arena .mq-title{font-size:16px;letter-spacing:1px;line-height:1.3}
.macro-quant-arena .mq-sub{font-size:12px;line-height:1.45;opacity:.88}
.macro-quant-arena .mq-method-note{font-size:12.5px;line-height:1.55;opacity:.92;margin-top:7px;max-width:none}
.macro-quant-arena .mq-regime-k{font-size:10px}
.macro-quant-arena .mq-regime-v,.macro-quant-arena .mq-regime-score{font-size:12px}
.macro-quant-arena .mq-recompute-btn{font-size:12px;padding:6px 10px}
.macro-quant-arena .mq-ts{font-size:11px}
.macro-quant-arena .mq-market-item .k{font-size:10px}
.macro-quant-arena .mq-market-item .v{font-size:13px}
.macro-quant-arena .mq-market-item .c{font-size:11px}
.macro-quant-arena .mq-card-h{font-size:12px}
.macro-quant-arena .mq-card-tagline{font-size:9px}
.macro-quant-arena .mq-card-roi{font-size:11px}
.macro-quant-arena .mq-card-stats{gap:1px 10px}
.macro-quant-arena .mq-stat-k{font-size:9px}
.macro-quant-arena .mq-stat-v{font-size:10px}
.macro-quant-arena .mq-main{font-size:20px}
.macro-quant-arena .mq-row{font-size:12px;padding:2px 0}
.macro-quant-arena .mq-dominant{font-size:11px;padding:4px 6px}
.macro-quant-arena .mq-pos-toggle{font-size:12px;padding:7px 10px}
.macro-quant-arena .mq-panel-h{font-size:12px}
.macro-quant-arena .mq-tape-item{font-size:11px}
.macro-quant-arena .mq-pos-ph-model{font-size:12px}
.macro-quant-arena .mq-pos-ph-equity,.macro-quant-arena .mq-pos-ph-cash{font-size:11px}
.macro-quant-arena .mq-pos-table{font-size:11px}
.wg-arena-hero{padding:18px 16px 16px}
.wg-arena-kicker{font-size:8px;letter-spacing:2px}
.wg-arena-title{font-size:clamp(20px,7vw,30px);letter-spacing:1.5px}
.wg-arena-sub{font-size:12px;letter-spacing:.8px;line-height:1.55}
.wg-arena-pill{font-size:10px;padding:5px 10px;letter-spacing:1px}
.wg-hc-name{font-size:.96rem}
.wg-hc-label{font-size:.64rem}
.hz-surveillance{height:auto;min-height:unset}
.hz-fullmap{min-height:58vh;min-height:58dvh}
.hz-fullmap .leaflet-control-layers label{font-size:.82rem !important}
.hz-freshness-clock,.hz-rec-title,.hz-rec-subtitle,.hz-glass-hdr,.hz-oil-name,.hz-sg-lbl,.hz-bar-warn,.hz-bar-purple{font-size:.9rem}
.hz-oil-val,.hz-sg-num{font-size:1.1rem}
.hz-fullmap .leaflet-tile-pane{filter:none !important}
.hz-fullmap .leaflet-tile-pane::after{display:none}
}
@media (max-width: 480px){
html{font-size:18px}
.topbar-command-title{font-size:1rem}
.news-item-title{font-size:1rem}
.news-item-summary{font-size:.9rem}
.macro-quant-arena .mq-market-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.macro-quant-arena .mq-market-item.mq-vix-hero{grid-column:span 2}
.macro-quant-arena .mq-main{font-size:22px}
.macro-quant-arena .mq-row{font-size:11.5px}
.wg-arena-sub{font-size:11px}
}
@media (hover:none) and (pointer:coarse){
.film-grain,
.hz-scanlines,
.panel-header::after,
.panel-intel::before,
.panel-intel::after,
.panel-compare::before,
.wg-arena-hero::before,
.wg-arena-hero::after,
.wg-hc-radar-sweep,
.live-dot,
.blink-red,
.wg-arena-vs,
.wg-arena-pill::after{
animation:none !important;
}
/* ticker-content deliberately KEPT animating on mobile */
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* ══════════════════════════════════════════════════════
POST-MAP LAYOUT REVAMP — v0314g1
目標：黃金比例、強節奏主次、避免冗長整排
══════════════════════════════════════════════════════ */
/* ── Top split after map: balance intel feed and quant more rationally ── */
.main-content-area{
max-width: min(1920px, calc(100vw - 12px));
margin: 0 auto;
padding: 18px clamp(12px, 1.3vw, 24px) 26px;
column-gap: 18px;
row-gap: 24px;
grid-template-columns: minmax(420px, 1.22fr) minmax(390px, 0.78fr);
align-items: start;
}
.panel-intel,
.macro-quant-arena,
.panel-compare{
min-width: 0;
}
.panel-intel,
.macro-quant-arena{
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(72, 106, 168, 0.18);
box-shadow:
0 14px 40px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.03);
}
.panel-intel{
min-height: 760px;
}
.macro-quant-arena{
position: sticky;
top: 12px;
max-height: calc(100vh - 24px);
}
/* ── Wargame stage: no more full-width flat flow, now a command-grid ── */
.panel-compare{
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(72,106,168,.14);
box-shadow: 0 16px 48px rgba(0,0,0,.36);
}
.compare-body{
display: grid;
grid-template-columns: minmax(0, 1.618fr) minmax(360px, 1fr);
grid-template-areas:
"dashboard dashboard"
"risk qip"
"mil qip"
"hits qip"
"tables tables";
gap: 18px 20px;
padding: 20px clamp(14px, 1.2vw, 24px) 28px;
max-width: 1760px;
margin: 0 auto;
align-items: start;
}
#gcc-dashboard{
grid-area: dashboard;
grid-column: auto;
margin-bottom: 0;
}
.risk-overview{grid-area:risk;margin-bottom:0;min-width:0;border-radius:14px;padding:1.1rem 1.05rem}
.mil-dashboard{grid-area:mil;margin-bottom:0;min-width:0;border-radius:16px;padding:1.05rem}
.quewi-intel-panel{
grid-area:qip;
margin-bottom:0;
position: sticky;
top: 18px;
align-self: start;
min-width: 0;
}
#prediction-hits-banner{
grid-area: hits;
min-width: 0;
align-self:start;
}
.compare-tables{
grid-area: tables;
margin-bottom: 0;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: 18px;
align-items: start;
}
.compare-tables > .timeline-section,
.compare-tables > #leader-section{
grid-column: 1 / -1;
}
.compare-tables > .timeline-section,
.compare-tables > .ct-section{
margin-bottom: 0;
background:
radial-gradient(circle at top right, rgba(200,164,90,.05), transparent 38%),
linear-gradient(155deg, rgba(10,15,28,.96), rgba(14,22,38,.92));
border: 1px solid rgba(89,120,172,.14);
border-radius: 16px;
padding: 18px 18px 20px;
box-shadow: 0 12px 34px rgba(0,0,0,.24);
}
.timeline-title,
.ct-title{
font-size: .92rem;
letter-spacing: 2px;
margin-bottom: .85rem;
}
.tl-horizon{
border-radius: 14px;
overflow: hidden;
}
.ct-table{
border-radius: 12px;
table-layout: fixed;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.ct-table th{
font-size: .68rem;
padding: .7rem .72rem;
}
.ct-table td{
padding: .72rem .78rem;
font-size: .92rem;
line-height: 1.75;
}
.ct-table td:first-child{
width: 96px;
font-size: .8rem;
}
/* ── Prediction hits become a premium multi-card rail instead of a long strip ── */
.pred-hits-wrap{
height: auto;
padding: 16px 18px 18px;
border-radius: 16px;
background:
radial-gradient(circle at 15% 10%, rgba(255,82,82,.08), transparent 30%),
linear-gradient(160deg, rgba(16,18,30,.96), rgba(20,24,38,.94));
border: 1px solid rgba(255,116,116,.14);
box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.pred-hits-header{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:12px;
}
.pred-hits-title{font-size:.96rem;letter-spacing:1.5px}
.pred-hits-count{font-size:.8rem}
.pred-hits-list{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
max-height: none;
}
.pred-hit-card{
height: 100%;
padding: .8rem .85rem;
border-radius: 14px;
background: linear-gradient(155deg, rgba(9,14,26,.92), rgba(16,20,34,.88));
border: 1px solid rgba(91,125,188,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
/* ── Strategic panel gets stronger command-room presence ── */
.qip-header{padding:1rem 1.25rem .75rem}
.qip-logo{font-size:.95rem;letter-spacing:5px}
.qip-badge{font-size:.64rem}
.qip-tab{font-size:.78rem;padding:.82rem .95rem}
.qip-tab-label{font-size:.76rem;letter-spacing:1.8px}
.qip-body{padding:1.25rem 1.35rem 1.15rem}
.qip-actions{padding:.65rem 1.2rem 1rem}
.qip-action-btn{font-size:.7rem;padding:.72rem}
/* ── Desktop downshift: keep proportions elegant ── */
@media (max-width: 1440px){
.main-content-area{grid-template-columns:minmax(380px,1.14fr) minmax(350px,.86fr)}
.compare-body{grid-template-columns:minmax(0,1.42fr) minmax(340px,.98fr)}
}
@media (max-width: 1280px){
.compare-body{
grid-template-columns:1fr;
grid-template-areas:
"dashboard"
"risk"
"mil"
"hits"
"qip"
"tables";
}
.quewi-intel-panel{position:relative;top:auto}
.compare-tables{grid-template-columns:1fr}
.pred-hits-list{grid-template-columns:1fr}
}
/* ── Tablet/mobile self-review layout: explicit one-column order ── */
@media (max-width: 1024px){
.main-content-area{padding:14px 10px 22px}
.panel-intel,.macro-quant-arena,.panel-compare{border-radius:16px}
.macro-quant-arena{position:relative;top:auto;max-height:none}
}
@media (max-width: 768px){
.compare-body{
display:grid !important;
grid-template-columns:1fr !important;
grid-template-areas:
"dashboard"
"risk"
"mil"
"intel"
"qip"
"hits"
"tables";
gap:14px;
padding:14px 10px 18px;
}
.compare-body > .panel-intel{
grid-area:intel;
min-height:auto;
border-right:none;
border-bottom:none;
border-radius:14px;
overflow:hidden;
}
#gcc-dashboard{grid-column:auto}
.risk-overview,.mil-dashboard,.quewi-intel-panel,.pred-hits-wrap,.compare-tables > .timeline-section,.compare-tables > .ct-section{
border-radius:14px;
}
.gcc-dashboard{border-radius:14px}
.iran-hero{
margin:.55rem;
padding:.85rem .8rem .8rem;
}
.iran-hero-header{
flex-direction:column;
align-items:flex-start;
gap:.68rem;
}
.iran-hero-left{
width:100%;
min-width:0;
align-items:flex-start;
}
.iran-hero-left > div{
min-width:0;
flex:1 1 auto;
}
.iran-hero-title{
font-size:.88rem;
letter-spacing:.9px;
line-height:1.3;
text-transform:none;
word-break:keep-all;
overflow-wrap:anywhere;
}
.iran-hero-sub{
flex-wrap:wrap;
font-size:.62rem;
line-height:1.45;
}
.iran-hero-cards{
grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
gap:.6rem;
}
.iran-hc{
min-width:0;
min-height:116px;
padding:.78rem .72rem .68rem;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
text-align:left;
}
.iran-hc-num{
font-size:clamp(1.55rem,8vw,2rem);
line-height:.95;
margin-bottom:.24rem;
white-space:nowrap;
}
.iran-hc-label{
font-size:.62rem;
line-height:1.35;
letter-spacing:1px;
white-space:normal;
word-break:keep-all;
overflow-wrap:anywhere;
}
.iran-hc-sub{
margin-top:.18rem;
font-size:.56rem;
line-height:1.45;
color:rgba(255,255,255,.45);
word-break:keep-all;
overflow-wrap:anywhere;
}
.gcc-header-right{
width:100%;
justify-content:space-between;
}
.gcc-tabs{
gap:.35rem;
padding:.5rem .7rem;
}
.gcc-tab{
flex:1 1 calc(50% - .35rem);
justify-content:center;
min-height:36px;
}
.gcc-defence-row{
justify-content:flex-start;
gap:.45rem;
padding:.6rem;
}
.gcc-def-stat{
flex:1 1 calc(33.333% - .3rem);
min-width:calc(33.333% - .3rem);
padding:.2rem .15rem;
}
.gcc-def-rate{
flex:1 1 100%;
margin-top:.1rem;
padding:.48rem 0 0;
border-left:none;
border-top:1px solid rgba(255,255,255,.08);
}
.timeline-title,.ct-title{font-size:.86rem;letter-spacing:1.2px}
.ct-table th{font-size:.72rem}
.ct-table td{font-size:.95rem;line-height:1.72}
.pred-hits-header{margin-bottom:10px}
}
.worst-case-cards{grid-template-columns:1fr !important}
@media (max-width: 600px){
.main-content-area{padding:12px 8px 18px;row-gap:16px}
.worst-case-cards{grid-template-columns:repeat(3,1fr) !important}
.compare-tables > .timeline-section,
.compare-tables > .ct-section,
.pred-hits-wrap{padding:14px}
.ct-table td:first-child{width:84px}
}
/* ── Android: fix topbar position:sticky in scroll containers ──
Android Chrome has a known bug where sticky inside flex parent
with overflow:auto doesn't work. Ensure body/warroom don't clip it. */
.warroom{
overflow-x:hidden;
--topbar-h:58px;
--nav-h:48px;
padding-top:calc(var(--topbar-h) + var(--nav-h));
}
@media(max-width:768px){
.warroom{
--nav-h:42px;
padding-top:calc(var(--topbar-h) + var(--nav-h));
}
}
/* ══════════════════════════════════════════════════════
MOBILE HERO + QUANT DOCK POLISH — v0314g2
Fixes: ugly QueWi card proportion + oversized quant footprint
══════════════════════════════════════════════════════ */
/* ── Quant mobile dock button ── */
.mq-mobile-dock-btn{
display:none;
align-items:center;
justify-content:center;
gap:6px;
padding:6px 10px;
border-radius:10px;
border:1px solid rgba(94,132,201,.36);
background:linear-gradient(150deg, rgba(23,36,62,.86), rgba(18,28,49,.82));
color:#a9cbf6;
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:.6px;
cursor:pointer;
transition:all .24s ease;
}
.mq-mobile-dock-btn:hover{color:#d7e8ff;border-color:rgba(145,188,255,.62)}
.mq-mobile-dock-btn.active{
color:#ffe3a8;
border-color:rgba(220,178,98,.58);
box-shadow:0 0 16px rgba(220,178,98,.14), inset 0 0 10px rgba(220,178,98,.06);
}
/* ── Mobile: QueWi top command card proportion fix ── */
@media (max-width: 768px){
.topbar.topbar-command{
padding:.52rem .55rem .54rem;
gap:.35rem;
}
.topbar.topbar-command .topbar-center{
padding-top:.26rem;
border-top:1px solid rgba(255,255,255,.05);
}
.topbar-command-link{
width:100%;
padding:.42rem .58rem .48rem;
border-radius:12px;
gap:.08rem;
min-height:unset;
background:linear-gradient(135deg, rgba(16,24,37,.96), rgba(13,20,32,.92) 45%, rgba(35,20,48,.9) 100%);
box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 0 12px rgba(144,112,176,.05);
}
.topbar-command-link::before{opacity:.6}
.topbar-command-kicker{
font-size:.44rem;
letter-spacing:2.1px;
line-height:1.1;
opacity:.84;
}
.topbar-command-title{
font-size:.96rem;
letter-spacing:.95px;
line-height:1.04;
max-width:100%;
white-space:nowrap;
text-align:center;
margin-top:1px;
/* Mobile: disable gradient text — use solid gold for guaranteed visibility */
-webkit-text-fill-color:#f0c777 !important;
color:#f0c777 !important;
background:none !important;
-webkit-background-clip:border-box !important;
background-clip:border-box !important;
animation:none !important;
text-shadow:0 0 12px rgba(200,164,90,.2);
}
.topbar-command-sub{
font-size:.55rem;
letter-spacing:.45px;
line-height:1.2;
gap:.24rem;
margin-top:1px;
}
.topbar-command-pulse{
width:6px;
height:6px;
}
.topbar-command-subtext{
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.topbar.topbar-command .topbar-command-link .data-ts{display:none}
html[lang="zh-CN"] .topbar-command-title,
html[lang="zh-HK"] .topbar-command-title{
font-size:1rem;
letter-spacing:.6px;
max-width:100%;
-webkit-text-fill-color:#f0c777!important;
color:#f0c777!important;
background:none!important;
animation:none!important;
}
html[lang="en"] .topbar-command-title{
font-size:.88rem;
letter-spacing:.85px;
}
}
@media (max-width: 480px){
.topbar-command-link{padding:.38rem .5rem .44rem}
.topbar-command-kicker{display:none}
.topbar-command-title{font-size:1rem;letter-spacing:.5px;max-width:100%;-webkit-text-fill-color:#f0c777!important;color:#f0c777!important;background:none!important;animation:none!important}
}
/* ── Quant section mobile: elegant collapse + dock while scrolling ── */
@media (max-width: 768px){
.macro-quant-arena.mq-mobile-enabled{
position:relative;
z-index:18;
overflow:visible;
border-radius:14px;
background:linear-gradient(180deg, rgba(9,14,26,.98), rgba(8,12,22,.96));
transition:max-height .35s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
-webkit-overflow-scrolling:touch;
/* No max-height when expanded — let content flow naturally */
max-height:none;
}
.macro-quant-arena.mq-mobile-enabled > *{position:relative;z-index:1}
.macro-quant-arena.mq-mobile-enabled .mq-mobile-dock-btn{display:inline-flex}
/* ★ Ensure all quant content children are visible in expanded state */
.macro-quant-arena.mq-mobile-enabled .mq-market-strip{
opacity:1 !important;
max-height:400px !important;
pointer-events:auto !important;
overflow:visible !important;
}
.macro-quant-arena.mq-mobile-enabled .mq-scoreboard,
.macro-quant-arena.mq-mobile-enabled .mq-pos-panel,
.macro-quant-arena.mq-mobile-enabled .mq-grid{
transition:opacity .26s ease, transform .28s ease, max-height .35s cubic-bezier(.4,0,.2,1), margin .28s ease, padding .28s ease;
/* ★ Explicit expanded state — WebKit mobile needs these to revert from collapsed opacity:0 */
opacity:1 !important;
max-height:4000px !important;
transform:none !important;
pointer-events:auto !important;
overflow:visible !important;
}
.macro-quant-arena.mq-mobile-collapsed{
max-height:var(--mq-collapsed-height, 218px) !important;
overflow:hidden !important;
border-color:rgba(88,124,188,.25);
box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 0 14px rgba(125,168,255,.04);
}
.macro-quant-arena.mq-mobile-collapsed .mq-header{margin-bottom:0;padding-bottom:10px}
.macro-quant-arena.mq-mobile-collapsed::after{
content:'';
position:absolute;
left:0;right:0;bottom:0;
height:52px;
pointer-events:none;
background:linear-gradient(180deg, rgba(8,13,24,0), rgba(8,13,24,.92) 72%);
z-index:2;
}
.macro-quant-arena.mq-mobile-collapsed .mq-scoreboard,
.macro-quant-arena.mq-mobile-collapsed .mq-pos-panel,
.macro-quant-arena.mq-mobile-collapsed .mq-grid{
opacity:0 !important;
transform:translateY(-8px) !important;
max-height:0 !important;
margin:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
/* mq-mobile-docked removed — sticky docking caused iOS/Android flash bugs */
}
/* ══════════════════════════════════════════════════════
LAYOUT FINISH — v0314h1
Intel / Quant 等高 + 內容框內滾動 + 後續區塊留白和諧化
══════════════════════════════════════════════════════ */
@media (min-width: 769px){
.main-content-area{
--top-sync-h:clamp(780px,calc(100vh - 96px),1040px);
grid-template-columns:minmax(430px,1.07fr) minmax(420px,.93fr);
grid-template-rows:var(--top-sync-h) auto;
column-gap:14px;
row-gap:14px;
align-items:stretch;
}
.main-content-area > .panel-intel,
.main-content-area > .macro-quant-arena,
.main-content-area > .panel-compare{
margin:0 !important;
}
.panel-intel,
.macro-quant-arena{
height:100%;
min-height:0;
max-height:var(--top-sync-h);
border-radius:16px;
border:1px solid rgba(78,114,176,.2);
box-shadow:0 14px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
}
.panel-intel{
overflow:hidden;
background:linear-gradient(180deg,rgba(9,13,22,.96),rgba(8,12,20,.94));
}
.macro-quant-arena{
position:relative !important;
top:auto !important;
overflow-y:auto !important;
overflow-x:hidden !important;
isolation:isolate;
contain:layout paint;
background:linear-gradient(180deg,rgba(8,13,24,.97),rgba(9,14,26,.94));
scrollbar-width:thin;
}
.macro-quant-arena .mq-header{
position:sticky;
top:0;
z-index:4;
backdrop-filter:blur(8px);
background:linear-gradient(180deg,rgba(10,16,30,.96),rgba(10,16,30,.82));
}
.panel-compare{
z-index:1;
overflow:hidden;
}
}
.panel-intel .panel-header{padding:.58rem .82rem}
.panel-intel .ph-left{align-items:flex-start;gap:.42rem;min-width:0}
.quewi-intel-combined{
display:inline-flex;
flex-wrap:nowrap;
align-items:center;
max-width:280px;
line-height:1.14;
font-size:.92rem;
letter-spacing:.8px;
overflow:hidden;
text-overflow:ellipsis;
}
.panel-intel .ph-badge{align-self:flex-start;margin-top:.1rem}
.compare-body{
grid-template-columns:1fr !important;
grid-template-areas:
"dashboard"
"risk"
"mil"
"hits"
"qip"
"tables" !important;
grid-auto-flow:row dense;
align-content:start;
gap:14px !important;
padding:14px 14px 20px !important;
}
#gcc-dashboard{
grid-area:dashboard;
grid-column:auto !important;
width:100%;
min-width:0;
}
.compare-body > .panel-intel{
width:100%;
min-width:0;
}
.wg-arena-hero{padding:18px 24px 15px}
.wg-arena-inner{gap:6px}
.wg-arena-kicker{font-size:.82rem;letter-spacing:2.8px}
.wg-arena-sub{font-size:.96rem;line-height:1.62;letter-spacing:.5px}
.wg-hc-name{font-size:1.02rem;letter-spacing:1.2px}
.wg-hc-label{font-size:.72rem;letter-spacing:1.2px}
.risk-overview,
.mil-dashboard,
.quewi-intel-panel,
.pred-hits-wrap,
.compare-tables > .timeline-section,
.compare-tables > .ct-section{margin-bottom:0 !important}
.risk-overview{padding:.84rem .86rem}
.mil-dashboard{padding:.86rem}
.quewi-intel-panel{position:relative !important;top:auto !important}
#prediction-hits-banner:empty{display:none !important}
.compare-tables{grid-template-columns:1fr;gap:14px;align-content:start}
.compare-tables > .timeline-section,
.compare-tables > #leader-section{grid-column:1 / -1}
.compare-tables > .timeline-section,
.compare-tables > .ct-section{padding:13px 14px 14px}
.ct-title,
.timeline-title{font-size:1.02rem;letter-spacing:1.25px;line-height:1.4;margin-bottom:.65rem}
.ct-table th{font-size:.76rem;padding:.75rem .78rem}
.ct-table td{font-size:1rem;line-height:1.85;padding:.78rem .82rem}
.gcc-def-num{font-size:1.24rem}
.gcc-def-lbl{font-size:.58rem;letter-spacing:.55px}
.pred-hits-title{font-size:1rem;letter-spacing:1px}
.pred-hits-count{font-size:.84rem}
.pred-hit-label{font-size:.78rem}
.pred-hit-prediction,.pred-hit-news,.pred-hit-evidence,.pred-hit-fact-basis,.pred-hit-reason{font-size:.84rem;line-height:1.65}
.worst-case-cards{grid-template-columns:repeat(3,1fr) !important;gap:.85rem;align-items:start}
.wc-model{font-size:.82rem}
.wc-desc{font-size:1rem;line-height:1.92}
.wc-prob{font-size:.84rem}
/* Social bar inside each wc-card — compact, card-integrated */
.wc-card .social-bar-inline{margin-top:.9rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.07)}
.wc-card .social-bar-inner{gap:.5rem}
.wc-card .social-btn{font-size:.7rem;padding:.22rem .52rem;gap:.3rem;opacity:.78}
.wc-card .social-btn:hover{opacity:1}
/* Hide refresh + recompute buttons */
.gcc-refresh-btn{display:none !important}
.mq-recompute-btn{display:none !important}
/* 已验证 scroll panel — fixed height, full-width cards, contained width */
.pred-hits-wrap{max-width:860px;margin:1rem auto}
.pred-hits-list{max-height:360px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,215,0,.25) transparent}
.pred-hits-list::-webkit-scrollbar{width:4px}
.pred-hits-list::-webkit-scrollbar-thumb{background:rgba(255,215,0,.22);border-radius:99px}
.pred-hit-card{width:100%;box-sizing:border-box}
@media (max-width: 1024px){
.main-content-area{
grid-template-columns:1fr !important;
grid-template-areas:"intel" "quant" "wargame" !important;
row-gap:12px;
padding:10px 8px 14px;
}
.panel-intel,
.macro-quant-arena,
.panel-compare{border-radius:12px}
.panel-intel .panel-header{padding:.54rem .68rem}
.quewi-intel-combined{max-width:none;font-size:.86rem;line-height:1.12}
.compare-body{
grid-template-columns:1fr !important;
grid-template-areas:
"dashboard"
"risk"
"mil"
"intel"
"hits"
"qip"
"tables" !important;
gap:11px;
padding:10px 8px 12px !important;
}
.wg-arena-hero{padding:14px 12px 12px}
.wg-arena-kicker{font-size:.72rem;letter-spacing:2px}
.wg-arena-sub{font-size:.88rem;line-height:1.58}
.ct-title,.timeline-title{font-size:.95rem;letter-spacing:.9px}
.ct-table th{font-size:.72rem}
.ct-table td{font-size:.92rem;line-height:1.78}
.worst-case-cards{grid-template-columns:1fr !important}
}
@media (min-width:1025px) and (max-width:1280px){
.worst-case-cards{grid-template-columns:repeat(3,1fr) !important}
}
@media (max-width: 480px){
.iran-hero{
margin:.45rem;
padding:.78rem .72rem .72rem;
}
.iran-hero-title{
font-size:.8rem;
letter-spacing:.45px;
}
.iran-hero-sub{
font-size:.58rem;
gap:.32rem;
}
.iran-hero-cards{
grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));
gap:.52rem;
}
.iran-hc{
min-height:108px;
padding:.7rem .62rem .62rem;
}
.iran-hc-label{
font-size:.58rem;
letter-spacing:.72px;
}
.iran-hc-sub{
font-size:.52rem;
}
.gcc-def-stat{
flex-basis:calc(50% - .25rem);
min-width:calc(50% - .25rem);
}
}
@media (max-width: 380px){
.iran-hero-cards{grid-template-columns:1fr}
.gcc-tab{flex-basis:100%}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE PREMIUM UX OVERHAUL — v0314h9
iOS (iPhone SE → 16 Pro Max) + Android (all DPI)
Fixes: splash centering, 情報流 header, satellite perf,
GPU compositing, reduced motion on touch devices
═══════════════════════════════════════════════════════════════ */
/* ── 1. SPLASH SCREEN: proper centering + sizing for all phones ── */
@media (max-width: 768px){
.cine-overlay{
display:flex;align-items:center;justify-content:center;
overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.cine-phase{
padding:env(safe-area-inset-top,20px) 16px env(safe-area-inset-bottom,20px);
}
.title-block{
padding:0 20px;
max-width:100vw;
box-sizing:border-box;
}
/* Hero row: stack vertically on narrow screens */
.title-quewi-hero{
flex-direction:column;
gap:.55rem;
margin-bottom:1rem;
align-items:center;
max-width:88vw;
}
.quewi-hero-logo-ring{width:52px;height:52px}
.quewi-hero-logo{
width:44px;height:44px;
font-size:1.1rem;border-radius:10px;
flex-shrink:0;
}
.quewi-hero-text{align-items:center}
.quewi-hero-name{
font-size:1.5rem;letter-spacing:3px;
text-align:center;
}
.quewi-hero-tag{
font-size:.6rem;letter-spacing:1.5px;
text-align:center;
}
/* Title elements: breathable vertical rhythm */
.title-main{
font-size:clamp(1.3rem,5.5vw,2rem)!important;
letter-spacing:clamp(3px,1.5vw,8px)!important;
white-space:nowrap;
line-height:1.25;
}
.title-divider{
width:min(200px,60vw);
margin:.8rem auto;
}
.title-sub{
font-size:clamp(1rem,3vw,1.3rem);
letter-spacing:clamp(3px,1.2vw,6px);
margin-bottom:.3rem;
}
.title-cn{
font-size:clamp(.75rem,2.2vw,.95rem);
letter-spacing:clamp(1.5px,.8vw,4px);
line-height:1.5;
}
.title-vs{
max-width:min(340px,85vw);
gap:.5rem;
margin-top:.7rem;
}
.vs-text{
font-size:clamp(.6rem,1.6vw,.75rem);
letter-spacing:clamp(1px,.6vw,3px);
}
/* Model badge cards: responsive — 4 badges need smaller sizing */
.title-models{
gap:.3rem;
margin-top:.7rem;
padding:0 4px;
}
.mbadge-card{
padding:.3rem .45rem;min-width:55px;border-radius:4px;
}
.mbadge-card .mbc-icon{font-size:.8rem}
.mbadge-card .mbc-name{font-size:.48rem;letter-spacing:1px}
.mbadge-card .mbc-ver{font-size:.38rem}
.mbadge-vs{
font-size:.45rem;letter-spacing:1px;
}
.splash-lang-toggle{top:.8rem;right:.8rem}
.splash-lang-btn{font-size:.55rem;padding:.3rem .5rem}
.title-desc{
font-size:clamp(.72rem,2vw,.88rem);
letter-spacing:clamp(1px,.5vw,2px);
margin-top:.5rem;
padding:0 4px;
}
.title-powered{
font-size:.7rem;margin-top:.7rem;
letter-spacing:.5px;
}
.cine-go-btn{
width:100px;height:100px;
}
.ceb-go{font-size:1.5rem!important;letter-spacing:4px!important}
.ceb-sub{font-size:.5rem}
.cine-enter-wrap{margin-top:1rem}
.splash-radar{display:none}
.splash-nodes{display:none}
/* Skip button: safe area aware */
.skip-btn{
bottom:max(1.2rem,env(safe-area-inset-bottom,1.2rem));
right:1rem;padding:.4rem .82rem;font-size:.56rem;letter-spacing:1.2px;
}
}
/* ── iPhone SE / small phones (≤375px) ── */
@media (max-width: 375px){
.title-quewi-hero{gap:.4rem;margin-bottom:.7rem}
.quewi-hero-logo-ring{width:44px;height:44px}
.quewi-hero-logo{width:36px;height:36px;font-size:1rem;border-radius:8px}
.quewi-hero-name{font-size:1.28rem;letter-spacing:2px}
.quewi-hero-tag{font-size:.5rem;letter-spacing:1px}
.title-models{gap:.2rem;padding:0 2px}
.mbadge-card{padding:.2rem .3rem;min-width:46px}
.mbadge-card .mbc-name{font-size:.4rem;letter-spacing:.5px}
.mbadge-card .mbc-ver{font-size:.32rem}
.mbadge-card .mbc-icon{font-size:.7rem}
.mbadge-vs{font-size:.38rem;letter-spacing:1px}
.title-main{font-size:clamp(1.1rem,5vw,1.5rem)!important;letter-spacing:clamp(2px,1vw,5px)!important}
.title-sub{font-size:clamp(.9rem,2.6vw,1.1rem);letter-spacing:clamp(2px,1vw,4px)}
.title-divider{width:min(160px,55vw)}
}
/* ── 2. 情報流 INTEL FEED HEADER: proper flex + truncation on mobile ── */
@media (max-width: 768px){
.panel-header{
padding:.55rem .7rem;
gap:.35rem;
flex-wrap:nowrap;
}
.ph-left{
flex:1 1 auto;
min-width:0;/* allow shrink */
gap:.35rem;
}
.ph-right{
flex:0 0 auto;
}
.quewi-intel-combined{
font-size:.82rem !important;
letter-spacing:1.5px;
padding:.35rem .6rem;
gap:.3rem;
max-width:none;
overflow:hidden;
text-overflow:ellipsis;
}
.quewi-intel-combined .chat-quewi-logo{
width:18px;height:18px;font-size:.55rem;
flex-shrink:0;
}
.qi-sat{
font-size:.75rem;margin:0 .15rem;
}
.ph-badge{
font-size:.72rem;
padding:.15rem .45rem;
min-width:22px;
flex-shrink:0;
}
.intel-search-input{
width:90px;padding:.35rem .5rem .35rem 1.7rem;
font-size:.78rem;
}
.intel-search-input:focus{
width:130px;
}
.search-icon{font-size:.78rem}
}
@media (max-width: 430px){
.quewi-intel-combined{
font-size:.75rem !important;
letter-spacing:1px;
padding:.3rem .5rem;
gap:.25rem;
}
.quewi-intel-combined .chat-quewi-logo{
width:16px;height:16px;font-size:.5rem;
}
.qi-sat{font-size:.68rem;margin:0 .1rem}
.ph-badge{font-size:.68rem;padding:.12rem .38rem;min-width:20px}
.intel-search-input{width:76px;font-size:.72rem}
}
/* ── 3. SATELLITE MAP: GPU compositing + black bg prevention ── */
.hz-fullmap,
.hz-fullmap .leaflet-container{
transform:translateZ(0);
-webkit-transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
will-change:transform;
}
.hz-fullmap .leaflet-tile{
will-change:transform,opacity;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* Prevent black flash during tile load — set background matching theme */
.hz-fullmap .leaflet-tile-pane{
background:#0a0e14;
}
.hz-fullmap .leaflet-container{
background:#0a0e14 !important;
}
/* Force hardware acceleration on the map container */
.hormuz-map,.hormuz-map-wrap,#hormuz-map{
transform:translateZ(0);
-webkit-transform:translateZ(0);
will-change:contents;
}
/* ── 4. MOBILE MAP PERFORMANCE: reduce visual overhead ── */
@media (hover:none) and (pointer:coarse){
/* Disable expensive tile filters on mobile — major perf win */
.hz-fullmap .leaflet-tile-pane{
filter:none !important;
}
.hz-fullmap .leaflet-tile-pane::after{
display:none !important;
}
/* Disable scanlines + vignette on mobile — saves compositing layers */
.hz-scanlines{
display:none !important;
}
.hz-vignette{
background:radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.2) 100%);
}
/* SAR scan overlay — disable on mobile */
.hormuz-map-wrap::after{
display:none !important;
}
/* Reduce corner bracket complexity */
.hz-corner{
width:24px;height:24px;
border-width:1px !important;
}
/* Crosshair — simpler on mobile */
.hz-crosshair{width:40px;height:40px}
.hz-cross-circle{width:20px;height:20px}
/* Disable intel label shimmer animation */
.quewi-intel-combined{animation:none !important}
.quewi-intel-combined::after{animation:none !important;display:none}
.ph-badge{animation:none !important}
.ph-badge::before{animation:none !important;display:none}
/* Film grain — completely disable on touch */
.film-grain{display:none !important}
/* Reduce ember count expectations (JS also reduced) */
.ember{will-change:transform,opacity;contain:layout style}
}
/* ── 5. SMOOTH SCROLL & COMPOSITING LAYERS ── */
@media (max-width: 1024px){
/* Ensure each main section is its own compositing layer */
.panel-intel,
.macro-quant-arena,
.panel-compare,
.hormuz-section,
.hz-surveillance{
transform:translateZ(0);
-webkit-transform:translateZ(0);
contain:layout style;
}
/* Prevent layout shift during scroll */
.news-list-wrap{
contain:layout style;
will-change:scroll-position;
}
/* Smooth momentum scrolling everywhere */
.compare-body,
.panel-intel,
.news-list-wrap,
.hz-intel-body{
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain;
scroll-behavior:smooth;
}
}
/* ── 6. LANDSCAPE PHONE: prevent splash from being too tall ── */
@media (max-height:480px) and (orientation:landscape){
.title-quewi-hero{flex-direction:row;gap:.4rem;margin-bottom:.5rem}
.quewi-hero-logo-ring{width:38px;height:38px}
.quewi-hero-logo{width:32px;height:32px;font-size:.85rem}
.quewi-hero-name{font-size:1.1rem;letter-spacing:2px}
.quewi-hero-tag{font-size:.42rem;letter-spacing:1px}
.title-main{font-size:1rem!important;letter-spacing:2px!important;margin-top:0}
.title-divider{margin:.4rem auto;width:120px}
.title-sub{font-size:.85rem;letter-spacing:3px}
.title-cn,.title-desc{font-size:.65rem}
.title-models{margin-top:.3rem;gap:.2rem}
.mbadge-card{padding:.15rem .35rem;min-width:50px}
.mbadge-card .mbc-name{font-size:.42rem}
.mbadge-card .mbc-ver{font-size:.32rem}
.mbadge-card .mbc-icon{font-size:.65rem}
.cine-go-btn{width:70px;height:70px}
.ceb-go{font-size:1.2rem!important;letter-spacing:3px!important}
.ceb-sub{display:none}
.cine-enter-wrap{margin-top:.5rem}
.skip-btn{bottom:.5rem;right:.5rem;padding:.3rem .5rem;font-size:.46rem;letter-spacing:.8px}
}
/* ── 7. NOTCH / DYNAMIC ISLAND: safe area polish ── */
@supports(padding:max(0px)){
@media (max-width: 768px){
.cine-overlay{
padding-top:max(20px,env(safe-area-inset-top));
padding-bottom:max(16px,env(safe-area-inset-bottom));
padding-left:max(0px,env(safe-area-inset-left));
padding-right:max(0px,env(safe-area-inset-right));
}
.skip-btn{
bottom:max(1rem,calc(env(safe-area-inset-bottom) + .5rem));
right:max(1rem,calc(env(safe-area-inset-right) + .3rem));
}
}
}
/* ── 8. DARK MODE OLED: battery saving + deep blacks for map ── */
@media (max-width: 768px) and (prefers-color-scheme:dark){
.hz-fullmap .leaflet-container{background:#000 !important}
.hz-fullmap .leaflet-tile-pane{background:#000}
.cine-overlay{background:#000}
}
/* ── 9. TICKER: prevent jank on mobile — use transform animation ── */
@media (hover:none) and (pointer:coarse){
.ticker-content{
will-change:transform;
transform:translateZ(0);
-webkit-transform:translateZ(0);
}
.ticker-track{
will-change:transform;
contain:layout style;
}
}
/* ═══ FINAL HOTFIX: remove transparency bleed (web) ═══ */
@media (min-width: 769px){
.main-content-area,
.main-content-area > .panel-intel,
.main-content-area > .macro-quant-arena,
.main-content-area > .panel-compare{
isolation:isolate;
}
.main-content-area > .macro-quant-arena,
.macro-quant-arena{
background:#0a1220 !important;
background-image:none !important;
opacity:1 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
position:relative !important;
z-index:1 !important;
}
.macro-quant-arena *{
opacity:1 !important;
}
.macro-quant-arena .mq-header{
background:#0a1220 !important;
background-image:none !important;
opacity:1 !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
position:sticky !important;
top:0 !important;
z-index:12 !important;
}
.macro-quant-arena .mq-market-strip,
.macro-quant-arena .mq-scoreboard,
.macro-quant-arena .mq-card,
.macro-quant-arena .mq-panel,
.macro-quant-arena .mq-grid{
opacity:1 !important;
}
.panel-intel,
.panel-intel .panel-header,
.ticker-bar,
.ticker-track,
.ticker-content{
opacity:1 !important;
}
}
/* ══════════════════════════════════════════════════════
WAR ROOM NAVIGATION BAR — Tactical Command Strip
Premium Military HUD · War-zone Atmosphere
══════════════════════════════════════════════════════ */
/* ── Hamburger button (mobile only, in topbar-right) ── */
.wr-nav-hamburger{
display:none;
flex-direction:column;gap:3.5px;
background:none;border:1px solid rgba(200,164,90,.25);cursor:pointer;
padding:7px 6px;z-index:10001;border-radius:4px;
background:rgba(200,164,90,.04);
transition:all .3s;
}
.wr-nav-hamburger:hover{border-color:var(--gold);background:rgba(200,164,90,.1)}
.wr-ham-line{
display:block;width:18px;height:1.5px;
background:var(--gold);border-radius:1px;
transition:all .35s cubic-bezier(.4,0,.2,1);
box-shadow:0 0 4px rgba(200,164,90,.3);
}
.wr-nav-hamburger.active{
border-color:var(--red);background:rgba(196,60,60,.08);
}
.wr-nav-hamburger.active .wr-ham-line{
background:var(--red);box-shadow:0 0 6px rgba(196,60,60,.5);
}
.wr-nav-hamburger.active .wr-ham-line:nth-child(1){
transform:rotate(45deg) translate(3.5px,3.5px);
}
.wr-nav-hamburger.active .wr-ham-line:nth-child(2){
opacity:0;transform:scaleX(0);
}
.wr-nav-hamburger.active .wr-ham-line:nth-child(3){
transform:rotate(-45deg) translate(3.5px,-3.5px);
}
/* ── Nav Bar (Desktop: horizontal strip) ── */
.wr-nav{
position:fixed;
top:var(--topbar-h, 58px);
left:0;right:0;
z-index:9999;
background:
linear-gradient(180deg,
rgba(10,16,28,.99) 0%,
rgba(14,22,38,.98) 40%,
rgba(10,16,28,.99) 100%);
border-top:1.5px solid rgba(200,164,90,.25);
border-bottom:1.5px solid rgba(200,164,90,.3);
backdrop-filter:blur(24px) saturate(1.4);
-webkit-backdrop-filter:blur(24px) saturate(1.4);
overflow:hidden;
box-shadow:
0 6px 40px rgba(0,0,0,.6),
0 1px 0 rgba(200,164,90,.12) inset,
0 -1px 0 rgba(200,164,90,.08) inset,
0 0 60px rgba(200,164,90,.03);
}
/* Top edge — animated gold laser line */
.wr-nav-glow{
position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,
transparent 0%,
rgba(200,164,90,.35) 10%,
rgba(255,215,100,.85) 30%,
rgba(255,225,120,1) 50%,
rgba(255,215,100,.85) 70%,
rgba(200,164,90,.35) 90%,
transparent 100%);
animation:navGlowPulse 3.5s ease-in-out infinite;
box-shadow:0 0 14px rgba(200,164,90,.45),0 0 30px rgba(200,164,90,.2),0 2px 8px rgba(200,164,90,.15);
}
@keyframes navGlowPulse{
0%,100%{opacity:.3;filter:brightness(1)}
50%{opacity:1;filter:brightness(1.3)}
}
/* Threat scan sweep — horizontal red wash */
.wr-nav-scan{
position:absolute;top:0;left:0;width:100%;height:100%;
background:linear-gradient(90deg,
transparent 0%,
rgba(196,60,60,.04) 15%,
rgba(200,164,90,.06) 30%,
transparent 50%,
rgba(144,112,176,.04) 70%,
rgba(196,60,60,.03) 85%,
transparent 100%);
background-size:200% 100%;
animation:navThreatSweep 8s linear infinite;
pointer-events:none;
}
@keyframes navThreatSweep{
0%{background-position:200% 0}
100%{background-position:-200% 0}
}
/* Bottom edge — red threat line */
.wr-nav::after{
content:'';
position:absolute;bottom:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,
transparent 0%,
rgba(220,60,60,.25) 15%,
rgba(240,70,70,.55) 50%,
rgba(220,60,60,.25) 85%,
transparent 100%);
animation:navRedPulse 4s ease-in-out infinite;
}
@keyframes navRedPulse{
0%,100%{opacity:.4}
50%{opacity:1}
}
/* ── Scroll container ── */
.wr-nav-scroll{
display:flex;
align-items:stretch;
justify-content:center;
gap:0;
padding:0 .5rem;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
position:relative;
z-index:1;
}
.wr-nav-scroll::-webkit-scrollbar{display:none}
/* ── External link nav item (QueWi.ai) ── */
.wr-nav-external .wr-nav-glyph{
color:rgba(144,112,176,.85);
border-color:rgba(144,112,176,.3);
background:rgba(144,112,176,.08);
font-size:.46rem;
letter-spacing:0;
}
.wr-nav-external:hover .wr-nav-glyph{
color:rgba(180,150,210,.95);
border-color:rgba(144,112,176,.45);
background:rgba(144,112,176,.12);
box-shadow:0 0 12px rgba(144,112,176,.2);
}
.wr-nav-external .wr-nav-label{
color:rgba(180,160,210,.8);
}
.wr-nav-external:hover .wr-nav-label{
color:rgba(200,180,230,.95);
}
/* ── Nav Item — Military HUD Button ── */
.wr-nav-item{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
padding:11px 20px 12px;
text-decoration:none;
color:rgba(210,220,240,.92);
font-size:.78rem;
letter-spacing:1px;
white-space:nowrap;
cursor:pointer;
transition:all .35s cubic-bezier(.25,.46,.45,.94);
border-bottom:2px solid transparent;
flex-shrink:0;
text-transform:uppercase;
overflow:hidden;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
/* Tactical code glyph — replaces emoji */
.wr-nav-glyph{
display:flex;
align-items:center;
justify-content:center;
width:38px;height:22px;
font-family:'Orbitron','Share Tech Mono','SF Mono',Menlo,monospace;
font-size:.62rem;
font-weight:800;
letter-spacing:1px;
color:rgba(180,210,255,.85);
border:1px solid rgba(140,180,240,.3);
border-radius:3px;
background:rgba(60,110,200,.1);
transition:all .4s cubic-bezier(.25,.46,.45,.94);
position:relative;
box-shadow:0 0 6px rgba(80,140,220,.08);
}
.wr-nav-glyph::before{
content:attr(data-glyph);
}
/* Glyph corner brackets */
.wr-nav-glyph::after{
content:'';
position:absolute;inset:-1px;
border:1px solid transparent;
border-radius:2px;
transition:all .4s;
}
/* Holographic scanline inside each item on hover */
.wr-nav-item::before{
content:'';
position:absolute;
top:0;left:-100%;
width:100%;height:100%;
background:linear-gradient(90deg,
transparent 0%,
rgba(100,160,255,.04) 30%,
rgba(100,160,255,.08) 50%,
rgba(100,160,255,.04) 70%,
transparent 100%);
transition:left .6s cubic-bezier(.25,.46,.45,.94);
pointer-events:none;
z-index:0;
}
/* Vertical separator between items */
.wr-nav-item + .wr-nav-item .wr-nav-glyph{
margin-left:0;
}
.wr-nav-item + .wr-nav-item::after{
content:'';
position:absolute;
left:0;top:18%;height:64%;width:1px;
background:linear-gradient(180deg,transparent,rgba(160,190,240,.18),transparent);
pointer-events:none;
}
/* ── Hover — Holographic Activation ── */
.wr-nav-item:hover{
color:#fff;
background:
linear-gradient(180deg, rgba(60,120,220,.12) 0%, rgba(60,120,220,.04) 60%, transparent 100%);
text-shadow:0 0 16px rgba(100,180,255,.4),0 0 4px rgba(160,210,255,.2);
}
.wr-nav-item:hover::before{
left:100%;
}
.wr-nav-item:hover .wr-nav-glyph{
color:rgba(140,190,255,.9);
border-color:rgba(100,160,255,.35);
background:rgba(60,120,220,.1);
box-shadow:0 0 12px rgba(80,140,220,.15),inset 0 0 8px rgba(80,140,220,.05);
transform:scale(1.08);
}
.wr-nav-item:hover .wr-nav-glyph::after{
border-color:rgba(100,160,255,.2);
box-shadow:0 0 8px rgba(100,160,255,.1);
}
.wr-nav-item:hover .wr-nav-label{
color:#fff;
text-shadow:0 0 10px rgba(100,170,255,.35);
}
.wr-nav-item:hover .wr-nav-pip{
width:60%;
background:linear-gradient(90deg,transparent,rgba(100,160,255,.6),transparent);
box-shadow:0 0 10px rgba(100,160,255,.3);
}
/* ── Active — Full Target Lock ── */
.wr-nav-item.active{
color:var(--gold);
border-bottom-color:transparent;
text-shadow:0 0 14px rgba(200,164,90,.35);
}
.wr-nav-item.active .wr-nav-glyph{
color:var(--gold);
border-color:rgba(200,164,90,.4);
background:
linear-gradient(135deg, rgba(200,164,90,.12), rgba(200,164,90,.04));
box-shadow:
0 0 14px rgba(200,164,90,.2),
inset 0 0 10px rgba(200,164,90,.06);
transform:scale(1.12);
animation:glyphLock 3s ease-in-out infinite;
}
@keyframes glyphLock{
0%,100%{box-shadow:0 0 10px rgba(200,164,90,.15),inset 0 0 8px rgba(200,164,90,.04);border-color:rgba(200,164,90,.3)}
50%{box-shadow:0 0 18px rgba(200,164,90,.3),inset 0 0 12px rgba(200,164,90,.08);border-color:rgba(200,164,90,.5)}
}
.wr-nav-item.active .wr-nav-glyph::after{
border-color:rgba(200,164,90,.15);
animation:glyphCornerPulse 2s ease-in-out infinite;
}
@keyframes glyphCornerPulse{
0%,100%{border-color:rgba(200,164,90,.1)}
50%{border-color:rgba(200,164,90,.25)}
}
.wr-nav-item.active .wr-nav-label{
color:var(--gold);
font-weight:700;
text-shadow:0 0 8px rgba(200,164,90,.3);
opacity:1;
}
/* Active background — tactical lock zone */
.wr-nav-item.active>.wr-nav-pip~*{pointer-events:none}
.wr-nav-item.active{
background:
radial-gradient(ellipse at 50% 120%, rgba(200,164,90,.1) 0%, transparent 65%),
linear-gradient(180deg, rgba(200,164,90,.03) 0%, transparent 50%);
}
.wr-nav-label{
font-size:.76rem;
letter-spacing:.6px;
font-weight:700;
transition:all .35s;
opacity:1;
font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Noto Sans SC','Hiragino Sans GB','Microsoft YaHei',var(--fd),sans-serif;
position:relative;
z-index:1;
color:inherit;
text-shadow:0 1px 3px rgba(0,0,0,.5);
}
/* Active indicator pip — animated gold bar */
.wr-nav-pip{
position:absolute;
bottom:-1px;left:50%;
width:0;height:2px;
background:linear-gradient(90deg, rgba(200,164,90,.2), var(--gold), rgba(200,164,90,.2));
border-radius:1px;
transform:translateX(-50%);
transition:width .45s cubic-bezier(.25,.46,.45,.94);
box-shadow:0 0 10px rgba(200,164,90,.4),0 0 20px rgba(200,164,90,.15);
}
.wr-nav-item.active .wr-nav-pip{
width:85%;
animation:navPipGlow 2.5s ease-in-out infinite;
}
@keyframes navPipGlow{
0%,100%{box-shadow:0 0 8px rgba(200,164,90,.35),0 0 16px rgba(200,164,90,.12);opacity:.8}
50%{box-shadow:0 0 16px rgba(200,164,90,.6),0 0 30px rgba(200,164,90,.25);opacity:1}
}
/* ══════ RESPONSIVE: Tablet ══════ */
@media(max-width:1024px){
.wr-nav-scroll{
justify-content:flex-start;
padding:0 .4rem;
}
.wr-nav-item{
padding:9px 12px 10px;
}
.wr-nav-label{font-size:.65rem;letter-spacing:.6px;font-weight:600}
.wr-nav-glyph{width:30px;height:18px;font-size:.52rem}
}
/* ══════ RESPONSIVE: Mobile ≤768px — Horizontal Scrollable Strip (same as desktop) ══════ */
@media(max-width:768px){
.wr-nav-hamburger{
display:none;
}
.wr-nav{
position:fixed;
top:var(--topbar-h, 58px);
left:0;right:0;
z-index:9999;
display:block;
transform:none;
opacity:1;
overflow:hidden;
border-bottom:1.5px solid rgba(200,164,90,.2);
background:
linear-gradient(180deg,
rgba(8,14,24,.98) 0%,
rgba(12,18,32,.97) 100%);
backdrop-filter:blur(20px) saturate(1.3);
-webkit-backdrop-filter:blur(20px) saturate(1.3);
box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.wr-nav-scroll{
display:flex;
flex-direction:row;
align-items:stretch;
justify-content:flex-start;
gap:0;
padding:0 4px;
width:100%;
max-width:none;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
}
.wr-nav-scroll::-webkit-scrollbar{display:none}
.wr-nav-item{
flex-direction:column;
gap:2px;
padding:8px 12px 7px;
min-height:auto;
width:auto;
min-width:max-content;
border-bottom:2px solid transparent;
border-left:none;
border-radius:0;
font-size:.72rem;
letter-spacing:.6px;
justify-content:center;
align-items:center;
text-transform:uppercase;
background:transparent;
border:none;
border-bottom:2px solid transparent;
color:rgba(200,210,230,.85);
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.wr-nav-item + .wr-nav-item::after{
content:'';
position:absolute;
left:0;top:20%;height:60%;width:1px;
background:linear-gradient(180deg,transparent,rgba(160,190,240,.12),transparent);
pointer-events:none;
}
.wr-nav-item::before{display:none}
.wr-nav-item:active{
background:rgba(80,140,220,.08);
transform:scale(.97);
}
.wr-nav-item.active{
border-bottom-color:transparent;
border-left:none;
background:
radial-gradient(ellipse at 50% 120%, rgba(200,164,90,.08) 0%, transparent 65%),
linear-gradient(180deg, rgba(200,164,90,.03) 0%, transparent 50%);
color:var(--gold);
text-shadow:0 0 10px rgba(200,164,90,.3);
}
.wr-nav-glyph{
width:28px;height:16px;
font-size:.48rem;
min-width:28px;
border-color:rgba(120,160,220,.22);
color:rgba(170,195,235,.75);
}
.wr-nav-item.active .wr-nav-glyph{
color:var(--gold);
border-color:rgba(200,164,90,.35);
transform:scale(1.08);
}
.wr-nav-label{
font-size:.58rem;
letter-spacing:.5px;
font-weight:600;
opacity:1;
}
.wr-nav-pip{
display:block;
position:absolute;
bottom:-1px;left:50%;
width:0;height:2px;
transform:translateX(-50%);
}
.wr-nav-item.active .wr-nav-pip{
width:75%;
}
.wr-nav-glow{
height:1.5px;
}
.wr-nav-scan{
opacity:.4;
}
.wr-nav::after{
bottom:0;top:auto;
height:1.5px;
background:linear-gradient(90deg,transparent,rgba(220,60,60,.2) 50%,transparent);
}
}
/* ══════ RESPONSIVE: Small phone ≤480px ══════ */
@media(max-width:480px){
.wr-nav-scroll{padding:0 2px}
.wr-nav-item{
padding:7px 9px 6px;
gap:1px;
}
.wr-nav-glyph{width:24px;height:14px;font-size:.44rem;min-width:24px}
.wr-nav-label{font-size:.52rem;letter-spacing:.3px;font-weight:600}
}
/* ══════ Safe area for iOS notch + Dynamic Island + Android ══════ */
@supports(padding:max(0px)){
.wr-nav{
padding-left:max(0px,env(safe-area-inset-left));
padding-right:max(0px,env(safe-area-inset-right));
}
@media(max-width:768px){
.wr-nav{
padding-top:0;
padding-bottom:0;
}
.wr-nav-scroll{
padding-bottom:0;
}
}
}
/* Android Chrome status bar */
@media(display-mode:standalone){
.wr-nav{padding-top:24px}
}
/* ── Topbar title centering fix (desktop only) ── */
@media(min-width:769px){
.topbar.topbar-command .topbar-left,
.topbar.topbar-command .topbar-right{
flex:0 0 auto;
min-width:0;
}
.topbar.topbar-command .topbar-center{
flex:1 1 0 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
}
}
/* ── Mobile: topbar-center wraps to full-width second row ── */
@media(max-width:768px){
.topbar.topbar-command .topbar-center{
flex:none !important;
width:100% !important;
order:3 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
}
}
/* ═══════════════════════════════════════════════════════
ACCOUNT / OBSERVER DOSSIER PAGE
═══════════════════════════════════════════════════════ */
/* ── Overlay ── */
.acct-overlay {
position: fixed; inset: 0; z-index: 99999;
background: #060a14;
overflow-y: auto; overflow-x: hidden;
opacity: 0; transform: scale(1.02);
transition: opacity .4s ease, transform .4s ease;
display: none;
}
.acct-overlay.acct-active {
display: block;
opacity: 1; transform: scale(1);
}
.acct-overlay.acct-hidden {
opacity: 0; transform: scale(.98);
pointer-events: none;
transition: opacity .3s ease, transform .3s ease;
}
/* ── Atmospheric backgrounds ── */
.acct-bg-grid {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(0,229,255,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,229,255,.03) 1px, transparent 1px);
background-size: 60px 60px;
animation: acct-grid-drift 25s linear infinite;
}
@keyframes acct-grid-drift {
0% { background-position: 0 0; }
100% { background-position: 60px 60px; }
}
.acct-bg-scan {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0,229,255,.02) 50%,
transparent 100%
);
background-size: 100% 200%;
animation: acct-scanline 4s ease-in-out infinite;
}
@keyframes acct-scanline {
0%,100% { background-position: 0 0; }
50% { background-position: 0 -100%; }
}
.acct-bg-vignette {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.6) 100%);
}
/* ── Header ── */
.acct-header {
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center; justify-content: space-between;
padding: 16px 28px;
background: linear-gradient(180deg, rgba(6,10,20,.98) 0%, rgba(6,10,20,.85) 100%);
border-bottom: 1px solid rgba(0,229,255,.15);
backdrop-filter: blur(12px);
}
.acct-header-left {
display: flex; align-items: center; gap: 10px;
}
.acct-header-icon {
font-size: 22px;
}
.acct-header-title {
font-family: 'Orbitron', 'Rajdhani', sans-serif;
font-size: 16px; font-weight: 700;
letter-spacing: 3px;
color: #e0e6f0;
text-transform: uppercase;
}
.acct-header-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; font-weight: 600;
color: #ff3b3b;
letter-spacing: 2px;
padding: 2px 8px;
border: 1px solid rgba(255,59,59,.4);
border-radius: 3px;
animation: acct-blink-tag 2s step-start infinite;
}
@keyframes acct-blink-tag {
0%,100% { opacity: 1; }
50% { opacity: .4; }
}
.acct-close-btn {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
color: #8899aa; font-size: 16px;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: all .2s;
}
.acct-close-btn:hover {
background: rgba(255,59,59,.15);
border-color: rgba(255,59,59,.4);
color: #ff5555;
}
/* ── Main layout ── */
.acct-main {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 380px 1fr;
gap: 24px;
max-width: 1200px;
margin: 24px auto;
padding: 0 24px 60px;
}
@media (max-width: 900px) {
.acct-main { grid-template-columns: 1fr; }
}
/* ── Cards ── */
.acct-card {
position: relative;
background: linear-gradient(165deg, rgba(12,18,32,.95) 0%, rgba(8,13,26,.98) 100%);
border: 1px solid rgba(0,229,255,.1);
border-radius: 12px;
padding: 28px;
overflow: hidden;
}
.acct-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,229,255,.5), transparent);
}
.acct-card-corner {
position: absolute; width: 14px; height: 14px;
border-color: rgba(0,229,255,.3); border-style: solid; border-width: 0;
}
.acct-card-corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.acct-card-corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.acct-card-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.acct-card-corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.acct-card-glow {
position: absolute; top: -40%; left: -20%; width: 140%; height: 60%;
background: radial-gradient(ellipse, rgba(0,229,255,.06) 0%, transparent 70%);
pointer-events: none;
}
/* ── Avatar ── */
.acct-avatar-section {
display: flex; flex-direction: column; align-items: center;
margin-bottom: 24px;
}
.acct-avatar-ring {
width: 120px; height: 120px;
border-radius: 50%;
border: 2px solid rgba(0,229,255,.35);
display: flex; align-items: center; justify-content: center;
position: relative;
cursor: pointer;
overflow: hidden;
background: rgba(0,229,255,.04);
transition: border-color .3s, box-shadow .3s;
}
.acct-avatar-ring:hover {
border-color: rgba(0,229,255,.7);
box-shadow: 0 0 30px rgba(0,229,255,.15);
}
.acct-avatar-ring-pulse {
position: absolute; inset: -6px;
border-radius: 50%;
border: 1px solid rgba(0,229,255,.2);
animation: acct-ring-pulse 3s ease-in-out infinite;
}
@keyframes acct-ring-pulse {
0%,100% { transform: scale(1); opacity: .5; }
50% { transform: scale(1.08); opacity: 0; }
}
.acct-avatar-img {
width: 100%; height: 100%;
object-fit: cover; border-radius: 50%;
}
.acct-avatar-placeholder {
font-size: 48px;
}
.acct-avatar-edit-btn {
margin-top: 10px;
font-family: 'Rajdhani', sans-serif;
font-size: 12px; font-weight: 600;
color: rgba(0,229,255,.7);
background: none; border: none;
cursor: pointer; letter-spacing: 1px;
text-transform: uppercase;
transition: color .2s;
}
.acct-avatar-edit-btn:hover { color: #00e5ff; }
/* ── Fields ── */
.acct-info-block {
display: flex; flex-direction: column; gap: 16px;
margin-bottom: 20px;
}
.acct-field-label {
display: flex; align-items: center; gap: 6px;
font-family: 'Orbitron', 'Rajdhani', sans-serif;
font-size: 10px; font-weight: 600;
color: rgba(0,229,255,.7);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
}
.acct-field-icon {
color: #00e5ff;
font-size: 14px; line-height: 1;
}
.acct-field-input,
.acct-field-textarea {
width: 100%;
background: rgba(0,229,255,.03);
border: 1px solid rgba(0,229,255,.12);
border-radius: 6px;
padding: 10px 14px;
color: #d0dae8;
font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
font-size: 15px;
transition: border-color .3s, background .3s, box-shadow .3s;
outline: none;
box-sizing: border-box;
}
.acct-field-input:focus,
.acct-field-textarea:focus {
border-color: rgba(0,229,255,.4);
background: rgba(0,229,255,.06);
box-shadow: 0 0 20px rgba(0,229,255,.08);
}
.acct-field-textarea {
min-height: 60px; resize: vertical;
font-size: 14px;
}
.acct-field-readonly {
opacity: .5;
cursor: not-allowed;
}
/* ── Save button ── */
.acct-save-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, rgba(0,229,255,.12) 0%, rgba(0,229,255,.06) 100%);
border: 1px solid rgba(0,229,255,.3);
border-radius: 8px;
color: #00e5ff;
font-family: 'Orbitron', 'Rajdhani', sans-serif;
font-size: 14px; font-weight: 700;
letter-spacing: 3px;
cursor: pointer;
transition: all .3s;
position: relative; overflow: hidden;
}
.acct-save-btn::before {
content: '';
position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(0,229,255,.15), transparent);
transition: left .5s ease;
}
.acct-save-btn:hover::before { left: 100%; }
.acct-save-btn:hover {
background: linear-gradient(135deg, rgba(0,229,255,.2) 0%, rgba(0,229,255,.1) 100%);
box-shadow: 0 0 30px rgba(0,229,255,.15);
border-color: rgba(0,229,255,.5);
}
.acct-save-btn.acct-save-success {
background: linear-gradient(135deg, rgba(34,197,94,.15) 0%, rgba(34,197,94,.08) 100%);
border-color: rgba(34,197,94,.5);
color: #22c55e;
}
.acct-save-icon { margin-right: 6px; }
/* ── Rank block ── */
.acct-rank-block {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(0,229,255,.08);
}
.acct-rank-label {
font-family: 'Orbitron', 'Rajdhani', sans-serif;
font-size: 10px; font-weight: 600;
color: rgba(0,229,255,.5);
letter-spacing: 2px;
margin-bottom: 10px;
}
.acct-rank-badge {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
}
.acct-rank-stars {
font-size: 18px;
color: #fbbf24;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(251,191,36,.3);
}
.acct-rank-name {
font-family: 'Orbitron', sans-serif;
font-size: 13px; font-weight: 700;
color: #e0e6f0;
letter-spacing: 2px;
}
.acct-rank-bar {
height: 4px;
background: rgba(255,255,255,.06);
border-radius: 2px;
overflow: hidden;
margin-bottom: 6px;
}
.acct-rank-fill {
height: 100%;
background: linear-gradient(90deg, #00e5ff, #7dd3fc, #00e5ff);
background-size: 200% 100%;
border-radius: 2px;
transition: width 1.2s cubic-bezier(.4,0,.2,1);
animation: acct-rank-shimmer 3s linear infinite;
}
@keyframes acct-rank-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.acct-rank-hint {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: rgba(0,229,255,.4);
letter-spacing: .5px;
}
/* ── Stats row ── */
.acct-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.acct-stat {
text-align: center;
padding: 16px 8px;
background: rgba(0,229,255,.03);
border: 1px solid rgba(0,229,255,.08);
border-radius: 8px;
transition: border-color .3s, background .3s;
}
.acct-stat:hover {
border-color: rgba(0,229,255,.2);
background: rgba(0,229,255,.06);
}
.acct-stat-val {
font-family: 'Orbitron', sans-serif;
font-size: 28px; font-weight: 800;
color: #00e5ff;
text-shadow: 0 0 15px rgba(0,229,255,.3);
line-height: 1.1;
}
.acct-stat-label {
font-family: 'Rajdhani', sans-serif;
font-size: 12px; font-weight: 600;
color: rgba(200,215,230,.5);
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 4px;
}
/* ── Tabs ── */
.acct-tab-bar {
display: flex; gap: 0;
border-bottom: 1px solid rgba(0,229,255,.1);
margin-bottom: 16px;
}
.acct-tab {
flex: 1;
padding: 10px 0;
background: none; border: none;
font-family: 'Rajdhani', sans-serif;
font-size: 13px; font-weight: 600;
color: rgba(200,215,230,.4);
letter-spacing: 1px;
cursor: pointer;
position: relative;
transition: color .3s;
}
.acct-tab:hover { color: rgba(200,215,230,.7); }
.acct-tab.active { color: #00e5ff; }
.acct-tab.active::after {
content: '';
position: absolute; bottom: -1px; left: 10%; right: 10%;
height: 2px;
background: #00e5ff;
border-radius: 1px;
box-shadow: 0 0 8px rgba(0,229,255,.4);
}
.acct-tab-content { display: none; }
.acct-tab-content.active { display: block; }
/* ── Timeline ── */
.acct-timeline {
max-height: 500px;
overflow-y: auto;
padding-right: 8px;
}
.acct-timeline::-webkit-scrollbar { width: 3px; }
.acct-timeline::-webkit-scrollbar-track { background: transparent; }
.acct-timeline::-webkit-scrollbar-thumb { background: rgba(0,229,255,.15); border-radius: 2px; }
.acct-timeline-item {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 14px;
opacity: 0;
animation: acct-timeline-in .4s ease forwards;
}
@keyframes acct-timeline-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.acct-timeline-dot {
flex-shrink: 0;
width: 10px; height: 10px;
margin-top: 10px;
border-radius: 50%;
background: #00e5ff;
box-shadow: 0 0 8px rgba(0,229,255,.4);
position: relative;
}
.acct-timeline-dot::before {
content: '';
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
width: 1px; height: 30px;
background: linear-gradient(180deg, rgba(0,229,255,.2), transparent);
}
.acct-timeline-dot.dot-like { background: #f43f5e; box-shadow: 0 0 8px rgba(244,63,94,.4); }
.acct-timeline-dot.dot-profile { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,.4); }
.acct-timeline-dot.dot-login { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.4); }
.acct-timeline-dot.dot-comment { background: #7dd3fc; box-shadow: 0 0 8px rgba(125,211,252,.4); }
.acct-timeline-card {
flex: 1;
background: rgba(0,229,255,.02);
border: 1px solid rgba(0,229,255,.08);
border-radius: 8px;
padding: 12px 16px;
transition: border-color .3s, background .3s;
}
.acct-timeline-card:hover {
border-color: rgba(0,229,255,.2);
background: rgba(0,229,255,.04);
}
.acct-timeline-meta {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 6px;
}
.acct-timeline-panel {
font-family: 'Rajdhani', sans-serif;
font-size: 12px; font-weight: 600;
color: rgba(0,229,255,.7);
letter-spacing: .5px;
}
.acct-timeline-time {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: rgba(200,215,230,.3);
}
.acct-timeline-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 600;
color: #a78bfa;
padding: 2px 8px;
background: rgba(167,139,250,.08);
border: 1px solid rgba(167,139,250,.15);
border-radius: 4px;
}
.acct-timeline-text {
font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
font-size: 14px;
color: #c8d7e6;
line-height: 1.5;
word-break: break-word;
}
.acct-timeline-reply {
font-size: 11px;
color: rgba(125,211,252,.5);
margin-top: 4px;
}
.acct-timeline-footer {
margin-top: 6px;
}
.acct-timeline-likes {
font-size: 11px;
color: rgba(200,215,230,.35);
}
/* ── Empty state ── */
.acct-empty {
display: flex; flex-direction: column; align-items: center;
padding: 48px 20px;
}
.acct-empty-icon {
font-size: 40px;
margin-bottom: 12px;
opacity: .4;
}
.acct-empty-text {
font-family: 'Rajdhani', sans-serif;
font-size: 15px;
color: rgba(200,215,230,.4);
letter-spacing: 1px;
}
.acct-empty-hint {
font-size: 12px;
color: rgba(200,215,230,.25);
margin-top: 6px;
}
/* ── Loading spinner ── */
.acct-loading {
display: flex; align-items: center; justify-content: center;
padding: 40px;
color: rgba(0,229,255,.5);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
gap: 10px;
}
.acct-loading-spinner {
width: 18px; height: 18px;
border: 2px solid rgba(0,229,255,.15);
border-top-color: #00e5ff;
border-radius: 50%;
animation: acct-spin .8s linear infinite;
}
@keyframes acct-spin {
to { transform: rotate(360deg); }
}
/* ── Toast ── */
.acct-toast {
position: fixed;
bottom: 40px; left: 50%; transform: translateX(-50%) translateY(20px);
padding: 12px 28px;
background: rgba(0,229,255,.12);
border: 1px solid rgba(0,229,255,.3);
border-radius: 8px;
color: #7dd3fc;
font-family: 'Rajdhani', sans-serif;
font-size: 14px; font-weight: 600;
letter-spacing: 1px;
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity .3s, transform .3s;
z-index: 999999;
}
.acct-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.acct-toast.acct-toast-error {
background: rgba(255,59,59,.12);
border-color: rgba(255,59,59,.3);
color: #ff6b6b;
}
/* ── Mobile responsive ── */
@media (max-width: 600px) {
.acct-main { padding: 0 12px 40px; gap: 16px; }
.acct-card { padding: 20px 16px; }
.acct-stats-row { grid-template-columns: repeat(2, 1fr); }
.acct-stat-val { font-size: 22px; }
.acct-header { padding: 12px 16px; }
.acct-header-title { font-size: 13px; letter-spacing: 1.5px; }
}
/* ═══════════════════════════════════════════════════
GROWTH UI — FAB, Invite Modal, Share Buttons
═══════════════════════════════════════════════════ */
/* Floating Action Button */
.growth-fab {
position: fixed;
bottom: 90px;
right: 20px;
z-index: 9000;
width: 56px; height: 56px;
border-radius: 50%;
border: 2px solid var(--gold);
background: linear-gradient(135deg, rgba(200,164,90,.15), rgba(200,164,90,.05));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 24px rgba(200,164,90,.2), 0 0 40px rgba(200,164,90,.06);
transition: all .3s ease;
animation: growth-fab-breathe 3s ease-in-out infinite;
}
.growth-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 32px rgba(200,164,90,.35);
}
.growth-fab-icon { font-size: 24px; }
.growth-fab-pulse {
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
border: 2px solid var(--gold);
animation: growth-pulse 2s ease-out infinite;
pointer-events: none;
}
@keyframes growth-pulse {
0% { transform: scale(1); opacity: .6; }
100% { transform: scale(1.6); opacity: 0; }
}
@keyframes growth-fab-breathe {
0%,100% { box-shadow: 0 4px 24px rgba(200,164,90,.2), 0 0 40px rgba(200,164,90,.06); }
50% { box-shadow: 0 4px 32px rgba(200,164,90,.35), 0 0 60px rgba(200,164,90,.1); }
}
/* Invite Modal Overlay */
.growth-modal-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(6,10,18,.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
animation: growth-fade-in .25s ease;
}
@keyframes growth-fade-in { from { opacity: 0; } to { opacity: 1; } }
.growth-modal {
background: linear-gradient(160deg, #141e2e 0%, #0e1620 100%);
border: 1px solid var(--border3);
border-radius: 16px;
padding: 32px 28px;
width: 420px;
max-width: 92vw;
max-height: 85vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 60px rgba(200,164,90,.06);
animation: growth-modal-in .3s ease;
}
@keyframes growth-modal-in {
from { transform: scale(.92) translateY(20px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.growth-modal-close {
position: absolute;
top: 12px; right: 16px;
font-size: 22px;
color: var(--txt3);
background: none;
border: none;
cursor: pointer;
transition: color .2s;
}
.growth-modal-close:hover { color: var(--txt); }
.growth-modal-header {
text-align: center;
margin-bottom: 24px;
}
.growth-modal-icon {
font-size: 40px;
margin-bottom: 8px;
}
.growth-modal-title {
font-family: var(--fd);
font-size: 18px;
font-weight: 700;
color: var(--gold);
letter-spacing: 1px;
margin-bottom: 6px;
}
.growth-modal-sub {
font-size: 13px;
color: var(--txt2);
}
/* Link Section */
.growth-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--gold);
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: var(--fd);
margin-bottom: 8px;
}
.growth-link-section { margin-bottom: 20px; }
.growth-link-row {
display: flex;
gap: 8px;
}
.growth-link-input {
flex: 1;
background: rgba(255,255,255,.04);
border: 1px solid var(--border2);
border-radius: 8px;
padding: 10px 12px;
color: var(--txt);
font-size: 12px;
font-family: var(--fm);
outline: none;
}
.growth-copy-btn {
background: linear-gradient(135deg, var(--gold), var(--cyan2));
color: #0a0e16;
font-weight: 700;
font-size: 12px;
border: none;
border-radius: 8px;
padding: 10px 18px;
cursor: pointer;
transition: all .2s;
white-space: nowrap;
}
.growth-copy-btn:hover { filter: brightness(1.1); }
.growth-copy-btn.copied { background: var(--green); color: #fff; }
/* Share Buttons */
.growth-share-section { margin-bottom: 20px; }
.growth-share-btns {
display: flex;
gap: 10px;
justify-content: center;
}
.growth-share-btn {
width: 48px; height: 48px;
border-radius: 12px;
border: 1px solid var(--border2);
background: rgba(255,255,255,.03);
color: var(--txt);
font-size: 20px;
cursor: pointer;
transition: all .2s;
display: flex; align-items: center; justify-content: center;
}
.growth-share-btn:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(200,164,90,.08); }
.gsb-twitter:hover { border-color: #1da1f2; background: rgba(29,161,242,.1); }
.gsb-telegram:hover { border-color: #0088cc; background: rgba(0,136,204,.1); }
.gsb-whatsapp:hover { border-color: #25d366; background: rgba(37,211,102,.1); }
.gsb-wechat:hover { border-color: #07c160; background: rgba(7,193,96,.1); }
.gsb-reddit:hover { border-color: #ff4500; background: rgba(255,69,0,.1); }
/* Digest Section */
.growth-digest-section { margin-bottom: 20px; }
.growth-digest-btn {
width: 100%;
background: rgba(200,164,90,.08);
border: 1px solid var(--border2);
border-radius: 10px;
color: var(--txt);
padding: 12px 16px;
font-size: 13px;
cursor: pointer;
transition: all .2s;
}
.growth-digest-btn:hover { background: rgba(200,164,90,.14); border-color: var(--gold); }
.growth-digest-btn:disabled { opacity: .6; cursor: not-allowed; }
.growth-digest-icon { margin-right: 4px; }
.growth-digest-box {
margin-top: 10px;
background: rgba(0,0,0,.3);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
font-size: 12px;
color: var(--txt2);
line-height: 1.6;
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
font-family: var(--fm);
}
/* Stats Section */
.growth-stats-section {
display: flex;
gap: 16px;
justify-content: center;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.growth-stat { text-align: center; flex: 1; }
.growth-stat-num {
display: block;
font-family: var(--fd);
font-size: 24px;
font-weight: 700;
color: var(--gold);
}
.growth-stat-label {
font-size: 11px;
color: var(--txt3);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Mobile */
@media (max-width: 600px) {
.growth-fab { bottom: 75px; right: 14px; width: 48px; height: 48px; }
.growth-fab-icon { font-size: 20px; }
.growth-modal { padding: 24px 18px; }
.growth-modal-title { font-size: 15px; }
.growth-share-btn { width: 42px; height: 42px; font-size: 18px; }
}
/* ═══════════════════════════════════════════════════
GROWTH v2 — Share Banner, Share Gate, Tweet Btns
═══════════════════════════════════════════════════ */
/* ── Breaking Intel Share Banner (top bar) ── */
.growth-share-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 10001;
background: linear-gradient(90deg, #1a0a0a, #2a1414, #1a0a0a);
border-bottom: 1px solid rgba(220,60,60,.3);
padding: 8px 16px;
display: flex; align-items: center;
animation: gsb-slide-in .4s ease;
}
@keyframes gsb-slide-in { from { transform: translateY(-100%); } to { transform: none; } }
.gsb-hide { animation: gsb-slide-out .4s ease forwards; }
@keyframes gsb-slide-out { to { transform: translateY(-100%); opacity: 0; } }
.gsb-content {
flex: 1;
display: flex; align-items: center; gap: 10px;
overflow: hidden;
}
.gsb-live {
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: #ff4444;
animation: gsb-pulse 1.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes gsb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.gsb-text {
font-size: 12px;
color: var(--txt);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.gsb-share-btn {
flex-shrink: 0;
background: rgba(220,60,60,.15);
border: 1px solid rgba(220,60,60,.4);
color: #ff8888;
font-size: 12px;
font-weight: 600;
padding: 5px 14px;
border-radius: 6px;
cursor: pointer;
transition: all .2s;
white-space: nowrap;
}
.gsb-share-btn:hover { background: rgba(220,60,60,.3); color: #fff; }
.gsb-tg-btn { background: rgba(0,136,204,.12); border-color: rgba(0,136,204,.4); color: #66ccff; }
.gsb-tg-btn:hover { background: rgba(0,136,204,.25); color: #fff; }
.gsb-x-icon { font-weight: 800; }
.gsb-close {
flex-shrink: 0;
background: none; border: none;
color: var(--txt3);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
margin-left: 8px;
}
.gsb-close:hover { color: var(--txt); }
/* Push topbar down when banner is visible */
.growth-share-banner ~ .topbar { margin-top: 0; }
/* banner pushes body content down handled by JS */
/* ── Prediction Share Gate ── */
.pred-gated {
filter: blur(6px);
pointer-events: none;
user-select: none;
opacity: .4;
transition: all .3s;
}
.pred-share-gate {
position: relative;
margin: -30px 0 10px;
padding: 28px 20px;
background: linear-gradient(180deg, rgba(10,14,22,0) 0%, rgba(10,14,22,.95) 30%, rgba(16,24,36,.98) 100%);
border-radius: 12px;
text-align: center;
z-index: 5;
}
.psg-content { position: relative; z-index: 2; }
.psg-icon { font-size: 36px; margin-bottom: 8px; }
.psg-title {
font-family: var(--fd);
font-size: 16px;
font-weight: 700;
color: var(--gold);
letter-spacing: 1px;
margin-bottom: 6px;
}
.psg-sub {
font-size: 13px;
color: var(--txt2);
margin-bottom: 16px;
}
.psg-btns {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.psg-btn {
padding: 10px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1px solid;
transition: all .2s;
}
.psg-btn-twitter {
background: rgba(29,161,242,.12);
border-color: rgba(29,161,242,.4);
color: #1da1f2;
}
.psg-btn-twitter:hover { background: rgba(29,161,242,.25); color: #fff; }
.psg-btn-telegram {
background: rgba(0,136,204,.12);
border-color: rgba(0,136,204,.4);
color: #0088cc;
}
.psg-btn-telegram:hover { background: rgba(0,136,204,.25); color: #fff; }
.psg-btn-copy {
background: rgba(200,164,90,.08);
border-color: rgba(200,164,90,.3);
color: var(--gold);
}
.psg-btn-copy:hover { background: rgba(200,164,90,.18); }
.psg-x { font-weight: 800; margin-right: 4px; }
/* ── Inline Tweet Buttons ── */
.growth-tweet-inline {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(29,161,242,.1);
border: 1px solid rgba(29,161,242,.3);
color: #1da1f2;
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: 14px;
cursor: pointer;
transition: all .2s;
margin-left: 10px;
vertical-align: middle;
}
.growth-tweet-inline:hover { background: rgba(29,161,242,.22); color: #fff; }
.gti-x { font-weight: 800; font-size: 13px; }
/* ── Quick-Tweet Buttons in Modal ── */
.growth-quicktweet { margin-bottom: 18px; }
.growth-qt-btns {
display: flex; gap: 8px;
}
.growth-qt-btn {
flex: 1;
padding: 10px 8px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid;
transition: all .2s;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.gqt-twitter {
background: rgba(29,161,242,.1);
border-color: rgba(29,161,242,.3);
color: #1da1f2;
}
.gqt-twitter:hover { background: rgba(29,161,242,.25); color: #fff; }
.gqt-reddit {
background: rgba(255,69,0,.08);
border-color: rgba(255,69,0,.3);
color: #ff6b35;
}
.gqt-reddit:hover { background: rgba(255,69,0,.2); color: #fff; }
.gqt-hn {
background: rgba(255,102,0,.08);
border-color: rgba(255,102,0,.3);
color: #ff6600;
}
.gqt-hn:hover { background: rgba(255,102,0,.2); color: #fff; }
.gqt-icon { font-size: 16px; }
/* ── Growth Toast ── */
.growth-toast {
position: fixed;
bottom: 100px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(16,24,36,.95);
border: 1px solid var(--gold);
color: var(--txt);
padding: 10px 24px;
border-radius: 8px;
font-size: 13px;
z-index: 11000;
opacity: 0;
transition: all .3s ease;
pointer-events: none;
}
.growth-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Mobile ── */
@media (max-width: 600px) {
.growth-share-banner { padding: 6px 10px; }
.gsb-text { font-size: 11px; }
.gsb-share-btn { padding: 4px 10px; font-size: 11px; }
.psg-btns { flex-direction: column; align-items: stretch; }
.psg-btn { padding: 10px 16px; }
.growth-qt-btns { flex-direction: column; }
}
/* ═══════════════════════════════════════════════════
SCROLL-PAST MAP: Chevron + Ctrl-scroll hint
═══════════════════════════════════════════════════ */
/* ── Floating scroll-down chevron at bottom of map ── */
.hz-scroll-down {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 900;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
cursor: pointer;
opacity: .75;
transition: opacity .3s, transform .3s;
-webkit-tap-highlight-color: transparent;
filter: drop-shadow(0 0 8px rgba(0,229,255,.5));
}
.hz-scroll-down:hover {
opacity: 1;
transform: translateX(-50%) translateY(2px);
}
.hz-scroll-down-label {
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(0,229,255,.85);
font-family: var(--fn), monospace;
white-space: nowrap;
}
.hz-scroll-down-arrow {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
animation: hzChevronBounce 2s ease-in-out infinite;
}
.hz-scroll-down-arrow svg {
width: 28px;
height: 28px;
stroke: #00e5ff;
stroke-width: 2.5;
fill: none;
}
@keyframes hzChevronBounce {
0%,100% { transform: translateY(0); }
50% { transform: translateY(7px); }
}
/* hide chevron once user has scrolled past the map */
.hz-scroll-down.hz-chevron-hidden {
opacity: 0;
pointer-events: none;
transition: opacity .5s;
}
/* ── Ctrl+scroll hint overlay ── */
.hz-scroll-hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 950;
background: rgba(0,0,0,.78);
color: #e0f7fa;
font-size: 14px;
font-family: var(--fn), monospace;
padding: 10px 22px;
border-radius: 8px;
border: 1px solid rgba(0,229,255,.3);
pointer-events: none;
opacity: 0;
transition: opacity .3s;
white-space: nowrap;
text-align: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hz-scroll-hint.hz-hint-show {
opacity: 1;
}
/* ── Mobile: slightly smaller chevron + hint ── */
@media (max-width: 600px) {
.hz-scroll-down { bottom: 12px; }
.hz-scroll-down-arrow { width: 26px; height: 26px; }
.hz-scroll-down-arrow svg { width: 22px; height: 22px; }
.hz-scroll-down-label { font-size: 9px; }
.hz-scroll-hint { font-size: 12px; padding: 8px 16px; }
}