/* Pakstoor :: core.css :: v1.3-000001 :: 2026-04-29 */
[hidden] { display: none !important; }

/* ============================================================
   PAKSTOOR — DESIGN SYSTEM FOUNDATION
   Next-gen industrial minimalism.
   Section 1 of the build. All later sections consume this file.
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {

  /* ---------- SURFACE / DEPTH ---------- */
  --bg:           #14181D;   /* base — page */
  --bg-1:         #1B2027;   /* panel */
  --bg-2:         #232932;   /* raised panel / hover */
  --bg-3:         #2B313A;   /* highest surface (modals, menus) */
  --bg-4:         #373F49;   /* edge highlights, pressed states */
  --black-deep:   #09070A;   /* sys-bar, deep accents */

  /* ---------- INK ---------- */
  --ink:          #ECEFF2;   /* primary */
  --ink-muted:    #A6AFB9;   /* secondary */
  --ink-dim:      #737C87;   /* tertiary / captions */
  --ink-faint:    #4A535D;   /* disabled / watermark */

  /* ---------- STRUCTURE (hairlines) ---------- */
  --line:         #2A313A;   /* subtle division */
  --line-2:       #343C46;   /* default border */
  --line-bright:  #48515C;   /* prominent border */

  /* ---------- GOLD (accent metal) ---------- */
  --gold:         #D9A625;
  --gold-light:   #F0C64D;
  --gold-deep:    #B88417;
  --gold-dim:     #8D6711;
  --gold-ink:     #14181D;   /* text on gold surfaces */
  --gold-wash:    rgba(217, 166, 37, 0.08);
  --gold-wash-2:  rgba(217, 166, 37, 0.14);

  /* ---------- STEEL (structure metal) ---------- */
  --steel:        #B8BEC4;
  --steel-light:  #D5DAE0;
  --steel-dim:    #7A838D;
  --steel-deep:   #565E67;
  --steel-wash:   rgba(184, 190, 196, 0.06);

  /* ---------- SEMANTIC ---------- */
  --success:      #5EA872;
  --success-deep: #3F7552;
  --success-wash: rgba(94, 168, 114, 0.10);

  --warning:      #E3902D;
  --warning-wash: rgba(227, 144, 45, 0.10);

  --danger:       #D85145;
  --danger-wash:  rgba(216, 81, 69, 0.10);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular, 14px base */
  --fs-10:  10px;
  --fs-11:  11px;
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;   /* body base */
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-56:  56px;
  --fs-64:  64px;
  --fs-72:  72px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.2em;

  /* Weights */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;

  /* ---------- SPACING (4px grid) ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   28px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-14:  56px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* ---------- RADIUS (controlled, engineered) ---------- */
  --r-0:   0;
  --r-1:   2px;   /* inputs, chips */
  --r-2:   3px;   /* buttons, panels */
  --r-3:   4px;   /* cards, modals */
  --r-4:   6px;   /* hero elements */
  --r-5:   16px;  /* cards — locked */
  --r-pill: 999px;

  /* ---------- ELEVATION (restrained) ---------- */
  /* 1 = hairline pop, 2 = dropdown, 3 = modal. No puffy shadows. */
  --elev-1: 0 1px 0 0 rgba(0, 0, 0, 0.25), 0 0 0 1px var(--line-2);
  --elev-2: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line-2);
  --elev-3: 0 24px 64px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--line-bright);

  /* Gold glow — used only for active/focus on primary */
  --glow-gold: 0 0 0 3px rgba(217, 166, 37, 0.18);

  /* ---------- MOTION ---------- */
  --dur-1:  120ms;    /* micro: hover, press */
  --dur-2:  180ms;    /* default: state change */
  --dur-3:  260ms;    /* deliberate: enter/exit */
  --dur-4:  400ms;    /* large surfaces */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:    cubic-bezier(0, 0, 0.2, 1);
  --ease-accel:    cubic-bezier(0.4, 0, 1, 1);
  --ease-sharp:    cubic-bezier(0.55, 0, 0.45, 1);

  /* ---------- LAYOUT ---------- */
  --container:      1320px;
  --container-wide: 1440px;
  --gutter:         28px;

  /* ---------- Z-INDEX ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   50;
  --z-nav:      100;
  --z-dropdown: 200;
  --z-overlay:  800;
  --z-modal:    900;
  --z-toast:    1000;

  /* ---------- FOCUS ---------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}

/* ------------------------------------------------------------
   RESET — minimal, opinionated
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  font-weight: var(--fw-400);
  color: var(--ink);
  background: var(--bg);
  /* Flex column + min-height 100vh = footer always sits at the
     viewport bottom (or below, if content is longer). Without this,
     short pages left grey space under the footer. The child
     .page-main already has flex: 1 (shell.css) to fill the gap. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;

  /* Subtle atmospheric depth. Fixed so scroll feels weighted. */
  background-image:
    radial-gradient(1200px 600px at 80% -160px, rgba(217, 166, 37, 0.035), transparent 60%),
    radial-gradient(900px 500px at -120px 520px, rgba(184, 190, 196, 0.02), transparent 60%);
  background-attachment: fixed;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, svg { vertical-align: middle; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

/* Remove built-in number spinners — we render them in the UI when needed */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* Selection — gold tint for brand consistency */
::selection {
  background: rgba(217, 166, 37, 0.28);
  color: var(--ink);
}

/* Scrollbar — steel, minimal */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

/* Reduced motion — respect user preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   A11Y PRIMITIVES
   ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: var(--s-4);
  background: var(--gold);
  color: var(--gold-ink);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--fs-12);
  border-radius: var(--r-2);
  z-index: var(--z-toast);
  transition: top var(--dur-2) var(--ease-decel);
}
.skip-link:focus { top: var(--s-4); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* ------------------------------------------------------------
   LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container-full {
  width: 100%;
  padding-inline: var(--gutter);
}

.stack       { display: flex; flex-direction: column; gap: var(--s-4); }
.row         { display: flex; flex-direction: row;    gap: var(--s-4); align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }

/* Section spacing rhythm */
.section       { padding-block: var(--s-16); }
.section-tight { padding-block: var(--s-10); }
.section-loose { padding-block: var(--s-20); }

/* Divider — a hairline, nothing more */
.hairline {
  height: 1px;
  background: var(--line);
  border: 0;
  width: 100%;
}
.hairline-bright { background: var(--line-2); }

/* Vertical divider for inline rows */
.v-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--line-2);
  vertical-align: middle;
  margin-inline: var(--s-2);
}

