/* ============================================================
   3D Prints by Dan — Shared Stylesheet
   style.css
   ============================================================ */



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

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --bg: #0d0f14;
  --surface: #13161d;
  --surface2: #1a1e28;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(99,210,255,0.3);
  --text: #e8ecf4;
  --muted: #6b7280;
  --accent: #63d2ff;
  --accent2: #a78bfa;
  --success: #34d399;
  --warning: #fbbf24;
  --mono: 'Space Mono', monospace;
  --sans: 'DM Sans', sans-serif;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  padding: 0 0 100px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,210,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,210,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── Page container ─────────────────────────────────────────── */
.page {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ─────────────────────────────────────────────────── */
header {
  padding: 48px 0 36px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.header-left h1,
header h1 {
  font-family: var(--sans);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 8px;
}

h1 strong { font-weight: 500; }

.subtitle {
  font-size: 13px;
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Logo mark ──────────────────────────────────────────────── */
.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.logo-name {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.logo-domain {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-left: 4px;
}

@media (max-width: 400px) {
  .logo-domain { display: none; }
  .logo-name { font-size: 12px; }
}

/* ── Primary CTA button ─────────────────────────────────────── */
.order-btn {
  padding: 11px 20px;
  background: var(--accent);
  color: #020d13;
  border: none;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  align-self: flex-end;
  transition: opacity 0.2s;
}

.order-btn:hover { opacity: 0.85; }

/* ── Site navigation ────────────────────────────────────────── */
/* ── Top site nav ───────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.site-nav-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.site-nav-btn:hover {
  color: var(--text);
  background: var(--surface);
}

.site-nav-btn.current {
  color: var(--accent);
  background: rgba(99,210,255,0.08);
  border-color: rgba(99,210,255,0.2);
  pointer-events: none;
}

/* Hamburger button — hidden on wide screens */
.nav-hamburger {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-left: auto;
}

.nav-hamburger:hover { border-color: var(--border-bright); color: var(--text); }
.nav-hamburger.open  { border-color: var(--accent); color: var(--accent); }

/* Dropdown for mobile */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 8px;
  z-index: 100;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.nav-dropdown.open { display: flex; flex-direction: column; gap: 2px; }

.nav-dropdown .site-nav-btn {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .site-nav > .site-nav-btn { display: none; }
  .nav-hamburger { display: inline-block; }
}

@media (min-width: 601px) {
  .nav-dropdown { display: none !important; }
}

/* ── Mode switcher (order / ask tabs) ───────────────────────── */
.mode-switcher {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.mode-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99,210,255,0.06);
}

.mode-btn:not(.active):hover {
  border-color: var(--border-bright);
  color: var(--text);
}

/* ── Section label ──────────────────────────────────────────── */
.section-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Form elements ──────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(99,210,255,0.4);
  box-shadow: 0 0 0 3px rgba(99,210,255,0.06);
}

textarea { resize: vertical; min-height: 88px; }

label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Settings panel option labels should not inherit form label styles */
.ms-mat-opt,
.ms-finish-opt,
.ms-qual-opt,
.ms-color-opt {
  display: block;
  font-size: unset;
  color: unset;
  margin-bottom: 0;
  font-family: unset;
  text-transform: unset;
  letter-spacing: unset;
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

/* ── Hint text ──────────────────────────────────────────────── */
.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  font-family: var(--mono);
}

.required { color: var(--accent); margin-left: 2px; }

/* ── OR divider ─────────────────────────────────────────────── */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Confirm / success panel ────────────────────────────────── */
.confirm-panel {
  display: none;
  background: rgba(52,211,153,0.06);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 12px;
  padding: 26px 22px;
  text-align: center;
  margin-top: 16px;
}

.confirm-panel h3 {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--success);
  margin-bottom: 6px;
}

.confirm-panel p { font-size: 13px; color: var(--muted); }

.confirm-id {
  font-family: var(--mono);
  font-size: 17px;
  color: var(--text);
  letter-spacing: 0.1em;
  margin: 8px 0;
}

/* ── CTA strip ──────────────────────────────────────────────── */
.cta-strip {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-strip p:first-child { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.cta-strip p:last-child  { font-size: 13px; color: var(--muted); }

/* ── Live dot ───────────────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 6px;
  animation: pulse 2s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Callout boxes ──────────────────────────────────────────── */
.callout {
  padding: 14px 16px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
}

.callout.info  { background: rgba(99,210,255,0.06);  border: 1px solid rgba(99,210,255,0.15);  color: #9be6ff; }
.callout.tip   { background: rgba(52,211,153,0.06);  border: 1px solid rgba(52,211,153,0.15);  color: #86efcb; }
.callout.warn  { background: rgba(251,191,36,0.06);  border: 1px solid rgba(251,191,36,0.15);  color: #fde08d; }

.callout-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  margin-top: 80px;
  padding: 28px 0 40px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-name {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-tagline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin-left: auto;
  gap: 4px 24px;
  align-items: center;
}

.footer-nav a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.footer-nav a:hover {
  color: var(--text);
  background: var(--surface);
}

.footer-copy {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  opacity: 0.45;
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* ── Hint links (// style navigation helpers) ───────────────── */

.hint-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #63d2ff;
  background: rgba(99,210,255,0.05);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  cursor: pointer;
  opacity: 0.85;
}

.hint-link:hover {
  opacity: 1;
  background: rgba(99,210,255,0.15);
  border-color: rgba(99,210,255,0.3);
}

.hint-link.danger {
  color: #f87171;
  background: rgba(248,113,113,0.05);
}

.hint-link.danger:hover {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.3);
}


/* ── Utility tags / pills ───────────────────────────────────── */
.card-tag {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.tag-blue   { background: rgba(99,210,255,0.1);  color: var(--accent); }
.tag-purple { background: rgba(167,139,250,0.1); color: var(--accent2); }
.tag-green  { background: rgba(52,211,153,0.1);  color: var(--success); }
.tag-amber  { background: rgba(251,191,36,0.1);  color: var(--warning); }
.tag-red    { background: rgba(248,113,113,0.1); color: #f87171; }

/* ── Layout helpers ─────────────────────────────────────────── */
.field { margin-bottom: 14px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }


/* Extracted inline styles */

/* Header */
  

  

  
  

  

  

  

  

  

  /* Nav tabs */
  .nav-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar { display: none; }

  .nav-tab {
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
  }

  .nav-tab:hover { color: var(--text); }
  .nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  /* Sections */
  .guide-section { display: none; }
  .guide-section.active { display: block; }

  .section-intro {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }

  .section-intro h2 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
  }

  .section-intro p { font-size: 14px; color: var(--muted); max-width: 580px; line-height: 1.7; }

  /* Cards grid */
  .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 32px; }

  .info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 16px;
    transition: border-color 0.15s;
  }

  .info-card:hover { border-color: rgba(255,255,255,0.14); }

  .card-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: grid;
    place-items: center;
  }

  .card-icon svg { width: 18px; height: 18px; }

  .card-icon.blue   { background: rgba(99,210,255,0.1);  color: var(--accent); }
  .card-icon.purple { background: rgba(167,139,250,0.1); color: var(--accent2); }
  .card-icon.green  { background: rgba(52,211,153,0.1);  color: var(--success); }
  .card-icon.amber  { background: rgba(251,191,36,0.1);  color: var(--warning); }

  .card-title { font-weight: 500; font-size: 15px; margin-bottom: 6px; }
  .card-
  

  
  
  
  
  

  /* Comparison table */
  .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 32px;
  }

  .compare-table th {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }

  .compare-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
  }

  .compare-table tr:last-child td { border-bottom: none; }
  .compare-table tr:hover td { background: rgba(255,255,255,0.02); }

  .compare-table .mat-badge {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .badge-pla  { background: rgba(99,210,255,0.12);  color: var(--accent); }
  .badge-petg { background: rgba(52,211,153,0.12);  color: var(--success); }
  .badge-tpu  { background: rgba(167,139,250,0.12); color: var(--accent2); }

  .dot-row { display: flex; gap: 4px; }
  .dot { width: 9px; height: 9px; border-radius: 50%; }
  .dot.filled { background: var(--accent); }
  .dot.half   { background: rgba(99,210,255,0.35); }
  .dot.empty  { background: var(--surface2); border: 1px solid var(--border); }

  /* Finish cards */
  .finish-grid-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
  @media (max-width: 640px) { .finish-grid-info { grid-template-columns: repeat(2, 1fr); } }

  .finish-card-info {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
  }

  .finish-preview-lg {
    width: 52px; height: 52px;
    border-radius: 50%;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .fp-matte  { background: #7a7a7a; }
  .fp-glossy { background: radial-gradient(circle at 30% 30%, #ffffffcc, #a8e6ffaa, #1a3a4a55); border: 1px solid rgba(99,210,255,0.3); }
  .fp-silk   { background: linear-gradient(135deg, #f0c4e8, #c4d4f0, #c4f0e8, #f0eec4); }
  .fp-wood   { background: repeating-linear-gradient(92deg, #8B5E3C 0px, #a0723d 4px, #7a4f2c 8px, #8B5E3C 12px); }

  .finish-name-lg { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
  .finish-

  .avail-list { list-style: none; margin-top: 10px; }
  .avail-list li {
    font-family: var(--mono);
    font-size: 12px;
    padding: 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .avail-list li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .avail-list li.yes::before { background: var(--success); }
  .avail-list li.no::before  { background: var(--muted); }
  .avail-list li.no          { color: var(--muted); }

  /* Color swatches */
  .color-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  .color-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .color-chip .swatch {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .color-chip .swatch.rainbow-sw { background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }

  .color-chip .swatch.custom-sw {
    background: conic-gradient(#ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c77dff, #ff6b6b);
    border: 1.5px dashed rgba(255,255,255,0.3);
  }

  .color-chip span {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.05em;
    text-align: center;
  }

  /* Scale visual */
  .scale-visual {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 24px 20px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
  }

  .scale-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

  .scale-cube {
    background: rgba(99,210,255,0.12);
    border: 1.5px solid rgba(99,210,255,0.3);
    border-radius: 4px;
  }

  .scale-cube.s1 { width: 20px; height: 20px; }
  .scale-cube.s2 { width: 35px; height: 35px; }
  .scale-cube.s3 { width: 55px; height: 55px; }
  .scale-cube.s4 { width: 75px; height: 75px; }
  .scale-cube.s5 { width: 95px; height: 95px; }

  .scale-
  .scale-pct   { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 700; }

  /* Infill visual */
  .infill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
  }

  .infill-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
  }

  .infill-pattern {
    width: 64px; height: 64px;
    margin: 0 auto 10px;
    position: relative;
    border: 1px solid rgba(99,210,255,0.2);
    border-radius: 4px;
    overflow: hidden;
  }

  .infill-pattern svg { width: 100%; height: 100%; }
  .infill-name  { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
  .infill-pct   { font-family: var(--mono); font-size: 12px; color: var(--accent); }
  .infill-uses  { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

  /* Callout box */
  

  
  
  

  

  /* Pros/cons */
  .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  @media(max-width:480px) { .pros-cons { grid-template-columns: 1fr; } }

  .pc-box { background: var(--surface2); border-radius: 8px; padding: 12px 14px; }
  .pc-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
  .pc-title.pro { color: var(--success); }
  .pc-title.con { color: #f87171; }

  .pc-box ul { list-style: none; }
  .pc-box ul li { font-size: 12px; color: var(--muted); padding: 2px 0; display: flex; gap: 6px; }
  .pc-box ul li::before { content: '—'; color: var(--border-bright); flex-shrink: 0; }

  /* Section divider label */
  .sub-

  .sub-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  /* CTA */
  

  .cta-text p:first-child { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
  .cta-text p:last-child  { font-size: 13px; color: var(--muted); }
  /* Site nav */
  

  

  
  

  /* Wood color chips */
  .color-chip .swatch.wood-light { background: repeating-linear-gradient(90deg,#d4a96a 0px,#c49455 4px,#bc8a4a 8px,#d4a96a 12px); }
  .color-chip .swatch.wood-dark  { background: repeating-linear-gradient(90deg,#5c3d1e 0px,#4a2e14 4px,#6b4a28 8px,#5c3d1e 12px); }

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

/* ── Header ── */
  

  

  
  

  

  
  

  

  

  /* Site nav */
  

  

  
  

  /* ── Section label ── */
  

  

  /* ── Filter chips ── */
  .filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
  }

  .filter-chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .filter-chip:hover   { border-color: var(--border-bright); color: var(--text); }
  .filter-chip.active  { border-color: var(--accent); color: var(--accent); background: rgba(99,210,255,0.07); }

  /* ── Model cards grid ── */
  .models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
  }

  .model-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
  }

  .model-card:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-2px); }

  .model-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Placeholder art per category */
  .model-thumb.decor    { background: linear-gradient(135deg, #1a1e28 0%, #13161d 50%, #1f2535 100%); }
  .model-thumb.gadget   { background: linear-gradient(135deg, #141a24 0%, #0d1420 50%, #1a2030 100%); }
  .model-thumb.game     { background: linear-gradient(135deg, #1a1428 0%, #13101d 50%, #201535 100%); }
  .model-thumb.useful   { background: linear-gradient(135deg, #0f1e18 0%, #0d1a14 50%, #142418 100%); }
  .model-thumb.art      { background: linear-gradient(135deg, #1e1414 0%, #1a1010 50%, #241818 100%); }

  .thumb-icon {
    width: 64px; height: 64px;
    opacity: 0.25;
  }

  .model-badge {
    position: absolute;
    top: 10px; left: 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
  }

  .badge-featured { background: rgba(99,210,255,0.18); color: var(--accent); }
  .badge-popular  { background: rgba(251,191,36,0.18); color: var(--warning); }
  .badge-new      { background: rgba(52,211,153,0.18); color: var(--success); }

  .model-source {
    position: absolute;
    top: 10px; right: 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
    color: var(--muted);
    backdrop-filter: blur(4px);
  }

  .model-

  .model-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text);
  }

  .model-meta {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .model-meta span { display: flex; align-items: center; gap: 4px; }

  .model-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }

  .model-tag {
    font-family: var(--mono);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--surface2);
    color: var(--muted);
    letter-spacing: 0.05em;
  }

  .model-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 16px 14px;
  }

  .btn-view {
    padding: 8px 0;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
  }

  .btn-view:hover { border-color: var(--border-bright); color: var(--text); }

  .btn-request {
    padding: 8px 0;
    border-radius: 7px;
    border: none;
    background: rgba(99,210,255,0.1);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
  }

  .btn-request:hover { background: rgba(99,210,255,0.18); }

  /* ── Trending sites ── */
  .sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 48px;
  }

  .site-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s, transform 0.15s;
  }

  .site-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }

  .site-logo {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .site-name  { font-size: 14px; font-weight: 500; color: var(--text); }
  .site-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }

  .site-links { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }

  .site-link {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border-top: 1px solid var(--border);
    transition: color 0.15s;
  }

  .site-link:first-child { border-top: none; }
  .site-link:hover { color: var(--accent); }
  .site-link::before { content: '→'; font-size: 12px; opacity: 0.5; }

  /* ── Card add button ── */
  .btn-add {
    padding: 8px 0;
    border-radius: 7px;
    border: none;
    background: rgba(99,210,255,0.1);
    color: var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
  }

  .btn-add:hover { background: rgba(99,210,255,0.18); }

  .btn-add.in-cart {
    background: rgba(52,211,153,0.1);
    color: var(--success);
  }

  .btn-add.in-cart:hover { background: rgba(52,211,153,0.18); }

  /* ── Print tray ── */
  .print-tray {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 90;
    background: var(--surface);
    border-top: 1px solid var(--border-bright);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
  }

  .print-tray.visible { transform: translateY(0); }

  .tray-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
  }

  .tray-bar:hover { background: rgba(255,255,255,0.02); }

  .tray-left { display: flex; align-items: center; gap: 12px; }

  .tray-badge {
    background: var(--accent);
    color: #020d13;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .tray-

  .tray-toggle {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    transition: color 0.15s;
  }

  .tray-panel { border-top: 1px solid var(--border); padding: 16px 24px 0; display: none; }
  .tray-panel.open { display: block; }

  .tray-items { margin-bottom: 16px; }

  .tray-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }

  .tray-item:last-child { border-bottom: none; }

  .tray-item-name { flex: 1; }
  .tray-item-source { font-family: var(--mono); font-size: 12px; color: var(--muted); }

  .tray-remove {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -5px; /* Offset to keep alignment */
  }

  .tray-remove:hover { color: #f87171; background: rgba(248,113,113,0.08); }

  .tray-empty {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    padding: 10px 0 20px;
    text-align: center;
  }

  /* ── Submit modal ── */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .modal-overlay.open { display: flex; }

  .modal {
    background: var(--surface);
    border: 1px solid var(--border-bright);
    border-radius: 14px;
    padding: 26px 22px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-

  .modal-title { font-size: 15px; font-weight: 500; }
  .modal-subtitle { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 3px; }

  .modal-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -10px;
  }

  .modal-close:hover { color: var(--text); }

  .modal-section-

  .modal-model-list { margin-bottom: 18px; }

  .modal-model-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
  }

  .modal-model-row:last-child { border-bottom: none; }
  .modal-model-row .name { flex: 1; }
  .modal-model-row .src  { font-family: var(--mono); font-size: 12px; color: var(--muted); }

  .modal-remove-row {
    background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 13px;
    border-radius: 3px; transition: color 0.15s;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -10px;
  }

  .modal-remove-row:hover { color: #f87171; }

  .modal 

  .modal input, .modal 

  .modal 

  .modal 

  .modal-footer { display: flex; gap: 10px; margin-top: 14px; }

  .modal-cancel {
    flex: 1; padding: 11px; border-radius: 8px;
    border: 1px solid var(--border); background: transparent;
    color: var(--muted); font-family: var(--mono); font-size: 12px;
    cursor: pointer; transition: color 0.15s;
  }

  .modal-cancel:hover { color: var(--text); }

  .modal-submit {
    flex: 2; padding: 11px; border-radius: 8px; border: none;
    background: var(--accent); color: #020d13;
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: opacity 0.2s;
  }

  .modal-submit:hover { opacity: 0.88; }

  .modal-sent {
    display: none; text-align: center; padding: 20px 0 8px;
  }

  .modal-sent h3 { font-family: var(--mono); font-size: 13px; color: var(--success); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
  .modal-sent p  { font-size: 13px; color: var(--muted); }

  /* Route chooser */
  .route-chooser { display: none; }
  .route-chooser.visible { display: block; }

  .route-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }

  .route-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 14px;
    cursor: pointer;
    background: var(--surface2);
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
  }

  .route-card:hover { border-color: var(--border-bright); background: rgba(255,255,255,0.03); }
  .route-card.accent:hover { border-color: var(--accent); background: rgba(99,210,255,0.06); }
  .route-card.purple:hover { border-color: var(--accent2); background: rgba(167,139,250,0.06); }

  .route-icon { font-size: 20px; margin-bottom: 8px; }
  .route-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
  .route-desc  { font-size: 12px; color: var(--muted); line-height: 1.5; }

  

  /* ── Live dot ── */
  

  /* ── Edit notice ── */
  .edit-notice {
    padding: 13px 16px;
    background: rgba(167,139,250,0.06);
    border: 1px solid rgba(167,139,250,0.18);
    border-radius: 9px;
    font-size: 12px;
    color: rgba(167,139,250,0.9);
    font-family: var(--mono);
    line-height: 1.6;
    margin-bottom: 28px;
  }

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

/* Header */
  

  

  
  

  

  
  

  

  

  /* Site nav */
  

  

  
  

  /* Category filter */
  .category-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .cat-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .cat-btn:hover  { border-color: var(--border-bright); color: var(--text); }
  .cat-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(99,210,255,0.07); }

  /* FAQ items */
  .faq-group { margin-bottom: 40px; }

  .group-

  .group-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  .faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    margin-bottom: 8px;
    overflow: visible;
    transition: border-color 0.15s;
  }

  .faq-item:hover { border-color: rgba(255,255,255,0.12); }
  .faq-item.open  { border-color: rgba(99,210,255,0.2); }

  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }

  .faq-chevron {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s, border-color 0.15s, color 0.15s;
  }

  .faq-item.open .faq-chevron {
    transform: rotate(180deg);
    border-color: var(--accent);
    color: var(--accent);
  }

  .faq-answer {
    display: none;
    padding: 0 18px 16px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.75;
    border-top: 1px solid var(--border);
  }

  .faq-item.open .faq-answer { display: block; }

  .faq-answer p { margin-top: 12px; }
  .faq-answer p:first-child { margin-top: 10px; }

  .faq-answer ul {
    margin: 10px 0 0 16px;
    list-style: none;
  }

  .faq-answer ul li {
    position: relative;
    padding: 2px 0 2px 14px;
  }

  .faq-answer ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--border-bright);
    font-size: 12px;
  }

  .faq-answer a { color: var(--accent); text-decoration: none; }
  .faq-answer a:hover { text-decoration: underline; }

  .faq-answer .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface2);
    color: var(--muted);
    margin: 2px 2px 2px 0;
  }

  .faq-answer .tag.green  { background: rgba(52,211,153,0.1);  color: var(--success); }
  .faq-answer .tag.blue   { background: rgba(99,210,255,0.1);  color: var(--accent); }
  .faq-answer .tag.purple { background: rgba(167,139,250,0.1); color: var(--accent2); }
  .faq-answer .tag.amber  { background: rgba(251,191,36,0.1);  color: var(--warning); }

  /* CTA strip */

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

body.centered-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 24px 100px;
}

/* Override the page container for centered layout */
.page.centered-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
}

/* ── Animated nozzle ────────────────────────────────────────── */
.nozzle-wrap {
  position: relative;
  width: 80px;
  height: 120px;
  margin-bottom: 32px;
}

.nozzle-svg {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
}

/* Dripping filament */
.drip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: var(--accent);
  border-radius: 0 0 4px 4px;
  opacity: 0.7;
  animation: drip 2.4s ease-in infinite;
  transform-origin: top center;
}

.drip-1 { top: 68px; animation-delay: 0s; }
.drip-2 { top: 68px; animation-delay: 0.8s; opacity: 0.4; width: 3px; }
.drip-3 { top: 68px; animation-delay: 1.6s; opacity: 0.25; width: 2px; }

@keyframes drip {
  0%   { height: 0; opacity: 0.7; }
  60%  { height: 38px; opacity: 0.7; }
  80%  { height: 44px; opacity: 0.5; }
  100% { height: 48px; opacity: 0; }
}

/* ── 404 number ─────────────────────────────────────────────── */
.error-code {
  font-family: var(--mono);
  font-size: clamp(72px, 18vw, 120px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--surface2);
  position: relative;
  margin-bottom: 4px;
  user-select: none;
}

/* Accent overlay on the middle digit */
.error-code .mid {
  color: var(--accent);
  opacity: 0.35;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 0.35; }
  97%            { opacity: 0.1; }
  98%            { opacity: 0.35; }
  99%            { opacity: 0.05; }
}

.error-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

/* ── Message ────────────────────────────────────────────────── */
.error-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.error-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 36px;
}

/* ── Navigation options ─────────────────────────────────────── */
.nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 28px;
}

@media (max-width: 400px) { .nav-grid { grid-template-columns: 1fr; } }

.nav-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.nav-card:hover {
  border-color: rgba(99,210,255,0.25);
  background: var(--surface2);
}

.nav-card-icon {
  font-size: 18px;
  margin-bottom: 8px;
  line-height: 1;
}

.nav-card-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.nav-card-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Footer hint ────────────────────────────────────────────── */
.error-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
  letter-spacing: 0.06em;
}

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

/* ── Timeline ───────────────────────────────────────────────── */
.timeline {
  position: relative;
  margin: 8px 0 48px;
}

/* Vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--accent2), rgba(99,210,255,0.1));
}

.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 6px;
  position: relative;
}

.step:last-child { margin-bottom: 0; }

/* Node */
.step-node {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s;
}

.step.active   .step-node { border-color: var(--accent);  background: rgba(99,210,255,0.08); }
.step.done     .step-node { border-color: var(--success);  background: rgba(52,211,153,0.08); }
.step.pending  .step-node { border-color: var(--border);   opacity: 0.5; }

.step-icon {
  font-size: 16px;
  line-height: 1;
}

/* Connector gap between steps */
.step-gap {
  height: 24px;
  width: 40px;
  flex-shrink: 0;
}

/* Content */
.step-body { padding: 8px 0 24px; }

.step-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.step.active  .step-num { color: var(--accent); }
.step.done    .step-num { color: var(--success); }

.step-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.step.pending .step-title { color: var(--muted); }

.step-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 480px;
}

.step-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 4px;
  padding: 3px 8px;
  margin-top: 10px;
  letter-spacing: 0.04em;
}

.step-time.fast { color: var(--success); background: rgba(52,211,153,0.08); }
.step-time.med  { color: var(--accent);  background: rgba(99,210,255,0.08); }

/* ── Tip boxes ──────────────────────────────────────────────── */
.tip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 40px;
}

@media (max-width: 520px) { .tip-grid { grid-template-columns: 1fr; } }

.tip-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tip-card-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}

