/* =====================================================================
   HardLink — css/base4784.css
   Shared tokens, resets and iOS-liquid-glass utilities used on every page.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --bg-void:#07070d;
  --bg-deep:#0c0d17;
  --bg-deep-2:#111327;
  --panel:rgba(255,255,255,.055);
  --panel-strong:rgba(255,255,255,.09);
  --panel-border:rgba(255,255,255,.10);
  --panel-border-soft:rgba(255,255,255,.06);

  --violet:#8b7cf6;
  --violet-deep:#6753e0;
  --violet-glow:rgba(139,124,246,.35);
  --mint:#34d9a8;
  --mint-glow:rgba(52,217,168,.25);
  --danger:#ef5c6e;
  --danger-glow:rgba(239,92,110,.25);
  --amber:#f5b84b;

  --text-hi:#f1f2fa;
  --text-mid:#a4abc4;
  --text-low:#6b7292;

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{color-scheme:dark;scroll-behavior:smooth;overflow-x:hidden;max-width:100%}

body{
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(139,124,246,.16), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(52,217,168,.10), transparent 55%),
    var(--bg-void);
  color:var(--text-hi);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

::selection{background:var(--violet-glow);color:#fff}

/* focus visibility (accessibility floor) */
:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:8px;
}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--panel-strong);border-radius:10px}

/* ---------- liquid glass panel ---------- */
.glass{
  background:linear-gradient(155deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--panel-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 60px -25px rgba(0,0,0,.65);
  position:relative;
}
.glass::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.glass-input{
  width:100%;
  background:rgba(255,255,255,.045);
  border:1px solid var(--panel-border);
  color:var(--text-hi);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.95rem 1.1rem;
  border-radius:var(--radius-md);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.glass-input::placeholder{color:var(--text-low)}
.glass-input:focus{
  border-color:rgba(139,124,246,.55);
  background:rgba(139,124,246,.06);
}
.glass-input:disabled{opacity:.55;cursor:not-allowed}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.5rem;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.01em;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn-primary{
  color:#0a0714;
  background:linear-gradient(135deg, #a394ff, var(--violet) 55%, var(--violet-deep));
  box-shadow:0 12px 30px -10px var(--violet-glow);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{
  color:var(--text-hi);
  background:rgba(255,255,255,.05);
  border-color:var(--panel-border);
}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-danger{
  color:var(--danger);
  background:rgba(239,92,110,.09);
  border-color:rgba(239,92,110,.28);
}
.btn-danger:hover{background:rgba(239,92,110,.16)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-block{width:100%}

/* ---------- icons (inline SVG, premium line style, no emoji) ---------- */
.icon{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- shared header ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
  gap:.7rem 1rem;
  padding:1rem clamp(1.1rem,4vw,3rem);
  background:rgba(7,7,13,.72);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--panel-border-soft);
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  min-width:0; /* allow the row to shrink instead of forcing overflow */
}
.brand img{width:32px;height:32px;border-radius:9px;flex-shrink:0}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-low)}

.topbar-left,.topbar-right,.top-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* Below ~560px, a logo + two buttons never fit on one line without
   overlapping — stack the brand and the nav/actions on their own rows. */
@media (max-width:560px){
  .topbar{flex-direction:column;align-items:stretch}
  .topbar > .brand{align-self:flex-start}
  .topbar-left{width:100%;justify-content:flex-start}
  .top-nav,.topbar-right{width:100%;justify-content:space-between}
  .topbar .btn{padding:.7rem 1rem;font-size:.85rem}
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  display:flex;align-items:center;gap:.65rem;
  padding:.85rem 1.2rem;
  font-size:.88rem;font-weight:500;
  border-radius:14px;
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast.ok{background:rgba(52,217,168,.14);border:1px solid rgba(52,217,168,.35);color:#bdf4e2}
.toast.err{background:rgba(239,92,110,.14);border:1px solid rgba(239,92,110,.35);color:#fad0d5}

/* ---------- footer ---------- */
.site-footer{
  text-align:center;
  padding:2.2rem 1rem 2.6rem;
  color:var(--text-low);
  font-size:.82rem;
  border-top:1px solid var(--panel-border-soft);
}
.site-footer strong{color:var(--text-mid);font-weight:600}

/* ---------- modal / dialog system (used by every page) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,10,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:1.2rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease);
}
.modal-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.modal{
  max-width:440px;width:100%;
  padding:2.1rem;
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .3s var(--ease);
  max-height:85vh;overflow-y:auto;
}
.modal-overlay.show .modal{transform:translateY(0) scale(1)}
.modal-icon{
  width:56px;height:56px;border-radius:16px;
  background:rgba(245,184,75,.14);
  color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.2rem;
}
.modal-icon .icon{width:1.6em;height:1.6em}
.modal-icon.danger-icon{background:rgba(239,92,110,.14);color:var(--danger)}
.modal h2{font-family:var(--font-display);font-size:1.25rem;margin-bottom:.7rem}
.modal p{color:var(--text-mid);font-size:.9rem;margin-bottom:1.6rem}
.modal-actions{display:flex;gap:.7rem}

/* while any modal/drawer is open, lock the page underneath from scrolling */
body.scroll-locked{overflow:hidden}

/* ---------- ad slot framing ---------- */
.ad-slot{
  display:flex;align-items:center;justify-content:center;
  padding:.75rem;
  border-radius:var(--radius-md);
  border:1px dashed var(--panel-border);
  background:rgba(255,255,255,.025);
  max-width:100%;
  overflow-x:auto;      /* if an ad is genuinely wider than the screen, it scrolls inside its own box, never the whole page */
  overflow-y:hidden;
}
.ad-slot > *{max-width:100%}
.ad-slot iframe{max-width:100%;border:0}
.ad-slot .ad-label{
  position:absolute;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-low);
}

@keyframes floatSlow{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}