/* ========== CSS Variables & Reset ========== */
    :root {
      --bg-primary: #060a18;
      --bg-secondary: #0c1222;
      --bg-card: #111827;
      --bg-card-hover: #161f30;
      --bg-card-active: #1a2540;
      --border-color: #1e293b;
      --border-light: #2a3a52;
      --text-primary: #e8edf5;
      --text-secondary: #8896ab;
      --text-muted: #556275;
      --accent-cyan: #00d4ff;
      --accent-cyan-dim: rgba(0, 212, 255, 0.15);
      --accent-green: #00e676;
      --accent-green-dim: rgba(0, 230, 118, 0.15);
      --accent-red: #ff5252;
      --accent-red-dim: rgba(255, 82, 82, 0.15);
      --accent-orange: #ff9800;
      --accent-purple: #b388ff;
      --live-bg: rgba(255, 50, 80, 0.15);
      --live-border: rgba(255, 50, 80, 0.4);
      --live-text: #ff4d6a;
      --paper-bg: rgba(100, 180, 255, 0.12);
      --paper-border: rgba(100, 180, 255, 0.35);
      --paper-text: #64b4ff;
      --sidebar-width: 72px;
      --header-height: 56px;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
      --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--text-primary);
      overflow: hidden;
      height: 100vh;
      font-size: 13px;
      line-height: 1.5;
    }

    /* ========== Scrollbar ========== */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* ========== Layout ========== */
    .app-container {
      display: flex;
      height: 100vh;
      width: 100vw;
    }

    /* ========== Sidebar ========== */
    .sidebar {
      width: var(--sidebar-width);
      background: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 12px;
      flex-shrink: 0;
      z-index: 100;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 64px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 4px;
      position: relative;
      text-decoration: none;
    }

    .nav-item:hover {
      background: var(--bg-card-hover);
    }

    .nav-item.active {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(0, 150, 255, 0.08));
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.1), inset 0 0 20px rgba(0, 212, 255, 0.05);
      border: 1px solid rgba(0, 212, 255, 0.25);
    }

    .nav-item.active::before {
      content: '';
      position: absolute;
      left: -1px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 24px;
      background: var(--accent-cyan);
      border-radius: 0 3px 3px 0;
      box-shadow: 0 0 8px var(--accent-cyan);
    }

    .nav-icon {
      width: 22px;
      height: 22px;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--text-secondary);
      fill: none;
      stroke-width: 1.8;
      transition: stroke 0.2s;
    }

    .nav-item.active .nav-icon svg,
    .nav-item:hover .nav-icon svg {
      stroke: var(--accent-cyan);
    }

    .nav-label {
      font-size: 10.5px;
      color: var(--text-secondary);
      text-align: center;
      line-height: 1.2;
      transition: color 0.2s;
      max-width: 54px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-item.active .nav-label,
    .nav-item:hover .nav-label {
      color: var(--accent-cyan);
    }

    .nav-spacer {
      flex: 1;
    }

    /* ========== Main Area ========== */
    .main-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ========== Header ========== */
    .header {
      height: var(--header-height);
      min-height: var(--header-height);
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 16px;
      flex-shrink: 0;
    }

    .logo-area {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .logo-icon {
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #4facfe, #00f2fe);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .logo-text {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .logo-sub {
      font-size: 10px;
      color: var(--text-muted);
      letter-spacing: 1.5px;
      margin-left: 2px;
      text-transform: uppercase;
    }

    .mode-badge {
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .mode-badge.live {
      background: var(--live-bg);
      border: 1px solid var(--live-border);
      color: var(--live-text);
    }

    .mode-badge.live::before {
      content: '';
      width: 6px;
      height: 6px;
      background: var(--live-text);
      border-radius: 50%;
      animation: pulse-live 1.5s infinite;
    }

    .mode-badge.paper {
      background: var(--paper-bg);
      border: 1px solid var(--paper-border);
      color: var(--paper-text);
    }

    @keyframes pulse-live {
      0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--live-text); }
      50% { opacity: 0.4; box-shadow: none; }
    }

    .header-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--accent-green);
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      background: var(--accent-green);
      border-radius: 50%;
      animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }

    .header-info {
      font-size: 11.5px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .header-datetime {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    /* ========== Content Area ========== */
    .content-area {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 16px 20px 24px;
    }

    .page { display: none; }
    .page.active { display: block; animation: fadeIn 0.25s ease; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ========== Cards ========== */
    .card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 12px;
      position: relative;
      transition: border-color 0.2s;
    }

    .card:hover {
      border-color: var(--border-light);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .card-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent-cyan);
      font-weight: 600;
    }

    .card-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--accent-cyan-dim);
      color: var(--accent-cyan);
      font-weight: 500;
    }

    .card-subtitle {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .card-desc {
      font-size: 11.5px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* ========== Stats Grid ========== */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }

    .stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      transition: border-color 0.2s;
    }

    .stat-card:hover {
      border-color: var(--border-light);
    }

    .stat-label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .stat-value {
      font-size: 19px;
      font-weight: 700;
      font-family: var(--font-mono);
      color: var(--text-primary);
    }

    .stat-value.green { color: var(--accent-green); }
    .stat-value.red { color: var(--accent-red); }
    .stat-value.cyan { color: var(--accent-cyan); }

    .stat-sub {
      font-size: 10.5px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .stat-sub-value {
      font-size: 11px;
      color: var(--text-secondary);
    }

    /* ========== Two Column Layout ========== */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .three-col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }

    /* ========== Strategy Panel ========== */
    .strategy-panel {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), rgba(0, 100, 200, 0.02));
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      margin-bottom: 12px;
    }

    .strategy-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .strategy-name {
      font-size: 17px;
      font-weight: 700;
    }

    .strategy-tag {
      font-size: 10px;
      padding: 3px 10px;
      border-radius: 12px;
      background: var(--accent-cyan-dim);
      color: var(--accent-cyan);
      font-weight: 500;
    }

    .strategy-meta {
      display: flex;
      gap: 16px;
      margin-bottom: 14px;
      font-size: 11.5px;
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .meta-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-cyan);
    }

    .meta-dot.green { background: var(--accent-green); }

    .strategy-body {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .countdown-block {
      text-align: center;
    }

    .countdown-label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .countdown-value {
      font-size: 36px;
      font-weight: 800;
      font-family: var(--font-mono);
      color: var(--text-primary);
      line-height: 1;
    }

    .countdown-unit {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .prob-block {
      text-align: center;
    }

    .prob-label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .prob-value {
      font-size: 32px;
      font-weight: 800;
      font-family: var(--font-mono);
    }

    .prob-value.up { color: var(--accent-green); }
    .prob-value.down { color: var(--accent-red); }

    .prob-bar-container {
      margin-top: 8px;
      height: 6px;
      background: var(--bg-primary);
      border-radius: 3px;
      overflow: hidden;
    }

    .prob-bar {
      height: 100%;
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .prob-bar.up { background: linear-gradient(90deg, #00e676, #69f0ae); }
    .prob-bar.down { background: linear-gradient(90deg, #ff5252, #ff8a80); }

    .prob-source {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .decision-block {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px;
    }

    .decision-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent-purple);
      margin-bottom: 8px;
      font-weight: 600;
    }

    .decision-text {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
    }

    .decision-code {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    /* ========== Price Cards ========== */
    .price-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .price-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 12px 14px;
    }

    .price-label {
      font-size: 10.5px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .price-value {
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-mono);
    }

    .price-change {
      font-size: 13px;
      font-weight: 600;
      margin-top: 2px;
    }

    .price-change.negative { color: var(--accent-red); }
    .price-change.positive { color: var(--accent-green); }

    .price-id {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ========== Table ========== */
    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    thead th {
      text-align: left;
      padding: 8px 10px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
      white-space: nowrap;
      position: sticky;
      top: 0;
      background: var(--bg-card);
      z-index: 1;
    }

    tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid rgba(30, 41, 59, 0.5);
      white-space: nowrap;
      font-family: var(--font-mono);
      font-size: 11.5px;
    }

    tbody tr:hover {
      background: var(--bg-card-hover);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .badge-win {
      background: var(--accent-green-dim);
      color: var(--accent-green);
      border: 1px solid rgba(0, 230, 118, 0.25);
    }

    .badge-comp {
      background: rgba(255, 152, 0, 0.12);
      color: var(--accent-orange);
      border: 1px solid rgba(255, 152, 0, 0.25);
    }

    .badge-up {
      background: var(--accent-green-dim);
      color: var(--accent-green);
      border: 1px solid rgba(0, 230, 118, 0.25);
    }

    .badge-down {
      background: var(--accent-red-dim);
      color: var(--accent-red);
      border: 1px solid rgba(255, 82, 82, 0.25);
    }

    .badge-pending {
      background: rgba(136, 150, 171, 0.12);
      color: var(--text-secondary);
      border: 1px solid rgba(136, 150, 171, 0.2);
    }

    .badge-info {
      background: var(--accent-cyan-dim);
      color: var(--accent-cyan);
      border: 1px solid rgba(0, 212, 255, 0.2);
    }

    .badge-danger {
      background: var(--accent-red-dim);
      color: var(--accent-red);
      border: 1px solid rgba(255, 82, 82, 0.25);
    }

    /* ========== Calibration Chart ========== */
    .calibration-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 0;
    }

    .calib-label {
      width: 70px;
      font-size: 11px;
      color: var(--text-secondary);
      font-family: var(--font-mono);
    }

    .calib-bar-wrap {
      flex: 1;
      height: 18px;
      background: var(--bg-primary);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }

    .calib-bar {
      height: 100%;
      border-radius: 4px;
      display: flex;
      align-items: center;
      padding-left: 8px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      transition: width 0.6s ease;
      min-width: fit-content;
    }

    .calib-bar.expected {
      background: linear-gradient(90deg, #00bcd4, #26c6da);
    }

    .calib-bar.actual {
      background: linear-gradient(90deg, #4caf50, #81c784);
    }

    .calib-value {
      width: 55px;
      text-align: right;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--text-secondary);
    }

    .calib-count {
      width: 45px;
      text-align: right;
      font-size: 10px;
      color: var(--text-muted);
    }

    /* ========== Status Cards Grid (Run Status Page) ========== */
    .status-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 12px;
    }

    .status-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .status-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }

    .status-card-icon.cyan { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
    .status-card-icon.green { background: var(--accent-green-dim); color: var(--accent-green); }
    .status-card-icon.orange { background: rgba(255, 152, 0, 0.15); color: var(--accent-orange); }
    .status-card-icon.purple { background: rgba(179, 136, 255, 0.15); color: var(--accent-purple); }
    .status-card-icon.blue { background: rgba(66, 153, 225, 0.15); color: #4299e1; }
    .status-card-icon.red { background: var(--accent-red-dim); color: var(--accent-red); }

    .status-card-title {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .status-card-value {
      font-size: 20px;
      font-weight: 700;
      font-family: var(--font-mono);
    }

    .status-card-sub {
      font-size: 10.5px;
      color: var(--text-muted);
    }

    /* ========== Action Buttons ========== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: var(--radius-sm);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid;
      transition: all 0.2s;
      white-space: nowrap;
      font-family: var(--font-sans);
    }

    .btn-success {
      background: rgba(0, 230, 118, 0.1);
      border-color: rgba(0, 230, 118, 0.35);
      color: var(--accent-green);
    }

    .btn-success:hover {
      background: rgba(0, 230, 118, 0.2);
      border-color: rgba(0, 230, 118, 0.5);
    }

    .btn-danger {
      background: var(--accent-red-dim);
      border-color: rgba(255, 82, 82, 0.35);
      color: var(--accent-red);
    }

    .btn-danger:hover {
      background: rgba(255, 82, 82, 0.2);
      border-color: rgba(255, 82, 82, 0.5);
    }

    .btn-outline {
      background: transparent;
      border-color: var(--border-light);
      color: var(--text-secondary);
    }

    .btn-outline:hover {
      background: var(--bg-card-hover);
      border-color: var(--text-muted);
      color: var(--text-primary);
    }

    /* ========== Progress Bar ========== */
    .progress-section {
      margin-bottom: 12px;
    }

    .progress-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .progress-track {
      height: 40px;
      background: var(--bg-primary);
      border-radius: var(--radius-sm);
      overflow: hidden;
      position: relative;
      display: flex;
    }

    .progress-fill-up {
      height: 100%;
      background: linear-gradient(180deg, rgba(0, 230, 118, 0.3), rgba(0, 230, 118, 0.08));
      border-right: 2px solid var(--accent-green);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.5s;
    }

    .progress-fill-down {
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 82, 82, 0.3), rgba(255, 82, 82, 0.08));
      display: flex;
      align-items: center;
        justify-content: center;
      transition: width 0.5s;
    }

    .progress-center-line {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--border-light);
      z-index: 2;
    }

    .progress-stat {
      text-align: center;
    }

    .progress-stat-num {
      font-size: 28px;
      font-weight: 800;
      font-family: var(--font-mono);
    }

    .progress-stat-num.up { color: var(--accent-green); }
    .progress-stat-num.down { color: var(--accent-red); }

    .progress-stat-label {
      font-size: 10px;
      color: var(--text-secondary);
      margin-top: 2px;
    }

    .progress-stat-sub {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 1px;
    }

    /* ========== Ticker ========== */
    .ticker-strip {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 8px 14px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 20px;
      overflow-x: auto;
      font-family: var(--font-mono);
      font-size: 11.5px;
    }

    .ticker-item {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .ticker-symbol {
      color: var(--text-secondary);
      font-weight: 600;
    }

    .ticker-val { color: var(--text-primary); }
    .ticker-pct { font-weight: 600; }
    .ticker-pct.pos { color: var(--accent-green); }
    .ticker-pct.neg { color: var(--accent-red); }

    /* ========== Alert/Log ========== */
    .alert-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .alert-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      font-size: 11.5px;
    }

    .alert-severity {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    .alert-severity.critical {
      background: var(--accent-red-dim);
      color: var(--accent-red);
      border: 1px solid rgba(255, 82, 82, 0.3);
    }

    .alert-severity.info {
      background: rgba(66, 153, 225, 0.12);
      color: #4299e1;
      border: 1px solid rgba(66, 153, 225, 0.2);
    }

    .alert-severity.warning {
      background: rgba(255, 152, 0, 0.12);
      color: var(--accent-orange);
      border: 1px solid rgba(255, 152, 0, 0.2);
    }

    .alert-msg {
      color: var(--text-primary);
      flex: 1;
    }

    .alert-time {
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 10.5px;
      flex-shrink: 0;
    }

    /* ========== Tabs ========== */
    .tab-group {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 0;
    }

    .tab-btn {
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      background: transparent;
      border: none;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.2s;
      margin-bottom: -1px;
    }

    .tab-btn:hover {
      color: var(--text-primary);
    }

    .tab-btn.active {
      color: var(--accent-cyan);
      border-bottom-color: var(--accent-cyan);
    }

    /* ========== Responsive ========== */
    @media (max-width: 1200px) {
      .three-col { grid-template-columns: 1fr 1fr; }
      .strategy-body { grid-template-columns: 1fr 1fr; }
      .status-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 900px) {
      .two-col { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ========== Glow Effects ========== */
    .glow-cyan {
      box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
    }

    .glow-green {
      box-shadow: 0 0 16px rgba(0, 230, 118, 0.15);
    }

    .glow-red {
      box-shadow: 0 0 16px rgba(255, 82, 82, 0.15);
    }

    /* ========== Animation Utilities ========== */
    .animate-pulse { animation: pulse-dot 2s infinite; }
    .animate-flicker { animation: flicker 3s infinite; }

    @keyframes flicker {
      0%, 100% { opacity: 1; }
      92% { opacity: 1; }
      93% { opacity: 0.8; }
      94% { opacity: 1; }
      96% { opacity: 0.9; }
      97% { opacity: 1; }
    }