:root{
  --electric-bg:#06111f;
  --electric-panel:rgba(8,22,43,.78);
  --electric-panel-strong:rgba(7,18,36,.9);
  --electric-border:rgba(73,177,255,.28);
  --electric-text:#edf7ff;
  --electric-muted:#b9cce2;
  --electric-cyan:#35dcff;
  --electric-blue:#5476ff;
  --electric-violet:#7c63ff;
}

html,body{min-height:100%;}
body{
  position:relative;
  margin:0;
  color:var(--electric-text);
  background:
    linear-gradient(180deg,rgba(3,9,20,.68),rgba(3,10,22,.86)),
    url('/static/electric-storm-tile.png?v=20260908a') center top / 920px 920px repeat,
    var(--electric-bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 15% 8%,rgba(53,220,255,.12),transparent 26rem),
    radial-gradient(circle at 80% 4%,rgba(124,99,255,.10),transparent 30rem),
    radial-gradient(circle at 52% 50%,rgba(84,118,255,.05),transparent 34rem);
}
header,main,footer{position:relative;z-index:1;}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(5,14,30,.88),rgba(6,16,34,.66));
  border-bottom:1px solid var(--electric-border);
  box-shadow:0 18px 46px rgba(0,7,20,.34),inset 0 -1px 0 rgba(53,220,255,.08);
  backdrop-filter:blur(14px);
}
.topbar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 42%,rgba(53,220,255,.08),transparent 22rem),
    radial-gradient(circle at 30% 18%,rgba(124,99,255,.07),transparent 26rem);
}
.topbar>.container{position:relative;z-index:1;padding-top:16px;padding-bottom:12px;}
.header-row{min-height:86px;align-items:center;}
.brand{
  flex:0 1 500px;
  min-width:0;
  display:flex;
  align-items:center;
}
.brand-logo{
  display:block;
  width:100%;
  max-width:500px;
  height:auto;
  filter:drop-shadow(0 0 14px rgba(53,220,255,.18)) drop-shadow(0 10px 26px rgba(32,84,180,.26));
}
.searchwrap{
  flex:1 1 0;
  min-width:360px;
  padding-left:18px;
}
.searchbar{
  width:min(760px,100%);
  gap:10px;
  padding:6px;
  border:1px solid rgba(96,185,255,.22);
  border-radius:16px;
  background:rgba(5,15,32,.58);
  box-shadow:0 14px 34px rgba(0,8,24,.24),inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(12px);
}
.search-input-wrap{
  flex:1 1 auto;
  min-width:0;
}
.input{
  width:100%;
  height:50px;
  border-radius:12px;
  border:1px solid rgba(100,184,255,.18);
  background:rgba(8,20,40,.82);
  color:var(--electric-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.input::placeholder{color:#aebfd5;}
.input:focus{border-color:rgba(53,220,255,.62);box-shadow:0 0 0 3px rgba(53,220,255,.14),0 0 18px rgba(53,220,255,.12);}
.btn{
  flex:0 0 auto;
  height:50px;
  min-width:102px;
  padding:0 20px;
  border:1px solid rgba(129,196,255,.24);
  border-radius:12px;
  background:linear-gradient(135deg,var(--electric-violet),var(--electric-blue) 48%,var(--electric-cyan));
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 24px rgba(49,104,255,.28),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn:hover{filter:brightness(1.06);}
.rightmeta{flex:0 0 auto;}
.pill,.theme-toggle{
  border-color:rgba(94,179,255,.18);
  background:rgba(6,17,36,.72);
  box-shadow:0 8px 22px rgba(0,8,22,.22);
}
.pill{color:#d9e8f7;}
.statusline{
  width:fit-content;
  margin-top:5px;
  padding:5px 9px;
  border-radius:8px;
  background:rgba(5,14,30,.45);
  color:#c8d8ea;
  font-size:11px;
  backdrop-filter:blur(8px);
}
.statusline span:first-child{color:#72e9ff;font-weight:800;}

main .container{padding-top:34px;padding-bottom:12px;}
.hgroup{margin-bottom:20px;}
.hgroup>div{position:relative;padding-left:18px;}
.hgroup>div::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--electric-cyan),var(--electric-violet));
  box-shadow:0 0 14px rgba(53,220,255,.24);
}
h1,.hgroup h1{margin:0;color:#f7fbff;font-size:clamp(2.15rem,3vw,3.1rem);line-height:1.05;font-weight:900;letter-spacing:-.03em;}
.hint{margin-top:9px;color:var(--electric-muted);font-size:1rem;line-height:1.55;}
.grid{gap:16px;}
.card{
  position:relative;
  min-height:128px;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid var(--electric-border);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,27,52,.78),rgba(7,18,36,.88));
  box-shadow:0 16px 34px rgba(0,8,24,.24),inset 0 1px 0 rgba(255,255,255,.03);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 100% 0%,rgba(53,220,255,.10),transparent 30%);
}
.accentline{height:3px;margin-bottom:11px;background:linear-gradient(90deg,var(--electric-violet),var(--electric-cyan) 62%,transparent);opacity:1;}
.card .label{color:#d7e5f4;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;}
.card .value{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.01em;}
.card .meta{color:#afc4da;line-height:1.45;}
.dot.ok{background:var(--electric-blue);}.dot.live{background:var(--electric-cyan);}

.panel{
  margin-top:2px;
  overflow:hidden;
  border:1px solid var(--electric-border);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(10,25,49,.84),rgba(6,17,34,.93));
  box-shadow:0 16px 38px rgba(0,8,24,.26),inset 0 1px 0 rgba(255,255,255,.025);
}
.tabs{
  padding:8px 10px 0;
  gap:6px;
  background:rgba(255,255,255,.015);
  border-bottom:1px solid rgba(77,165,255,.16);
}
.tab{min-height:42px;border-radius:11px 11px 0 0;color:#b9cce1;font-weight:750;}
.tab.active{color:var(--electric-cyan);background:rgba(5,16,34,.88);border-color:rgba(77,165,255,.18);box-shadow:inset 0 -2px 0 var(--electric-cyan);}
.actions{padding:13px 14px;gap:10px;background:rgba(255,255,255,.012);border-bottom:1px solid rgba(77,165,255,.14);}
.linkbtn{border-radius:11px;border:1px solid rgba(83,172,255,.24);background:rgba(6,18,38,.72);color:#edf7ff;font-weight:700;}
.linkbtn:hover:not(:disabled){border-color:rgba(53,220,255,.46);box-shadow:0 0 16px rgba(53,220,255,.08);}
.panel-body{min-height:210px;padding:18px;background:rgba(3,11,26,.18);}
pre{border-radius:12px;border:1px solid rgba(76,159,255,.18);background:rgba(2,9,22,.74);}

.storm-footer{
  position:relative;
  margin-top:40px;
  min-height:116px;
  overflow:hidden;
  border-top:1px solid rgba(77,171,255,.20);
  background:linear-gradient(180deg,rgba(4,12,26,.12),rgba(4,11,24,.52));
}
.storm-footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(53,220,255,.08),transparent 22rem);
}
.footer-inner{position:relative;z-index:1;min-height:116px;color:#cbd9ea;text-shadow:0 2px 10px rgba(0,0,0,.28);}
.footer-inner .electric{color:#69e6ff;text-shadow:0 0 12px rgba(53,220,255,.20);}

html:not([data-theme="dark"]) body{
  background:
    linear-gradient(180deg,rgba(5,12,26,.50),rgba(6,15,31,.72)),
    url('/static/electric-storm-tile.png?v=20260908a') center top / 920px 920px repeat,
    #0a1829;
}
html:not([data-theme="dark"]) .input{background:rgba(232,243,255,.90);color:#10233c;border-color:rgba(90,155,209,.28);}
html:not([data-theme="dark"]) .input::placeholder{color:#65778d;}
html:not([data-theme="dark"]) .card{background:linear-gradient(180deg,rgba(240,247,255,.88),rgba(224,236,248,.84));border-color:rgba(86,151,209,.30);}
html:not([data-theme="dark"]) .card .label{color:#334d68;}
html:not([data-theme="dark"]) .card .value{color:#10243d;}
html:not([data-theme="dark"]) .card .meta{color:#516a84;}
html:not([data-theme="dark"]) .panel{background:linear-gradient(180deg,rgba(237,246,255,.90),rgba(220,233,246,.88));border-color:rgba(86,151,209,.28);}
html:not([data-theme="dark"]) .tabs,html:not([data-theme="dark"]) .actions{background:rgba(230,240,250,.72);border-color:rgba(100,154,201,.20);}
html:not([data-theme="dark"]) .tab{color:#4d6680;}
html:not([data-theme="dark"]) .tab.active{color:#155b86;background:rgba(248,252,255,.88);box-shadow:inset 0 -2px 0 #1fb9e8;}
html:not([data-theme="dark"]) .linkbtn{background:rgba(242,248,255,.84);color:#26415e;border-color:rgba(88,146,196,.26);}
html:not([data-theme="dark"]) .panel-body{background:rgba(239,247,255,.68);}
html:not([data-theme="dark"]) h1{color:#f8fbff;text-shadow:0 3px 18px rgba(0,8,20,.28);}
html:not([data-theme="dark"]) .hint{color:#d4e0ed;text-shadow:0 2px 12px rgba(0,8,20,.22);}

@media (max-width:1280px){
  .brand{flex-basis:360px;}.brand-logo{max-width:360px;}.searchwrap{min-width:280px;padding-left:8px;}
}
@media (max-width:980px){
  .topbar{position:relative;}.header-row{min-height:0;}.brand{flex:0 1 350px;min-width:0;}.brand-logo{max-width:350px;}.searchwrap{flex:1 1 100%;min-width:0;padding-left:0;}.statusline{display:none;}.footer-inner{flex-wrap:wrap;text-align:center;}
}
@media (max-width:760px){
  .header-row{flex-wrap:wrap;}.brand{flex:1 1 100%;}.brand-logo{max-width:340px;}.searchwrap{order:3;flex:1 1 100%;width:100%;}.rightmeta{margin-left:auto;}.searchbar{width:100%;}
}
@media (max-width:640px){
  main .container{padding-top:24px;}.hgroup>div{padding-left:14px;}.card{min-height:108px;}.panel-body{padding:14px;}.actions{padding:10px;}
}