/* ============================================================
   AutoKarZay shared design tokens + base primitives
   Used by karzay.html and every seller/admin prototype page.
============================================================ */
:root{
  --paper:#FFFFFF;
  --paper-alt:#F5F5F5;
  --card:#FFFFFF;
  --ink:#111111;
  --ink-soft:#6B7280;
  --ink-faint:#9CA3AF;
  --jade:#FF6300;
  --jade-deep:#E85A00;
  --jade-tint:#FFF1E8;
  --gold:#111111;
  --gold-bright:#2A2A2A;
  --gold-text:#FFFFFF;
  --gold-tint:#F5F5F5;
  --brick:#FF6300;
  --amber:#B45309;
  --amber-tint:#FEF3C7;
  --green:#15803D;
  --green-tint:#DCFCE7;
  --line:rgba(17,17,17,0.12);
  --line-soft:rgba(17,17,17,0.06);
  --shadow:0 1px 2px rgba(17,17,17,0.05), 0 8px 24px -12px rgba(17,17,17,0.16);
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111111;
    --paper-alt:#1A1A1A;
    --card:#1C1C1C;
    --ink:#F5F5F5;
    --ink-soft:#9CA3AF;
    --ink-faint:#6B7280;
    --jade:#FF6300;
    --jade-deep:#E85A00;
    --jade-tint:#2A1A12;
    --gold:#F5F5F5;
    --gold-bright:#E5E5E5;
    --gold-text:#111111;
    --gold-tint:#1F1F1F;
    --brick:#FF6300;
    --amber:#FBBF24;
    --amber-tint:#2A2110;
    --green:#4ADE80;
    --green-tint:#122018;
    --line:rgba(245,245,245,0.14);
    --line-soft:rgba(245,245,245,0.07);
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 8px 28px -12px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper:#111111;
  --paper-alt:#1A1A1A;
  --card:#1C1C1C;
  --ink:#F5F5F5;
  --ink-soft:#9CA3AF;
  --ink-faint:#6B7280;
  --jade:#FF6300;
  --jade-deep:#E85A00;
  --jade-tint:#2A1A12;
  --gold:#F5F5F5;
  --gold-bright:#E5E5E5;
  --gold-text:#111111;
  --gold-tint:#1F1F1F;
  --brick:#FF6300;
  --amber:#FBBF24;
  --amber-tint:#2A2110;
  --green:#4ADE80;
  --green-tint:#122018;
  --line:rgba(245,245,245,0.14);
  --line-soft:rgba(245,245,245,0.07);
  --shadow:0 1px 2px rgba(0,0,0,0.35), 0 8px 28px -12px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;font-size:clamp(14px, 13.3px + 0.185vw, 16px);}
