/* ===== Oney.SubDomains — glassmorphism theme ===================== */
:root{
  --bg:#070711;
  --bg2:#0b0b1c;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.12);
  --stroke-soft:rgba(255,255,255,.07);
  --txt:#eef0fb;
  --muted:#9aa0c0;
  --faint:#6c7196;
  --accent:#7c5cff;
  --accent2:#22d3ee;
  --up:#34e3b0;
  --down:#ff5d73;
  --warn:#ffb454;
  --radius:20px;
  --shadow:0 20px 50px -20px rgba(0,0,0,.65);
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt);
  background:var(--bg);
  background-image:radial-gradient(120% 120% at 80% -10%,#15123a 0%,transparent 55%),
                   radial-gradient(120% 120% at -10% 0%,#0c2a3a 0%,transparent 50%);
  min-height:100vh;
  line-height:1.5;
  overflow-x:hidden;
}

/* ---- animated aurora --------------------------------------------- */
.aurora{position:fixed;inset:0;z-index:-1;filter:blur(90px);opacity:.55;pointer-events:none}
.blob{position:absolute;width:46vw;height:46vw;border-radius:50%;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.b1{background:#6d4bff;top:-10%;left:-5%}
.b2{background:#19c6e6;bottom:-15%;right:-8%;animation-delay:-6s}
.b3{background:#ff4f9a;top:30%;left:40%;width:34vw;height:34vw;animation-delay:-12s;opacity:.7}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,8%) scale(1.12)}66%{transform:translate(-7%,-5%) scale(.92)}}

/* ---- glass primitive --------------------------------------------- */
.glass{
  background:linear-gradient(180deg,var(--glass),var(--glass-2));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

/* ---- layout ------------------------------------------------------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 18px 60px;width:100%}
.topbar{max-width:1080px;margin:0 auto;padding:26px 18px 10px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:14px}
.logo{font-size:30px;filter:drop-shadow(0 4px 14px rgba(124,92,255,.6))}
.brand h1{font-size:21px;margin:0;font-weight:800;letter-spacing:-.02em}
.brand .accent{color:var(--accent)}
.tag{margin:0;font-size:12.5px;color:var(--muted)}

/* ---- hero --------------------------------------------------------- */
.hero{padding:34px clamp(20px,4vw,42px);margin-top:14px;text-align:center;
  transition:margin-top .55s cubic-bezier(.22,1,.36,1),padding .45s ease,transform .45s ease}
.hero-title{font-size:clamp(26px,5vw,42px);line-height:1.1;margin:0 0 10px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff 20%,#b8aaff 55%,#7ef0ff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:font-size .45s ease}
.hero-sub{margin:0 auto 24px;max-width:620px;color:var(--muted);font-size:15px;transition:font-size .45s ease}

/* ---- landing state: big, centered hero on first visit ------------ */
/* Uses margin-top (animatable) so the hero glides to the top on search. */
body.landing .hero{margin-top:clamp(48px,20vh,210px);padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(40px,7vh,72px)}
body.landing .hero-title{font-size:clamp(32px,7vw,58px)}
body.landing .hero-sub{font-size:clamp(15px,2.4vw,18px);margin-bottom:30px}

.searchbar{display:flex;align-items:center;gap:8px;max-width:620px;margin:0 auto;
  background:rgba(8,8,20,.55);border:1px solid var(--stroke);border-radius:16px;padding:7px 7px 7px 16px;
  transition:border-color .2s,box-shadow .2s}
.searchbar:focus-within{border-color:rgba(124,92,255,.7);box-shadow:0 0 0 4px rgba(124,92,255,.18)}
.search-ico{opacity:.7}
.searchbar input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);font-size:16px;font-family:var(--mono)}
.searchbar input::placeholder{color:var(--faint)}
#searchBtn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,var(--accent),#5b8bff);padding:0 22px;height:44px;border-radius:12px;
  font-weight:700;font-size:15px;letter-spacing:.01em;transition:transform .15s,filter .2s;white-space:nowrap}
#searchBtn:hover{filter:brightness(1.1)}
#searchBtn:active{transform:scale(.97)}
#searchBtn:disabled{opacity:.7;cursor:wait}

.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chips button{font-family:var(--mono);font-size:12.5px;color:var(--muted);background:var(--glass-2);
  border:1px solid var(--stroke-soft);padding:6px 12px;border-radius:999px;cursor:pointer;transition:.18s}
.chips button:hover{color:#fff;border-color:var(--accent);background:rgba(124,92,255,.14)}

/* ---- stats -------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.stat{padding:18px;text-align:center;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);opacity:.8}
.stat.up::before{background:var(--up)}
.stat.down::before{background:var(--down)}
.stat.warn::before{background:var(--warn)}
.stat-num{font-size:28px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
.stat.up .stat-num{color:var(--up)}
.stat.down .stat-num{color:var(--down)}
.stat.warn .stat-num{color:var(--warn);font-size:20px;padding-top:6px}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* ---- toolbar ------------------------------------------------------ */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin:20px 2px 12px}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.filter-chips button{font-size:13px;color:var(--muted);background:var(--glass-2);border:1px solid var(--stroke-soft);
  padding:7px 14px;border-radius:10px;cursor:pointer;transition:.15s;font-weight:500}
.filter-chips button:hover{color:#fff}
.filter-chips button.active{color:#fff;background:rgba(124,92,255,.2);border-color:var(--accent)}
.tools-right{display:flex;gap:8px;align-items:center}
#quickFilter{background:rgba(8,8,20,.55);border:1px solid var(--stroke);border-radius:10px;color:var(--txt);
  padding:8px 12px;font-size:13px;font-family:var(--mono);outline:0;width:170px;transition:.18s}
#quickFilter:focus{border-color:var(--accent)}
.ghost-btn{background:var(--glass-2);border:1px solid var(--stroke);color:var(--txt);padding:8px 14px;border-radius:10px;
  cursor:pointer;font-size:13px;font-weight:600;transition:.15s;white-space:nowrap}
.ghost-btn:hover{border-color:var(--accent);background:rgba(124,92,255,.14)}
.ghost-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- results table ------------------------------------------------ */
.results{margin-top:6px;padding:6px 6px 8px;overflow:hidden;background:linear-gradient(180deg,rgba(10,10,24,.82),rgba(8,8,20,.86))}
.results-head{padding:14px 16px 8px;font-size:13px;color:var(--muted)}
.results-head b{color:var(--txt)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{position:sticky;top:0;text-align:left;font-weight:600;font-size:12px;color:#c2c7e6;
  text-transform:uppercase;letter-spacing:.05em;padding:11px 14px;background:rgba(12,12,28,.94);backdrop-filter:blur(8px);
  border-bottom:2px solid var(--stroke);border-right:1px solid var(--stroke-soft);white-space:nowrap}
thead th:last-child{border-right:0}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--txt)}
th.sortable.asc::after{content:" ↑";color:var(--accent)}
th.sortable.desc::after{content:" ↓";color:var(--accent)}
tbody td{padding:12px 14px;border-bottom:1px solid var(--stroke-soft);border-right:1px solid var(--stroke-soft);vertical-align:middle}
tbody td:last-child{border-right:0}
tbody tr{transition:background .15s}
tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
tbody tr:hover{background:rgba(124,92,255,.10)}
tbody tr:last-child td{border-bottom:0}

.sub-cell{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13.5px}
.sub-cell a{color:var(--txt);text-decoration:none;border-bottom:1px dashed transparent;transition:.15s}
.sub-cell a:hover{color:var(--accent2);border-color:var(--accent2)}
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--faint);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.dot.up{background:var(--up);box-shadow:0 0 10px var(--up)}
.dot.down{background:var(--down);box-shadow:0 0 10px rgba(255,93,115,.6)}
.dot.warn{background:var(--warn);box-shadow:0 0 10px rgba(255,180,84,.6)}

.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;font-weight:600;
  padding:4px 9px;border-radius:8px;white-space:nowrap;border:1px solid transparent}
.badge.up{color:var(--up);background:rgba(52,227,176,.12);border-color:rgba(52,227,176,.3)}
.badge.down{color:var(--down);background:rgba(255,93,115,.12);border-color:rgba(255,93,115,.3)}
.badge.warn{color:var(--warn);background:rgba(255,180,84,.12);border-color:rgba(255,180,84,.3)}
.badge.unknown{color:var(--faint);background:rgba(255,255,255,.05);border-color:var(--stroke-soft)}
.badge .ms{opacity:.7;font-weight:400}

.t-date{font-family:var(--mono);font-size:12.5px;color:#e7e9f7;white-space:nowrap}
.t-date small{display:block;color:#aab0d4;font-size:11px}
.col-act{text-align:right}
.row-check{background:var(--glass-2);border:1px solid var(--stroke-soft);color:var(--muted);width:30px;height:30px;
  border-radius:8px;cursor:pointer;transition:.15s;font-size:14px}
.row-check:hover{color:#fff;border-color:var(--accent);background:rgba(124,92,255,.16)}
.row-check.spinning{pointer-events:none}
.row-check.spinning::before{content:"";display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}

/* ---- empty / error / skeleton ------------------------------------ */
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:15px}
.error-banner{margin-top:14px;padding:14px 18px;border-radius:14px;font-size:14px;
  background:rgba(255,93,115,.1);border:1px solid rgba(255,93,115,.35);color:#ffd2d8}
.sk-row{height:46px;margin:8px;border-radius:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

.foot{text-align:center;color:var(--faint);font-size:12.5px;padding:8px 18px 40px}
.foot a{color:var(--muted)}

/* ---- mobile: cards instead of table ------------------------------ */
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-direction:column;align-items:stretch}
  .tools-right{justify-content:space-between}
  #quickFilter{flex:1}
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tbody tr{padding:12px 14px;border-bottom:1px solid var(--stroke-soft)}
  tbody td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:14px;align-items:center}
  tbody td::before{content:attr(data-label);color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.05em;flex:none}
  .sub-cell{justify-content:flex-end;text-align:right;word-break:break-all}
  td.col-act{justify-content:flex-end}
  td.col-act::before{content:""}
  .t-date{text-align:right}
}
@media (max-width:380px){.stats{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .blob,.spinner,.sk-row,.row-check.spinning::before{animation:none}
}