/* ------------------------------------------------------------
   TYPOGRAPHY — utility classes
   ------------------------------------------------------------ */
.t-display { font-family: var(--font-display); font-weight: var(--fw-700); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); text-transform: uppercase; }
.t-mono    { font-family: var(--font-mono); letter-spacing: var(--tracking-wide); }

.t-h1 { font-family: var(--font-display); font-size: clamp(var(--fs-48), 6vw, var(--fs-72)); font-weight: var(--fw-700); line-height: 0.95; letter-spacing: -0.01em;  text-transform: uppercase; }
.t-h2 { font-family: var(--font-display); font-size: clamp(var(--fs-32), 4vw, var(--fs-56)); font-weight: var(--fw-700); line-height: 1.0;  letter-spacing: -0.005em; text-transform: uppercase; }
.t-h3 { font-family: var(--font-display); font-size: var(--fs-28); font-weight: var(--fw-700); line-height: 1.1; text-transform: uppercase; }
.t-h4 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-600); line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.t-h5 { font-family: var(--font-sans);    font-size: var(--fs-16); font-weight: var(--fw-600); line-height: 1.3; }

.t-body    { font-size: var(--fs-14); line-height: var(--lh-normal);  color: var(--ink); }
.t-body-lg { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--ink-muted); }
.t-caption { font-size: var(--fs-12); color: var(--ink-dim); }
.t-eyebrow { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold);      font-weight: var(--fw-600); }
.t-label   { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: var(--tracking-wider);  text-transform: uppercase; color: var(--ink-muted); font-weight: var(--fw-600); }
.t-numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.t-ink     { color: var(--ink); }
.t-muted   { color: var(--ink-muted); }
.t-dim     { color: var(--ink-dim); }
.t-gold    { color: var(--gold); }
.t-steel   { color: var(--steel); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-danger  { color: var(--danger); }

/* Text-on-gold wordmark effect — reserved for brand usage */
.t-goldfill {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ------------------------------------------------------------
   PANEL — the core surface. Use instead of "card" everywhere.
   ------------------------------------------------------------ */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  position: relative;
}

.panel-raised { background: var(--bg-2); }
.panel-deep   { background: var(--bg-3); }

.panel-pad    { padding: var(--s-6); }
.panel-pad-sm { padding: var(--s-4); }
.panel-pad-lg { padding: var(--s-8); }

/* Panel with a top-edge gold indicator — for featured / active states */
.panel-accent::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: var(--r-3) var(--r-3) 0 0;
}