body{
  margin:0;
  background:var(--paper-alt);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.mm{font-family:'Padauk','Inter',sans-serif;}
h1,h2,h3,h4{font-family:'Fraunces',serif;margin:0;font-weight:600;letter-spacing:-0.01em;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
::selection{background:var(--gold-tint);color:var(--ink);}
:focus-visible{outline:2.5px solid var(--jade);outline-offset:2px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;gap:28px;height:74px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(155deg,var(--jade),var(--jade-deep));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.brand-name{font-family:'Fraunces',serif;font-size:1.375rem;font-weight:700;line-height:1;}
.brand-sub{font-size:0.6875rem;color:var(--ink-faint);margin-top:2px;}
.brand-logo{display:block;height:32px;}
.brand-logo img{height:32px;width:auto;max-width:none;display:block;}
.brand-logo .logo-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand-logo .logo-light{display:none;}
  :root:not([data-theme="light"]) .brand-logo .logo-dark{display:block;}
}
:root[data-theme="dark"] .brand-logo .logo-light{display:none;}
:root[data-theme="dark"] .brand-logo .logo-dark{display:block;}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.theme-toggle{width:36px;height:36px;border-radius:100px;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:100px;font-size:0.9062rem;font-weight:600;
  border:1px solid transparent;white-space:nowrap;transition:transform .12s, box-shadow .12s;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-gold{background:var(--gold);color:var(--gold-text);}
.btn-gold:hover:not(:disabled){background:var(--gold-bright);}
.btn-jade{background:var(--jade);color:#fff;}
.btn-jade:hover:not(:disabled){background:var(--jade-deep);}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-line:hover:not(:disabled){border-color:var(--ink-faint);}
.btn-ghost{color:var(--ink-soft);padding:11px 14px;background:transparent;border:none;}
.btn-danger{background:var(--brick);color:#fff;}
.btn-danger:hover:not(:disabled){background:var(--jade-deep);}
.btn-sm{padding:7px 13px;font-size:0.8125rem;border-radius:100px;}
.btn-block{width:100%;}

/* ---------- form fields ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-row.full{grid-template-columns:1fr;}
.form-field label{display:block;font-size:0.8125rem;font-weight:700;color:var(--ink-soft);margin-bottom:7px;}
.form-field .hint{font-size:0.75rem;color:var(--ink-faint);margin-top:5px;}
.form-field input,.form-field select,.form-field textarea{
  width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--paper-alt);color:var(--ink);font-size:0.9062rem;font-family:inherit;
}
.form-field textarea{resize:vertical;min-height:90px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--jade);outline-offset:-1px;}
.form-field.error input,.form-field.error select,.form-field.error textarea{border-color:var(--brick);}
.form-field .error-msg{font-size:0.75rem;color:var(--brick);margin-top:6px;display:none;font-weight:600;}
.form-field.error .error-msg{display:block;}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);padding:28px;box-shadow:var(--shadow);}

/* ---------- badges / status pills ---------- */
.badge{font-size:0.6562rem;font-weight:700;padding:4px 9px;border-radius:100px;text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:5px;}
.badge-verified{background:var(--jade);color:#fff;}
.badge-dealer{background:rgba(0,0,0,.06);color:var(--ink);border:1px solid var(--line);}
.badge-verified-seller{background:#0F766E;color:#fff;}
.badge-premium-seller{background:linear-gradient(135deg,#F59E0B,#B45309);color:#fff;}
.badge-featured{background:#111;color:#fff;}
.badge-price-reduced{background:var(--jade-tint);color:var(--jade-deep);}
.badge-new-listing{background:var(--gold-tint);color:var(--ink);}

/* ---------- info tooltip (beside verified/premium badges) ---------- */
.info-tip{position:relative;display:inline-flex;vertical-align:middle;}
.info-tip .info-icon{
  width:16px;height:16px;border-radius:50%;background:var(--card);color:var(--ink-soft);
  font-size:0.6562rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);cursor:help;flex-shrink:0;
}
.info-tip .info-pop{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);
  width:240px;background:var(--ink);color:var(--paper);font-size:0.75rem;line-height:1.55;font-weight:500;
  padding:11px 13px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .15s, transform .15s;z-index:20;
  text-transform:none;letter-spacing:normal;text-align:left;
}
.info-tip .info-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);}
.info-tip:hover .info-pop, .info-tip:focus-within .info-pop{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.status-pill{font-size:0.75rem;font-weight:700;padding:6px 13px;border-radius:100px;display:inline-flex;align-items:center;gap:6px;}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.status-pending{background:var(--amber-tint);color:var(--amber);}
.status-approved{background:var(--green-tint);color:var(--green);}
.status-rejected{background:var(--jade-tint);color:var(--jade-deep);}
.status-suspended{background:rgba(107,114,128,.16);color:var(--ink-soft);}
.status-draft{background:rgba(107,114,128,.16);color:var(--ink-soft);}
.status-changes{background:var(--amber-tint);color:var(--amber);}
.status-published{background:var(--green-tint);color:var(--green);}

/* ---------- generic card / empty state ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m);}
.empty-state{text-align:center;padding:56px 20px;color:var(--ink-faint);}
.empty-state h4{color:var(--ink);margin-bottom:8px;font-size:1.0625rem;}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(10,15,12,.55);z-index:200;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.modal-backdrop.open{display:flex;}
.modal-box{
  background:var(--card);border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);
  width:100%;max-width:640px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal-box.wide{max-width:900px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 14px;border-bottom:1px solid var(--line);}
.modal-head h3{font-size:1.125rem;}
.modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex-shrink:0;}
.modal-close:hover{border-color:var(--jade);color:var(--jade);}
.modal-body{padding:22px 24px 26px;overflow-y:auto;}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:13px 22px;border-radius:100px;font-size:0.8438rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:999;box-shadow:var(--shadow);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}