/* kosseff.name tools — shared theme
   Import this first in every tool page. */

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

:root {
  --bg:    #08080e;
  --bg2:   #0d0d16;
  --bg3:   #111120;
  --ink:   #eee9df;
  --ink2:  #928b7f;
  --ink3:  #5d574e;
  --ink4:  #332f2b;
  --gold:  #d7b775;
  --gold2: #8a6e3e;
  --gold3: #3d301a;
  --green: #4caf82;
  --green2: rgba(76,175,130,.15);
  --red:   #c0614a;
  --red2:  rgba(192,97,74,.12);
  --blue:  #9fb3c8;
  --blue2: rgba(159,179,200,.1);
  --amber: #d4884a;
  --amber2: rgba(212,136,74,.1);
  --dim:   rgba(255,255,255,.04);
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { min-height: 100svh; }

/* ── Background layers ── */
#c { position: fixed; inset: 0; z-index: 0; }

.aurora {
  position: fixed; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at calc(50% + var(--mx,0px)) calc(35% + var(--my,0px)), rgba(215,183,117,.05), transparent 28%),
    radial-gradient(circle at 20% 80%, rgba(100,110,160,.03), transparent 30%),
    radial-gradient(circle at 80% 15%, rgba(215,183,117,.02), transparent 24%);
  filter: blur(10px); opacity: .85;
}

.vig {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8,8,14,.3), transparent 18%, transparent 78%, rgba(8,8,14,.5)),
    radial-gradient(ellipse 90% 85% at 50% 50%, transparent 22%, rgba(8,8,14,.82) 100%);
}

.noise {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: .04; mix-blend-mode: screen;
  background-image: repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.9) 0 1px, transparent 1px 3px);
  background-size: 7px 7px;
}

/* ── Page layout ── */
main {
  position: relative; z-index: 5; width: 100%; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.8rem,4.2vw,3rem) clamp(1rem,4vw,2rem) 4rem;
}

/* ── Header ── */
header { text-align: center; margin-bottom: clamp(1.35rem,3vw,2.15rem); opacity: 0; animation: fadeUp .8s .1s ease forwards; }
.eyebrow { font-size: .54rem; letter-spacing: .46em; text-transform: uppercase; color: var(--ink3); margin-bottom: .9rem; }
.logo { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(2rem,5vw,3.4rem); letter-spacing: -.018em; color: var(--ink); line-height: 1; }
.logo em { font-style: italic; color: var(--gold); }
.logo .sub { color: var(--ink2); font-size: .72em; }
.rule-h { width: 1px; height: clamp(20px,2.5vw,32px); background: linear-gradient(to bottom, transparent, var(--gold2), transparent); margin: 1.05rem auto 0; }

/* ── Cards ── */
.card { border: 1px solid rgba(215,183,117,.06); border-radius: 8px; padding: 1.05rem 1.25rem; background: rgba(255,255,255,.018); }
.card.blue-tint  { border-color: rgba(159,179,200,.1);  background: rgba(159,179,200,.015); }
.card.green-tint { border-color: rgba(76,175,130,.12);  background: rgba(76,175,130,.015); }
.card.red-tint   { border-color: rgba(192,97,74,.12);   background: rgba(192,97,74,.015); }
.section-title { font-size: .5rem; letter-spacing: .4em; text-transform: uppercase; color: var(--ink3); margin-bottom: .7rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.04); }

/* ── Row (key/value pairs) ── */
.row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); gap: .35rem 1.2rem; padding: .46rem 0; border-bottom: 1px solid rgba(255,255,255,.03); align-items: baseline; }
.row:last-child { border-bottom: none; }
.row .k { font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); }
.row .v { font-size: .76rem; color: var(--ink2); word-break: break-word; line-height: 1.5; }
.row .v.hi    { color: var(--ink); }
.row .v.gold  { color: var(--gold); }
.row .v.green { color: var(--green); }
.row .v.red   { color: var(--red); }
.row .v.blue  { color: var(--blue); }
.row .v.amber { color: var(--amber); }
.row .v.dim   { color: var(--ink3); font-size: .68rem; }

/* ── Search / input ── */
.search-wrap { width: 100%; max-width: 660px; opacity: 0; animation: fadeUp .8s .3s ease forwards; margin-bottom: clamp(1.2rem,2.5vw,2rem); }
.search-box { display: flex; align-items: center; border: 1px solid rgba(215,183,117,.12); border-radius: 6px; background: rgba(255,255,255,.025); overflow: hidden; transition: border-color .2s; }
.search-box:focus-within { border-color: rgba(215,183,117,.32); box-shadow: 0 0 32px rgba(215,183,117,.04); }
.search-box input { flex: 1; background: transparent; border: none; outline: none; padding: .85rem 1.1rem; font-family: 'Geist Mono', monospace; font-size: .82rem; color: var(--ink); caret-color: var(--gold); letter-spacing: .02em; min-width: 0; }
.search-box input::placeholder { color: var(--ink3); }
.search-box button { background: rgba(215,183,117,.08); border: none; border-left: 1px solid rgba(215,183,117,.1); color: var(--gold); padding: .85rem 1.2rem; cursor: pointer; font-family: 'Geist Mono', monospace; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; transition: background .2s, color .2s, opacity .2s; white-space: nowrap; }
.search-box button:hover { background: rgba(215,183,117,.16); color: var(--ink); }
.search-box button:disabled { opacity: .45; cursor: wait; }

/* ── Quick buttons ── */
.quick-btns { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.qbtn { font-family: 'Geist Mono', monospace; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); background: transparent; border: 1px solid rgba(255,255,255,.065); border-radius: 4px; padding: .28rem .65rem; cursor: pointer; transition: color .2s, border-color .2s; }
.qbtn:hover { color: var(--gold); border-color: rgba(215,183,117,.22); }

/* ── Spinner / errors ── */
.spinner { display: none; width: 22px; height: 22px; border: 1px solid rgba(215,183,117,.15); border-top-color: var(--gold2); border-radius: 50%; animation: spin .8s linear infinite; margin: 2.2rem auto; }
.spinner.show { display: block; }
.err-msg { display: none; text-align: center; color: var(--red); font-size: .68rem; letter-spacing: .08em; padding: 1.1rem 1.25rem; max-width: 660px; width: 100%; border: 1px solid rgba(192,97,74,.14); background: rgba(192,97,74,.035); border-radius: 6px; }
.err-msg.show { display: block; }

/* ── Range slider ── */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; box-shadow: 0 0 8px rgba(215,183,117,.4); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); cursor: pointer; border: none; }

/* ── Badge / dot ── */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 3px; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.badge.vpn     { background: rgba(215,183,117,.1); color: var(--gold); }
.badge.hosting { background: rgba(192,97,74,.1);   color: var(--red); }
.badge.mobile  { background: rgba(159,179,200,.1); color: var(--blue); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }

/* ── Footer ── */
footer { position: relative; margin: 2rem 0 .5rem; text-align: center; font-size: .5rem; letter-spacing: .18em; color: rgba(238,233,223,.12); pointer-events: none; }

/* ── Links ── */
a { color: var(--gold2); text-decoration: none; }
a:hover { color: var(--gold); }

/* ── Animations ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to   { opacity: 1; } }
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}