/* Panel header — small eyebrow strip inside panels */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--line-2);
}
.panel-head-title {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.panel-body { padding: var(--s-6); }

/* ------------------------------------------------------------
   BUTTONS — 3 variants × 3 sizes, all token-driven
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* 8px reads as clearly-rounded without becoming pill. The token
     --r-2 is 3px (shared with inputs/chips/panels) which is too
     tight for a ~42 px-tall button. Overridden here only. */
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  line-height: 1;
  /* Default size = .btn-md values. Ensures every .btn has sane padding
     and font-size even if a size modifier (.btn-sm / .btn-md / .btn-lg)
     isn't added. Previously the orphan styles.css was masking the
     missing defaults on some pages — without that fallback, unsized
     buttons were rendering at browser-native tight padding. */
  padding: 11px 18px;
  font-size: var(--fs-12);
  transition:
    background-color var(--dur-1) var(--ease-standard),
    border-color     var(--dur-1) var(--ease-standard),
    color            var(--dur-1) var(--ease-standard),
    transform        var(--dur-1) var(--ease-standard),
    box-shadow       var(--dur-1) var(--ease-standard);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg { flex-shrink: 0; width: 14px; height: 14px; }
.btn-lg svg { width: 16px; height: 16px; }

/* Sizes */
.btn-sm { padding: 8px 14px;  font-size: var(--fs-11); }
.btn-md { padding: 11px 18px; font-size: var(--fs-12); }
.btn-lg { padding: 15px 24px; font-size: var(--fs-13); letter-spacing: 0.08em; }

/* Primary — gold, used sparingly */
.btn-primary {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.btn-primary:active {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(1px);
}
.btn-primary:focus-visible {
  box-shadow: var(--glow-gold);
}

/* Secondary — steel frame, transparent fill */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-bright);
}
.btn-secondary:hover {
  background: var(--bg-2);
  border-color: var(--steel-dim);
}
.btn-secondary:active {
  background: var(--bg-1);
  transform: translateY(1px);
}

/* Ghost — no border, low visual weight */
.btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--ink);
  background: var(--bg-2);
}

/* Danger variant — used for destructive actions only */
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(216, 81, 69, 0.4);
}
.btn-danger:hover {
  background: var(--danger-wash);
  border-color: var(--danger);
}

/* Icon-only button */
.btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  border-radius: var(--r-2);
  transition: all var(--dur-1) var(--ease-standard);
}
.btn-icon:hover {
  color: var(--ink);
  border-color: var(--line-bright);
  background: var(--bg-2);
}
.btn-icon-lg { width: 44px; height: 44px; }

/* ------------------------------------------------------------
   INPUTS
   ------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field-hint {
  font-size: var(--fs-12);
  color: var(--ink-dim);
}

.field-error {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wide);
  color: var(--danger);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-1);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.4;
  transition:
    border-color var(--dur-1) var(--ease-standard),
    background   var(--dur-1) var(--ease-standard),
    box-shadow   var(--dur-1) var(--ease-standard);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-faint);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--line-bright);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.10);
}

.input-error { border-color: var(--danger); }
.input-error:focus {
  box-shadow: 0 0 0 3px rgba(216, 81, 69, 0.12);
}

.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6AFB9' stroke-width='2' stroke-linecap='square'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

/* Checkbox / Radio — custom, minimal */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-13);
  color: var(--ink-muted);
}
.check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check-box {
  width: 16px;
  height: 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-1);
  flex-shrink: 0;
  position: relative;
  transition: all var(--dur-1) var(--ease-standard);
}
.check input:checked + .check-box {
  background: var(--gold);
  border-color: var(--gold);
}
.check input:checked + .check-box::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(45deg);
}
.check input:focus-visible + .check-box {
  box-shadow: 0 0 0 3px rgba(217, 166, 37, 0.2);
}

