/* ==========================================================================
   ShortsAPI Liquid Glass skin
   Component language follows the referenced Liquid Glass UI kit:
   translucent surfaces, reflective rims, soft scene blobs and modal blur.
   The surface itself uses an SVG displacement filter injected by ui.js.
   ========================================================================== */

:root{
  --lg-tint:rgba(18,21,31,.46);
  --lg-tint-strong:rgba(14,17,26,.64);
  --lg-tint-soft:rgba(255,255,255,.055);
  --lg-border:rgba(255,255,255,.16);
  --lg-border-soft:rgba(255,255,255,.085);
  --lg-highlight:rgba(255,255,255,.34);
  --lg-shadow:0 18px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.035);
  --lg-shadow-float:0 24px 72px rgba(0,0,0,.42),0 0 36px rgba(255,79,115,.06),inset 0 1px 0 rgba(255,255,255,.2);
  --lg-blur:blur(18px) saturate(145%);
  --lg-blur-heavy:blur(28px) saturate(150%);
}

html{background:#060811}
body{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 10%,rgba(78,207,255,.08),transparent 25%),
    radial-gradient(circle at 86% 12%,rgba(255,79,115,.10),transparent 28%),
    radial-gradient(circle at 70% 84%,rgba(161,117,255,.10),transparent 30%),
    #080a12;
}

/* Background scene borrowed as a visual language, not as the glass surface. */
.liquid-scene{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(17,28,46,.84),transparent 34%),
    linear-gradient(145deg,#080a12 0%,#0c101a 44%,#090a11 100%);
}
.liquid-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(82px);
  opacity:.26;
  animation:shortsapiBlob var(--blob-dur,22s) ease-in-out infinite alternate;
}
.liquid-blob--1{width:620px;height:620px;background:radial-gradient(circle,#21c9ef,#3157ff 68%);top:-260px;left:-180px;--blob-dur:23s}
.liquid-blob--2{width:580px;height:580px;background:radial-gradient(circle,#ff4f73,#8b4cff 70%);right:-190px;bottom:-250px;--blob-dur:18s;animation-delay:-7s}
.liquid-blob--3{width:360px;height:360px;background:radial-gradient(circle,#ff9d4d,#ff4f73 72%);left:46%;top:38%;opacity:.13;--blob-dur:26s;animation-delay:-12s}
@keyframes shortsapiBlob{
  0%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(55px,-35px,0) scale(1.08)}
  75%{transform:translate3d(-38px,48px,0) scale(.95)}
  100%{transform:translate3d(28px,26px,0) scale(1.04)}
}

/* Core glass surfaces */
.card,
.topbar,
.provider-side,
.admin-side,
.login-card,
.modal,
.access-card,
.docs-side{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025) 48%,rgba(10,13,20,.28));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow);
  backdrop-filter:var(--lg-blur);
  -webkit-backdrop-filter:var(--lg-blur);
  position:relative;
}

.card::before,
.topbar::before,
.provider-side::before,
.admin-side::before,
.login-card::before,
.modal::before,
.access-card::before,
.docs-side::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.045) 18%,transparent 42%),
    radial-gradient(circle at 88% 100%,rgba(161,117,255,.08),transparent 38%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17);
  z-index:0;
}

.card>*,
.provider-side>*,
.admin-side>*,
.login-card>*,
.modal>*,
.access-card>*,
.docs-side>*{position:relative;z-index:1}

.topbar{
  background:rgba(10,12,19,.54);
  border-width:0 0 1px;
  border-radius:0;
  box-shadow:0 10px 36px rgba(0,0,0,.20),inset 0 -1px 0 rgba(255,255,255,.04);
}
.topbar>*{position:relative;z-index:2}

.provider-side,.admin-side{
  background:rgba(10,13,20,.38);
  border-width:0 1px 0 0;
  border-radius:0;
  box-shadow:10px 0 35px rgba(0,0,0,.12),inset -1px 0 0 rgba(255,255,255,.035);
}

/* Actual SVG-refraction glass: Chromium gets distortion; other browsers keep frost. */
@supports (backdrop-filter: url("#shortsapi-liquid-glass")){
  .card,
  .topbar,
  .provider-side,
  .admin-side,
  .login-card,
  .modal,
  .access-card,
  .docs-side{
    backdrop-filter:blur(9px) saturate(145%) url("#shortsapi-liquid-glass");
    -webkit-backdrop-filter:blur(9px) saturate(145%) url("#shortsapi-liquid-glass");
  }
}

