:root { 
            --bg: #000; --panel: #050505; --border: #333; --gold: #E5C07B; --red: #FF3333; --green: #33FF33; --white: #EEE; 
            --font-symbol: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
            --gold-dim: rgba(229,192,123,0.25);
            --gold-soft: rgba(229,192,123,0.12);
        }
        html, body { height: 100%; }
        body {
            background: var(--bg);
            color: var(--white);
            font-family: 'JetBrains Mono';
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-size: 11px;
        }
        
        header { display: flex; justify-content: space-between; padding: 10px 15px; border-bottom: 1px solid var(--border); color: var(--gold); font-weight: 800; font-size: 14px; }
        .ticker-container { background: #020202; border-bottom: 1px solid var(--border); overflow: hidden; white-space: nowrap; padding: 8px 0; }
        .ticker-move { display: inline-block; animation: ticker-slide 60s linear infinite; }
        @keyframes ticker-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .ticker-item { display: inline-block; margin-right: 40px; color: var(--gold); font-weight: bold; }
        .top-identity{
          display:flex;
          justify-content:center;
          gap:8px;
          padding:6px 12px;
          color:#b8b8b8;
          font-size:11px;
          border-bottom:1px solid #1f1f1f;
          background:#050505;
        }
        .top-identity .sep{ color:#555; }
        .onboarding-callout{
          margin:8px 12px 0 12px;
          padding:10px 12px;
          border:1px solid #333;
          background:#0b0b0b;
          display:flex;
          align-items:center;
          gap:12px;
        }
        .ob-title{
          color:var(--gold);
          font-weight:800;
          font-size:11px;
          white-space:nowrap;
        }
        .ob-body{
          color:#c9c9c9;
          font-size:11px;
          flex:1;
        }
        .ob-dismiss{
          border:1px solid #444;
          background:#111;
          color:var(--gold);
          padding:4px 8px;
          font-size:10px;
          cursor:pointer;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 360px 1fr 360px;
            grid-template-rows: 1fr 1fr;
            gap: 1px;
            background: var(--border);
            flex: 1;
            min-height: 0;
            height: calc(100vh - 80px);
        }
        .panel {
            background: var(--panel);
            padding: 15px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
            min-height: 0;
        }
        .cal-panel {
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }
        .cal-panel::-webkit-scrollbar { width: 4px; }
        .cal-panel::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
        .cal-panel::-webkit-scrollbar-track { background: transparent; }
        .p-title { color: var(--white); font-weight: 800; margin-bottom: 12px; border-bottom: 1px solid #222; padding-bottom: 5px; letter-spacing: 1px; font-size: 12px; }
        
        .gauge-wrap { width: 100%; height: 130px; display: flex; justify-content: center; position: relative; }
        .risk-val { font-size: 58px; font-weight: 800; text-align: center; color: var(--gold); margin-top: -15px; }
        .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; border-top: 1px solid #222; padding-top: 10px; }
        .m-val { color: var(--gold); font-weight: bold; font-size: 11px; }

        .m-val { color: var(--gold); font-weight: bold; font-size: 11px; }

        .astro-window-label {
            font-size: 11px;
            opacity: 0.6;
            text-align: center;
            margin: -6px 0 10px 0;
        }

        /* === AstroGold Pro Radar === */
        .radar-svg { width: 95%; height: 95%; margin:auto; display:block; overflow:visible; }

        .ring-outer { fill:none; stroke: var(--gold); stroke-width: 2.8; opacity: 0.95; }
        .ring-inner { fill:none; stroke: rgba(229,192,123,0.32); stroke-width: 2.2; opacity: 0.8; }
        .ring-mid   { fill:none; stroke: rgba(229,192,123,0.16); stroke-width: 1.5; opacity: 0.7; }
        .ring-core  { fill: rgba(0,0,0,0.75); stroke: rgba(229,192,123,0.35); stroke-width: 1.5; }

        .tick-major { stroke: rgba(229,192,123,0.40); stroke-width: 1.4; }
        .tick-minor { stroke: rgba(229,192,123,0.18); stroke-width: 1.0; }

        .zodiac-divider { stroke: rgba(229,192,123,0.22); stroke-width: 1; }
        /* Zodiac glyphs only (keep gold tone, avoid emoji look) */
        :root{
          --font-symbol: 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
        }

        .zodiac-glyph{
          font-family: var(--font-symbol);
          fill: var(--gold);
          font-size: 18px;
          font-weight: 700;
          text-anchor: middle;
          dominant-baseline: central;
          font-variant-emoji: text;
          text-rendering: geometricPrecision;
          -webkit-font-smoothing: antialiased;
        }

        .axis-line { stroke: rgba(255,255,255,0.07); stroke-width: 1; }

        .aspect-hard { stroke: rgba(255,70,70,0.78); stroke-width: 1.8; opacity: 0.85; }
        .aspect-soft { stroke: rgba(50,255,120,0.55); stroke-width: 1.5; opacity: 0.65; }

        .aspect-symbol-bg { fill: rgba(0,0,0,0.78); stroke: rgba(229,192,123,0.25); stroke-width: 1; }
        .aspect-symbol-text { font-family: var(--font-symbol); font-size: 12px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }

        .planet-dot { opacity: 0.95; }
        .planet-symbol {
          font-family: var(--font-symbol);
          font-size: 18px;
          text-anchor: middle;
          dominant-baseline: central;
          paint-order: stroke;
          stroke: rgba(0,0,0,0.75);
          stroke-width: 2px;
        }
        .planet-deg { font-size: 9px; fill: rgba(255,255,255,0.65); text-anchor: middle; }

        .core-title { fill: rgba(229,192,123,0.9); font-size: 11px; font-weight: 900; text-anchor: middle; }
        .core-val { fill: #fff; font-size: 18px; font-weight: 900; text-anchor: middle; }
        .core-sub { fill: rgba(255,255,255,0.55); font-size: 9px; text-anchor: middle; }

        .zodiac-glyph, .planet-symbol, .aspect-symbol-text, .radar-svg text {
          font-variant-emoji: text;
          text-rendering: geometricPrecision;
          -webkit-font-smoothing: antialiased;
        }

        .hud-row{ display:flex; gap:12px; align-items:center; font-family:'JetBrains Mono'; font-size:11px; line-height:1.4; }
        .hud-k{ color:#666; min-width:70px; }
        .hud-v{ color:#EEE; font-weight:700; }
        .hud-sep{ color:#222; }
        .hud-accent{ color: var(--gold); font-weight:800; }

        #modal {
            display: none;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            width: min(92vw, 720px);
            max-height: 80vh;
            background: #080808;
            border: 2px solid var(--gold);
            padding: 20px 30px 30px 30px;
            z-index: 10000 !important;
            box-shadow: 0 0 100px #000;
            overflow-y: auto;
            box-sizing: border-box;
        }
        #modal::-webkit-scrollbar { width: 4px; }
        #modal::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
        #modal::-webkit-scrollbar-track { background: transparent; }

        .modal-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
        }
        
        .modal-tab-btn {
            background: transparent;
            border: 1px solid transparent;
            color: #888;
            font-family: 'JetBrains Mono';
            font-weight: 800;
            font-size: 11px;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .modal-tab-btn:hover {
            color: var(--gold);
        }

        .modal-tab-btn.active {
            color: #000;
            background: var(--gold);
            border-color: var(--gold);
        }

        .modal-tab-content {
            display: none;
        }
        .modal-tab-content.active {
            display: block;
        }

        @media (max-width: 480px) {
            #modal {
                padding: 15px 20px 20px 20px;
            }
            .modal-tabs {
                gap: 5px;
            }
        }

        .day-cell { min-height: 32px; position: relative; overflow: visible; }

        /* Force calendar grid (fix broken layout) */
        #cal-grid{
          display: grid !important;
          grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
          gap: 2px !important;
          align-content: start !important;
          overflow: visible !important;
        }

        .day-cell{
          width: 100% !important;
          min-height: 34px;
          aspect-ratio: 1;     /* 유지해도 OK */
          position: relative !important;
          overflow: visible !important;
        }

        /* Header cells */
        .day-cell.header{
          background: transparent !important;
          border: none !important;
          color: var(--gold) !important;
          cursor: default !important;
          transform: none !important;
        }
        .day-cell.header:hover{
          border: none !important;
          transform: none !important;
        }

        /* === Calendar header hard override (fix white UI) === */
        /* Calendar nav: force one-line */
        .cal-nav{
          display:flex;
          align-items:center;
          gap:10px;
          flex-wrap:nowrap;
        }
        .cal-nav .cal-left{
          display:flex;
          align-items:center;
          gap:8px;
          flex:0 0 auto;
        }
        .cal-nav .cal-right{
          margin-left:auto;
          display:flex;
          align-items:center;
          gap:6px;
          flex:0 0 auto;
        }
        .cal-input{ width:56px; }
        .cal-input.month{ width:34px; }

        .cal-btn{
          background: #111 !important;
          border: 1px solid #444 !important;
          color: var(--gold) !important;
          font-family: 'JetBrains Mono' !important;
          font-weight: 800 !important;
          padding: 6px 12px !important;
        }

        /* Force scroll on desktop for museum list */
        .scroll-y {
          overflow-y: auto !important;
          min-height: 0 !important;
        }

        /* Ensure museum container can shrink inside flex column */
        #m-list {
          flex: 1 1 auto !important;
          min-height: 0 !important;
          overflow-y: auto !important;
        }

        .cal-btn:hover{
          border-color: var(--gold) !important;
        }

        .cal-display{
          color: #fff !important;
          font-weight: 800 !important;
          letter-spacing: 1px !important;
        }

        .cal-input{
          background: #000 !important;
          color: #fff !important;
          border: 1px solid #444 !important;
          font-family: 'JetBrains Mono' !important;
          font-size: 10px !important;
          text-align: center !important;
          height: 20px !important;
          appearance: none !important;
          -webkit-appearance: none !important;
          outline: none !important;
          box-shadow: none !important;
        }

        .cal-input:focus{
          border-color: var(--gold) !important;
        }

        /* 일부 브라우저에서 input/button 기본 흰 배경 억제 */
        button, input{
          background-clip: padding-box !important;
        }

        /* Modal readability */
        #modal .layer-box{ margin-bottom: 18px; }
        #modal .layer-content{
          line-height: 1.65;
          white-space: pre-line;
        }

        /* Radar Panel (Desktop) */
        .radar-panel{
          grid-column: 2;
          grid-row: 1/3;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }

       /* =========================
           MOBILE SAFE MODE (STACK)
           ========================= */
        @media (max-width: 900px){
          body{ overflow:auto; }

          /* grid -> column stack */
          .main-grid{
            display:flex !important;
            flex-direction:column !important;
            gap: 1px !important;
            height:auto !important;
          }

          /* panel order */
          .gauge-panel{ order: 1; }
          .radar-panel{ order: 2; }
          .cal-panel{ order: 3; }
          .narrative-panel{ order: 4; }
          .museum-panel{ order: 5; }

          /* radar size: never crop */
          .radar-panel{ padding: 0 !important; }
          #radar-svg-element, .radar-svg{
            width: 100% !important;
            height: auto !important;
            max-height: 58vh !important;
          }

          /* header: reduce vertical footprint */
          header{
            padding: 8px 10px !important;
            font-size: 12px !important;
            line-height: 1.2 !important;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
          }

          .ticker-container{
            padding: 6px 0 !important;
          }

          /* calendar grid: FORCE 7 columns (fix vertical S/M/T bug) */
          #cal-grid{
            display:grid !important;
            grid-template-columns: repeat(7, 1fr) !important;
            gap: 4px !important;
          }

          /* day cells readable on touch */
          .day-cell{
            min-height: 38px;
            font-size: 11px;
          }

          /* modal fit */
          #modal{
            width: min(92vw, 520px);
            max-height: 80vh;
            padding: 14px;
          }
        }

        /* small phones */
        @media (max-width: 480px){
          .panel{ padding: 12px !important; }

          .risk-val{ font-size: 44px !important; }

          /* calendar nav: keep in one line */
          .cal-nav{ gap: 6px !important; }
          .cal-input{ width: 52px !important; }
          .cal-input.month{ width: 34px !important; }
          .cal-btn{ padding: 4px 8px !important; }

          #radar-svg-element, .radar-svg{
            max-height: 52vh !important;
          }
        }

        /* =========================
           MOBILE OVERRIDE v2 (FORCE)
           ========================= */
        @media (max-width: 980px){
        
          body{ overflow-y:auto !important; overflow-x:hidden !important; }
        
          /* FORCE stack */
          .main-grid{
            display:flex !important;
            flex-direction:column !important;
            width:100% !important;
            height:auto !important;
            gap: 1px !important;
          }
        
          .panel{
            width:100% !important;
            min-height:auto !important;
            overflow:hidden !important;
          }
        
          /* order (requires the classes from previous step) */
          .gauge-panel{ order: 1 !important; }
          .radar-panel{ order: 2 !important; }
          .cal-panel{ order: 3 !important; }
          .narrative-panel{ order: 4 !important; }
          .museum-panel{ order: 5 !important; }
        
          /* radar sizing */
          .radar-panel{ padding:0 !important; }
          #radar-svg-element, .radar-svg{
            width:100% !important;
            height:auto !important;
            max-height: 56vh !important;
            display:block !important;
          }
        
          /* header footprint */
          header{
            padding: 8px 10px !important;
            font-size: 12px !important;
            line-height: 1.2 !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 4px !important;
          }
        
          /* ticker: keep but reduce height */
          .ticker-container{ padding: 6px 0 !important; }
        
          /* calendar grid force */
          #cal-grid{
            display:grid !important;
            grid-template-columns: repeat(7, 1fr) !important;
            gap: 4px !important;
          }
          .day-cell{ min-height: 38px !important; font-size: 11px !important; }
        }
        
        /* small phones */
        @media (max-width: 480px){
          .panel{ padding: 12px !important; }
          .risk-val{ font-size: 44px !important; }
          .cal-nav{ gap: 6px !important; flex-wrap:nowrap !important; }
          .cal-input{ width: 52px !important; }
          .cal-input.month{ width: 34px !important; }
          #radar-svg-element, .radar-svg{ max-height: 50vh !important; }
        }

        /* =========================
           MOBILE: Museum Clamp
           ========================= */
        @media (max-width: 980px){
          /* Museum panel 자체 높이를 제한 */
          .museum-panel{
            max-height: 38vh !important;     /* 3~5개 보이는 수준 */
            overflow: hidden !important;
          }

          /* Museum 내부 리스트만 스크롤 */
          .museum-panel #m-list{
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            padding-right: 6px;
          }

          /* 스크롤바 시인성 */
          .museum-panel #m-list::-webkit-scrollbar{ width: 4px; }
          .museum-panel #m-list::-webkit-scrollbar-thumb{
            background: var(--gold);
            border-radius: 2px;
          }
        }

        /* 더 작은 폰은 Museum을 더 짧게 */
        @media (max-width: 480px){
          .museum-panel{ max-height: 32vh !important; }
        }

        /* =========================
           MOBILE FINAL FIX
           - gauge overlap stop
           - calendar cell fix
           ========================= */
        @media (max-width: 980px){
        
          /* 1) STOP gauge SVG from overlapping next panel */
          .gauge-wrap{
            overflow: hidden !important;   /* 핵심 */
            height: 150px !important;
          }
          .gauge-wrap svg{
            overflow: hidden !important;   /* 핵심: 기존 inline overflow:visible 무력화 */
          }
        
          /* 2) Calendar: remove aspect-ratio (it breaks mobile grid) */
          .day-cell{
            aspect-ratio: auto !important;  /* 핵심 */
            height: 38px !important;
            transform: none !important;
          }
          .day-cell:hover{
            transform: none !important;      /* 모바일에서 확대 금지 */
          }
        
          /* keep 7 columns strongly */
          #cal-grid{
            grid-template-columns: repeat(7, 1fr) !important;
            grid-auto-rows: 38px !important;
            gap: 4px !important;
          }

          /* (Optional) celestial radar height reduction */
          #radar-svg-element, .radar-svg{
            max-height: 46vh !important;
          }
        }
        
        @media (max-width: 480px){
          .gauge-wrap{ height: 140px !important; }
          .day-cell{ height: 36px !important; }
          #cal-grid{ grid-auto-rows: 36px !important; }
        }

        /* === Asset Risk Strip === */
        .asset-risk-strip{
          display:flex;
          gap:10px;
          justify-content:center;
          align-items:center;
          margin-top:8px;
          margin-bottom:6px;
        }

        .asset-pill{
          display:flex;
          gap:8px;
          align-items:center;
          padding:6px 10px;
          border:1px solid #222;
          background:#0b0b0b;
          border-radius:10px;
        }

        .asset-name{
          color: var(--gold);
          font-weight:800;
          letter-spacing:0.5px;
        }

        .asset-state{
          font-weight:800;
          letter-spacing:0.5px;
        }

        /* 5-level intensity colors (ABS risk only) */
        .state-stable{ color: rgba(50,255,150,0.85); }
        .state-shift{ color: rgba(255,215,0,0.90); }
        .state-pressure{ color: rgba(255,140,0,0.90); }
        .state-high{ color: rgba(255,60,60,0.92); }
        .state-critical{ color: rgba(150,0,0,0.95); }

        @media (max-width:480px){
          .asset-risk-strip{ gap:8px; }
          .asset-pill{ padding:5px 8px; }
          .asset-name, .asset-state{ font-size:12px; }
        }
        /* CRC Badge */
        .crc-badge {
          margin-top: 8px;
          font-size: 13px;
          font-weight: 600;
          padding: 6px 12px;
          border-radius: 12px;
          display: inline-block;
        }

        .crc-badge.EMPIRE {
          background: rgba(0,200,100,0.15);
          color: #00c864;
        }

        .crc-badge.TRANSITION {
          background: rgba(255,180,0,0.15);
          color: #ffb400;
        }

        .crc-badge.CONFLICT {
          background: rgba(255,60,60,0.2);
          color: #ff3c3c;
        }

        /* EWS Branding Footer */
        .ews-footer {
          margin-top: 14px;
          padding-top: 12px;
          border-top: 1px solid rgba(255,255,255,0.08);
          font-family: inherit;
        }
        .ews-title {
          color: #d6b36a;
          font-weight: 700;
          letter-spacing: 0.5px;
          margin-bottom: 4px;
        }
        .ews-sub {
          color: rgba(255,255,255,0.55);
          font-size: 12px;
          margin-bottom: 10px;
        }
        .ews-bridge {
          display: flex;
          gap: 8px;
          align-items: center;
          margin-bottom: 10px;
        }
        .ews-bridge .tag {
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 999px;
          background: rgba(214,179,106,0.15);
          color: #d6b36a;
          border: 1px solid rgba(214,179,106,0.25);
        }
        .ews-bridge .bridge-text {
          color: rgba(255,255,255,0.70);
          font-size: 12px;
        }
        .ews-disclaimer {
          color: rgba(255,255,255,0.45);
          font-size: 11px;
          line-height: 1.35;
          margin-bottom: 12px;
        }
        .ews-cta .cta-title {
          color: rgba(255,255,255,0.65);
          font-size: 11px;
          letter-spacing: 1px;
          margin-bottom: 4px;
        }
        .ews-cta .cta-text {
          color: rgba(255,255,255,0.70);
          font-size: 12px;
          margin-bottom: 8px;
        }
        .ews-cta .cta-subtext {
          color: rgba(255,255,255,0.50);
          font-size: 11px;
          margin-bottom: 8px;
        }
        .howto-card{
          margin-top:10px;
          padding:10px;
          border:1px solid #333;
          background:#0b0b0b;
        }
        .howto-title{
          color:var(--gold);
          font-weight:800;
          font-size:11px;
          margin-bottom:6px;
          letter-spacing:0.4px;
        }
        .howto-item{
          color:#c9c9c9;
          font-size:11px;
          line-height:1.35;
          margin-bottom:3px;
        }
        .premium-btn {
          width: 100%;
          padding: 10px 12px;
          border-radius: 10px;
          background: rgba(214,179,106,0.18);
          color: #d6b36a;
          border: 1px solid rgba(214,179,106,0.35);
          cursor: pointer;
          font-weight: 700;
        }
        .premium-btn:hover {
          background: rgba(214,179,106,0.24);
        }

        /* Global gold scrollbar */
        .scroll-y::-webkit-scrollbar { width: 4px; }
        .scroll-y::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
        .scroll-y::-webkit-scrollbar-track { background: transparent; }
        
        /* Chart Styles */
        .chart-toggles { display: flex; gap: 5px; }
        .chart-btn {
            background: #111; color: #888; border: 1px solid #333;
            padding: 3px 8px; border-radius: 4px; font-size: 10px; cursor: pointer;
        }
        .chart-btn.active { background: rgba(214,179,106,0.2); color: var(--gold); border-color: var(--gold); }
        
        #modal {
            width: min(520px, 92vw);
            max-height: 75vh;
        }

        .tab-btn {
            flex: 1;
            background: #111;
            border: 1px solid #333;
            color: var(--gold);
            font-family: 'JetBrains Mono';
            font-size: 13px;
            font-weight: 800;
            padding: 8px 6px;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .tab-btn.active {
            background: rgba(229,192,123,0.18);
            border-color: var(--gold);
        }

        .tab-panel {
            padding-right: 6px;
            font-size: 11px;
            line-height: 1.45;
            color: #ddd;
        }

        .news-pressure-card,
        .news-structure-card{
          margin-top: 10px;
          padding: 10px;
          border: 1px solid #333;
          background: #0b0b0b;
        }
        .news-title{
          color: var(--gold);
          font-weight: 800;
          margin-bottom: 8px;
          letter-spacing: 0.4px;
        }
        .news-subtitle{
          color: #aaa;
          font-weight: 700;
          margin-top: 10px;
          margin-bottom: 6px;
          font-size: 11px;
        }
        .news-row{
          display: flex;
          justify-content: space-between;
          margin-bottom: 4px;
          color: #ccc;
        }
        .news-row b{ color: #fff; }
        .news-sum{
          color: #888;
          font-size: 11px;
          margin-bottom: 8px;
        }
        .cause-row{ margin-bottom: 8px; }
        .cause-head{
          display: flex;
          justify-content: space-between;
          margin-bottom: 4px;
          color: #ccc;
        }
        .cause-head b{ color: var(--gold); }
        .cause-bar{
          height: 6px;
          border: 1px solid #333;
          background: #090909;
        }
        .cause-bar span{
          display: block;
          height: 100%;
          background: linear-gradient(90deg, rgba(229,192,123,0.35), rgba(229,192,123,0.9));
        }
        .news-hl{
          font-size: 11px;
          color: #cfcfcf;
          line-height: 1.4;
          margin-bottom: 4px;
        }
        .news-history-wrap{
          border-top: 1px dashed #333;
          padding-top: 6px;
        }
        .news-h-row{
          display:flex;
          justify-content:space-between;
          gap:8px;
          font-size:10px;
          color:#bcbcbc;
          margin-bottom:4px;
        }
        .news-shift-on{ color: var(--gold); font-weight: 800; }
        .news-shift-off{ color: #777; }
        .news-fallback{
          color: #888;
          font-size: 11px;
        }
        .overlay-badge-wrap{
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 10px;
        }
        .overlay-badge{
          border: 1px solid #333;
          background: #0b0b0b;
          padding: 8px;
        }
        .overlay-badge.is-on{
          border-color: rgba(229,192,123,0.65);
          background: rgba(229,192,123,0.08);
        }
        .overlay-badge.is-off{
          border-color: #2b2b2b;
          background: #090909;
        }
        .ov-k{
          color: #888;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.4px;
        }
        .ov-v{
          color: var(--gold);
          font-size: 12px;
          font-weight: 800;
          margin-top: 2px;
        }
        .ov-d{
          color: #bbb;
          font-size: 10px;
          margin-top: 3px;
        }
    

            .tab-btn { font-weight: 700; letter-spacing: 0.5px; padding: 8px 14px; }
            .tab-panel { }
            
            @media (max-width: 480px) {
              .decision-card,
              .structure-card {
                font-size: 12px;
                line-height: 1.4;
              }
            }
        

    /* =========================
       MOBILE LAYOUT v3 (iPhone 12 Pro Optimized)
       - Stack Order: Gauge -> Narrative -> Radar -> Archive -> Museum
       - Radar: 42vh limit
       - Museum: 22vh limit + Scroll
       - Calendar: One-line nav, touch-friendly
       ========================= */

    @media (max-width: 980px){
      .top-identity{
        font-size:10px;
        flex-wrap:wrap;
        text-align:center;
      }
      .onboarding-callout{
        margin:6px 8px 0 8px;
        padding:8px;
        flex-wrap:wrap;
      }
      .ob-title{ width:100%; }
      .ob-body{ width:100%; }

      body{
        overflow-y:auto !important;
        overflow-x:hidden !important;
      }

      /* STACK */
      .main-grid{
        display:flex !important;
        flex-direction:column !important;
        height:auto !important;
      }

      .panel{
        width:100% !important;
        overflow:visible !important;
      }

      /* ORDER */
      .gauge-panel{ order:1 !important; }
      .narrative-panel{ order:2 !important; }
      .radar-panel{ order:3 !important; }
      .cal-panel{ order:4 !important; }
      .museum-panel{ order:5 !important; }

      /* RADAR */
      #radar-svg-element{
        width:100% !important;
        height:auto !important;
        max-height:34vh !important;
        margin:0 auto !important;
        display:block !important;
      }

      /* CALENDAR */
      #cal-grid{
        display:grid !important;
        grid-template-columns: repeat(7, 1fr) !important;
        gap:2px !important;
      }

      .day-cell{
        aspect-ratio: 1 / 1 !important;
        font-size:11px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position: relative !important;
        overflow: visible !important;
      }

      /* MUSEUM */
      #m-list{
        max-height:22vh !important;
        overflow-y:auto !important;
      }

      /* GAUGE */
      .gauge-wrap{
        overflow:hidden !important;
        height:140px !important;
      }

      .risk-val{
        font-size:48px !important;
      }
    }

    /* 480px Extreme Optimization (Added per user request) */
    /* 480px Extreme Optimization (v2 - User Request) */
    @media (max-width: 480px){
      /* 1. Radar Optimization v2 (92vw) */
      #radar-svg-element {
        width: 100% !important;
        height: auto !important;
        max-width: 92vw !important;
        max-height: 92vw !important;
        margin: 0 auto !important;
        display: block !important;
      }

      /* 2. Gauge Optimization v2 (Scale 0.85) */
      .risk-gauge {
        transform: scale(0.85);
        transform-origin: top center;
      }
      /* Reduce wrapper height slightly to account for scaling */
      .gauge-wrap{ height: 130px !important; overflow: visible !important; }

      /* 3. Calendar Optimization v3 (34px Stable) */
      #cal-grid{
        margin-bottom: 10px !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 1px !important;
        width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        overflow: visible !important;
      }
      
      .day-cell{
        height: 34px !important; /* User Req: 34px fixed */
        min-height: 34px !important;
        border-width: 1px !important;
        font-size: 10px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: visible !important;
      }

      /* Calendar Container Fix */
      .cal-panel{
        height: auto !important;
        overflow: visible !important;
      }

      /* Global 480px Tweaks */
      .panel{ padding: 10px !important; }
      .cal-btn{ padding: 2px 4px !important; font-size: 9px !important; }
      .cal-input{ width: 34px !important; font-size: 9px !important; }
    }

    /* ============================================================
       TOAST NOTIFICATIONS
       ============================================================ */
    #toast-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }
    .toast {
      pointer-events: auto;
      padding: 10px 16px;
      border-radius: 2px;
      font-size: 12px;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      color: #fff;
      background: #1a1a1a;
      border: 1px solid #333;
      opacity: 0;
      transform: translateY(12px);
      animation: toastIn 0.3s ease forwards;
      max-width: 340px;
    }
    .toast.toast-error { border-left: 3px solid var(--red, #ff6b6b); }
    .toast.toast-info  { border-left: 3px solid var(--gold, #e5c07b); }
    .toast.toast-out {
      animation: toastOut 0.3s ease forwards;
    }
    @keyframes toastIn {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes toastOut {
      to { opacity: 0; transform: translateY(12px); }
    }

    /* ============================================================
       LOADING OVERLAY
       ============================================================ */
    #loading-overlay {
      position: fixed;
      inset: 0;
      background: #000;
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transition: opacity 0.4s ease;
    }
    #loading-overlay.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    .loading-spinner {
      width: 32px;
      height: 32px;
      border: 2px solid #333;
      border-top-color: var(--gold, #e5c07b);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .loading-text {
      margin-top: 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #888;
      letter-spacing: 1px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ============================================================
       UPGRADE CTA LINK
       ============================================================ */
    .upgrade-cta {
      display: inline-block;
      margin-top: 8px;
      color: var(--gold, #e5c07b);
      font-size: 11px;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      letter-spacing: 0.5px;
    }
    .upgrade-cta:hover {
      text-decoration: underline;
    }

    /* ============================================================
       MUSEUM PATTERN BADGES
       ============================================================ */
    .pattern-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 2px;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.5px;
    }
    .pattern-badge.pattern-system {
      background: rgba(255,60,60,0.15);
      color: #ff3c3c;
      border: 1px solid rgba(255,60,60,0.4);
    }
    .pattern-badge.pattern-liquidity {
      background: rgba(78,168,222,0.15);
      color: #4ea8de;
      border: 1px solid rgba(78,168,222,0.4);
    }
    .pattern-badge.pattern-policy {
      background: rgba(180,142,255,0.15);
      color: #b48eff;
      border: 1px solid rgba(180,142,255,0.4);
    }
    .pattern-badge.pattern-bubble {
      background: rgba(255,159,67,0.15);
      color: #ff9f43;
      border: 1px solid rgba(255,159,67,0.4);
    }
    .pattern-badge.pattern-sentiment {
      background: rgba(255,212,59,0.15);
      color: #ffd43b;
      border: 1px solid rgba(255,212,59,0.4);
    }
    .pattern-badge.pattern-default {
      background: rgba(229,192,123,0.15);
      color: var(--gold);
      border: 1px solid rgba(229,192,123,0.4);
    }

    /* ============================================================
       MUSEUM INSIGHT BOX (DISCUSSION TAB - L5)
       ============================================================ */
    .insight-box {
      border-left: 3px solid var(--red, #e06c75);
      background: rgba(224,108,117,0.06);
      padding: 10px 12px;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.6;
      color: #ff889d;
      word-break: keep-all;
    }

    /* ============================================================
       STRUCTURAL INSIGHT PANEL (Museum x Market AI Warning)
       ============================================================ */
    .insight-panel {
      border-bottom: 1px solid #222;
      padding: 8px 10px 10px;
      margin-bottom: 6px;
      border-left: 3px solid #444;
    }
    .insight-panel.insight-high { border-left-color: var(--red); background: rgba(255,51,51,0.04); }
    .insight-panel.insight-moderate { border-left-color: #FFD700; background: rgba(255,215,0,0.03); }
    .insight-panel.insight-low { border-left-color: #555; }

    .insight-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 6px;
    }
    .insight-level {
      font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
    }
    .insight-high .insight-level { color: var(--red); }
    .insight-moderate .insight-level { color: #FFD700; }
    .insight-low .insight-level { color: #888; }

    .insight-title {
      color: var(--gold); font-weight: 800; font-size: 10px; letter-spacing: 1px;
    }
    .insight-pattern {
      color: #ccc; font-size: 11px; font-weight: 800; margin-bottom: 6px;
    }
    .insight-score { color: #888; font-weight: 400; font-size: 10px; }

    .insight-text {
      color: #bbb; font-size: 10px; line-height: 1.5; margin-bottom: 8px;
      word-break: keep-all;
    }
    .insight-section-title {
      color: var(--gold); font-weight: 800; font-size: 9px; letter-spacing: 0.5px;
      margin-top: 6px; margin-bottom: 4px;
    }
    .insight-list {
      margin: 0 0 6px 0; padding-left: 14px;
      font-size: 10px; color: #aaa; line-height: 1.5;
    }
    .insight-list li { margin-bottom: 2px; }
    .insight-watch li { color: #d49; }

    .insight-case {
      font-size: 10px; color: #999; padding: 2px 0;
      display: flex; justify-content: space-between;
    }
    .insight-case span { color: #666; font-size: 9px; }

    .insight-lock {
      color: #666; font-size: 10px; text-align: center; margin-top: 4px;
    }

    /* ============================================================
       HISTORICAL ANALOG PANEL (Museum sidebar)
       ============================================================ */
    .analog-panel {
      border-bottom: 1px solid #222;
      padding: 8px 10px 10px;
      margin-bottom: 6px;
    }
    .analog-panel-title {
      color: #d49;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .analog-panel-pattern {
      color: #888;
      font-size: 10px;
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 8px;
    }
    .analog-item {
      display: block;
      padding: 4px 6px;
      margin-bottom: 2px;
      font-size: 10px;
      color: #ccc;
      cursor: pointer;
      border-left: 2px solid transparent;
      transition: border-color 0.15s;
    }
    .analog-item:hover {
      border-left-color: var(--gold);
      color: #fff;
    }
    .analog-item.ranked {
      padding: 5px 6px;
      margin-bottom: 4px;
      border-left: 2px solid #333;
    }
    .analog-item.ranked:hover { border-left-color: var(--gold); }
    .sim-score {
      font-size: 10px;
      font-weight: 700;
      color: var(--gold);
      white-space: nowrap;
    }

    /* ============================================================
       MUSEUM METADATA BLOCK
       ============================================================ */
    .crisis-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 12px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      color: #888;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid #222;
    }
    .crisis-meta span {
      color: #ccc;
    }