/* Radio variant */
.check-radio .check-box {
  border-radius: var(--r-pill);
}
.check-radio input:checked + .check-box {
  background: var(--bg-1);
  border: 1px solid var(--gold);
}
.check-radio input:checked + .check-box::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--gold);
  border-radius: var(--r-pill);
  border: 0;
  transform: none;
  width: auto;
  height: auto;
}

/* ------------------------------------------------------------
   CHIPS / BADGES
   ------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-muted);
  text-transform: uppercase;
  line-height: 1;
}

.chip-gold    { background: var(--gold-wash);    border-color: rgba(217, 166, 37, 0.28); color: var(--gold-light); }
.chip-success { background: var(--success-wash); border-color: rgba(94, 168, 114, 0.28);  color: var(--success); }
.chip-warning { background: var(--warning-wash); border-color: rgba(227, 144, 45, 0.28);  color: var(--warning); }
.chip-danger  { background: var(--danger-wash);  border-color: rgba(216, 81, 69, 0.28);   color: var(--danger); }
.chip-steel   { background: var(--steel-wash);   border-color: var(--line-bright);        color: var(--steel); }

/* Square badge — used on listing cards for condition / verification */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(9, 7, 10, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-600);
  letter-spacing: var(--tracking-wider);
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}
.badge-gold { color: var(--gold); border-color: rgba(217, 166, 37, 0.35); }

/* Status dot — paired with chip or inline */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-dim);
  flex-shrink: 0;
}
.dot-live    { background: var(--success); box-shadow: 0 0 8px rgba(94, 168, 114, 0.6); animation: dot-pulse 2.4s var(--ease-standard) infinite; }
.dot-gold    { background: var(--gold);    box-shadow: 0 0 8px rgba(217, 166, 37, 0.5); }
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger); }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ------------------------------------------------------------
   ICONS — sizing wrapper
   ------------------------------------------------------------ */
.i-sm svg { width: 14px; height: 14px; }
.i-md svg { width: 18px; height: 18px; }
.i-lg svg { width: 22px; height: 22px; }
.i-xl svg { width: 32px; height: 32px; }

/* ------------------------------------------------------------
   LISTING CARD — base structure only.
   Section 5 will extend this with states (saved/sold/featured).
   ------------------------------------------------------------ */
.listing {
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  overflow: hidden;
  position: relative;
  transition: all var(--dur-2) var(--ease-standard);
}
.listing:hover {
  border-color: var(--line-bright);
  background: var(--bg-2);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.listing-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  overflow: hidden;
}
.listing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-decel);
}
.listing:hover .listing-media img { transform: scale(1.03); }

.listing-media-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-2) var(--s-3);
  background: linear-gradient(to top, rgba(9, 7, 10, 0.85), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}

.listing-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.listing-title {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-600);
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.listing-price {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  color: var(--gold);
  letter-spacing: -0.01em;
  line-height: 1;
}

.listing-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink-dim);
  letter-spacing: var(--tracking-wide);
}

/* ------------------------------------------------------------
   SELLER BADGE — compact identity block
   ------------------------------------------------------------ */
.seller {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.seller-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-700);
  color: var(--steel);
  flex-shrink: 0;
}
.seller-name {
  color: var(--ink);
  font-weight: var(--fw-500);
}
.seller-verified {
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ------------------------------------------------------------
   LEDGER — transaction feed row (the heartbeat, refined)
   ------------------------------------------------------------ */
.ledger {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
}

.ledger-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  letter-spacing: var(--tracking-wide);
}
.ledger-row-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--success);
  box-shadow: 0 0 6px rgba(94, 168, 114, 0.5);
}
.ledger-row-text strong {
  color: var(--ink);
  font-weight: var(--fw-600);
}
.ledger-row-time {
  color: var(--ink-dim);
  font-size: var(--fs-11);
  white-space: nowrap;
}

