/* ════════════════════════════════════════════════════════════════════
   NumPool — Premium pages layer
   Shared, additive enhancement for the numpool.com sub-pages
   (rentals, api-docs, terms, privacy, admin). Linked AFTER each page's
   inline <style> so the cascade wins. Overlays only — background-image,
   box-shadow, border, transition, animation — never structural layout,
   IDs, or JS hooks. Uses the cyan literal (#00E5FF) so it works whether
   or not a page defines an --accent token. Remove the <link> to revert.
   Exhubb / marketplace pages do NOT load this file.
   ════════════════════════════════════════════════════════════════════ */

:root{ --pp-ease:cubic-bezier(.2,.7,.2,1); }

/* — rendering polish — */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
::selection{ background:rgba(0,229,255,.22); color:#fff; }

/* — premium scrollbars — */
*{ scrollbar-width:thin; scrollbar-color:rgba(0,229,255,.25) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(0,229,255,.3),rgba(0,102,255,.3)); border-radius:9px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(0,229,255,.5),rgba(0,102,255,.5)); background-clip:padding-box; }

/* — atmospheric depth (paints behind content via background-image, so the
     page's existing background-color and all stacking are untouched) — */
body{
  background-image:
    radial-gradient(58% 45% at 50% -6%, rgba(0,140,255,.16), transparent 60%),
    radial-gradient(42% 36% at 86% 3%,  rgba(0,229,255,.10), transparent 55%),
    radial-gradient(48% 42% at 5% 9%,   rgba(90,60,255,.085), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* — shimmering gradient page titles (guarded so unsupported browsers keep
     normal coloured text) — */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .doc-title, .wrap > h1, main > h1, .login-card h1{
    background:linear-gradient(120deg,#FFFFFF 0%,#A9E4FF 48%,#00E5FF 100%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:ppShine 7s linear infinite;
  }
}
@keyframes ppShine{ to{ background-position:220% center } }

/* — glassy top bars — */
header, .nav{
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 10px 40px -30px rgba(0,0,0,.9);
}

/* — premium surfaces: depth + smooth transitions — */
.panel, .stat, .card, .login-card, .dialog, .rental, .info-card, .modal{
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset, 0 18px 44px -26px rgba(0,0,0,.72);
  transition:transform .35s var(--pp-ease), box-shadow .35s var(--pp-ease), border-color .3s var(--pp-ease);
}
.panel:hover, .stat:hover, .card:hover{ border-color:rgba(0,229,255,.28); }

/* — small interactive cards get a gentle lift + glow — */
.stat, .svc, .dur, .proxy-type-card{ transition:transform .25s var(--pp-ease), box-shadow .25s var(--pp-ease), border-color .2s var(--pp-ease); }
.stat:hover, .svc:hover, .dur:hover, .proxy-type-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px -18px rgba(0,229,255,.55);
}

/* — buttons: depth + animated sheen sweep on hover — */
.btn, .sbtn{ position:relative; overflow:hidden; isolation:isolate; transition:transform .15s var(--pp-ease), box-shadow .2s var(--pp-ease), filter .15s; }
.btn::after, .sbtn::after{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-22deg); pointer-events:none; z-index:1;
}
.btn:hover::after, .sbtn:hover::after{ animation:ppSheen .8s var(--pp-ease); }
@keyframes ppSheen{ from{ left:-130% } to{ left:160% } }
.btn:not(.ghost):not(.btn-ghost):not(.btn-red):hover, .sbtn.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px -12px rgba(0,229,255,.5);
}

/* — refined inputs with soft focus ring — */
input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 3px rgba(0,229,255,.13);
  transition:box-shadow .2s var(--pp-ease), border-color .2s var(--pp-ease);
}

/* — admin tabs feel tactile — */
.tab{ transition:all .2s var(--pp-ease); }
.tab.active{ box-shadow:0 8px 22px -10px rgba(0,229,255,.6); }

/* — api-docs: glowing brand dot + crisper code blocks — */
.brand .dot{ box-shadow:0 0 0 4px rgba(0,229,255,.12), 0 0 16px rgba(0,229,255,.6); }
pre{ box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 16px 36px -28px rgba(0,0,0,.8); }
aside a{ transition:background .15s var(--pp-ease), color .15s var(--pp-ease); }

/* — generic button (offline / unclassed) gentle hover — */
button{ transition:transform .15s var(--pp-ease), filter .15s; }

/* — accessibility: honour reduced-motion — */
@media (prefers-reduced-motion:reduce){
  .doc-title, .wrap > h1, main > h1, .login-card h1{ animation:none !important; }
  *{ transition-duration:.01ms !important; }
}