/* Small controls adopt the UI kit's lighter glass, without making the whole app noisy. */
.btn,.pill,.filter,.input,.select,.textarea,.provider-check,.endpoint-item,.provider-tag,.badge,.toggle{
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:var(--lg-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
}
.input,.select,.textarea{background:rgba(7,10,17,.36)}
.btn:hover,.pill:hover,.filter:hover{
  border-color:rgba(255,255,255,.24);
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.primary,.pill.primary,.filter.active{
  background:linear-gradient(145deg,rgba(255,79,115,.25),rgba(128,48,82,.12));
  border-color:rgba(255,111,143,.38);
  box-shadow:0 10px 28px rgba(255,79,115,.08),inset 0 1px 0 rgba(255,255,255,.16);
}
.provider-item.active,.provider-item:hover,.endpoint-item.active,.endpoint-item:hover,.admin-link.active,.admin-link:hover{
  background:linear-gradient(145deg,rgba(255,79,115,.16),rgba(255,255,255,.035));
  border-color:rgba(255,117,148,.28);
}

/* Tables / code sit inside glass rather than becoming heavy secondary cards. */
.code{
  background:rgba(3,6,11,.42);
  border-color:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.table td{border-color:rgba(255,255,255,.065)}
.divider{background:rgba(255,255,255,.08)}

/* Full-screen blurred overlay for every custom popup / admin login. */
.glass-modal-backdrop,
.admin-login-backdrop{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(4,6,11,.48);
  backdrop-filter:blur(22px) saturate(118%) brightness(.72);
  -webkit-backdrop-filter:blur(22px) saturate(118%) brightness(.72);
  animation:glassBackdropIn .2s ease both;
}
.glass-modal-backdrop[hidden]{display:none}
.glass-modal{
  width:min(520px,100%);
  border-radius:22px;
  padding:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 50%,rgba(12,15,24,.42));
  border:1px solid rgba(255,255,255,.19);
  box-shadow:0 34px 100px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:var(--lg-blur-heavy);
  -webkit-backdrop-filter:var(--lg-blur-heavy);
  position:relative;
  overflow:hidden;
  animation:glassPanelIn .24s cubic-bezier(.2,.75,.25,1) both;
}
@supports (backdrop-filter: url("#shortsapi-liquid-glass")){
  .glass-modal{
    backdrop-filter:blur(14px) saturate(150%) url("#shortsapi-liquid-glass");
    -webkit-backdrop-filter:blur(14px) saturate(150%) url("#shortsapi-liquid-glass");
  }
}
.glass-modal::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.24),transparent 35%,rgba(161,117,255,.055) 82%);
}
.glass-modal>*{position:relative;z-index:1}
.glass-modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
@keyframes glassBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes glassPanelIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* Standalone login keeps the same modal feeling if visited directly. */
body.admin-login-page .login-shell{
  position:relative;
  min-height:calc(100vh - 72px);
}
body.admin-login-page .login-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(4,6,11,.30);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
body.admin-login-page .login-card{
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035) 55%,rgba(9,12,18,.44));
  box-shadow:0 34px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.20);
}

/* Footer gets a restrained glass band so the secret trigger remains subtle. */
.site-footer{
  background:rgba(10,12,19,.45);
  border-color:rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}

/* Slight lift, matching the UI kit's hover language. */
.card{transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease,border-color .28s ease}
.card:hover{border-color:rgba(255,255,255,.20);box-shadow:var(--lg-shadow-float)}
.chart-card:hover,.live-panel:hover,.endpoint-card:hover,.request-row:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .liquid-blob{animation:none}
  .glass-modal-backdrop,.glass-modal{animation:none}
  .card,.btn,.pill,.filter{transition:none}
}


/* Overlay behavior / controls */
html.overlay-open{overflow:hidden !important}
html.overlay-open body{overflow:hidden !important}

.glass-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  color:rgba(255,255,255,.82);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 8px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
}
.glass-modal-close:hover{
  color:#fff;
  border-color:rgba(255,255,255,.26);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,79,115,.08));
}
.glass-modal-close:focus-visible{
  outline:2px solid rgba(255,79,115,.68);
  outline-offset:2px;
}

.login-card{position:relative}
.login-page-close{text-decoration:none}

.glass-modal-backdrop{
  overscroll-behavior:contain;
  touch-action:manipulation;
}

.glass-modal{
  isolation:isolate;
}

.glass-modal > .section-title:first-of-type,
.glass-modal > .login-lock:first-child{
  margin-right:42px;
}