/* Row enter animation — used when new rows stream in */
.ledger-row-enter {
  animation: ledger-in var(--dur-3) var(--ease-decel);
}
@keyframes ledger-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   SYS-BAR — the thin system strip at the top of the page
   ------------------------------------------------------------ */
.sysbar {
  background: var(--black-deep);
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
}
.sysbar-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 9px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: var(--fw-500);
  gap: var(--s-4);
}
.sysbar-left     { display: inline-flex; align-items: center; gap: var(--s-2); }
.sysbar-right    { display: inline-flex; align-items: center; gap: var(--s-3); }
.sysbar-sep      { color: var(--ink-faint); }
.sysbar-label-ok { color: var(--success); font-weight: var(--fw-600); }

/* ------------------------------------------------------------
   TOP NAV SHELL — Section 2 will extend with real content
   ------------------------------------------------------------ */
.nav {
  background: rgba(20, 24, 29, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.nav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--s-4) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-8);
  align-items: center;
}

/* ------------------------------------------------------------
   MODAL BASE — Section 6/7 will extend
   ------------------------------------------------------------ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 7, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-decel);
}
.overlay.open {
  display: flex;
  opacity: 1;
}

.modal {
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-4);
  box-shadow: var(--elev-3);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - var(--s-8));
  overflow: auto;
  transform: translateY(8px);
  transition: transform var(--dur-3) var(--ease-decel);
}
.overlay.open .modal { transform: translateY(0); }

.modal-head {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-700);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
}
.modal-body { padding: var(--s-6); }
.modal-foot {
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}

/* ------------------------------------------------------------
   TOAST BASE
   ------------------------------------------------------------ */
.toast {
  position: fixed;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-left: 3px solid var(--gold);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--elev-2);
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-3) var(--ease-decel);
  max-width: 90vw;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-success { border-left-color: var(--success); }
.toast-danger  { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }

/* ------------------------------------------------------------
   UTILITY CLASSES (justified — small set, not Tailwind)
   ------------------------------------------------------------ */
.hidden      { display: none !important; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.inline-flex { display: inline-flex; align-items: center; }
.grid        { display: grid; }

.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }

.mt-auto  { margin-top: auto; }
.ml-auto  { margin-left: auto; }
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.relative { position: relative; }
.sticky   { position: sticky; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.no-scroll { overflow: hidden; }

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS — reference (used in all sections)
   xs: <560   sm: 560    md: 760    lg: 980    xl: 1180   2xl: 1400
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  :root { --gutter: 20px; }
  .section { padding-block: var(--s-12); }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .section { padding-block: var(--s-10); }
  .panel-pad    { padding: var(--s-4); }
  .panel-pad-lg { padding: var(--s-5); }
}

/* ==============================================================
   CANONICAL TYPOGRAPHY — shared vocabulary for all pages.
   Per-page aliases (.item-crumbs, .legal-crumbs, .item-sec-title,
   .seller-section-title, .settings-panel-title, .acct-page-title,
   .legal-title) are grouped here so a single CSS rule drives the
   pixel values. The old per-file definitions were removed; use the
   canonical names (.crumbs, .page-title, .section-title) on new
   pages so we can eventually drop the aliases.
   ============================================================== */

/* Breadcrumb — the mono-case trail above every page title. */
.crumbs,
.item-crumbs,
.legal-crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: var(--fw-600);
  margin-bottom: var(--s-5);
}
.crumbs a,
.item-crumbs a,
.legal-crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
}
.crumbs a:hover,
.item-crumbs a:hover,
.legal-crumbs a:hover {
  color: var(--gold);
}
.crumbs-sep,
.item-crumbs-sep,
.legal-crumbs-sep {
  margin: 0 6px;
  color: var(--ink-faint);
  opacity: 0.6;
}
.crumbs-current,
.item-crumbs-current,
.legal-crumbs-current {
  color: var(--ink);
}

/* Page-level h1 (32-34 px). One per page, top of content. */
.page-title,
.acct-page-title,
.legal-title {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
  margin: 0;
}

