:root{
  --bg:#06101f;
  --bg2:#0a1830;
  --glass:rgba(6,16,31,.66);
  --glass2:rgba(12,29,52,.55);
  --line:rgba(135,194,255,.26);
  --line2:rgba(255,255,255,.12);
  --blue:#2ba7ff;
  --blue2:#7cc9ff;
  --navy:#223a88;
  --red:#ee2435;
  --text:#f4f8ff;
  --muted:#b8c6d8;
  --shadow:0 18px 55px rgba(0,0,0,.38);
  --neon-blue:0 0 8px rgba(43,167,255,.92),0 0 22px rgba(43,167,255,.48);
  --neon-red:0 0 8px rgba(238,36,53,.78),0 0 20px rgba(238,36,53,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 0%,rgba(34,58,136,.35),transparent 34%),
    radial-gradient(circle at 90% 20%,rgba(43,167,255,.16),transparent 30%),
    linear-gradient(180deg,var(--bg),#07162b 52%,#050c18);
}
button,input{font:inherit}
a{color:inherit}
.bg-photo{
  position:fixed; inset:0; z-index:-4; background-size:cover; background-position:center;
  opacity:.28; filter:saturate(.8) contrast(1.02);
  transition:opacity .7s ease, background-image 1s ease;
}
.bg-grid{
  position:fixed; inset:0; z-index:-3; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(rgba(92,164,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,164,255,.14) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 92%);
}
.bg-vignette{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,7,14,.24),rgba(2,7,14,.72)),
    radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.55) 100%);
}
.glass{
  background:linear-gradient(180deg,rgba(13,29,52,.72),rgba(5,14,28,.64));
  border:1px solid var(--line);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05),0 0 34px rgba(43,167,255,.06);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
