:root{
  --green-950:#0A1B33;
  --green-900:#0F2647;
  --green-800:#173868;
  --green-700:#204A87;
  --gold-600:#F2941E;
  --gold-500:#FFAA42;
  --gold-100:#FDE3C2;
  --ivory:#F4F7FB;
  --ivory-dark:#DCE4F0;
  --ink:#16233A;
  --ink-soft:#57667E;
  --rust:#B04A34;
  --rust-bg:#F5E0D9;
  --blue:#2E6FBF;
  --blue-bg:#DEE9F8;
  --green-status:#2F7A52;
  --green-bg:#DCEEE2;
  --line: rgba(10,27,51,0.14);
  --radius: 10px;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--green-950); color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; min-height:100vh;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:500; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.hidden{ display:none !important; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; background:var(--green-900); border-bottom:1px solid rgba(244,247,251,0.12);
}
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand-mark{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-name{ color:var(--ivory); font-family:'Fraunces', serif; font-size:19px; }
.topbar-link{ color:var(--gold-100); font-size:14px; cursor:pointer; border:1px solid rgba(253,227,194,0.35); padding:8px 14px; border-radius:var(--radius); background:transparent; font-family:inherit; }
.topbar-link:hover{ background:rgba(253,227,194,0.08); }

.page{ max-width:960px; margin:0 auto; padding:40px 24px 80px; }
.page-narrow{ max-width:620px; }

.hero{ text-align:center; padding:56px 20px 44px; }
.queue-banner{
  display:inline-block; background:rgba(253,227,194,0.12); color:var(--gold-100); border:1px solid rgba(253,227,194,0.28);
  padding:9px 18px; border-radius:20px; font-size:13.5px; margin:38px auto 0; cursor:pointer;
}

.choice-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px; max-width:800px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .choice-grid{ grid-template-columns:1fr; max-width:420px; } }
.choice-card{
  background:var(--ivory); border-radius:14px; padding:28px 24px; text-align:left;
  cursor:pointer; border:1px solid transparent; transition:transform .12s ease, border-color .12s ease;
}
.choice-card:hover{ border-color:var(--gold-600); transform:translateY(-2px); }
.choice-icon{ width:40px; height:40px; margin-bottom:16px; color:var(--green-800); }
.choice-card h3{ font-size:20px; }

.surface{ background:var(--ivory); border-radius:14px; padding:28px 30px; box-shadow:0 8px 30px rgba(0,0,0,0.25); }
.surface h2{ font-size:22px; margin-bottom:6px; }
.surface .sub{ color:var(--ink-soft); font-size:14px; margin-bottom:24px; }

label{ display:block; font-size:13px; color:var(--ink-soft); margin:16px 0 6px; }
label:first-of-type{ margin-top:0; }
input[type=text], input[type=email], input[type=tel], input[type=password], textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--ivory-dark);
  background:#fff; font-family:inherit; font-size:14px; color:var(--ink);
}
input:focus, textarea:focus{ outline:none; border-color:var(--gold-600); box-shadow:0 0 0 3px rgba(242,148,30,0.15); }
textarea{ min-height:96px; resize:vertical; }
.field-error{ color:var(--rust); font-size:12.5px; margin-top:5px; }