/* Section / panel h2 (20 px). Any heading inside a card, panel, or
   sub-area. Not a page title. */
.section-title,
.item-sec-title,
.seller-section-title,
.settings-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

/* ============================================================
   GLOBAL COMPONENTS — appended v1.2-000001
   Skeleton, spinner, button-loading, empty-state, progress.
   Every page benefits without touching individual files.
   ============================================================ */

/* ── Skeleton / shimmer ──────────────────────────────────────── */
@keyframes pks-shimmer {
  from { background-position: -800px 0; }
  to   { background-position:  800px 0; }
}
.skel {
  background: linear-gradient(
    90deg,
    var(--bg-2) 25%,
    var(--bg-3) 50%,
    var(--bg-2) 75%
  );
  background-size: 1600px 100%;
  animation: pks-shimmer 1.5s infinite linear;
  border-radius: var(--r-1);
  color: transparent !important;
}
.skel-text   { height: 14px; }
.skel-title  { height: 20px; }
.skel-img    { aspect-ratio: 4 / 3; border-radius: var(--r-5) var(--r-5) 0 0; }
.skel-circle { width: 40px; height: 40px; border-radius: 50%; }

/* Listing card skeleton — matches .listing structure */
.listing-skel {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-5);
  overflow: hidden;
}
.listing-skel-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes pks-spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bg-3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: pks-spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* ── Button loading state ────────────────────────────────────── */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: pks-spin 0.7s linear infinite;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-10) var(--s-6);
  text-align: center;
}
.empty-state-icon {
  width: 52px;
  height: 52px;
  color: var(--ink-dim);
  opacity: 0.55;
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin: 0;
}
.empty-state-body {
  color: var(--ink-dim);
  font-size: var(--fs-14);
  line-height: 1.6;
  max-width: 360px;
  margin: 0;
}

/* ── Generic progress bar ────────────────────────────────────── */
.progress {
  width: 100%;
  height: 3px;
  background: var(--bg-3);
  border-radius: var(--r-1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: var(--r-1);
  transition: width 300ms var(--ease-standard);
  min-width: 4px;
}

/* ── Toast / Confirm dialog ──────────────────────────────────── */
.pku-toast-host {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.pku-toast {
  pointer-events: auto;
  max-width: 340px;
  padding: 12px 16px;
  border-radius: var(--r-3);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
  line-height: 1.4;
}
.pku-toast.is-visible { opacity: 1; transform: translateY(0); }
.pku-toast--error   { border-left: 3px solid var(--danger); }
.pku-toast--success { border-left: 3px solid var(--success); }
.pku-toast--info    { border-left: 3px solid var(--gold); }

/* ── Overlay confirm modal ────────────────────────────── */
.pku-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(9, 7, 10, 0.80);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.pku-modal-backdrop.is-open { opacity: 1; }

.pku-modal-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-3);
  border: 1px solid var(--bg-4);
  border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pku-modal-backdrop.is-open .pku-modal-box {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.pku-modal-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.pku-modal-icon svg { width: 26px; height: 26px; }
.pku-modal-icon--gold   { background: rgba(217, 166, 37, 0.14);  color: var(--gold); }
.pku-modal-icon--danger { background: rgba(216,  81, 69, 0.14);  color: var(--danger); }
.pku-modal-icon--muted  { background: rgba(255, 255, 255, 0.06); color: var(--ink-muted); }

.pku-modal-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-18), 2.5vw, var(--fs-22));
  font-weight: var(--fw-700);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.1;
}
.pku-modal-body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: var(--ink-muted);
  line-height: 1.55;
  text-align: center;
  margin: 0 0 26px;
}

.pku-modal-foot { display: flex; flex-direction: column; gap: 10px; }

