:root{
    --primary:#003d99;
    --primary-2:#0057c7;
    --primary-tint:#eef3fc;
    --success:#059669;
    --success-bg:#e9f7f1;
    --success-ring:rgba(5,150,105,.22);
    --warning:#d4a500;
    --warning-bg:#fef9e3;
    --warning-ring:rgba(212,165,0,.22);
    --partial:#ff9500;
    --partial-bg:#fff5e9;
    --critical:#e63946;
    --critical-bg:#fdecec;
    --critical-ring:rgba(230,57,70,.22);
    --neutral:#64748b;
    --neutral-bg:#eef1f5;

    --bg:#f6f8fb;
    --bg-pattern: radial-gradient(circle at 1px 1px, rgba(15,23,42,.035) 1px, transparent 0);
    --surface:#ffffff;
    --surface-2:#fbfcfe;
    --border:#e6eaf1;
    --border-strong:#d7dee8;
    --text:#161e2e;
    --text-muted:#5b6779;
    --text-faint:#8996a8;

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;

    --shadow-xs: 0 1px 2px rgba(16,24,40,.04);
    --shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-md: 0 6px 20px -4px rgba(16,24,40,.10), 0 2px 6px -2px rgba(16,24,40,.06);
    --shadow-lg: 0 20px 48px -12px rgba(16,24,40,.16), 0 8px 16px -8px rgba(16,24,40,.08);

    --font-sans:'Atlassian Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono:'Atlassian Mono','SF Mono',Consolas,monospace;

    --ease: cubic-bezier(.22,.61,.36,1);
    color-scheme: light;
  }

  [data-theme="dark"]{
    --primary:#4d8dff;
    --primary-2:#6ea3ff;
    --primary-tint:#132038;
    --success:#34d399;
    --success-bg:#0e2b23;
    --success-ring:rgba(52,211,153,.22);
    --warning:#fbbf24;
    --warning-bg:#332309;
    --warning-ring:rgba(251,191,36,.22);
    --partial:#fb923c;
    --partial-bg:#3a230f;
    --critical:#f87171;
    --critical-bg:#331414;
    --critical-ring:rgba(248,113,113,.22);
    --neutral:#94a3b8;
    --neutral-bg:#1b2434;

    --bg:#0b0f18;
    --bg-pattern: radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
    --surface:#111826;
    --surface-2:#0e1420;
    --border:#212b3d;
    --border-strong:#2c384e;
    --text:#e7ebf3;
    --text-muted:#98a4b8;
    --text-faint:#7f8da3;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 6px 20px -4px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.4);
    --shadow-lg: 0 24px 56px -12px rgba(0,0,0,.6), 0 8px 20px -8px rgba(0,0,0,.5);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      var(--bg-pattern),
      var(--bg);
    background-size: 22px 22px, auto;
    color:var(--text);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    font-size:14px;
    line-height:1.55;
    transition:background-color .25s var(--ease), color .25s var(--ease);
  }
  a{color:inherit;}
  ::selection{background:var(--primary); color:#fff;}
  :focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}

  button{font-family:inherit; cursor:pointer;}

  .app{
    display:grid;
    grid-template-columns: 232px 1fr;
    min-height:100vh;
    max-width:1440px;
    margin:0 auto;
  }

  .sidebar{
    border-right:1px solid var(--border);
    padding:28px 18px 20px;
    position:sticky;
    top:0;
    align-self:start;
    height:100vh;
    display:flex;
    flex-direction:column;
    gap:26px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 6px;
  }
  .brand-logo{
    height:96px; width:auto; display:block; flex:none;
  }

  .side-nav{display:flex; flex-direction:column; gap:2px;}
  .side-label{
    font-size:11px; font-weight:600; color:var(--text-faint);
    padding:0 10px; margin-bottom:6px; letter-spacing:.2px;
  }
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:9px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text-muted);
    font-size:13px; font-weight:500;
    text-align:left; width:100%;
    transition:background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  }
  .nav-item:hover{background:var(--surface-2); color:var(--text);}
  .nav-item.active{
    background:var(--primary-tint); color:var(--primary); border-color:color-mix(in srgb, var(--primary) 22%, transparent);
    font-weight:600;
  }
  .nav-dot{
    width:7px;height:7px;border-radius:50%; flex:none;
    box-shadow:0 0 0 3px var(--dotring, transparent);
  }
  .nav-item span.nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .sidebar-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px;}
  .theme-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 10px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface-2); font-size:12.5px; color:var(--text-muted); font-weight:500;
  }
  .switch{
    width:34px; height:19px; border-radius:99px; background:var(--border-strong);
    position:relative; flex:none; transition:background-color .2s var(--ease);
  }
  .switch::after{
    content:''; position:absolute; width:15px; height:15px; border-radius:50%;
    background:#fff; top:2px; left:2px; transition:transform .2s var(--ease); box-shadow:var(--shadow-xs);
  }
  [data-theme="dark"] .switch{background:var(--primary);}
  [data-theme="dark"] .switch::after{transform:translateX(15px);}

  .side-updated{font-size:11px; color:var(--text-faint); padding:0 10px;}

  .main{min-width:0;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 32px; border-bottom:1px solid var(--border);
    gap:16px; flex-wrap:wrap;
  }
  .topbar h1{font-size:17px; margin:0; font-weight:700; letter-spacing:-.2px; color:var(--text);}
  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:600;
    border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
    transition:border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
  }
  .btn:hover{border-color:var(--primary); box-shadow:var(--shadow-xs); transform:translateY(-1px);}

  section{padding:26px 32px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap;}
  .section-head h2{font-size:15px; margin:0; font-weight:700; letter-spacing:-.1px; color:var(--text);}
  .section-head p{margin:2px 0 0; font-size:12.5px; color:var(--text-muted);}

  .hero{
    padding-top:30px;
  }
  .hero-card{
    border-radius:var(--radius-lg);
    background:linear-gradient(155deg, var(--primary) 0%, #002b6e 100%);
    color:#fff; padding:30px 34px; position:relative; overflow:hidden;
    box-shadow: var(--shadow-lg);
  }
  .hero-card::before{
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(520px 260px at 88% -10%, rgba(255,255,255,.16), transparent 60%),
      radial-gradient(360px 220px at 100% 100%, rgba(255,255,255,.08), transparent 60%);
    pointer-events:none;
  }
  .hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; position:relative;}
  .hero-status{display:flex; align-items:center; gap:14px;}
  .status-orb{
    width:46px;height:46px; border-radius:50%; flex:none; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  }
  .status-orb::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:1px solid rgba(255,255,255,.22);
  }
  .status-orb svg{width:20px; height:20px;}
  .hero-headline h2{margin:0; font-size:22px; font-weight:700; letter-spacing:-.3px; color:#fff;}
  .hero-headline p{margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.72);}

  .hero-updated{
    font-size:11.5px; color:rgba(255,255,255,.65); text-align:right;
    font-family:var(--font-mono);
  }

  .hero-metrics{
    position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
  }
  .metric{padding-right:18px;}
  .metric-label{font-size:11px; color:rgba(255,255,255,.6); font-weight:500; margin-bottom:6px;}
  .metric-value{font-size:24px; font-weight:700; letter-spacing:-.4px; display:flex; align-items:baseline; gap:6px;}
  .metric-value small{font-size:12px; font-weight:500; color:rgba(255,255,255,.55);}
  .metric-trend{display:flex; align-items:center; gap:5px; margin-top:6px; font-size:11px; color:rgba(255,255,255,.65);}
  .metric-trend svg{width:44px;height:16px; flex:none;}

  .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
  .p-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:18px; cursor:pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    position:relative;
  }
  .p-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong);}
  .p-card.selected{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-tint);}
  .p-card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px;}
  .ring{
    width:34px; height:34px; border-radius:50%; position:relative;
    display:flex; align-items:center; justify-content:center;
  }
  .ring::before{
    content:''; position:absolute; inset:-4px; border-radius:50%;
    background: radial-gradient(circle, var(--ringcolor,var(--success)) 0%, transparent 70%);
    opacity:.35;
  }
  .ring .dot{width:12px; height:12px; border-radius:50%; background:var(--ringcolor,var(--success));}
  .p-card-name{font-size:14px; font-weight:700; letter-spacing:-.1px; color:var(--text);}
  .p-card-status{font-size:12px; margin-top:2px; font-weight:600;}
  .p-card-status.op{color:var(--success);}
  .p-card-status.warn{color:var(--warning);}
  .p-card-status.crit{color:var(--critical);}
  .p-card-status.maint{color:var(--primary);}
  .p-card-status.unknown{color:var(--neutral);}
  .p-card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
  .p-card-uptime{font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);}
  .p-card-uptime b{color:var(--text); font-weight:600;}
  .spark{width:64px; height:20px;}

  .module-tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
  .module-tab{
    position:relative; padding:7px 15px; border-radius:999px; border:1px solid var(--border-strong);
    background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text-muted);
    transition:border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
  }
  .module-tab:hover{border-color:var(--primary); color:var(--text);}
  .module-tab.active{background:var(--primary-tint); color:var(--primary); border-color:transparent;}
  .module-tab.has-status::after{
    content:''; position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%;
    background:var(--status-color); pointer-events:none;
  }

  .table-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap;
  }
  .search{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--border-strong); background:var(--surface); border-radius:9px;
    padding:7px 12px; min-width:160px;
  }
  .search svg{width:14px; height:14px; color:var(--text-faint); flex:none;}
  .search input{
    border:none; outline:none; background:transparent; font-size:12.5px; color:var(--text); width:100%; font-family:var(--font-sans);
  }
  .search input::placeholder{color:var(--text-faint); opacity:1;}
  .legend{display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--text-muted);}
  .legend-item{display:flex; align-items:center; gap:6px;}
  .legend-icon{width:18px; height:18px; flex:none;}

  .table-wrap{
    border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; overflow-y:hidden; background:var(--surface);
  }
  table{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px;}
  thead th{
    text-align:left; padding:11px 18px; font-size:11px; font-weight:600; color:var(--text-muted);
    background:var(--surface-2); border-bottom:1px solid var(--border);
    position:sticky; top:0;
    white-space:nowrap;
  }
  tbody td{padding:11px 18px; vertical-align:middle; white-space:nowrap; color:var(--text);}
  tbody tr{transition:background-color .12s var(--ease); box-shadow:inset 0 -1px 0 var(--border);}
  tbody tr:last-child{box-shadow:none;}
  tbody tr:hover{background:var(--surface-2);}
  .cluster-name{font-family:var(--font-mono); font-weight:500; color:var(--text); display:flex; align-items:center; gap:8px;}
  .region-flag{font-size:13px;}
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px; border-radius:99px; font-size:11px; font-weight:600;
  }
  .badge svg{width:12px; height:12px; flex:none;}
  .badge.op{background:var(--success-bg); color:var(--success);}
  .badge.warn{background:var(--warning-bg); color:var(--warning);}
  .badge.partial{background:var(--partial-bg); color:var(--partial);}
  .badge.crit{background:var(--critical-bg); color:var(--critical);}
  .badge.maint{background:var(--primary-tint); color:var(--primary);}
  .badge.unknown{background:var(--neutral-bg); color:var(--neutral);}
  .empty-row td{padding:36px 18px; text-align:center; color:var(--text-faint); font-size:12.5px;}

  .timeline{position:relative; padding-left:26px;}
  .timeline::before{
    content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1.5px; background:var(--border-strong);
  }
  .t-item{position:relative; padding-bottom:26px;}
  .t-item:last-child{padding-bottom:0;}
  .t-dot{
    position:absolute; left:-26px; top:3px; width:13px; height:13px; border-radius:50%;
    background:var(--surface); border:2.5px solid var(--sev, var(--warning));
  }
  .t-date{font-size:11px; color:var(--text-faint); margin-bottom:8px; font-family:var(--font-mono);}
  .t-card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px; color:var(--text);
  }
  .t-title{
    display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:0; color:var(--text);
    width:100%; background:none; border:none; padding:0; text-align:left; font-family:inherit; cursor:pointer;
  }
  .t-title-text{flex:1;}
  .t-chevron{width:16px; height:16px; flex:none; color:var(--text-faint); transition:transform .2s var(--ease);}
  .t-item.expanded .t-chevron{transform:rotate(180deg);}
  .t-sev-badge{
    font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.2px;
    background:var(--warning-bg); color:var(--warning);
  }
  .t-updates{display:none; flex-direction:column; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
  .t-item.expanded .t-updates{display:flex;}
  .t-update{padding-left:14px; border-left:2px solid var(--border);}
  .t-update b{font-size:12.5px; display:block; margin-bottom:2px; color:var(--text);}
  .t-update p{margin:0; font-size:12.5px; color:var(--text-muted);}
  .t-postmortem-link{color:var(--primary); font-weight:600; text-decoration:none;}
  .t-postmortem-link:hover{text-decoration:underline;}
  .t-update time{font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); display:block; margin-top:4px;}

  footer{
    padding:24px 32px 40px; display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid var(--border); font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px;
  }
  footer a{text-decoration:none; color:var(--text-muted); margin-left:16px; font-weight:500;}
  footer a:hover{color:var(--primary);}

  @media (max-width: 980px){
    .app{grid-template-columns:1fr;}
    .sidebar{
      position:sticky; top:0; z-index:20; height:auto; flex-direction:row; align-items:center;
      padding:14px 16px; gap:14px; overflow-x:auto; background:var(--surface); border-right:none; border-bottom:1px solid var(--border);
    }
    .side-nav, .sidebar-foot, .side-updated{display:none;}
    .brand-logo{height:60px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .hero-metrics{grid-template-columns:repeat(2,1fr); row-gap:18px;}
    section{padding:20px 18px;}
    .topbar{padding:16px 18px;}
  }
  @media (max-width: 620px){
    .grid{grid-template-columns:1fr;}
    .hero-card{padding:22px 20px;}
    .hero-metrics{grid-template-columns:1fr 1fr;}
    table{font-size:11.5px;}
    thead th, tbody td{padding:9px 12px;}
  }

  body.coh-active > *:not(#coh-app):not(.cookie-consent-banner){ display:none !important; }
  body.coh-active > .cookie-consent-banner [data-react-class="CookieConsentBanner"] *{ min-width:0 !important; }
  #coh-app{ display:block; }

  .t-sev-badge.op{ background:var(--success-bg); color:var(--success); }
  .t-sev-badge.warn{ background:var(--warning-bg); color:var(--warning); }
  .t-sev-badge.partial{ background:var(--partial-bg); color:var(--partial); }
  .t-sev-badge.crit{ background:var(--critical-bg); color:var(--critical); }
  .t-sev-badge.maint{ background:var(--primary-tint); color:var(--primary); }

  .metric-value.is-unavailable{ font-size:15px; font-weight:600; color:rgba(255,255,255,.55); }

  body:not(.coh-active){
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  body:not(.coh-active) .container{
    max-width: 760px;
  }
  body:not(.coh-active) h1{
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1.25;
  }
  body:not(.coh-active) h2,
  body:not(.coh-active) h3,
  body:not(.coh-active) h4{
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }
  body:not(.coh-active) a{
    color: var(--primary);
  }
  body:not(.coh-active) strong{
    color: var(--text);
    font-weight: 700;
  }
  body:not(.coh-active) small,
  body:not(.coh-active) .color-secondary{
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 11.5px;
  }
  body:not(.coh-active) hr{
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
  }
  body:not(.coh-active) a{
    text-decoration: none;
    transition: color .15s var(--ease);
  }
  body:not(.coh-active) a:hover{
    text-decoration: underline;
  }
  body:not(.coh-active) select{
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: 8px 12px;
  }
  body:not(.coh-active) button{
    font-family: var(--font-sans);
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  }
  body:not(.coh-active) button:hover{
    border-color: var(--primary);
  }
  body:not(.coh-active) p{
    color: var(--text-muted);
    line-height: 1.65;
  }

  .nav-dot, .ring .dot, .p-card-status, .badge, .t-sev-badge, .status-orb{
    transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  }