.tip-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

.tip-card a {
  color: var(--accent);
  text-decoration: none;
}

.tip-card a:hover { text-decoration: underline; }

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

h1 {
    font-family: var(--sans);
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  

  

  .section { margin-bottom: 34px; }

  

  

  .file-upload-area {
    border: 1.5px dashed var(--border-bright);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    background: rgba(99,210,255,0.02);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
  }

  .file-upload-area:hover, .file-upload-area.drag-over {
    background: rgba(99,210,255,0.05);
    border-color: var(--accent);
  }

  .file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .upload-icon {
    width: 38px; height: 38px;
    margin: 0 auto 10px;
    border: 1.5px solid var(--border-bright);
    border-radius: 8px;
    display: grid;
    place-items: center;
  }

  .upload-icon svg { color: var(--accent); }
  .upload-title { font-weight: 500; font-size: 14px; margin-bottom: 3px; }
  .upload-hint { font-size: 12px; color: var(--muted); font-family: var(--mono); }

  .file-chosen {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 7px;
    font-size: 13px;
    color: var(--success);
    font-family: var(--mono);
  }

  

  

  

  

  

  

  
  
  @media (max-width: 520px) {  }

  /* Material */
  .material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .mat-option { position: relative; cursor: pointer; }
  .mat-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .mat-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 11px;
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
  }

  .mat-option input:checked + .mat-card {
    border-color: var(--accent);
    background: rgba(99,210,255,0.06);
  }

  .mat-name { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 2px; }
  .mat-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .mat-price { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 5px; }

  /* Finish */
  .finish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 580px) { .finish-grid { grid-template-columns: repeat(2, 1fr); } }

  .finish-option { position: relative; cursor: pointer; }
  .finish-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .finish-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 12px;
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
  }

  .finish-option input:checked + .finish-card {
    border-color: var(--accent2);
    background: rgba(167,139,250,0.07);
  }

  .finish-preview {
    width: 28px; height: 28px;
    border-radius: 50%;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .finish-preview.matte  { background: #7a7a7a; }
  .finish-preview.glossy { background: radial-gradient(circle at 30% 30%, #ffffffcc, #a8e6ffaa, #1a3a4a55); border: 1px solid rgba(99,210,255,0.3); }
  .finish-preview.silk   { background: linear-gradient(135deg, #f0c4e8, #c4d4f0, #c4f0e8, #f0eec4); }
  .finish-preview.wood   { background: repeating-linear-gradient(92deg, #8B5E3C 0px, #a0723d 4px, #7a4f2c 8px, #8B5E3C 12px); }

  .finish-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .finish-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .finish-mod  { font-family: var(--mono); font-size: 12px; color: var(--accent2); margin-top: 4px; }

  /* Color */
  .color-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  .color-opt { position: relative; cursor: pointer; }
  .color-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

  .color-swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
  }

  .color-opt input:checked + .color-swatch { border-color: var(--text); transform: scale(1.18); }

  .color-swatch.rainbow {
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  }

  .custom-color-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px dashed var(--muted);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.2s;
    flex-shrink: 0;
  }

  .custom-color-btn.active { border-color: var(--accent); border-style: solid; }
  .custom-color-btn svg { color: var(--muted); pointer-events: none; }

  .custom-color-row {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
  }

  .custom-color-row.visible { display: flex; }

  .custom-color-row input[type="color"] {
    width: 36px; height: 36px;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid var(--border-bright);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Quality */
  .quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .qual-option { position: relative; cursor: pointer; }
  .qual-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .qual-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 11px;
    background: var(--surface);
    transition: border-color 0.15s;
    text-align: center;
  }

  .qual-option input:checked + .qual-card {
    border-color: var(--accent);
    background: rgba(99,210,255,0.06);
  }

  .qual-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .qual-detail { font-size: 12px; color: var(--muted); font-family: var(--mono); }

  /* Slider */
  .slider-wrap { display: flex; align-items: center; gap: 14px; }

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    border: none;
    padding: 0;
    outline: none;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }

  input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }

  input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0d0f14;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 0 0 1px rgba(99,210,255,0.3);
  }

  input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0d0f14;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(99,210,255,0.3);
  }

  /* Estimator toggle */
  .estimator-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
  }

  .toggle-track {
    width: 42px; height: 24px;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
  }

  .toggle-track.on {
    background: rgba(99,210,255,0.12);
    border-color: rgba(99,210,255,0.4);
  }

  .toggle-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--muted);
    position: absolute;
    top: 3px; left: 3px;
    transition: transform 0.2s, background 0.2s;
  }

  .toggle-track.on .toggle-thumb { transform: translateX(18px); background: var(--accent); }

  .toggle-
  .toggle-label.on { color: var(--accent); }

  .estimator-fields { display: none; }
  .estimator-fields.visible { display: block; }

  .no-estimate-msg {
    padding: 13px 15px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 8px;
    font-size: 12px;
    color: var(--warning);
    font-family: var(--mono);
    line-height: 1.5;
  }

  /* Layout */
  .layout { display: grid; grid-template-columns: 1fr 260px; gap: 36px; }
  @media (max-width: 680px) { .layout { grid-template-columns: 1fr; } }

  /* Price panel */
  .price-panel {
    background: var(--surface);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    padding: 22px;
  }

  .price-panel-

  .price-

  .price-total {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
  }

  .price-note { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: var(--mono); }

  .price-pending {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--warning);
    padding: 10px 12px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 7px;
    margin-top: 12px;
    line-height: 1.5;
  }

  .price-breakdown { margin-top: 14px; }

  .breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--mono);
  }

  .breakdown-row:last-child { border-bottom: none; }
  .breakdown-row span:last-child { color: var(--text); }

  .breakdown-row.total-row {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(99,210,255,0.2);
    color: var(--text);
    font-weight: 700;
  }

  .breakdown-row.total-row span:last-child { color: var(--accent); }

  .submit-btn {
    width: 100%;
    padding: 13px 24px;
    background: var(--accent);
    color: #020d13;
    border: none;
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 18px;
    transition: opacity 0.2s, transform 0.1s;
  }

  .submit-btn:hover { opacity: 0.9; }
  .submit-btn:active { transform: scale(0.99); }

  

  

  
  

  
  
  

  

  /* Mode switcher */
  

  

  

  

  /* Question form */
  .question-form { display: none; }
  .question-form.visible { display: block; }
  .order-form.hidden { display: none; }

  /* Model entries */
  .file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .url-list  { display: flex; flex-direction: column; gap: 8px; }

  .model-entry {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: visible;
    transition: border-color 0.15s;
  }

  .model-entry.is-file { border-color: rgba(52,211,153,0.22); }

  .model-entry-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-family: var(--mono);
    color: var(--success);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .model-entry-url {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    padding: 0;
    outline: none;
  }

  .model-entry-url::placeholder { color: var(--muted); opacity: 0.5; }

  .model-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .model-settings-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .model-settings-toggle:hover,
  .model-settings-toggle.open { border-color: var(--accent); color: var(--accent); background: rgba(99,210,255,0.05); }

  .model-entry-remove {
    background: none; border: none;
    color: var(--muted); cursor: pointer; font-size: 14px;
    line-height: 1; flex-shrink: 0;
    transition: color 0.15s;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -5px -10px -5px 0;
  }

  .model-entry-remove:hover { color: #f87171; }

  .model-settings-summary {
    padding: 0 12px 9px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }

  .settings-pill {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--surface2);
    border-radius: 3px;
    padding: 2px 7px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Per-model settings panel */
  .model-settings-panel {overflow: visible;  overflow: visible; display: none; border-top: 1px solid var(--border); padding: 14px; background: var(--surface2); }
  .model-settings-panel.open { display: block; }

  .ms-row { margin-bottom: 13px; }
  .ms-row:last-child { margin-bottom: 0; }

  .ms-

  /* Override style.css label { display: block } for all settings panel option labels */
  .ms-mat-grid label,
  .ms-finish-grid label,
  .ms-quality-grid label,
  .ms-color-grid label,
  .ms-wood-grid label { display: block; margin-bottom: 0; }

  .ms-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .ms-mat-opt { position: relative; cursor: pointer; }
  .ms-mat-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-mat-card {
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
    background: var(--surface); transition: border-color 0.15s, background 0.15s; user-select: none;
  }
  .ms-mat-opt input:checked + .ms-mat-card { border-color: var(--accent); background: rgba(99,210,255,0.07); }
  .ms-mat-name { font-family: var(--mono); font-size: 12px; font-weight: 700; }
  .ms-mat-desc { font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
  .ms-mat-price { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 3px; }

  .ms-finish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  @media (max-width: 500px) { .ms-finish-grid { grid-template-columns: repeat(2, 1fr); } }
  .ms-finish-opt { position: relative; cursor: pointer; }
  .ms-finish-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-finish-card {
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 7px 6px;
    background: var(--surface); text-align: center;
    transition: border-color 0.15s, background 0.15s; user-select: none;
  }
  .ms-finish-opt input:checked + .ms-finish-card { border-color: var(--accent2); background: rgba(167,139,250,0.07); }
  .ms-finish-opt.disabled { opacity: 0.28; pointer-events: none; }
  .ms-finish-dot { width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 4px; border: 1px solid rgba(255,255,255,0.08); }
  .ms-finish-dot.matte  { background: #7a7a7a; }
  .ms-finish-dot.glossy { background: radial-gradient(circle at 30% 30%, #ffffffcc, #a8e6ffaa, #1a3a4a55); border: 1px solid rgba(99,210,255,0.3); }
  .ms-finish-dot.silk   { background: linear-gradient(135deg, #f0c4e8, #c4d4f0, #c4f0e8, #f0eec4); }
  .ms-finish-dot.wood   { background: repeating-linear-gradient(92deg, #8B5E3C 0px, #a0723d 4px, #7a4f2c 8px, #8B5E3C 12px); }
  .ms-finish-name { font-size: 12px; font-weight: 500; line-height: 1.2; }
  .ms-finish-mod  { font-family: var(--mono); font-size: 12px; color: var(--accent2); margin-top: 2px; }

  .ms-color-grid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .ms-color-opt { position: relative; cursor: pointer; }
  .ms-color-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; transition: outline 0.12s, transform 0.12s; display: block; }
  .ms-color-opt input:checked + .ms-color-swatch { outline: 2px solid #63d2ff; outline-offset: 2px; transform: scale(1.1); }
  .ms-custom-btn {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--muted);
    background: transparent; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.12s;
  }
  .ms-custom-btn.active { border-style: solid; outline: 2px solid #63d2ff; outline-offset: 2px; }
  .ms-custom-row { display: none; align-items: center; gap: 8px; width: 100%; margin-top: 6px; }
  .ms-custom-row.open { display: flex; }
  .ms-custom-row input[type="color"] { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-bright); background: var(--surface); padding: 2px; cursor: pointer; flex-shrink: 0; }
  .ms-custom-row 

  .ms-wood-grid { display: flex; gap: 8px; }

  .ms-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .ms-qual-opt { position: relative; cursor: pointer; }
  .ms-qual-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-qual-card { border: 1px solid var(--border); border-radius: 7px; padding: 7px; background: var(--surface); text-align: center; transition: border-color 0.15s; user-select: none; }
  .ms-qual-opt input:checked + .ms-qual-card { border-color: var(--accent); background: rgba(99,210,255,0.06); }
  .ms-qual-name   { font-size: 12px; font-weight: 500; }
  .ms-qual-detail { font-family: var(--mono); font-size: 12px; color: var(--muted); }

  .ms-bottom-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
  .ms-infill-wrap { flex: 1; min-width: 130px; }
  .ms-qty-wrap { min-width: 70px; }
  .ms-qty-wrap input { max-width: 70px; }

  .add-url-btn {
    background: none; border: 1px dashed var(--border);
    border-radius: 7px; color: var(--muted);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    padding: 8px 14px; cursor: pointer; margin-top: 4px;
    transition: border-color 0.15s, color 0.15s; width: 100%;
  }

  .add-url-btn:hover { border-color: var(--border-bright); color: var(--accent); }

  /* Showcase cart import banner */
  .showcase-banner {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(167,139,250,0.07);
    border: 1px solid rgba(167,139,250,0.25);
    border-radius: 9px;
    margin-bottom: 28px;
    font-size: 13px;
  }

  .showcase-banner.visible { display: flex; }

  .showcase-banner-text { flex: 1; color: var(--text); }
  .showcase-banner-text span { font-family: var(--mono); font-size: 12px; color: var(--accent2); display: block; margin-bottom: 2px; }

  .showcase-banner-dismiss {
    background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 16px;
    transition: color 0.15s; flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -10px;
  }

  .showcase-banner-dismiss:hover { color: var(--text); }

  
  /* Hamburger nav */
  .nav-hamburger {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 6px;
    color: #6b7280;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-hamburger:hover { border-color: rgba(99,210,255,0.3); color: #e8ecf4; }
  .nav-hamburger.open  { border-color: #63d2ff; color: #63d2ff; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #13161d;
    border: 1px solid rgba(99,210,255,0.3);
    border-radius: 10px;
    padding: 8px;
    z-index: 100;
    min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    flex-direction: column;
    gap: 2px;
  }
  .nav-dropdown.open { display: flex; }
  .nav-dropdown .site-nav-btn {
    display: block !important;
    padding: 8px 12px;
    border-radius: 6px;
  }
  @media (max-width: 600px) {
    .site-nav > .site-nav-btn { display: none; }
    .nav-hamburger { display: inline-block; }
  }
  @media (min-width: 601px) {
    .nav-dropdown { display: none !important; }
  }


  @media (max-width: 400px) {
    .logo-domain { display: none; }
    .logo-name { font-size: 12px; }
  }

h1 {
    font-family: var(--sans);
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  

  

  .section { margin-bottom: 34px; }

  

  

  .file-upload-area {
    border: 1.5px dashed var(--border-bright);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    background: rgba(99,210,255,0.02);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
  }

  .file-upload-area:hover, .file-upload-area.drag-over {
    background: rgba(99,210,255,0.05);
    border-color: var(--accent);
  }

  .file-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .upload-icon {
    width: 38px; height: 38px;
    margin: 0 auto 10px;
    border: 1.5px solid var(--border-bright);
    border-radius: 8px;
    display: grid;
    place-items: center;
  }

  .upload-icon svg { color: var(--accent); }
  .upload-title { font-weight: 500; font-size: 14px; margin-bottom: 3px; }
  .upload-hint { font-size: 12px; color: var(--muted); font-family: var(--mono); }

  .file-chosen {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 7px;
    font-size: 13px;
    color: var(--success);
    font-family: var(--mono);
  }

  

  

  

  

  

  

  
  
  @media (max-width: 520px) {  }

  /* Material */
  .material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .mat-option { position: relative; cursor: pointer; }
  .mat-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .mat-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 11px;
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
  }

  .mat-option input:checked + .mat-card {
    border-color: var(--accent);
    background: rgba(99,210,255,0.06);
  }

  .mat-name { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 2px; }
  .mat-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .mat-price { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 5px; }

  /* Finish */
  .finish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 580px) { .finish-grid { grid-template-columns: repeat(2, 1fr); } }

  .finish-option { position: relative; cursor: pointer; }
  .finish-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .finish-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 13px 12px;
    background: var(--surface);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
  }

  .finish-option input:checked + .finish-card {
    border-color: var(--accent2);
    background: rgba(167,139,250,0.07);
  }

  .finish-preview {
    width: 28px; height: 28px;
    border-radius: 50%;
    margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .finish-preview.matte  { background: #7a7a7a; }
  .finish-preview.glossy { background: radial-gradient(circle at 30% 30%, #ffffffcc, #a8e6ffaa, #1a3a4a55); border: 1px solid rgba(99,210,255,0.3); }
  .finish-preview.silk   { background: linear-gradient(135deg, #f0c4e8, #c4d4f0, #c4f0e8, #f0eec4); }
  .finish-preview.wood   { background: repeating-linear-gradient(92deg, #8B5E3C 0px, #a0723d 4px, #7a4f2c 8px, #8B5E3C 12px); }

  .finish-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .finish-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
  .finish-mod  { font-family: var(--mono); font-size: 12px; color: var(--accent2); margin-top: 4px; }

  /* Color */
  .color-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  .color-opt { position: relative; cursor: pointer; }
  .color-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

  .color-swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
  }

  .color-opt input:checked + .color-swatch { border-color: var(--text); transform: scale(1.18); }

  .color-swatch.rainbow {
    background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  }

  .custom-color-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px dashed var(--muted);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.2s;
    flex-shrink: 0;
  }

  .custom-color-btn.active { border-color: var(--accent); border-style: solid; }
  .custom-color-btn svg { color: var(--muted); pointer-events: none; }

  .custom-color-row {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
  }

  .custom-color-row.visible { display: flex; }

  .custom-color-row input[type="color"] {
    width: 36px; height: 36px;
    padding: 2px;
    border-radius: 50%;
    border: 1px solid var(--border-bright);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Quality */
  .quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .qual-option { position: relative; cursor: pointer; }
  .qual-option input { position: absolute; opacity: 0; width: 0; height: 0; }

  .qual-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 11px;
    background: var(--surface);
    transition: border-color 0.15s;
    text-align: center;
  }

  .qual-option input:checked + .qual-card {
    border-color: var(--accent);
    background: rgba(99,210,255,0.06);
  }

  .qual-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .qual-detail { font-size: 12px; color: var(--muted); font-family: var(--mono); }

  /* Slider */
  .slider-wrap { display: flex; align-items: center; gap: 14px; }

  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    border: none;
    padding: 0;
    outline: none;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }

  input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }

  input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0d0f14;
    cursor: pointer;
    margin-top: -7px;
    box-shadow: 0 0 0 1px rgba(99,210,255,0.3);
  }

  input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #0d0f14;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(99,210,255,0.3);
  }

  /* Estimator toggle */
  .estimator-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
  }

  .toggle-track {
    width: 42px; height: 24px;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
  }

  .toggle-track.on {
    background: rgba(99,210,255,0.12);
    border-color: rgba(99,210,255,0.4);
  }

  .toggle-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--muted);
    position: absolute;
    top: 3px; left: 3px;
    transition: transform 0.2s, background 0.2s;
  }

  .toggle-track.on .toggle-thumb { transform: translateX(18px); background: var(--accent); }

  .toggle-
  .toggle-label.on { color: var(--accent); }

  .estimator-fields { display: none; }
  .estimator-fields.visible { display: block; }

  .no-estimate-msg {
    padding: 13px 15px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.18);
    border-radius: 8px;
    font-size: 12px;
    color: var(--warning);
    font-family: var(--mono);
    line-height: 1.5;
  }

  /* Layout */
  .layout { display: grid; grid-template-columns: 1fr 260px; gap: 36px; }
  @media (max-width: 680px) { .layout { grid-template-columns: 1fr; } }

  /* Price panel */
  .price-panel {
    background: var(--surface);
    border: 1px solid var(--border-bright);
    border-radius: 12px;
    padding: 22px;
  }

  .price-panel-

  .price-

  .price-total {
    font-family: var(--mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
  }

  .price-note { font-size: 12px; color: var(--muted); margin-top: 3px; font-family: var(--mono); }

  .price-pending {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--warning);
    padding: 10px 12px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 7px;
    margin-top: 12px;
    line-height: 1.5;
  }

  .price-breakdown { margin-top: 14px; }

  .breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--mono);
  }

  .breakdown-row:last-child { border-bottom: none; }
  .breakdown-row span:last-child { color: var(--text); }

  .breakdown-row.total-row {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(99,210,255,0.2);
    color: var(--text);
    font-weight: 700;
  }

  .breakdown-row.total-row span:last-child { color: var(--accent); }

  .submit-btn {
    width: 100%;
    padding: 13px 24px;
    background: var(--accent);
    color: #020d13;
    border: none;
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 18px;
    transition: opacity 0.2s, transform 0.1s;
  }

  .submit-btn:hover { opacity: 0.9; }
  .submit-btn:active { transform: scale(0.99); }

  

  

  
  

  
  
  

  

  /* Mode switcher */
  

  

  

  

  /* Question form */
  .question-form { display: none; }
  .question-form.visible { display: block; }
  .order-form.hidden { display: none; }

  /* Model entries */
  .file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .url-list  { display: flex; flex-direction: column; gap: 8px; }

  .model-entry {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: visible;
    transition: border-color 0.15s;
  }

  .model-entry.is-file { border-color: rgba(52,211,153,0.22); }

  .model-entry-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-family: var(--mono);
    color: var(--success);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .model-entry-url {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    padding: 0;
    outline: none;
  }

  .model-entry-url::placeholder { color: var(--muted); opacity: 0.5; }

  .model-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .model-settings-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }

  .model-settings-toggle:hover,
  .model-settings-toggle.open { border-color: var(--accent); color: var(--accent); background: rgba(99,210,255,0.05); }

  .model-entry-remove {
    background: none; border: none;
    color: var(--muted); cursor: pointer; font-size: 14px;
    line-height: 1; flex-shrink: 0;
    transition: color 0.15s;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -5px -10px -5px 0;
  }

  .model-entry-remove:hover { color: #f87171; }

  .model-settings-summary {
    padding: 0 12px 9px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }

  .settings-pill {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--surface2);
    border-radius: 3px;
    padding: 2px 7px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }

  /* Per-model settings panel */
  .model-settings-panel {overflow: visible;  overflow: visible; display: none; border-top: 1px solid var(--border); padding: 14px; background: var(--surface2); }
  .model-settings-panel.open { display: block; }

  .ms-row { margin-bottom: 13px; }
  .ms-row:last-child { margin-bottom: 0; }

  .ms-

  /* Override style.css label { display: block } for all settings panel option labels */
  .ms-mat-grid label,
  .ms-finish-grid label,
  .ms-quality-grid label,
  .ms-color-grid label,
  .ms-wood-grid label { display: block; margin-bottom: 0; }

  .ms-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .ms-mat-opt { position: relative; cursor: pointer; }
  .ms-mat-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-mat-card {
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
    background: var(--surface); transition: border-color 0.15s, background 0.15s; user-select: none;
  }
  .ms-mat-opt input:checked + .ms-mat-card { border-color: var(--accent); background: rgba(99,210,255,0.07); }
  .ms-mat-name { font-family: var(--mono); font-size: 12px; font-weight: 700; }
  .ms-mat-desc { font-size: 12px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
  .ms-mat-price { font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 3px; }

  .ms-finish-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  @media (max-width: 500px) { .ms-finish-grid { grid-template-columns: repeat(2, 1fr); } }
  .ms-finish-opt { position: relative; cursor: pointer; }
  .ms-finish-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-finish-card {
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 7px 6px;
    background: var(--surface); text-align: center;
    transition: border-color 0.15s, background 0.15s; user-select: none;
  }
  .ms-finish-opt input:checked + .ms-finish-card { border-color: var(--accent2); background: rgba(167,139,250,0.07); }
  .ms-finish-opt.disabled { opacity: 0.28; pointer-events: none; }
  .ms-finish-dot { width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 4px; border: 1px solid rgba(255,255,255,0.08); }
  .ms-finish-dot.matte  { background: #7a7a7a; }
  .ms-finish-dot.glossy { background: radial-gradient(circle at 30% 30%, #ffffffcc, #a8e6ffaa, #1a3a4a55); border: 1px solid rgba(99,210,255,0.3); }
  .ms-finish-dot.silk   { background: linear-gradient(135deg, #f0c4e8, #c4d4f0, #c4f0e8, #f0eec4); }
  .ms-finish-dot.wood   { background: repeating-linear-gradient(92deg, #8B5E3C 0px, #a0723d 4px, #7a4f2c 8px, #8B5E3C 12px); }
  .ms-finish-name { font-size: 12px; font-weight: 500; line-height: 1.2; }
  .ms-finish-mod  { font-family: var(--mono); font-size: 12px; color: var(--accent2); margin-top: 2px; }

  .ms-color-grid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .ms-color-opt { position: relative; cursor: pointer; }
  .ms-color-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; transition: outline 0.12s, transform 0.12s; display: block; }
  .ms-color-opt input:checked + .ms-color-swatch { outline: 2px solid #63d2ff; outline-offset: 2px; transform: scale(1.1); }
  .ms-custom-btn {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--muted);
    background: transparent; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: border-color 0.12s;
  }
  .ms-custom-btn.active { border-style: solid; outline: 2px solid #63d2ff; outline-offset: 2px; }
  .ms-custom-row { display: none; align-items: center; gap: 8px; width: 100%; margin-top: 6px; }
  .ms-custom-row.open { display: flex; }
  .ms-custom-row input[type="color"] { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-bright); background: var(--surface); padding: 2px; cursor: pointer; flex-shrink: 0; }
  .ms-custom-row 

  .ms-wood-grid { display: flex; gap: 8px; }

  .ms-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .ms-qual-opt { position: relative; cursor: pointer; }
  .ms-qual-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
  .ms-qual-card { border: 1px solid var(--border); border-radius: 7px; padding: 7px; background: var(--surface); text-align: center; transition: border-color 0.15s; user-select: none; }
  .ms-qual-opt input:checked + .ms-qual-card { border-color: var(--accent); background: rgba(99,210,255,0.06); }
  .ms-qual-name   { font-size: 12px; font-weight: 500; }
  .ms-qual-detail { font-family: var(--mono); font-size: 12px; color: var(--muted); }

  .ms-bottom-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
  .ms-infill-wrap { flex: 1; min-width: 130px; }
  .ms-qty-wrap { min-width: 70px; }
  .ms-qty-wrap input { max-width: 70px; }

  .add-url-btn {
    background: none; border: 1px dashed var(--border);
    border-radius: 7px; color: var(--muted);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
    padding: 8px 14px; cursor: pointer; margin-top: 4px;
    transition: border-color 0.15s, color 0.15s; width: 100%;
  }

  .add-url-btn:hover { border-color: var(--border-bright); color: var(--accent); }

  /* Showcase cart import banner */
  .showcase-banner {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(167,139,250,0.07);
    border: 1px solid rgba(167,139,250,0.25);
    border-radius: 9px;
    margin-bottom: 28px;
    font-size: 13px;
  }

  .showcase-banner.visible { display: flex; }

  .showcase-banner-text { flex: 1; color: var(--text); }
  .showcase-banner-text span { font-family: var(--mono); font-size: 12px; color: var(--accent2); display: block; margin-bottom: 2px; }

  .showcase-banner-dismiss {
    background: none; border: none; color: var(--muted);
    cursor: pointer; font-size: 16px;
    transition: color 0.15s; flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: -10px;
  }

  .showcase-banner-dismiss:hover { color: var(--text); }
  
.hint-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #63d2ff;
  background: rgba(99,210,255,0.05);
  text-decoration: none;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  cursor: pointer;
  opacity: 0.85;
}

.hint-link:hover {
  opacity: 1;
  background: rgba(99,210,255,0.15);
  border-color: rgba(99,210,255,0.3);
}

.hint-link.danger {
  color: #f87171;
  background: rgba(248,113,113,0.05);
}

.hint-link.danger:hover {
  background: rgba(248,113,113,0.15);
  border-color: rgba(248,113,113,0.3);
}

@media (max-width: 480px) {
  .ms-mat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 320px) {
  .ms-mat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Accessibility / Focus states ────────────────────────────── */
button:focus-visible,
a:focus-visible,
input[type="file"]:focus-visible + .upload-icon,
.file-upload-area:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="radio"]:focus-visible + * {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Remove native stepper from number inputs ────────────────── */
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; /* Firefox */
}

/* ── Offset bottom for Showcase fixed tray ────────────────────── */
.page.has-tray {
  padding-bottom: 72px; /* Offsets the height of the fixed print tray */
}

/* ── Custom Color Picker Proxy ──────────────────────────────── */
.ms-custom-color-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.ms-custom-color-wrap input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  border: none;
}

.color-swatch-proxy {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border-bright);
  background: #ff6600; /* Default matching JS */
  z-index: 1;
  transition: transform 0.15s, border-color 0.15s;
}

.ms-custom-color-wrap input[type="color"]:focus-visible + .color-swatch-proxy {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Final Polish ───────────────────────────────────────────── */
.logo-mark { display: flex; align-items: center; gap: 12px; }

.mat-option:focus-within .mat-card,
.finish-option:focus-within .finish-card,
.qual-option:focus-within .qual-card,
.ms-mat-opt:focus-within .ms-mat-card,
.ms-finish-opt:focus-within .ms-finish-card,
.ms-qual-opt:focus-within .ms-qual-card {
  border-color: var(--accent);
  background: rgba(99,210,255,0.04);
}

.empty-state {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
  background: rgba(255,255,255,0.01);
}

@media (max-width: 480px) {
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 2px;
    margin-left: 0;
    margin-top: 12px;
  }
}

/* ── Scale Grid ────────────────────────────────────────────── */
.ms-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.ms-scale-card {
  border: 1px solid #ffffff12;
  border-radius: 6px;
  padding: 8px 5px;
  background: #13161d;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.ms-scale-grid input[type="number"] {
  width: 100%;
  border-radius: 6px;
  padding: 8px 5px;
  font-size: 12px;
  text-align: center;
}

.ms-scale-card:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

@media (max-width: 400px) {
  .ms-scale-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}







.ms-custom-btn svg {
  display: block;
  color: var(--muted);
  transition: color 0.12s;
}

.ms-custom-btn:hover svg {
  color: var(--text);
}

.ms-custom-btn.active svg {
  color: var(--accent);
}

/* ── Tooltips ──────────────────────────────────────────────── */
.ms-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.help-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--mono);
  display: inline-grid;
  place-items: center;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s;
  font-weight: bold;
}

.help-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(99,210,255,0.05);
}

.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1d26;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  width: 220px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  border: 1px solid var(--border-bright);
  text-transform: none;
  letter-spacing: 0;
}

.help-icon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

.help-icon::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-bright);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.help-icon:hover::before {
  opacity: 1;
}

@media (max-width: 480px) {
  .help-icon::after {
    width: 160px;
    left: auto;
    right: 0;
    transform: none;
  }
  .help-icon:hover::after {
    transform: translateY(-2px);
  }
  .help-icon::before { display: none; }
}

/* ── Success Animation ────────────────────────────────────── */
.success-animation { margin: 20px auto; }

.checkmark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: var(--success);
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--success);
    animation: check-fill .4s ease-in-out .4s forwards, check-scale .3s ease-in-out .9s both;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--success);
    fill: none;
    animation: check-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: check-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes check-stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes check-scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes check-fill {
    100% {
        box-shadow: inset 0px 0px 0px 40px rgba(52, 211, 153, 0.1);
    }
}

/* ── About Card ───────────────────────────────────────────── */
.about-card {
  margin-top: 48px;
  margin-bottom: 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  opacity: 0.5;
}

.about-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.about-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.model-entry:hover, .model-entry:focus-within {
  z-index: 10;
  position: relative;
}