.pku-modal-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--r-3);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background var(--dur-1) ease, transform 80ms ease;
}
.pku-modal-btn:active { transform: scale(0.98); }
.pku-modal-btn--confirm { background: var(--gold); color: var(--gold-ink); }
.pku-modal-btn--confirm:hover { background: var(--gold-deep); }
.pku-modal-btn--danger  { background: var(--danger); color: #fff; }
.pku-modal-btn--danger:hover  { background: #b84039; }
.pku-modal-btn--cancel {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--line-bright);
  font-family: var(--font-sans);
  font-weight: var(--fw-500);
  text-transform: none;
  letter-spacing: 0;
}
.pku-modal-btn--cancel:hover { background: var(--bg-4); color: var(--ink); }

/* Prompt input — sits between the body copy and the foot buttons. */
.pku-modal-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}
.pku-modal-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-3);
  background: var(--bg-1);
  border: 1px solid var(--bg-4);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.3;
  text-align: center;
  transition: border-color 120ms ease, background 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.pku-modal-input::placeholder { color: var(--ink-dim); }
.pku-modal-input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
}
.pku-modal-input.is-error {
  border-color: var(--danger);
}
.pku-modal-input-err {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--danger);
  text-align: center;
}

/* ─── Email-verify banner (pks-verify-banner.js) ─────────────────
   Pinned to the top of body, gold-tinted, with a Resend button on
   the right and a small dismiss × on the far right. Survives until
   the user resends successfully OR closes the tab (session-storage
   dismiss flag). */
.pks-verify-banner {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(90deg, rgba(217,166,37,0.10), rgba(217,166,37,0.04));
  border-bottom: 1px solid rgba(217,166,37,0.32);
  color: var(--ink);
}
.pks-verify-banner-inner {
  max-width: var(--container-wide, 1200px);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pks-verify-banner-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}
.pks-verify-banner-msg {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-500);
  color: var(--ink);
}
.pks-verify-banner-resend {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: var(--gold);
  color: var(--gold-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) ease, opacity 120ms ease;
}
.pks-verify-banner-resend:hover { background: var(--gold-deep); }
.pks-verify-banner-resend:disabled { opacity: 0.6; cursor: progress; }
.pks-verify-banner-dismiss {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pks-verify-banner-dismiss:hover {
  background: rgba(255,255,255,0.05);
  color: var(--ink);
}

@media (max-width: 540px) {
  .pks-verify-banner-msg { font-size: var(--fs-12); }
}

/* ─── Safety widget (PakstoorSafety.openReport) ──────────────── */
.pks-safety-box { max-width: 460px; }

.pks-safety-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  text-align: left;
}
.pks-safety-reason {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-3);
  background: var(--bg-1);
  border: 1px solid var(--bg-4);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.pks-safety-reason:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.pks-safety-reason.is-active {
  border-color: var(--danger);
  background: rgba(216, 81, 69, 0.08);
  color: var(--ink);
}
.pks-safety-reason input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--danger);
  cursor: pointer;
}
.pks-safety-reason-label { flex: 1 1 auto; }

.pks-safety-details {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  padding: 12px 14px;
  border-radius: var(--r-3);
  background: var(--bg-1);
  border: 1px solid var(--bg-4);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.45;
  margin-bottom: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.pks-safety-details::placeholder { color: var(--ink-dim); }
.pks-safety-details:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
}

.pks-safety-err {
  margin: -8px 0 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--danger);
  text-align: center;
}

/* ------------------------------------------------------------
   VERIFIED-SELLER PILL  (shared across item, seller, deal,
   messages, account surfaces — single source of truth).
   Renders only when the seller's TradeSafe token has been
   verified (Profile.payoutVerifiedAt != null). Hidden by default
   so partial templates can drop the markup in and the badge
   only appears once the JS toggles the [hidden] off.
   ------------------------------------------------------------ */
.pks-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: rgba(217, 166, 37, 0.12);
  border: 1px solid rgba(217, 166, 37, 0.30);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.pks-verified-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ------------------------------------------------------------
   TURNSTILE WIDGET HOST
   Container the Cloudflare Turnstile widget renders into. The
   widget itself is invisible most of the time (interaction-only
   appearance); the container reserves a sensible row of vertical
   space so the layout doesn't jump when a challenge needs to
   show. Placed between the form's last field and the submit
   button — see login.html / forgot-password.html / reset-password.html.
   ------------------------------------------------------------ */
.pks-turnstile-host {
  margin: var(--s-2) 0;
  min-height: 0;
}
.pks-turnstile-host:empty {
  margin: 0;
}