/* ═══════════════════════════════════════════════════════════════════
   APP PREMIUM LAYER, APPLE-LED (2026-10-10) — the logged-in product (dashboard, tools, team,
   settings, login). Loaded AFTER each page's own <style>, so it can refine without editing
   any page. To revert completely, delete the <link href="/app-premium.css"> line from the
   page (or all pages).

   Same measured Apple rules as premium.css (the landing page layer): borderless tiles on a
   black stage with big radii, warm neutral greys, pill buttons, glass only on small floating
   layers (top bar, modals), one decelerating easing curve, a calm gold focus ring.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ease-lux: cubic-bezier(.32, .72, 0, 1);
  --surface: #101011;
  --card:    #161617;
  --border:  #242427;
  --border2: #333336;
  --text:    #d2d2d7;
  --mid:     #a1a1a6;
  --muted:   #6e6e73;
  --white:   #f5f5f7;
  --glass-bg: rgba(40, 40, 43, .55);
  --glass-blur: saturate(1.8) blur(20px);
}

/* Grain: removes banding on dark gradients, adds tactility. Static, 3% opacity. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* TILES: no outline, solid near-black fill, 22px radius, a whisper of top light. */
.card, .hero, .swidget, .tool-tile {
  border-color: transparent !important;
  border-radius: 22px;
  background-color: var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tool-tile {
  transition: transform .5s var(--ease-lux), background-color .4s var(--ease-lux), box-shadow .5s var(--ease-lux) !important;
}
.tool-tile:hover {
  transform: translateY(-3px); background-color: #1c1c1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 50px rgba(0, 0, 0, .5);
}
.hero { border-radius: 28px; }
.card-hover:hover { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 20px 44px rgba(0, 0, 0, .45); }

/* BUTTONS: fully round pills. The gold primary gets a metal finish. */
.btn { border-radius: 980px; transition: transform .35s var(--ease-lux), box-shadow .35s var(--ease-lux), filter .3s, background .25s, border-color .25s; }
.btn:active { transform: scale(.97); }
.btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(110, 80, 15, .4), 0 8px 24px rgba(194, 161, 90, .2);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(110, 80, 15, .4), 0 14px 36px rgba(194, 161, 90, .32);
  filter: brightness(1.04);
}
.btn-outline { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }

/* FIELDS: soft filled inputs, gold glow when focused, instead of a hard outline. */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
  border-radius: 12px;
  transition: border-color .3s var(--ease-lux), box-shadow .3s var(--ease-lux), background-color .3s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(201, 168, 76, .55);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .12);
}

/* GLASS, only on floating layers: the top bar and dialogs. */
.app-nav {
  background: rgba(22, 22, 23, .72) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}
.modal-bg { background: rgba(0, 0, 0, .6) !important; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.modal {
  border-radius: 24px !important; border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(28, 28, 30, .86) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 100px rgba(0, 0, 0, .65);
}

/* SIDEBAR: a hairline instead of a boxed edge. */
.side { border-right-color: rgba(255, 255, 255, .06) !important; }

/* FOCUS RING: calm gold, visible for keyboard users, replaces the browser default. */
:focus-visible { outline: 2px solid rgba(232, 196, 106, .8); outline-offset: 3px; border-radius: 8px; }

/* Output / result areas on the tool pages read as a paper-dark panel. */
.output-area { border-radius: 18px; border-color: rgba(255, 255, 255, .06) !important; }

@media (prefers-reduced-motion: reduce) {
  .tool-tile:hover { transform: none; }
  .btn:active { transform: none; }
}
@media (max-width: 768px) {
  body::after { opacity: .024; }
  .card, .swidget, .tool-tile { border-radius: 18px; }
  .hero { border-radius: 22px; }
}