.btn{ font-family:inherit; font-size:14px; font-weight:500; border-radius:8px; padding:11px 20px; border:1px solid var(--green-800); background:var(--green-800); color:var(--ivory); cursor:pointer; }
.btn:hover{ background:var(--green-700); }
.btn-ghost{ background:transparent; color:var(--green-800); border:1px solid var(--ivory-dark); }
.btn-ghost:hover{ background:rgba(0,0,0,0.03); }
.btn-gold{ background:var(--gold-600); border-color:var(--gold-600); color:var(--green-950); }
.btn-gold:hover{ background:var(--gold-500); }
.btn-danger{ background:var(--rust) !important; border-color:var(--rust) !important; color:#fff !important; }
.btn-row{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.btn[disabled]{ opacity:0.55; cursor:default; }

.upload-zone{ border:1.5px dashed var(--ivory-dark); border-radius:10px; padding:18px; text-align:center; cursor:pointer; color:var(--ink-soft); font-size:13.5px; }
.upload-zone:hover{ border-color:var(--gold-600); color:var(--ink); }
.thumb-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.thumb{ position:relative; width:84px; height:84px; border-radius:8px; overflow:hidden; border:1px solid var(--ivory-dark); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb button{ position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:none; background:rgba(10,27,51,0.75); color:#fff; font-size:12px; cursor:pointer; line-height:1; }
.size-hint{ font-size:12px; color:var(--ink-soft); margin-top:8px; }

.card-item-block{ border:1px solid var(--ivory-dark); border-radius:10px; padding:16px 16px 14px; margin-bottom:12px; background:#fbf9f2; }
.card-item-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.card-item-title{ font-family:'Fraunces', serif; font-size:15px; color:var(--ink); }
.remove-item-btn{ background:none; border:none; color:var(--rust); font-size:12.5px; cursor:pointer; padding:2px 4px; }
.remove-item-btn:hover{ text-decoration:underline; }

.terms-box{ border:1px solid var(--ivory-dark); border-radius:10px; padding:16px 18px; background:#fbf9f2; max-height:280px; overflow-y:auto; font-size:13px; color:var(--ink-soft); line-height:1.5; }
.terms-title{ font-family:'Fraunces', serif; font-size:14.5px; color:var(--ink); margin-bottom:6px; }
.terms-note{ margin:0 0 12px; }
.tier-row{ margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--ivory-dark); }
.tier-row:last-of-type{ border-bottom:none; }
.tier-name{ font-weight:600; color:var(--ink); font-size:13px; margin-bottom:4px; }
.tier-line{ display:flex; justify-content:space-between; padding:2px 0; }
.tier-line span:last-child{ font-family:'IBM Plex Mono', monospace; color:var(--ink); }
.terms-list{ margin:0; padding-left:18px; }
.terms-list li{ margin-bottom:6px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.checkbox-row input{ margin-top:2px; width:16px; height:16px; flex-shrink:0; }

.ref-box{ background:var(--green-900); color:var(--ivory); border-radius:10px; padding:16px 20px; margin-top:18px; display:flex; align-items:center; justify-content:space-between; }
.ref-box .id{ font-size:18px; letter-spacing:0.03em; color:var(--gold-100); }

.login-wrap{ padding-top:64px; }

.dash-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.dash-header h2{ color:var(--ivory); font-size:24px; }
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{ padding:7px 14px; border-radius:20px; font-size:13px; cursor:pointer; border:1px solid rgba(244,247,251,0.25); color:var(--gold-100); background:transparent; }
.tab.active{ background:var(--gold-600); color:var(--green-950); border-color:var(--gold-600); font-weight:500; }
.search-input{ width:220px; }
.dash-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }

.sub-list{ display:flex; flex-direction:column; gap:10px; }
.sub-row{ background:var(--ivory); border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:16px; cursor:pointer; border:1px solid transparent; }
.sub-row:hover{ border-color:var(--gold-600); }
.sub-thumb{ width:52px; height:52px; border-radius:7px; object-fit:cover; background:var(--ivory-dark); flex-shrink:0; }
.queue-number{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--gold-600); font-weight:600; min-width:32px; flex-shrink:0; }
.sub-main{ flex:1; min-width:0; }
.sub-main .name{ font-size:15px; font-weight:500; }
.sub-main .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.pill{ font-size:12px; padding:4px 11px; border-radius:20px; font-weight:500; white-space:nowrap; }
.pill-new{ background:var(--blue-bg); color:var(--blue); }
.pill-in_progress{ background:var(--gold-100); color:#7A5A1C; }
.pill-done{ background:var(--green-bg); color:var(--green-status); }
.pill-mixed{ background:var(--ivory-dark); color:var(--ink-soft); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--gold-100); opacity:0.75; }

.detail-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.back-link{ color:var(--gold-100); font-size:14px; cursor:pointer; }
.detail-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:18px; }
@media (max-width:800px){ .detail-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ivory-dark); font-size:14px; }
.info-row:last-child{ border-bottom:none; }
.info-row span:first-child{ color:var(--ink-soft); }
.gallery{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gallery img{ width:74px; height:74px; object-fit:cover; border-radius:7px; cursor:pointer; border:1px solid var(--ivory-dark); }
.section-gap{ margin-top:26px; }
.status-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.compare-wrap{ margin-top:14px; }
.compare-box{ position:relative; width:100%; aspect-ratio: 4/3; border-radius:10px; overflow:hidden; background:#111; }
.compare-box img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; background:#111; }
.compare-after{ clip-path: inset(0 50% 0 0); }
.compare-label{ position:absolute; top:8px; font-size:11px; padding:3px 8px; border-radius:5px; background:rgba(10,27,51,0.7); color:#fff; letter-spacing:0.03em; }
.compare-label.left{ left:8px; } .compare-label.right{ right:8px; }
.compare-slider{ width:100%; margin-top:10px; }
.compare-selects{ display:flex; gap:10px; margin-top:8px; }
.compare-selects select{ font-size:13px; padding:6px 8px; border-radius:6px; border:1px solid var(--ivory-dark); }

.results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .results-grid{ grid-template-columns:1fr; } }
.result-card h3{ font-size:16px; margin-bottom:10px; }

.lightbox{ position:fixed; inset:0; background:rgba(10,15,11,0.9); display:flex; align-items:center; justify-content:center; z-index:50; cursor:zoom-out; padding:30px; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:6px; }

.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--green-900); color:var(--ivory); padding:11px 20px; border-radius:8px; font-size:13.5px; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,0.3); }