/* Kit&Cache look: depth, glow and map pins. Screen only, so printing stays plain. */
@media screen {
  :root{
    --bg:#090e12; --card:#131c24; --card2:#1a2631; --line:#263746;
    --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  }
  html{background:var(--bg)}
  body{
    background:
      radial-gradient(1100px 560px at 85% -10%, rgba(74,168,255,.13), transparent 60%),
      radial-gradient(900px 520px at -10% 5%, rgba(255,176,32,.08), transparent 60%),
      linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/100% 34px,
      linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/34px 100%,
      var(--bg);
    background-attachment:fixed;
  }
  header{background:linear-gradient(180deg,#0f171e,#0a1015);border-bottom:1px solid #1d2a36;box-shadow:0 1px 0 rgba(255,176,32,.28),0 10px 26px rgba(0,0,0,.5)}
  .brand{font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:0;color:#fff}
  .brand span{color:var(--amber);text-shadow:0 0 12px rgba(255,176,32,.6)}
  .brand::before{content:"";margin-right:10px;width:22px;height:22px;border-radius:50%;border:2px solid var(--amber);
    background:conic-gradient(from 0deg, rgba(255,176,32,.85), rgba(255,176,32,0) 32%);
    box-shadow:0 0 12px rgba(255,176,32,.45), inset 0 0 6px rgba(0,0,0,.6);animation:kc-sweep 3.2s linear infinite}
  nav button{font-family:var(--mono);text-transform:uppercase;letter-spacing:.8px;font-size:.8rem}
  nav button.on{color:#fff;text-shadow:0 0 10px rgba(255,176,32,.55);box-shadow:inset 0 -12px 14px -12px rgba(255,176,32,.5)}

  .card{background:linear-gradient(180deg,#17232d,#101920);border:1px solid var(--line);border-radius:16px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 28px rgba(0,0,0,.4)}
  .card h2{font-family:var(--mono);text-transform:uppercase;letter-spacing:1.2px;font-size:1rem;color:#dbe8f0;display:flex;align-items:center;gap:8px}
  .card h2::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--amber);box-shadow:0 0 8px rgba(255,176,32,.8);flex:none}

  /* status tiles */
  .tile{position:relative;overflow:hidden;border:1px solid #2a3c4c;border-left:1px solid #2a3c4c;border-radius:18px;padding:16px 16px 16px 22px;
    background:linear-gradient(160deg,#20303d 0%,#131d26 55%,#0d141a 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.5),0 3px 0 #05080b,0 16px 26px rgba(0,0,0,.5);
    transition:transform .15s ease, box-shadow .15s ease}
  .tile.ok,.tile.warn,.tile.bad{border-left-color:#2a3c4c}
  .tile.ok{--st:#3ecf8e} .tile.warn{--st:#ffb020} .tile.bad{--st:#ff5a4f}
  .tile:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 0 rgba(0,0,0,.5),0 5px 0 #05080b,0 22px 34px rgba(0,0,0,.55)}
  .tile:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #05080b,0 6px 12px rgba(0,0,0,.5)}
  .tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--st,#3d5163);box-shadow:0 0 18px var(--st,transparent)}
  .tile::after{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));pointer-events:none}
  .tile.warn::before,.tile.bad::before{animation:kc-pulse 1.6s ease-in-out infinite}
  .tile .k{font-family:var(--mono);letter-spacing:1.2px;padding-right:46px}
  .tile .v{padding-right:46px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
  .tile .ic{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--st,#7d93a5);
    background:linear-gradient(180deg,#0c1318,#162029);border:1px solid #2a3c4c;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06)}
  .tile .ic svg{width:22px;height:22px;filter:drop-shadow(0 0 5px var(--st,transparent))}

  /* buttons, pills, badges, bars */
  .btn{background:linear-gradient(180deg,#ffc552,#f29a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 #9a6100,0 8px 16px rgba(0,0,0,.4);transition:transform .08s ease, box-shadow .08s ease}
  .btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 #9a6100,0 2px 6px rgba(0,0,0,.4)}
  .btn.ghost{background:linear-gradient(180deg,#26374550,#18242e),#1b2833;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 #070b0f,0 8px 14px rgba(0,0,0,.35)}
  .btn.ghost:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 #070b0f}
  .pill{background:linear-gradient(180deg,#223240,#17222c);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #070b0f}
  .pill.on{background:linear-gradient(180deg,#ffc552,#f29a00);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 0 #9a6100,0 0 14px rgba(255,176,32,.35)}
  .badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 rgba(0,0,0,.5)}
  .bar{background:#080d11;box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05);height:12px}
  .bar i{background:linear-gradient(180deg,#63e6a8,#22a86a);box-shadow:0 0 12px rgba(62,207,142,.6)}
  .alert{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.35)}
  input[type=text],input[type=number],input[type=date],input[type=search],textarea,select{background:#0a1015;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--amber);box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 0 0 3px rgba(255,176,32,.22)}
  th{font-family:var(--mono)}

  /* map */
  #map{border-radius:16px;border:1px solid #2a3c4c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 16px 30px rgba(0,0,0,.5);background:#0d1318}
  .kc-pinwrap{background:none;border:0}
  .kc-pin{width:34px;height:34px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);display:grid;place-items:center;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%), var(--c);
    border:2px solid #fff;box-shadow:-5px 7px 9px rgba(0,0,0,.55),inset 0 -3px 5px rgba(0,0,0,.28)}
  .kc-pin svg{transform:rotate(45deg);width:18px;height:18px;color:#0b1014}
  .kc-you{width:22px;height:22px;border-radius:50%;background:#4aa8ff;border:3px solid #fff;box-shadow:0 0 0 0 rgba(74,168,255,.7),0 3px 8px rgba(0,0,0,.6);animation:kc-ring 1.8s ease-out infinite}
  .kc-mini{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);border:2px solid #fff;margin-right:6px;vertical-align:-6px;box-shadow:0 2px 4px rgba(0,0,0,.5)}
  .kc-mini svg{width:12px;height:12px;color:#0b1014}
  .leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#17232d;color:#eef3f6;box-shadow:0 10px 24px rgba(0,0,0,.6)}
  .leaflet-popup-content a{color:#7cc2ff}
  .leaflet-control-layers,.leaflet-bar a{background:#17232d;color:#eef3f6;border-color:#2a3c4c}
  .leaflet-bar a:hover{background:#22313e;color:#fff}
  .leaflet-control-layers-expanded{color:#eef3f6}
  .leaflet-container .leaflet-control-attribution{background:rgba(9,14,18,.75);color:#9fb0bd}
  .leaflet-container .leaflet-control-attribution a{color:#9fb0bd}

  @keyframes kc-sweep{to{transform:rotate(360deg)}}
  @keyframes kc-pulse{0%,100%{opacity:1}50%{opacity:.45}}
  @keyframes kc-ring{0%{box-shadow:0 0 0 0 rgba(74,168,255,.7),0 3px 8px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 18px rgba(74,168,255,0),0 3px 8px rgba(0,0,0,.6)}}
  @media (prefers-reduced-motion:reduce){ .brand::before,.tile::before,.kc-you{animation:none} .tile,.btn{transition:none} }
}