:root {
      --bg: #06111d;
      --bg2: #081522;
      --panel: rgba(9, 22, 38, 0.82);
      --panel-strong: rgba(11, 28, 47, 0.95);
      --panel-soft: rgba(9, 23, 38, 0.58);
      --border: rgba(92, 181, 255, 0.16);
      --border-strong: rgba(92, 181, 255, 0.28);
      --text: #edf7ff;
      --muted: #8fb6d2;
      --accent: #39d2ff;
      --accent2: #55ffc7;
      --warn: #ffb347;
      --danger: #ff6b6b;
      --ok: #55ffc7;
      --shadow: 0 16px 34px rgba(0,0,0,.26);
      --radius-xl: 18px;
      --radius-lg: 14px;
      --radius-md: 10px;
      --radius-sm: 8px;
      --sticky-h: 84px;
      --content-max: 1400px;
      --content-min: 1080px;
      --gutter: clamp(14px, 2vw, 28px);
      --section-pad: clamp(14px, 1.4vw, 22px);
      --card-gap: clamp(10px, 1vw, 16px);
      --hero-title-size: clamp(24px, 2.2vw, 32px);
      --hero-logo-size: clamp(132px, 15vw, 200px);
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body {
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 0%, rgba(50,130,220,.20), transparent 26%),
        radial-gradient(circle at 95% 10%, rgba(36,236,255,.10), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(55,150,255,.07), transparent 24%),
        linear-gradient(180deg, #05101b 0%, #081421 44%, #06111d 100%);
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .14;
      mask-image: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04));
    }

    .shell {
      width: min(var(--content-max), calc(100vw - (var(--gutter) * 2)));
      min-width: min(var(--content-min), calc(100vw - (var(--gutter) * 2)));
      margin: 14px auto 24px;
      position: relative;
      z-index: 1;
    }

    .glass {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(14, 34, 57, .96), rgba(8, 20, 34, .98));
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow), inset 0 0 24px rgba(0, 170, 255, .035);
      backdrop-filter: blur(12px);
    }
    .glass::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,.03), transparent 34%, transparent 70%, rgba(85,255,199,.025));
    }

    .hero {
      padding: var(--section-pad) calc(var(--section-pad) + 2px) calc(var(--section-pad) - 2px);
      border-radius: var(--radius-xl);
      min-height: 146px;
      display: block;
      margin-bottom: 16px;
    }
    .hero::before {
      content: "";
      position: absolute;
      width: 420px;
      height: 420px;
      right: -120px;
      top: -180px;
      background: radial-gradient(circle, rgba(57,210,255,.22), transparent 58%);
      pointer-events: none;
    }
    .hero-left { display:flex; flex-direction:column; justify-content:space-between; min-width:0; position:relative; z-index:1; width:100%; margin:0 auto; }
    .hero-topline { display:grid; grid-template-columns: minmax(0, 1fr) clamp(132px, 15vw, 200px); align-items:center; gap:18px; }
    .hero-brand { display:flex; align-items:center; gap:14px; min-width:0; flex:1; overflow:hidden; }
    .hero-title-wrap { min-width:0; }
    .hero-logo {
      width: 56px; height: 56px; border-radius: 14px; flex:none;
      background: radial-gradient(circle at 30% 30%, rgba(85,255,199,.34), rgba(57,210,255,.26) 45%, rgba(57,210,255,.08));
      box-shadow: 0 0 28px rgba(57,210,255,.18);
      position: relative;
    }
    .hero-logo::before, .hero-logo::after { content:""; position:absolute; inset: 10px; border-radius: 10px; border:1px solid rgba(255,255,255,.14); }
    .hero-logo::after { inset:17px; border-color: rgba(85,255,199,.40); }
    .hero-label { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8ac8ea; }
    .hero-title { margin-top: 4px; font-size: var(--hero-title-size); font-weight: 800; color: #f7fcff; letter-spacing: .3px; line-height: 1.18; word-break: break-word; }
    .hero-title .accent-red { color: #ff5b5b; text-shadow: 0 0 12px rgba(255,91,91,.22); }
    .hero-subtitle { display:none; }
    .hero-meta { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px; margin-top: 14px; }
    .meta-chip {
      display:flex; align-items:center; gap:8px; min-height: 34px; padding: 10px 12px; border-radius: 999px;
      background: rgba(10, 24, 39, .54); border:1px solid rgba(92,181,255,.12); color:#dff5ff; font-size:13px; min-width:0;
    }
    .meta-chip strong { color:#f8fcff; font-weight:700; }
    .status-pill {
      display:inline-flex; align-items:center; gap:8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
      font-size: 13px; font-weight: 700; color: #dffff7;
      background: rgba(85,255,199,.08); border:1px solid rgba(85,255,199,.22); white-space: nowrap;
    }
    .status-pill.warn { color:#fff4e2; background:rgba(255,179,71,.1); border-color:rgba(255,179,71,.24); }
    .status-pill.danger { color:#ffe9e9; background:rgba(255,107,107,.1); border-color:rgba(255,107,107,.24); }
    .dot { width:9px; height:9px; border-radius:999px; background:var(--ok); box-shadow:0 0 8px rgba(85,255,199,.65); flex:none; }
    .dot.warn { background:var(--warn); box-shadow:0 0 8px rgba(255,179,71,.55); }
    .dot.danger { background:var(--danger); box-shadow:0 0 8px rgba(255,107,107,.55); }
    .dot.offline { background:#7f91a3; box-shadow:none; }

    .hero-side-logo {
      position: relative;
      flex: none;
      width: var(--hero-logo-size);
      height: clamp(84px, 9vw, 120px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px 4px;
      border-radius: 18px;
      background: transparent;
      border: 0;
      box-shadow: none;
      overflow: visible;
      isolation: isolate;
    }
    .hero-side-logo::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 150px;
      height: 150px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(57,210,255,.20) 0%, rgba(57,210,255,.10) 34%, rgba(57,210,255,0) 72%);
      filter: blur(10px);
      opacity: .82;
      pointer-events: none;
      animation: logoBreath 3.6s ease-in-out infinite;
      z-index: 0;
    }
    .hero-side-logo::after {
      content: "";
      position: absolute;
      inset: 14px 26px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.10);
      opacity: .35;
      pointer-events: none;
      animation: logoFloat 4.4s ease-in-out infinite;
      z-index: 0;
    }
    .hero-side-logo img {
      position: relative;
      z-index: 1;
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      opacity: .9;
      transform: scale(1.08);
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)) drop-shadow(0 0 14px rgba(57,210,255,.18));
      animation: logoFloat 4.4s ease-in-out infinite;
    }
    @keyframes logoBreath {
      0%, 100% { transform: translate(-50%, -50%) scale(.94); opacity: .55; }
      50% { transform: translate(-50%, -50%) scale(1.08); opacity: .95; }
    }
    @keyframes logoFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    .hero-right { display:none; }

    .sticky-placeholder { display:none; }
    .sticky-wrap { position: sticky; top: 0; z-index: 90; margin-bottom: 12px; width:100%; margin-left:auto; margin-right:auto; }
    .sticky-panel { padding: 10px var(--section-pad); display:block; width:100%; box-shadow: 0 20px 36px rgba(0,0,0,.22), inset 0 0 24px rgba(0,170,255,.03); }
    .sticky-panel::before { content:""; position:absolute; inset:0; backdrop-filter: blur(16px); pointer-events:none; }
    .sticky-main { position:relative; z-index:1; display:grid; grid-template-columns: 160px 124px 96px minmax(232px, 1fr); gap:6px; align-items:end; min-width:0; width:100%; margin:0 auto; }
    .sticky-group { display:contents; }
    .field { display:flex; flex-direction:column; gap:4px; min-width:0; }
    .field label { font-size:10px; color:var(--muted); padding-left:2px; letter-spacing:.2px; }
    .select-shell { position:relative; height: 36px; border-radius: 10px; border:1px solid rgba(92,181,255,.24); background: linear-gradient(180deg, rgba(11,27,45,.98), rgba(7,20,34,.98)); overflow:hidden; }
    .select-shell::after { content:""; position:absolute; right:11px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:2px solid #9fd8ff; border-bottom:2px solid #9fd8ff; transform:rotate(45deg); pointer-events:none; opacity:.9; }
    .field select, .field input, .select-shell select { width:100%; height:100%; border:0; outline:none; background:transparent; color:var(--text); padding:0 22px 0 10px; font-size:12px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:none !important; box-shadow:none; }
    .select-shell select::-ms-expand { display:none; }
    .select-shell select { position:relative; z-index:1; border-radius:0; }
    .field input { padding-right: 14px; }
    .field select option { background:#0b1b2d; color:#eaf6ff; }
    .time-tabs { display:grid; grid-template-columns: repeat(5, minmax(40px, 42px)); gap:4px; justify-content:end; align-self:end; min-width:0; }
    .time-tab { height:34px; border-radius:10px; border:1px solid rgba(92,181,255,.18); background: rgba(8,20,34,.72); color:#a9cfe6; font-size:10px; font-weight:700; cursor:pointer; transition: all .14s ease; padding:0 1px; letter-spacing:-.1px; }
    .time-tab.active { color:#f3fbff; background: linear-gradient(135deg, rgba(57,210,255,.18), rgba(85,255,199,.10)); border-color: rgba(57,210,255,.28); box-shadow: inset 0 0 8px rgba(57,210,255,.04); }
    .sticky-actions { display:none; }
    .btn {
      height: 46px; border-radius: 12px; border:1px solid rgba(92,181,255,.20); background: rgba(8,20,34,.72); color:#dff4ff;
      font-size:13px; font-weight:700; padding:0 16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
    }
    .btn.primary { background: linear-gradient(135deg, rgba(57,210,255,.18), rgba(85,255,199,.12)); border-color: rgba(57,210,255,.28); color:#f4fbff; }
    .btn.ghost { background: rgba(9,23,38,.6); }

    .section { width:100%; margin: 0 auto 12px; }
    
    .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding: var(--section-pad) var(--section-pad) 10px; border-bottom:1px solid rgba(92,181,255,.08); position:relative; z-index:1; width:100%; margin:0 auto; }

    .section-title { font-size:17px; font-weight:800; color:#eef9ff; letter-spacing:.2px; }
    .section-desc { display:none; }
    .section-tag { padding: 6px 10px; border-radius:999px; border:1px solid rgba(57,210,255,.14); background: rgba(57,210,255,.08); font-size:11px; color:#d8f2ff; white-space:nowrap; }
    .section-body { padding: var(--section-pad) var(--section-pad) calc(var(--section-pad) + 2px); position:relative; z-index:1; width:100%; margin:0 auto; }
    .summary-box { padding: 14px 16px; border-radius: 12px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.12); font-size:13px; line-height:1.7; color:#ddf3ff; }

    .status-layout { display:flex; flex-direction:column; gap:18px; }

    .runtime-top { display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
    .runtime-range .range-card { margin-top:0; }
    .panel-block { padding:12px 14px; border-radius:12px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.12); min-width:0; }
    .panel-block-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
    .panel-block-title strong { font-size:13px; color:#eef9ff; }
    .panel-block-title span { font-size:11px; color:var(--muted); }
    .hidden-runtime-support { display:none !important; }
    .loading-inline { min-height:18px; font-size:12px; color:#8fdcff; }
    .metrics-grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--card-gap); }
    .status-dual { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); align-items:start; }
    .scroll-list { max-height: 224px; overflow:auto; padding-right: 2px; }
    .scroll-list.compact { max-height: 224px; }
    .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
    .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(113, 180, 224, .28); border-radius: 999px; }
    .scrollbar-thin::-webkit-scrollbar-track { background: rgba(8,20,34,.24); border-radius: 999px; }
    .metric-card { min-height: 78px; padding: 11px 13px; border-radius: 12px; background: rgba(9,23,38,.65); border:1px solid rgba(92,181,255,.14); display:flex; flex-direction:column; justify-content:center; gap:6px; }
    .metric-label { font-size:10px; color:var(--muted); }
    .metric-value { font-size: 20px; font-weight:800; line-height:1.15; color:#f4fbff; word-break:break-word; }
    .range-card { padding: 10px 12px; border-radius: 12px; background: rgba(9,22,38,.55); border:1px solid rgba(92,181,255,.16); display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .range-label { font-size:11px; color:var(--muted); white-space:nowrap; }
    .range-value { flex:1; min-width:0; font-size:12px; color:#dff6ff; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; }
    .range-meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; width:100%; min-width:0; }
    .range-timebox { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(8,20,34,.42); border:1px solid rgba(92,181,255,.10); min-width: 0; max-width: 100%; }
    .range-timebox .range-kicker { flex:none; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#8fb6d2; opacity:.9; padding:3px 7px; border-radius:999px; background:rgba(57,210,255,.08); border:1px solid rgba(57,210,255,.12); }
    .range-timebox .range-main { font-size:12px; font-weight:700; color:#f2fbff; letter-spacing:.1px; white-space:nowrap; }
    .range-timebox .range-sub { display:none; }
    .range-divider { width:12px; height:1px; background:linear-gradient(90deg, rgba(92,181,255,.08), rgba(92,181,255,.42), rgba(92,181,255,.08)); }
    .range-duration { position:relative; display:inline-flex; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; background:linear-gradient(135deg, rgba(57,210,255,.10), rgba(85,255,199,.08)); border:1px solid rgba(57,210,255,.16); color:#e5f8ff; font-size:12px; font-weight:700; box-shadow: inset 0 0 12px rgba(57,210,255,.05); }
    .range-duration::before { content:'◷'; font-size:12px; color:#9fe2ff; }
    .list-block { display:flex; flex-direction:column; gap:10px; }
    .alert-item { display:flex; align-items:flex-start; gap:8px; padding: 8px 10px; border-radius: 10px; background: rgba(9,23,38,.62); border:1px solid rgba(92,181,255,.12); }
    .alert-item.warn { border-color: rgba(255,179,71,.18); background: rgba(255,179,71,.06); }
    .alert-item.danger { border-color: rgba(255,107,107,.20); background: rgba(255,107,107,.06); }
    .alert-bullet { width:8px; height:8px; margin-top:6px; border-radius:999px; background:var(--accent); box-shadow:0 0 8px rgba(57,210,255,.45); flex:none; }
    .alert-item.warn .alert-bullet { background:var(--warn); box-shadow:0 0 8px rgba(255,179,71,.45); }
    .alert-item.danger .alert-bullet { background:var(--danger); box-shadow:0 0 8px rgba(255,107,107,.45); }
    .alert-text { font-size:12px; line-height:1.45; color:#e7f5ff; }
    .timeline-item { display:grid; grid-template-columns: 146px minmax(0,1fr); gap: 14px; align-items:center; padding: 8px 0; border-bottom: 1px dashed rgba(92,181,255,.18); }
    .timeline-item:last-child { border-bottom: 0; }
    .timeline-time { font-size:11px; color:#8fb6d2; white-space:nowrap; line-height:1.2; font-weight:600; letter-spacing:.2px; }
    .timeline-content { min-width:0; color:#def3ff; font-size:12px; line-height:1.45; }
    .timeline-content::before { content:none; }

    .chart-grid.two { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
    .chart-grid.one { display:grid; grid-template-columns: 1fr; gap: var(--card-gap); }
    .chart-card { padding: 12px; border-radius: 12px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.12); min-width:0; }
    .chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 8px; }
    .chart-title { font-size:14px; font-weight:800; color:#eef9ff; }
    .chart-desc { display:none; }
    .chart-tag { flex:none; padding: 5px 9px; border-radius:999px; font-size:10px; color:#d9f4ff; background: rgba(57,210,255,.08); border:1px solid rgba(57,210,255,.14); }
    .chart-box { width:100%; height: clamp(236px, 24vw, 256px); border-radius: 10px; background: rgba(8,20,34,.36); }
    .chart-box.tall { height: clamp(300px, 36vw, 360px); }
    .chart-box.gas { height: clamp(220px, 22vw, 236px); }
    .chart-box.gauge { height: clamp(164px, 16vw, 172px); }
    .chart-box.is-idle { display:flex; align-items:center; justify-content:center; border:1px dashed rgba(92,181,255,.14); color:#84b3cf; font-size:12px; }

    .dashboard-cockpit { display:grid; grid-template-columns: minmax(240px, .92fr) minmax(360px, 1.2fr) minmax(240px, .92fr); gap: var(--card-gap); align-items:stretch; }
    .gauge-stack { display:grid; grid-template-columns: 1fr; gap: var(--card-gap); }
    .gauge-card { padding:12px; border-radius:12px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.12); min-width:0; position:relative; overflow:hidden; }
    .gauge-card::after { content:""; position:absolute; inset:auto -30px -34px auto; width:112px; height:112px; border-radius:50%; background: radial-gradient(circle, rgba(57,210,255,.10), transparent 68%); pointer-events:none; }
    .gauge-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
    .gauge-title { font-size:13px; font-weight:800; color:#eef9ff; }
    .gauge-subtitle { display:none; }
    .gauge-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; flex-wrap:wrap; }
    .gauge-chip { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 8px; border-radius:999px; font-size:10px; color:#dff5ff; background: rgba(10,24,39,.54); border:1px solid rgba(92,181,255,.12); }
    .gauge-chip strong { color:#f7fcff; font-weight:700; }
    .cockpit-core { padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(9,23,38,.72), rgba(7,18,31,.86)); border:1px solid rgba(92,181,255,.14); position:relative; overflow:hidden; }
    .cockpit-core::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 35%, rgba(57,210,255,.16), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); pointer-events:none; }
    .cockpit-core::after { content:""; position:absolute; left:50%; top:50%; width:68%; height:68%; transform:translate(-50%, -50%); border-radius:50%; border:1px dashed rgba(92,181,255,.10); box-shadow: inset 0 0 44px rgba(57,210,255,.05); pointer-events:none; }
    .cockpit-head { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
    .cockpit-title { font-size:14px; font-weight:800; color:#eef9ff; }
    .cockpit-subtitle { display:none; }
    .cockpit-meta { position:relative; z-index:1; display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
    .cockpit-pill { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:0 9px; border-radius:999px; font-size:10px; color:#ddf5ff; background:rgba(10,24,39,.56); border:1px solid rgba(92,181,255,.12); }
    .cockpit-pill strong { color:#f7fcff; font-weight:700; }
    .chart-box.cockpit { height: 316px; background: transparent; }
    .cockpit-kpi-row { position:relative; z-index:1; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; margin-top:8px; }
    .cockpit-kpi { padding:8px 10px; border-radius:10px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.10); min-width:0; position:relative; z-index:2; }
    .cockpit-kpi-label { font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#89afca; }
    .cockpit-kpi-value { margin-top:4px; font-size:15px; font-weight:800; color:#f4fbff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .cockpit-kpi-sub { display:none; }
    .cockpit-kpi[data-metric] { cursor: help; position: relative; }
    .cockpit-kpi[data-metric]:hover { border-color: rgba(92,181,255,.22); box-shadow: inset 0 0 16px rgba(57,210,255,.05); }
    .hub-metric-tooltip { position: fixed; left: 0; top: 0; z-index: 9999; min-width: 220px; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: rgba(7,18,31,.96); border: 1px solid rgba(92,181,255,.22); box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 0 18px rgba(57,210,255,.04); color: #eaf7ff; font-size: 12px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translate3d(12px, 12px, 0); transition: opacity .12s ease; backdrop-filter: blur(10px); }
    .hub-metric-tooltip.show { opacity: 1; }
    .hub-metric-tooltip strong { display:block; margin-bottom: 4px; font-size: 12px; color:#f5fbff; }
    .hub-metric-tooltip .formula { display:block; margin-top: 5px; color:#9dd6f5; font-size: 11px; }

    .threshold-panel { display:none; }

    .footer-note { margin-top: 10px; text-align:center; font-size:11px; color: rgba(163,199,225,.78); letter-spacing:.4px; }
    .hidden-select-shell { display:block; }

    .site-current-badge {
      min-height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      background: rgba(9, 23, 38, .62);
      border:1px solid rgba(92,181,255,.16);
      color:#f4fbff;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .site-current-badge small {
      margin-left: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .quick-search-shell { display:none; }
    .quick-search-shell input { display:none; }
    .quick-search-shell input::placeholder { color:#7fa8c5; }
    .top-group-tabs { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; overflow:visible; }
    .top-group-tabs .tab-btn {
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      font-size: 12px;
      white-space: nowrap;
      flex: 0 0 32px;
      border-radius: 999px;
      justify-content: center;
      text-align: center;
      line-height: 32px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .top-group-tabs .tab-btn[data-group="all"] {
      width: auto;
      min-width: 42px;
      flex: 0 0 auto;
      padding: 0 8px;
    }
    .site-select-shell { max-width: 118px; }
    .site-select-shell select { padding-left: 8px; padding-right: 20px; }
    .site-select-shell select option:disabled { color: #6f87a0; }
    .site-select-shell select option[data-missing="1"] { color: #6f87a0; }
    .bucket-card.is-disabled {
      opacity: .82;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(.18);
      background: rgba(82, 93, 108, .42);
      border-color: rgba(122,148,170,.22);
      box-shadow: none;
    }
    .bucket-card.is-disabled::before {
      background: linear-gradient(90deg, rgba(122,148,170,.92), rgba(122,148,170,.46));
    }
    .bucket-card.is-disabled:hover {
      transform: none;
      border-color: rgba(122,148,170,.22);
      box-shadow: none;
    }
    .bucket-card.is-disabled .bucket-id,
    .bucket-card.is-disabled .bucket-status,
    .bucket-card.is-disabled .bucket-metric-value,
    .bucket-card.is-disabled .bucket-group-label,
    .bucket-card.is-disabled .bucket-metric-label {
      color: #8ea2b5;
    }

    .bucket-overview-top {
      display:grid;
      grid-template-columns: minmax(320px, 1.1fr) minmax(240px, .9fr);
      gap: 12px;
      align-items: start;
      margin-bottom: 14px;
    }
    .toolbar-stack { display:flex; flex-direction:column; gap:12px; min-width:0; }
    .tab-row, .chip-row {
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      min-width:0;
    }
    .tab-btn, .filter-chip, .site-chip {
      border:1px solid rgba(92,181,255,.16);
      background: rgba(8,20,34,.72);
      color:#cfe9f8;
      border-radius: 999px;
      min-height: 34px;
      padding: 0 12px;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
      transition: all .14s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .tab-btn:hover, .filter-chip:hover, .site-chip:hover {
      border-color: rgba(92,181,255,.28);
      color:#effaff;
    }
    .tab-btn.active, .filter-chip.active, .site-chip.active {
      color:#f4fbff;
      background: linear-gradient(135deg, rgba(57,210,255,.18), rgba(85,255,199,.10));
      border-color: rgba(57,210,255,.28);
      box-shadow: inset 0 0 10px rgba(57,210,255,.05);
    }
    .site-chip.ghost {
      background: rgba(9,23,38,.48);
      color:#89afca;
      border-style:dashed;
      cursor:default;
    }
    .overview-summary {
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap:10px;
    }
    .overview-stat {
      padding: 12px 13px;
      border-radius: 12px;
      background: rgba(9,23,38,.58);
      border:1px solid rgba(92,181,255,.12);
      min-height: 72px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
    }
    .overview-stat-label {
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.6px;
    }
    .overview-stat-value {
      font-size:20px;
      font-weight:800;
      color:#f4fbff;
      line-height:1.1;
    }
    .overview-stat-sub {
      font-size:11px;
      color:#9ec5df;
    }
    .site-chip .chip-star {
      font-size:12px;
      color:#ffd978;
      line-height:1;
    }
    .bucket-grid {
      display:grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 8px;
    }
    .bucket-card {
      position:relative;
      padding: 9px 10px;
      border-radius: 12px;
      background: rgba(9,23,38,.62);
      border:1px solid rgba(92,181,255,.12);
      display:flex;
      flex-direction:column;
      gap:6px;
      min-height: 84px;
      cursor:pointer;
      transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
      overflow:hidden;
    }
    .bucket-card::before {
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:3px;
      background: var(--card-accent, rgba(57,210,255,.72));
      opacity:.95;
    }
    .bucket-card:hover {
      transform: translateY(-2px);
      border-color: rgba(92,181,255,.24);
      box-shadow: 0 12px 26px rgba(0,0,0,.18), inset 0 0 20px rgba(57,210,255,.035);
    }
    .bucket-card.active {
      border-color: rgba(57,210,255,.34);
      box-shadow: 0 12px 28px rgba(0,0,0,.20), inset 0 0 22px rgba(57,210,255,.06);
    }
    .bucket-card.status-ok { --card-accent: linear-gradient(90deg, rgba(85,255,199,.9), rgba(57,210,255,.55)); }
    .bucket-card.status-warn { --card-accent: linear-gradient(90deg, rgba(255,179,71,.92), rgba(255,221,128,.45)); }
    .bucket-card.status-danger { --card-accent: linear-gradient(90deg, rgba(255,107,107,.92), rgba(255,150,150,.45)); }
    .bucket-card.status-offline { --card-accent: linear-gradient(90deg, rgba(122,148,170,.86), rgba(122,148,170,.35)); }
    .bucket-card.is-favorite .bucket-id::after {
      content: "★";
      margin-left: 6px;
      font-size: 12px;
      color:#ffd978;
    }
    .bucket-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .bucket-id {
      font-size: 17px;
      font-weight: 800;
      color:#f4fbff;
      line-height:1.1;
    }
    .bucket-group-label {
      display:none;
    }
    .bucket-fav {
      flex:none;
      width:24px;
      height:24px;
      border-radius:999px;
      border:1px solid rgba(92,181,255,.12);
      background: rgba(8,20,34,.72);
      color:#7fa8c5;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition: all .14s ease;
    }
    .bucket-fav:hover { color:#f4fbff; border-color: rgba(92,181,255,.24); }
    .bucket-fav.active { color:#ffd978; border-color: rgba(255,217,120,.28); }
    .bucket-status {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0;
      width: 18px;
      min-width: 18px;
      height: 18px;
      min-height: 18px;
      padding: 0;
      border-radius:999px;
      background: rgba(8,20,34,.54);
      border:1px solid rgba(92,181,255,.10);
      color:#e6f8ff;
      flex:none;
    }
    .bucket-status span:last-child { display:none; }
    .bucket-status .dot { width:8px; height:8px; }
    .bucket-metrics {
      display:grid;
      grid-template-columns: 1fr;
      gap:6px;
      margin-top:auto;
    }
    .bucket-metric {
      padding: 6px 8px;
      border-radius: 9px;
      background: rgba(8,20,34,.46);
      border:1px solid rgba(92,181,255,.08);
      min-width:0;
    }
    .bucket-metric-label {
      display:none;
    }
    .bucket-metric-value {
      margin-top:0;
      font-size:12px;
      font-weight:700;
      color:#f2fbff;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .bucket-loading {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:120px;
      border-radius:12px;
      border:1px dashed rgba(92,181,255,.16);
      color:#8fb6d2;
      font-size:13px;
    }
    .empty-state {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:120px;
      border-radius:12px;
      background: rgba(9,23,38,.45);
      border:1px dashed rgba(92,181,255,.14);
      color:#8fb6d2;
      font-size:13px;
      text-align:center;
      padding: 16px;
    }

    
    .system-status-dual { margin-bottom: 0; }
    .runtime-top { margin-bottom: 16px; }
    .dashboard-cockpit { width:100%; margin:0 auto; grid-template-columns: minmax(220px,.92fr) minmax(420px,1.28fr) minmax(220px,.92fr); }
    .gauge-stack { align-content:start; }
    .cockpit-core { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
    .cockpit-head { width:100%; justify-content:center; }
    .cockpit-head .chart-tag { position:absolute; right:0; top:0; }
    .cockpit-title { text-align:center; width:100%; }
    .cockpit-meta.centered { justify-content:center; width:100%; margin-top:10px; }
    .cockpit-meta.centered .cockpit-pill { justify-content:center; min-width: 170px; }
    .cockpit-kpi-row.centered { width:100%; max-width:760px; margin:10px auto 0; justify-content:center; }
    .cockpit-kpi-row.centered .cockpit-kpi { text-align:center; }
    .cockpit-kpi-row.centered .cockpit-kpi-value,
    .cockpit-kpi-row.centered .cockpit-kpi-sub,
    .cockpit-kpi-row.centered .cockpit-kpi-label { text-align:center; }
    .cockpit-range-row { width:100%; display:flex; justify-content:center; align-items:center; margin-top:12px; }
    .cockpit-range-row .range-meta { justify-content:center; flex-wrap:wrap; gap:10px; }
    .cockpit-range-row .range-timebox { background:rgba(8,20,34,.56); border-color:rgba(92,181,255,.16); box-shadow: inset 0 0 18px rgba(57,210,255,.04); }
    .cockpit-range-row .range-duration { font-size:12px; }
    .status-strip, .status-mini-card { display:none !important; }

@media (max-width: 1280px) {
      :root {
        --content-min: 1000px;
        --section-pad: 16px;
        --card-gap: 10px;
      }
      .hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .sticky-main { grid-template-columns: 160px 124px 96px minmax(232px, 1fr); }
      .time-tabs { grid-template-columns: repeat(5, minmax(38px, 40px)); gap: 4px; justify-content:end; }
      .time-tab { font-size: 10px; }
      .metric-card,
      .chart-card,
      .gauge-card,
      .panel-block,
      .cockpit-core { padding: 10px 11px; }
      .metric-value { font-size: 18px; }
      .dashboard-cockpit { grid-template-columns: minmax(170px, .82fr) minmax(300px, 1.08fr) minmax(170px, .82fr); }
      .cockpit-kpi-row { gap: 6px; }
      .cockpit-kpi { padding: 7px 8px; }
      .cockpit-kpi-value { font-size: 14px; }
      .chart-box { height: clamp(220px, 24vw, 256px); }
      .chart-box.tall { height: clamp(300px, 34vw, 360px); }
      .chart-box.cockpit { height: clamp(280px, 30vw, 320px); }
      .chart-box.gas { height: clamp(210px, 22vw, 236px); }
      .bucket-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1140px) {
      :root {
        --content-min: 980px;
        --gutter: 12px;
        --section-pad: 14px;
        --card-gap: 8px;
        --hero-title-size: clamp(22px, 2.1vw, 28px);
        --hero-logo-size: 116px;
      }
      .shell { width: min(var(--content-max), calc(100vw - 24px)); }
      .hero-topline { grid-template-columns: minmax(0, 1fr) 116px; gap: 12px; }
      .hero-brand { gap: 10px; }
      .hero-logo { width: 48px; height: 48px; }
      .hero-label { font-size: 11px; }
      .hero-meta { gap: 8px; }
      .meta-chip { padding: 8px 10px; font-size: 12px; }
      .sticky-panel { padding: 8px 12px; }
      .sticky-main { grid-template-columns: 154px 118px 92px minmax(216px, 1fr); gap: 6px; }
      .sticky-group { gap: 8px; }
      .time-tabs { gap: 3px; }
      .time-tab { height: 34px; font-size: 10px; padding: 0 1px; }
      .field label, .metric-label, .cockpit-kpi-label { font-size: 10px; }
      .field select, .field input { font-size: 12px; }
      .metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .metric-card { min-height: 70px; padding: 9px 10px; }
      .metric-value { font-size: 17px; }
      .status-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-cockpit { grid-template-columns: minmax(155px, .78fr) minmax(280px, 1.02fr) minmax(155px, .78fr); gap: 8px; }
      .gauge-head, .cockpit-head, .chart-head { gap: 8px; }
      .gauge-title, .chart-title, .cockpit-title { font-size: 13px; }
      .gauge-chip, .cockpit-pill, .chart-tag, .section-tag { font-size: 10px; }
      .gauge-foot, .cockpit-meta { gap: 6px; }
      .cockpit-kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
      .cockpit-kpi-value { font-size: 13px; }
      .chart-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .timeline-item { grid-template-columns: 124px minmax(0,1fr); gap: 10px; }
      .bucket-overview-top { grid-template-columns: 1fr; }
      .bucket-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    @media (max-width: 960px) {
      :root {
        --content-min: 0px;
      }
      .hero-topline { grid-template-columns: minmax(0, 1fr) 104px; }
      .hero-meta { grid-template-columns: 1fr; }
      .sticky-main { grid-template-columns: 1fr; }
      .time-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .status-dual,
      .chart-grid.two,
      .cockpit-kpi-row {
        grid-template-columns: 1fr;
      }
      .dashboard-cockpit {
        grid-template-columns: minmax(180px,.9fr) minmax(320px,1.2fr) minmax(180px,.9fr);
      }
      .gauge-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chart-box.cockpit { height: 300px; }
      .bucket-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 720px) {
      :root {
        --gutter: 10px;
        --section-pad: 14px;
      }
      .shell { width: min(var(--content-max), calc(100vw - 20px)); margin: 10px auto 20px; }
      .hero-topline { grid-template-columns: 1fr; }
      .hero-brand { align-items: flex-start; }
      .hero-side-logo { justify-self: start; }
      .sticky-group,
      .metrics-grid,
      .cockpit-kpi-row,
      .time-tabs { grid-template-columns: 1fr; }
      .gauge-stack { grid-template-columns: 1fr; }
      .time-tab { width: 100%; }
      .range-card,
      .range-value,
      .range-meta { flex-direction: column; align-items: flex-start; }
      .range-timebox .range-main { white-space: normal; }
      .timeline-item { grid-template-columns: 1fr; gap: 6px; }
      .timeline-time { white-space: normal; }
      .btn { width: 100%; }
      .overview-summary,
      .bucket-grid,
      .bucket-metrics { grid-template-columns: 1fr; }
    }
  
    .site-switch-btn {
      --switch-w: 34px;
      --switch-h: 156px;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 120;
      width: var(--switch-w);
      height: var(--switch-h);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(234,247,255,.28);
      cursor: pointer;
      user-select: none;
      transition: transform .18s ease, color .18s ease, opacity .18s ease, filter .18s ease;
      animation: switchBreath 2.8s ease-in-out infinite;
      overflow: visible;
      isolation: isolate;
    }
    .site-switch-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      transition: opacity .18s ease, filter .18s ease;
    }
    .site-switch-btn.left::before {
      background: linear-gradient(90deg, rgba(57,210,255,0) 0%, rgba(57,210,255,.06) 42%, rgba(57,210,255,.14) 100%);
      border-right: 1px solid rgba(92,181,255,.18);
      border-radius: 0 10px 10px 0;
    }
    .site-switch-btn.right::before {
      background: linear-gradient(270deg, rgba(57,210,255,0) 0%, rgba(57,210,255,.06) 42%, rgba(57,210,255,.14) 100%);
      border-left: 1px solid rgba(92,181,255,.18);
      border-radius: 10px 0 0 10px;
    }
    .site-switch-btn:hover {
      transform: translateY(-50%) scale(1.02);
      color: rgba(244,251,255,.96);
      animation-play-state: paused;
      filter: drop-shadow(0 0 14px rgba(57,210,255,.10));
    }
    .site-switch-btn:hover::before {
      opacity: .92;
      filter: brightness(1.08);
    }
    .site-switch-btn:active {
      transform: translateY(-50%) scale(.985);
    }
    .site-switch-btn.left { left: 0; }
    .site-switch-btn.right { left: auto; right: 0; }
    .site-switch-btn.disabled {
      opacity: .16;
      cursor: not-allowed;
      pointer-events: none;
      animation: none;
      filter: none;
    }
    .site-switch-btn .arrow {
      position: relative;
      z-index: 1;
      font-size: 26px;
      line-height: 1;
      font-weight: 800;
      margin-top: -1px;
      text-shadow: 0 0 10px rgba(57,210,255,.08);
    }
    .site-switch-btn .label {
      display: none;
    }
    @keyframes switchBreath {
      0%, 100% {
        opacity: .22;
        filter: none;
      }
      50% {
        opacity: .38;
        filter: drop-shadow(0 0 10px rgba(57,210,255,.05));
      }
    }

    .global-loading-hint {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(3, 11, 18, .54);
      backdrop-filter: blur(8px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .22s ease, visibility .22s ease;
    }
    .global-loading-hint.show {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .global-loading-panel {
      width: min(560px, calc(100vw - 40px));
      padding: 22px 24px 18px;
      border-radius: 18px;
      border: 1px solid rgba(92,181,255,.18);
      background: linear-gradient(180deg, rgba(11,28,47,.95), rgba(8,20,34,.98));
      box-shadow: 0 24px 60px rgba(0,0,0,.32), inset 0 0 28px rgba(57,210,255,.04);
      overflow: hidden;
      position: relative;
    }
    .global-loading-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(255,255,255,.04), transparent 38%, transparent 72%, rgba(85,255,199,.03));
      pointer-events: none;
    }
    .global-loading-kicker {
      position: relative;
      z-index: 1;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #8fcff0;
      margin-bottom: 8px;
    }
    .global-loading-title {
      position: relative;
      z-index: 1;
      font-size: 22px;
      font-weight: 800;
      color: #f4fbff;
      margin-bottom: 8px;
    }
    .global-loading-desc {
      position: relative;
      z-index: 1;
      font-size: 13px;
      line-height: 1.6;
      color: #d7efff;
      min-height: 22px;
      margin-bottom: 14px;
    }
    .global-loading-track {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      overflow: hidden;
      border: 1px solid rgba(92,181,255,.10);
    }
    .global-loading-bar {
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(57,210,255,.95), rgba(85,255,199,.95));
      box-shadow: 0 0 16px rgba(57,210,255,.22);
      transition: width .28s ease;
    }
    .global-loading-meta {
      position: relative;
      z-index: 1;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 12px;
      color: #95bfdc;
    }
    .global-loading-step {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1 1 auto;
    }
    .global-loading-percent {
      flex: none;
      min-width: 44px;
      text-align: right;
      font-weight: 700;
      color: #edf9ff;
    }
    .global-loading-hint.is-error .global-loading-bar {
      background: linear-gradient(90deg, rgba(255,125,125,.95), rgba(255,179,71,.95));
    }
    .status-strip { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--card-gap); margin-bottom: 12px; }
    .status-mini-card { padding: 12px 13px; border-radius: 12px; background: rgba(9,23,38,.58); border:1px solid rgba(92,181,255,.12); min-height: 78px; display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; }
    .status-mini-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
    .status-mini-value { font-size:18px; font-weight:800; color:#f4fbff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .status-mini-sub { font-size:11px; color:#9ec5df; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .bucket-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .bucket-card { min-height: 86px; padding: 8px 8px 7px; gap: 5px; }
    .bucket-head { align-items:center; }
    .bucket-id { font-size: 14px; }
    .bucket-status { min-height: 20px; padding: 0 7px; font-size: 10px; }
    .bucket-status span:last-child { display:none; }
    .bucket-metrics { grid-template-columns: 1fr; gap: 0; }
    .bucket-metric { padding: 0; border: 0; background: transparent; }
    .bucket-metric-value { margin-top:0; font-size:11px; color:#cfe8f8; }
    .bucket-card.is-disabled { cursor:not-allowed; opacity:.92; transform:none !important; box-shadow:none !important; }
    .bucket-card.status-offline { background: rgba(80,95,112,.16); border-color: rgba(145,160,176,.18); }
    .bucket-card.status-offline .bucket-id, .bucket-card.status-offline .bucket-metric-value { color:#b6c6d5; }
    .bucket-card.status-offline .bucket-status { color:#aab8c6; border-color: rgba(145,160,176,.15); background: rgba(80,95,112,.14); }
    .bucket-card.status-offline .dot { background:#8898a8 !important; box-shadow:none !important; }
    .bucket-card.status-offline:hover { transform:none; border-color: rgba(145,160,176,.18); box-shadow:none; }
    .shell { width: min(var(--content-max), calc(100vw - (var(--gutter) * 2))); min-width: 1000px; max-width: var(--content-max); }
    body { overflow-x: auto; }
    .chart-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-cockpit { display:grid; grid-template-columns: minmax(190px,.88fr) minmax(360px,1.18fr) minmax(190px,.88fr); gap: var(--card-gap); align-items:stretch; }
    .gauge-stack { display:grid; grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); align-content:stretch; }
    .gauge-card, .cockpit-core { min-height: 100%; display:flex; flex-direction:column; }
    .gauge-card { justify-content:flex-start; }
    .cockpit-core { padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(9,23,38,.72), rgba(7,18,31,.86)); border:1px solid rgba(92,181,255,.14); position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
    .cockpit-core::after { content:""; position:absolute; left:50%; top:50%; width:68%; height:68%; transform:translate(-50%, -50%); border-radius:50%; border:1px dashed rgba(92,181,255,.10); box-shadow: inset 0 0 44px rgba(57,210,255,.05); pointer-events:none; display:block; }
    .chart-box.gauge { height: 156px; }
    .chart-box.cockpit { height: 316px; background: transparent; }
    .sticky-main { grid-template-columns: 160px 124px 96px minmax(232px, 1fr); }
    .bucket-overview-top { grid-template-columns: minmax(250px, .82fr) minmax(320px, 1.18fr); }
    .overview-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cockpit-range-pill { max-width: 100%; }
    .cockpit-range-pill span { max-width: 240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
    .cockpit-kpi-row, .cockpit-kpi { display:none !important; }
    .cockpit-meta.centered { justify-content:center; }
    .cockpit-meta.centered .cockpit-pill { justify-content:center; min-width: 140px; }
    .cockpit-range-row { margin-top: 8px; display:flex; justify-content:center; width:100%; position:relative; z-index:1; }
    .cockpit-range-row .range-meta { justify-content:center; flex-wrap:wrap; }
    .system-status-dual { position: relative; align-items:start; overflow:visible; }
    .panel-block.events-panel { position: relative; overflow: visible; z-index: 6; }
    .panel-block.events-panel .events-hover-host { position: relative; height: 108px; overflow: visible; }
    .panel-block.events-panel .events-scroll {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      max-height: 108px;
      overflow-y: hidden;
      overflow-x: hidden;
      padding: 0 2px 2px 0;
      background: linear-gradient(180deg, rgba(12, 29, 48, .94), rgba(8, 20, 34, .96));
      border-radius: 7px;
      transition: max-height .24s ease, box-shadow .18s ease, border-color .18s ease;
      border: 1px solid transparent;
      will-change: max-height;
      z-index: 10;
    }
    .panel-block.events-panel.events-open .events-scroll {
      max-height: 180px;
      overflow-y: auto;
      border-color: rgba(92,181,255,.16);
      box-shadow: 0 14px 26px rgba(0,0,0,.24);
    }
    .panel-block.events-panel .timeline-item { min-height: 28px; }
    @media (max-width: 1280px), (max-width: 1140px), (max-width: 960px), (max-width: 720px) {
      .shell { min-width: 1000px; max-width: var(--content-max); }
      .bucket-grid { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
      .dashboard-cockpit { grid-template-columns: minmax(190px,.88fr) minmax(360px,1.18fr) minmax(190px,.88fr) !important; }
      .gauge-stack { grid-template-columns: 1fr !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; }
      .chart-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
      .overview-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
      .bucket-overview-top { grid-template-columns: minmax(220px, .78fr) minmax(300px, 1.22fr) !important; }
      .sticky-main { grid-template-columns: 160px 124px 96px minmax(232px, 1fr) !important; }
    }

/* ===== merged single-line sticky bar v3 ===== */
.visually-hidden {
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.sticky-wrap { top: 0; }
.sticky-panel { padding: 8px 12px; }
.sticky-main.sticky-main-inline {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  width:100%;
  min-width:0;
}
.sticky-inline-meta,
.sticky-inline-controls,
.time-tabs-inline {
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
}
.sticky-inline-meta {
  flex:0 1 360px;
  gap:10px;
  white-space:nowrap;
  overflow:hidden;
}
.inline-meta-item {
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  color:#d8f1ff;
  font-size:12px;
  white-space:nowrap;
}
.inline-meta-item em {
  font-style:normal;
  color:var(--muted);
  font-size:11px;
}
.inline-meta-item strong {
  color:#f4fbff;
  font-weight:700;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inline-sep {
  width:1px;
  height:14px;
  background:linear-gradient(180deg, rgba(92,181,255,.06), rgba(92,181,255,.34), rgba(92,181,255,.06));
  flex:0 0 1px;
}
.inline-link {
  color:#aee5ff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color .14s ease, border-color .14s ease, opacity .14s ease;
  white-space:nowrap;
}
.inline-link:hover {
  color:#f4fbff;
  border-color:rgba(85,255,199,.55);
}
.sticky-inline-controls {
  flex:1 1 auto;
  gap:10px;
  overflow:hidden;
}
.inline-control {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:0 0 auto;
}
.inline-group-picker { flex:0 0 auto; }
.inline-site-picker { flex:0 0 170px; }
.inline-depth-picker { flex:0 0 140px; }
.inline-label {
  color:var(--muted);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
  flex:0 0 auto;
}
.sticky-main-inline .field,
.sticky-main-inline .field label { display:contents; }
.top-group-tabs { gap:6px; }
.top-group-tabs .tab-btn {
  width:34px;
  min-width:34px;
  height:34px;
  min-height:34px;
  line-height:34px;
}
.top-group-tabs .tab-btn[data-group="all"] { min-width:44px; }
.select-shell { height:34px; border-radius:9px; }
.site-select-shell { max-width:none; }
.site-select-shell select,
.inline-depth-picker select { font-size:12px; }
.time-tabs-inline {
  flex:0 0 auto;
  gap:6px;
  margin-left:auto;
}
.time-tabs-inline .time-tab {
  min-width:54px;
  height:36px;
  padding:0 10px;
  font-size:12px;
  letter-spacing:.1px;
  border-radius:9px;
}
@media (max-width: 1200px) {
  .sticky-main.sticky-main-inline { gap:10px; }
  .sticky-inline-meta { flex-basis: 310px; gap:8px; }
  .inline-meta-item strong { max-width:84px; }
  .inline-site-picker { flex-basis: 150px; }
  .inline-depth-picker { flex-basis: 126px; }
  .time-tabs-inline .time-tab { min-width:48px; padding:0 8px; }
}

/* ===== mergedbar v4 select fix ===== */
.sticky-main-inline .select-shell select {
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:none !important;
  padding-right:24px;
}
.sticky-main-inline .select-shell select:focus {
  outline:none;
  box-shadow:none;
}

/* ===== Smart Ecolake public homepage additions ===== */
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(132px,15vw,200px);gap:18px;align-items:center;width:100%;}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:var(--card-gap);align-items:stretch;}
.overview-panel{position:relative;min-width:0;padding:14px;border-radius:14px;background:rgba(9,23,38,.58);border:1px solid rgba(92,181,255,.12);box-shadow:inset 0 0 20px rgba(57,210,255,.025);}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.panel-title strong{font-size:14px;color:#eef9ff;letter-spacing:.2px;}
.panel-title span{font-size:11px;color:var(--muted);}
.main-ring{height:230px;min-height:230px;}
.status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.status-chip{min-height:58px;padding:9px 10px;border-radius:12px;background:rgba(8,20,34,.64);border:1px solid rgba(92,181,255,.12);display:flex;flex-direction:column;justify-content:center;gap:4px;}
.status-chip-label{font-size:10px;color:#8fb6d2;}
.status-chip-value{font-size:19px;font-weight:850;color:#f4fbff;line-height:1;}
.problem-list{height:332px;overflow:auto;padding-right:3px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(113,180,224,.28) transparent;}
.problem-list::-webkit-scrollbar{width:8px;}.problem-list::-webkit-scrollbar-thumb{background:rgba(113,180,224,.28);border-radius:999px;}.problem-list::-webkit-scrollbar-track{background:transparent;}
.problem-item{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border-radius:11px;background:rgba(9,23,38,.64);border:1px solid rgba(92,181,255,.12);}
.problem-item.warn{border-color:rgba(255,179,71,.22);background:rgba(255,179,71,.06);}.problem-item.danger{border-color:rgba(255,107,107,.24);background:rgba(255,107,107,.07);}.problem-item.offline{border-color:rgba(143,182,210,.20);background:rgba(122,148,170,.08);}
.problem-dot{width:8px;height:8px;margin-top:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px rgba(57,210,255,.45);flex:0 0 8px;}.problem-item.warn .problem-dot{background:var(--warn);box-shadow:0 0 8px rgba(255,179,71,.48);}.problem-item.danger .problem-dot{background:var(--danger);box-shadow:0 0 8px rgba(255,107,107,.52);}.problem-item.offline .problem-dot{background:#8fb6d2;box-shadow:none;}
.problem-content{min-width:0;}.problem-text{font-size:12px;line-height:1.45;color:#e7f5ff;}.problem-text strong{font-size:11px;margin-right:5px;color:#f7fcff;}.problem-time{margin-top:3px;font-size:10px;color:#8fb6d2;}
.empty-box{padding:22px 12px;text-align:center;border-radius:12px;background:rgba(8,20,34,.5);border:1px dashed rgba(92,181,255,.14);color:#8fb6d2;font-size:12px;}
.weather-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap);}
.weather-card{min-width:0;padding:12px;border-radius:14px;background:rgba(9,23,38,.58);border:1px solid rgba(92,181,255,.12);box-shadow:inset 0 0 20px rgba(57,210,255,.02);}
.weather-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}.weather-head strong{font-size:13px;color:#eef9ff;}.weather-now{font-size:12px;font-weight:800;color:#dff7ff;padding:4px 8px;border-radius:999px;background:rgba(57,210,255,.08);border:1px solid rgba(57,210,255,.13);white-space:nowrap;}
.weather-chart{height:190px;min-height:190px;}
.login-main{padding:14px;border-radius:14px;background:rgba(9,23,38,.58);border:1px solid rgba(92,181,255,.12);}.field-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) auto;gap:10px;align-items:end;}.input-shell{height:40px;border-radius:11px;border:1px solid rgba(92,181,255,.22);background:linear-gradient(180deg,rgba(11,27,45,.96),rgba(7,20,34,.98));overflow:hidden;}.input-shell input{width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--text);padding:0 12px;font-size:13px;}.login-btn{height:40px;}.login-message{min-height:20px;margin-top:9px;color:#ffcf88;font-size:12px;}.user-panel.hidden,.hidden{display:none!important;}.user-summary{font-size:13px;line-height:1.7;color:#dff5ff;margin-bottom:12px;}.user-summary strong{color:#f7fcff;}.btn-row{display:flex;flex-wrap:wrap;gap:10px;}.btn-row .btn,.login-main .btn{height:40px;}
.admin-links-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}.admin-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(92,181,255,.18);background:rgba(57,210,255,.08);color:#dff6ff;text-decoration:none;font-size:12px;font-weight:800;}.admin-link:hover{border-color:rgba(92,181,255,.34);color:#f7fcff;}
@media (max-width:1200px){.overview-grid{grid-template-columns:1fr;}.weather-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.problem-list{height:260px;}}
@media (max-width:760px){.hero-inner{grid-template-columns:1fr;}.hero-meta{grid-template-columns:1fr;}.weather-grid{grid-template-columns:1fr;}.field-row{grid-template-columns:1fr;}.status-strip{grid-template-columns:repeat(2,minmax(0,1fr));}.main-ring{height:210px;}.system-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}


/* ===== public homepage relayout v20260426 ===== */
.overview-grid-status-weather{
  grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);
  align-items:stretch;
}
.overview-status-panel,
.overview-weather-panel{
  min-height:100%;
}
.overview-weather-panel{
  display:flex;
  flex-direction:column;
}
.overview-weather-panel .weather-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.overview-weather-panel .weather-card{
  min-height:0;
  padding:10px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(9,23,38,.66), rgba(7,19,33,.78));
}
.overview-weather-panel .weather-head{
  margin-bottom:6px;
}
.overview-weather-panel .weather-head strong{
  font-size:12px;
}
.overview-weather-panel .weather-now{
  font-size:11px;
  padding:3px 7px;
}
.overview-weather-panel .weather-chart{
  height:152px;
  min-height:152px;
}
.health-alert-block{
  position:relative;
  margin:6px 0 12px;
  padding:11px 12px 12px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(9,23,38,.68), rgba(7,19,33,.78));
  border:1px solid rgba(92,181,255,.13);
  box-shadow:inset 0 0 18px rgba(57,210,255,.025);
  overflow:hidden;
}
.health-alert-block::before{
  content:"";
  position:absolute;
  left:-30px;
  bottom:-42px;
  width:118px;
  height:118px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(57,210,255,.11), transparent 70%);
  pointer-events:none;
}
.health-alert-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.health-alert-head strong{
  font-size:13px;
  color:#eef9ff;
  letter-spacing:.2px;
}
.health-alert-head span{
  max-width:58%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:#96c4dd;
}
.health-alert-counts{
  position:relative;
  z-index:1;
  gap:7px;
  margin-bottom:8px;
}
.health-alert-counts .status-chip{
  min-height:46px;
  padding:7px 9px;
  border-radius:10px;
}
.health-alert-counts .status-chip-label{
  font-size:10px;
}
.health-alert-counts .status-chip-value{
  font-size:17px;
}
.problem-list.is-rolling{
  position:relative;
  z-index:1;
  height:166px;
  overflow:hidden;
  padding:0;
  display:block;
  border-radius:11px;
  background:rgba(6,17,29,.36);
  border:1px solid rgba(92,181,255,.08);
  scrollbar-width:none;
}
.problem-list.is-rolling::-webkit-scrollbar{
  display:none;
}
.problem-textwall{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:7px;
  will-change:transform;
}
.problem-line{
  display:grid;
  grid-template-columns:10px minmax(72px,96px) minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:7px 10px;
  border-radius:10px;
  background:rgba(9,23,38,.68);
  border:1px solid rgba(92,181,255,.12);
  box-shadow:inset 0 0 12px rgba(57,210,255,.018);
}
.problem-line.warn{
  border-color:rgba(255,179,71,.23);
  background:linear-gradient(90deg, rgba(255,179,71,.09), rgba(9,23,38,.66));
}
.problem-line.danger{
  border-color:rgba(255,107,107,.26);
  background:linear-gradient(90deg, rgba(255,107,107,.10), rgba(9,23,38,.68));
}
.problem-line.offline{
  border-color:rgba(143,182,210,.20);
  background:linear-gradient(90deg, rgba(122,148,170,.10), rgba(9,23,38,.64));
}
.problem-line-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 8px rgba(57,210,255,.52);
}
.problem-line-dot.warn{
  background:var(--warn);
  box-shadow:0 0 8px rgba(255,179,71,.54);
}
.problem-line-dot.danger{
  background:var(--danger);
  box-shadow:0 0 8px rgba(255,107,107,.56);
}
.problem-line-dot.offline{
  background:#8fb6d2;
  box-shadow:none;
}
.problem-line-main{
  min-width:0;
  color:#f4fbff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.problem-line-sub{
  min-width:0;
  color:#9fc5dc;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.experiment-carousel{
  position:relative;
  padding:0 42px 28px;
}
.experiment-viewport{
  overflow:hidden;
  border-radius:15px;
}
.experiment-track{
  display:flex;
  width:100%;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.experiment-page{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
}
.experiment-card{
  position:relative;
  overflow:hidden;
  min-height:214px;
  padding:14px;
  border-radius:15px;
  background:
    radial-gradient(circle at 88% 10%, rgba(57,210,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(9,23,38,.72), rgba(7,19,33,.88));
  border:1px solid rgba(92,181,255,.14);
  box-shadow:inset 0 0 18px rgba(57,210,255,.025), 0 10px 22px rgba(0,0,0,.12);
}
.experiment-card::after{
  content:"";
  position:absolute;
  right:-32px;
  bottom:-36px;
  width:128px;
  height:128px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(85,255,199,.10), transparent 70%);
  pointer-events:none;
}
.experiment-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.experiment-status,
.experiment-bucket-count{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}
.experiment-status{
  color:#dffff7;
  background:rgba(85,255,199,.10);
  border:1px solid rgba(85,255,199,.24);
}
.experiment-bucket-count{
  color:#dff5ff;
  background:rgba(57,210,255,.08);
  border:1px solid rgba(57,210,255,.18);
}
.experiment-name{
  position:relative;
  z-index:1;
  min-height:42px;
  font-size:17px;
  line-height:1.25;
  font-weight:850;
  color:#f5fbff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.experiment-meta-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:25px;
  margin-top:8px;
}
.experiment-meta-row span{
  color:#8fb6d2;
  font-size:11px;
}
.experiment-meta-row strong{
  min-width:0;
  color:#dff5ff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.experiment-time-row{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:#9fc5dc;
  font-size:11px;
}
.experiment-time-row i{
  flex:1 1 auto;
  height:1px;
  background:linear-gradient(90deg, rgba(92,181,255,.08), rgba(92,181,255,.30), rgba(92,181,255,.08));
}
.experiment-bucket-badges{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:11px;
  max-height:52px;
  overflow:hidden;
}
.experiment-bucket-badges span,
.experiment-bucket-badges em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:22px;
  padding:0 7px;
  border-radius:7px;
  background:rgba(8,20,34,.54);
  border:1px solid rgba(92,181,255,.12);
  color:#dff4ff;
  font-size:11px;
  font-style:normal;
}
.experiment-bucket-badges span.more{
  color:#f5fbff;
  background:rgba(57,210,255,.10);
  border-color:rgba(57,210,255,.22);
}
.experiment-nav{
  position:absolute;
  top:calc(50% - 18px);
  z-index:3;
  width:34px;
  height:58px;
  border-radius:999px;
  border:1px solid rgba(92,181,255,.18);
  background:rgba(8,20,34,.72);
  color:#dff5ff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:opacity .16s ease, transform .16s ease, border-color .16s ease;
}
.experiment-nav:hover{
  transform:translateY(-1px);
  border-color:rgba(92,181,255,.32);
}
.experiment-nav:disabled{
  opacity:.35;
  cursor:default;
  transform:none;
}
.experiment-nav-prev{left:0;}
.experiment-nav-next{right:0;}
.experiment-dots{
  position:absolute;
  left:42px;
  right:42px;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.experiment-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(143,182,210,.38);
  cursor:pointer;
  transition:width .16s ease, background .16s ease;
}
.experiment-dot.active{
  width:22px;
  background:linear-gradient(90deg, rgba(57,210,255,.95), rgba(85,255,199,.95));
}
.experiment-carousel.is-single{
  padding-left:0;
  padding-right:0;
}
.experiment-carousel.is-single .experiment-nav,
.experiment-carousel.is-single .experiment-dots{
  display:none;
}
@media (max-width:1200px){
  .overview-grid-status-weather{
    grid-template-columns:1fr;
  }
  .overview-weather-panel .weather-chart{
    height:168px;
    min-height:168px;
  }
}
@media (max-width:760px){
  .overview-weather-panel .weather-grid{
    grid-template-columns:1fr;
  }
  .problem-line{
    grid-template-columns:10px minmax(68px,88px) minmax(0,1fr);
  }
  .experiment-carousel{
    padding-left:0;
    padding-right:0;
  }
  .experiment-page{
    grid-template-columns:1fr;
  }
  .experiment-nav{
    display:none;
  }
  .experiment-dots{
    left:0;
    right:0;
  }
}


/* ===== public homepage compact revision v20260426_02 ===== */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.problem-ticker{
  position:relative;
  height:30px;
  line-height:30px;
  margin:4px 0 8px;
  padding:0 12px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(57,210,255,.08), rgba(8,20,34,.45), rgba(85,255,199,.06));
  border:1px solid rgba(92,181,255,.13);
  color:#dff5ff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:inset 0 0 12px rgba(57,210,255,.02);
}
.problem-ticker::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:999px;
  background:var(--accent2);
  box-shadow:0 0 8px rgba(85,255,199,.48);
  vertical-align:1px;
}
.problem-ticker-track{
  display:inline-block;
  min-width:0;
  max-width:calc(100% - 18px);
  vertical-align:top;
  will-change:transform;
}
.problem-ticker-line{
  display:block;
  height:30px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.problem-ticker-line.warn{color:#fff0d0;}
.problem-ticker-line.danger{color:#ffe1e1;}
.problem-ticker-line.offline{color:#d8e8f4;}

.health-alert-block,
.health-alert-head,
.health-alert-counts{
  display:none!important;
}

.experiment-carousel{
  padding:0 34px 22px;
}
.experiment-page{
  gap:10px;
}
.experiment-card{
  min-height:154px;
  padding:10px 11px;
  border-radius:13px;
}
.experiment-card-top{
  margin-bottom:7px;
  gap:8px;
}
.experiment-status,
.experiment-bucket-count{
  min-height:21px;
  padding:0 7px;
  font-size:10px;
}
.experiment-name{
  min-height:34px;
  font-size:14px;
  line-height:1.2;
  -webkit-line-clamp:2;
}
.experiment-meta-row{
  grid-template-columns:48px minmax(0,1fr);
  min-height:21px;
  margin-top:5px;
  gap:6px;
}
.experiment-meta-row span{
  font-size:10px;
}
.experiment-meta-row strong{
  font-size:11px;
}
.experiment-time-row{
  min-height:20px;
  margin-top:6px;
  padding:4px 7px;
  border-radius:8px;
  background:rgba(8,20,34,.40);
  border:1px solid rgba(92,181,255,.09);
  color:#9fc5dc;
  font-size:10px;
  overflow:hidden;
}
.experiment-time-row span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.experiment-time-row i{
  display:none;
}
.experiment-bucket-badges{
  gap:4px;
  margin-top:7px;
  max-height:28px;
}
.experiment-bucket-badges span,
.experiment-bucket-badges em{
  min-width:24px;
  height:18px;
  padding:0 5px;
  border-radius:6px;
  font-size:10px;
}
.experiment-nav{
  width:28px;
  height:46px;
  top:calc(50% - 14px);
  font-size:24px;
}
.experiment-dots{
  bottom:0;
}
.experiment-dot{
  width:6px;
  height:6px;
}
.experiment-dot.active{
  width:18px;
}

@media (max-width:760px){
  .problem-ticker{
    height:30px;
    line-height:30px;
  }
  .experiment-carousel{
    padding-bottom:20px;
  }
}


/* 2026-04-26 实验浏览区压缩：不展示人员姓名，不显示左右箭头，仅保留触屏滑动与页码圆点 */
.experiment-carousel{
  padding:0 0 18px!important;
  touch-action:pan-y;
}
.experiment-viewport{
  border-radius:13px!important;
}
.experiment-page{
  gap:10px!important;
}
.experiment-card{
  min-height:116px!important;
  padding:11px 12px!important;
  border-radius:13px!important;
}
.experiment-card::after{
  width:88px!important;
  height:88px!important;
  right:-30px!important;
  bottom:-38px!important;
}
.experiment-card-top,
.experiment-meta-row,
.experiment-bucket-badges,
.experiment-nav{
  display:none!important;
}
.experiment-name{
  min-height:34px!important;
  font-size:15px!important;
  line-height:1.18!important;
  -webkit-line-clamp:2!important;
  margin-bottom:8px!important;
}
.experiment-info-row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:7px;
  align-items:center;
  min-height:24px;
  padding:5px 8px;
  border-radius:9px;
  background:rgba(8,20,34,.36);
  border:1px solid rgba(92,181,255,.09);
}
.experiment-info-row span{
  color:#8fb6d2;
  font-size:11px;
  white-space:nowrap;
}
.experiment-info-row strong{
  min-width:0;
  color:#dffff7;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.experiment-time-row{
  min-height:24px!important;
  margin-top:7px!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  background:rgba(8,20,34,.34)!important;
  border:1px solid rgba(92,181,255,.08)!important;
  color:#9fc5dc!important;
  font-size:11px!important;
  overflow:hidden!important;
}
.experiment-time-row span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.experiment-time-row i{
  display:none!important;
}
.experiment-dots{
  left:0!important;
  right:0!important;
  bottom:0!important;
}
.experiment-carousel.is-single{
  padding-bottom:0!important;
}
.experiment-carousel.is-single .experiment-dots{
  display:none!important;
}
@media (max-width:760px){
  .experiment-page{
    grid-template-columns:1fr!important;
  }
  .experiment-card{
    min-height:104px!important;
  }
}


/* 2026-04-26 实验浏览信息恢复：保留状态与实验桶，仍不展示人员；问题桶 ticker 去掉文字前缀 */
.problem-ticker{
  margin:3px 0 7px!important;
  padding:0 10px!important;
  height:28px!important;
  line-height:28px!important;
}
.problem-ticker::before{
  width:6px!important;
  height:6px!important;
  margin-right:7px!important;
}
.problem-ticker-line{
  height:28px!important;
}
.experiment-card{
  min-height:134px!important;
  padding:10px 11px!important;
}
.experiment-name{
  min-height:32px!important;
  margin-bottom:7px!important;
  font-size:14px!important;
}
.experiment-compact-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 88px;
  gap:6px;
}
.experiment-info-row{
  grid-template-columns:34px minmax(0,1fr)!important;
  min-height:23px!important;
  padding:4px 7px!important;
  gap:5px!important;
}
.experiment-info-row span{
  font-size:10px!important;
}
.experiment-info-row strong{
  font-size:11px!important;
}
.experiment-time-row,
.experiment-bucket-row{
  position:relative;
  z-index:1;
  min-height:22px!important;
  margin-top:6px!important;
  padding:4px 7px!important;
  border-radius:8px!important;
  background:rgba(8,20,34,.34)!important;
  border:1px solid rgba(92,181,255,.08)!important;
  color:#9fc5dc!important;
  font-size:10px!important;
  overflow:hidden!important;
}
.experiment-bucket-row span,
.experiment-time-row span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:760px){
  .experiment-card{
    min-height:128px!important;
  }
  .experiment-compact-grid{
    grid-template-columns:1fr 82px;
  }
}


/* =========================
   异常 / 预警弹窗
========================= */
.problem-ticker {
  cursor: pointer;
  user-select: none;
}
.problem-ticker:focus-visible {
  outline: 2px solid rgba(57,210,255,.72);
  outline-offset: 3px;
}
.problem-ticker-line {
  cursor: pointer;
}

.alert-modal-open {
  overflow: hidden;
}
.alert-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2, 8, 16, .72);
  backdrop-filter: blur(10px);
}
.alert-modal-mask.show {
  display: flex;
}
.alert-modal-panel {
  width: min(880px, calc(100vw - 28px));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(92,181,255,.24);
  background: linear-gradient(180deg, rgba(13,32,52,.98), rgba(7,19,33,.99));
  box-shadow: 0 26px 70px rgba(0,0,0,.42), inset 0 0 28px rgba(57,210,255,.04);
}
.alert-modal-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(92,181,255,.12);
}
.alert-modal-title {
  font-size: 18px;
  font-weight: 800;
  color: #f3fbff;
  line-height: 1.25;
}
.alert-modal-sub {
  margin-top: 5px;
  font-size: 12px;
  color: #9fc3dc;
}
.alert-modal-close {
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(92,181,255,.18);
  border-radius: 10px;
  background: rgba(8,20,34,.64);
  color: #dff4ff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.alert-modal-close:hover {
  border-color: rgba(92,181,255,.34);
  background: rgba(57,210,255,.10);
}
.alert-modal-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 18px 8px;
}
.alert-modal-stat {
  min-height: 54px;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(9,23,38,.60);
  border: 1px solid rgba(92,181,255,.12);
}
.alert-modal-stat strong {
  display: block;
  font-size: 18px;
  color: #f7fcff;
  line-height: 1.15;
}
.alert-modal-stat span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9fc3dc;
}
.alert-modal-stat.danger {
  border-color: rgba(255,107,107,.24);
  background: rgba(255,107,107,.07);
}
.alert-modal-stat.warn {
  border-color: rgba(255,179,71,.24);
  background: rgba(255,179,71,.07);
}
.alert-modal-stat.offline {
  border-color: rgba(143,165,183,.24);
  background: rgba(143,165,183,.07);
}
.alert-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 18px 18px;
}
.alert-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.alert-modal-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(9,23,38,.58);
  border: 1px solid rgba(92,181,255,.12);
}
.alert-modal-item.danger {
  border-color: rgba(255,107,107,.26);
  background: rgba(255,107,107,.07);
}
.alert-modal-item.warn {
  border-color: rgba(255,179,71,.26);
  background: rgba(255,179,71,.07);
}
.alert-modal-item.offline {
  border-color: rgba(143,165,183,.24);
  background: rgba(143,165,183,.07);
}
.alert-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #081522;
  background: #39d2ff;
}
.alert-modal-item.danger .alert-modal-badge {
  background: #ff6b6b;
  color: #fff;
}
.alert-modal-item.warn .alert-modal-badge {
  background: #ffb347;
  color: #241300;
}
.alert-modal-item.offline .alert-modal-badge {
  background: #8fa5b7;
  color: #081522;
}
.alert-modal-main {
  min-width: 0;
}
.alert-modal-line-title {
  font-size: 13px;
  font-weight: 800;
  color: #f3fbff;
  line-height: 1.35;
}
.alert-modal-line-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: #b9d5e7;
  word-break: break-word;
}
.alert-modal-empty {
  padding: 30px 18px;
  border-radius: 14px;
  border: 1px dashed rgba(92,181,255,.18);
  color: #a9cfe6;
  text-align: center;
  background: rgba(9,23,38,.42);
}
@media (max-width: 680px) {
  .alert-modal-mask {
    padding: 12px;
  }
  .alert-modal-stats {
    grid-template-columns: 1fr;
  }
  .alert-modal-item {
    grid-template-columns: 1fr;
  }
}