.glass-lite{
  background:rgba(10,25,46,.48);
  border:1px solid rgba(118,184,255,.20);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.preloader{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% -10%,rgba(34,92,171,.52),transparent 40%),
    #050b15;
  transition:opacity .55s ease,visibility .55s ease;
}
.preloader.hide{opacity:0;visibility:hidden}
.load-card{width:min(760px,88vw)}
.load-brand{font-weight:800;letter-spacing:.18em;font-size:clamp(13px,1.7vw,18px);margin-bottom:13px;color:#dfeeff;text-shadow:var(--neon-blue)}
.load-row{display:grid;grid-template-columns:42px 1fr 48px;gap:12px;align-items:center;color:#dcecff;font-size:12px}
.load-track{height:7px;border:1px solid rgba(156,201,255,.35);background:rgba(255,255,255,.05);overflow:hidden}
.load-bar{height:100%;width:0;background:linear-gradient(90deg,#2ba7ff,#72d1ff);box-shadow:var(--neon-blue);transition:width .12s linear}

.topbar{
  width:min(1420px,calc(100% - 34px));
  margin:18px auto 0;
  padding:18px 20px;
  border-radius:15px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  position:sticky;top:14px;z-index:40;
}
.eyebrow{font-size:11px;letter-spacing:.28em;color:#8ebff0;font-weight:800;margin-bottom:4px}
.brand-block h1{margin:0;font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-.02em;text-shadow:0 0 18px rgba(43,167,255,.22)}
.brand-block h1>span{font-weight:650;color:#e8eef7}
.brand-block p{margin:8px 0 0;color:#a9bfd9;font-size:13px}
.top-actions{display:flex;align-items:stretch;gap:12px}
.counter{
  min-width:92px;border-radius:10px;padding:10px 14px;display:grid;place-items:center;
  box-shadow:0 0 18px rgba(43,167,255,.10);
}
.counter-label{font-size:10px;letter-spacing:.18em;color:#98b7d9}
.counter strong{font-size:25px;color:#75c8ff;text-shadow:var(--neon-blue)}

.neon-btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 18px;border-radius:8px;
  border:1px solid rgba(76,185,255,.72);
  background:linear-gradient(180deg,rgba(17,47,84,.92),rgba(8,25,48,.96));
  color:#ecf8ff;text-decoration:none;font-weight:800;letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(43,167,255,.10) inset,var(--neon-blue);
  transition:transform .2s ease,filter .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.neon-btn::after{
  content:"";position:absolute;inset:2px;border-radius:6px;border:1px solid rgba(255,255,255,.08);pointer-events:none;
}
.neon-btn:hover,.neon-btn:focus-visible{
  transform:translateY(-2px);filter:brightness(1.12);
  border-color:#8ad7ff;
  box-shadow:0 0 10px rgba(43,167,255,1),0 0 28px rgba(43,167,255,.75),0 0 52px rgba(43,167,255,.30);
  outline:none;
}
.neon-btn:active{transform:translateY(0)}
.neon-btn.primary{min-width:188px}
.neon-btn.share{min-width:118px;background:linear-gradient(180deg,rgba(18,57,46,.78),rgba(9,33,32,.90));border-color:rgba(113,243,163,.64);box-shadow:0 0 9px rgba(69,255,143,.62),0 0 26px rgba(69,255,143,.20)}
.neon-btn.share:hover{box-shadow:0 0 12px rgba(69,255,143,.95),0 0 34px rgba(69,255,143,.40)}

.shell{width:min(1420px,calc(100% - 34px));margin:16px auto 32px}
.hero{
  border-radius:15px;padding:clamp(20px,3vw,34px);
  display:grid;grid-template-columns:1.45fr .75fr;gap:20px;align-items:stretch;
}
.status-line{font-size:11px;letter-spacing:.18em;color:#91c9ef;font-weight:800;display:flex;gap:9px;align-items:center}
.status-dot{width:8px;height:8px;border-radius:50%;background:#40d98f;box-shadow:0 0 10px rgba(64,217,143,1),0 0 24px rgba(64,217,143,.5)}
.hero h2{font-size:clamp(28px,4vw,54px);line-height:1.04;max-width:900px;margin:18px 0 14px;letter-spacing:-.035em}
.hero p{margin:0;max-width:920px;color:#b8c8da;font-size:clamp(14px,1.4vw,17px);line-height:1.7}
.hero-side{border-radius:12px;padding:22px;display:flex;flex-direction:column;justify-content:center}
.mini-label{font-size:10px;letter-spacing:.22em;color:#82bce9;font-weight:800;margin-bottom:18px}
.arch{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}
.arch span{padding:14px 9px;text-align:center;border:1px solid rgba(85,177,255,.28);background:rgba(0,0,0,.15);font-size:11px;color:#a8bdd3}
.arch span b{font-size:14px;color:#f2f7ff}
.arch i{color:#4fb5ff;text-shadow:var(--neon-blue);font-style:normal;font-size:18px}

.controls{
  margin:14px 0;border-radius:12px;padding:12px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.searchbox{display:flex;align-items:center;gap:10px;min-width:min(520px,100%);padding:0 13px;border:1px solid rgba(95,178,255,.26);background:rgba(0,0,0,.18);height:46px;border-radius:8px;box-shadow:inset 0 0 16px rgba(43,167,255,.04)}
.searchbox span{color:#75c5ff;font-size:20px;text-shadow:var(--neon-blue)}
.searchbox input{width:100%;border:0;outline:0;color:#edf7ff;background:transparent}
.searchbox input::placeholder{color:#7d94ad}
.hint{color:#8ea5bd;font-size:12px}

.tools{border-radius:14px;overflow:hidden}
.tool-item{border-bottom:1px solid rgba(139,190,239,.15)}
.tool-item:last-of-type{border-bottom:0}
.tool-item summary{
  list-style:none;cursor:pointer;min-height:72px;
  display:grid;grid-template-columns:58px 1fr 42px;align-items:center;gap:12px;padding:0 18px;
  background:linear-gradient(90deg,rgba(255,255,255,.015),rgba(255,255,255,.005));
  transition:background .18s ease,box-shadow .18s ease;
}
.tool-item summary::-webkit-details-marker{display:none}
.tool-item summary:hover{
  background:linear-gradient(90deg,rgba(43,167,255,.08),rgba(43,167,255,.01));
  box-shadow:inset 3px 0 0 rgba(43,167,255,.75),inset 0 0 26px rgba(43,167,255,.04);
}
.tool-number{font-size:13px;color:#73c7ff;font-weight:900;letter-spacing:.1em;text-shadow:var(--neon-blue)}
.tool-main{display:flex;align-items:center;justify-content:space-between;gap:15px;min-width:0}
.tool-title{font-weight:760;font-size:15px;color:#f2f6fb}
.tool-tag{font-size:10px;white-space:nowrap;padding:5px 8px;border:1px solid rgba(111,184,255,.28);background:rgba(37,95,150,.16);color:#9bd5ff;border-radius:5px}
.plus{font-size:27px;color:#63c2ff;text-align:center;text-shadow:var(--neon-blue);transition:transform .25s ease,color .25s ease}
.tool-item[open] .plus{transform:rotate(45deg);color:#ff5260;text-shadow:var(--neon-red)}
.tool-item[open] summary{box-shadow:inset 3px 0 0 var(--blue),inset 0 -1px 0 rgba(92,177,255,.25);background:rgba(24,69,111,.10)}
.tool-body{padding:0 26px 22px 88px;animation:drop .24s ease}
.tool-body p{margin:0 0 18px;color:#b4c5d7;line-height:1.7;font-size:14px;max-width:1000px}
.tool-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.route{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#6f89a3;word-break:break-all}
@keyframes drop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.empty-state{padding:34px;text-align:center;color:#9db0c4}

.footer{
  display:flex;justify-content:space-between;gap:20px;padding:18px 4px 0;
  color:#6f849d;font-size:11px;letter-spacing:.03em;
}
.toast{
  position:fixed;left:50%;bottom:24px;z-index:90;
  transform:translate(-50%,18px);opacity:0;pointer-events:none;
  padding:11px 16px;border-radius:8px;color:#eaf8ff;background:rgba(5,20,36,.92);
  border:1px solid rgba(82,186,255,.52);box-shadow:var(--neon-blue);
  transition:.25s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .topbar{align-items:flex-start}
  .brand-block p{display:none}
  .hero{grid-template-columns:1fr}
  .hero-side{display:none}
  .controls{align-items:stretch;flex-direction:column}
  .searchbox{min-width:100%}
  .hint{padding-left:2px}
}
@media (max-width:650px){
  .topbar,.shell{width:min(100% - 18px,1420px)}
  .topbar{top:8px;margin-top:8px;padding:14px}
  .counter{display:none}
  .brand-block h1{font-size:23px}
  .brand-block h1>span{display:block;margin-top:5px;font-size:15px}
  .eyebrow{font-size:9px}
  .neon-btn.share{min-width:50px;padding:0 12px}
  .neon-btn.share span:last-child{display:none}
  .hero{padding:20px}
  .hero h2{font-size:31px}
  .tool-item summary{grid-template-columns:42px 1fr 30px;padding:0 11px}
  .tool-main{display:block}
  .tool-title{font-size:13px}
  .tool-tag{display:inline-block;margin-top:6px}
  .tool-body{padding:0 16px 18px 53px}
  .route{display:none}
  .footer{display:block;line-height:1.7}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}