:root {
  --bg: #0b0b0b;
  --surface: #141414;
  --surface-soft: #1b1b1b;
  --surface-strong: #070707;
  --ink: #f2f2ef;
  --muted: #92928f;
  --line: #30302e;
  --line-strong: #454542;
  --orange: #f36c2d;
  --orange-dark: #ff6a2c;
  --orange-soft: #2a160d;
  --green: #78ba86;
  --success: #67bd78;
  --danger: #ff6b61;
  --shadow: 0 28px 90px rgba(0,0,0,.45);
  --radius: 4px;
  --radius-lg: 4px;
}

body {
  color: var(--ink);
  background: #0b0b0b;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.product-layout { gap: 28px; padding-top: 20px; }
.visual-card, .configurator {
  border-color: var(--line);
  border-radius: 4px;
  background: #121212;
  box-shadow: var(--shadow);
}
.visual-head { min-height: 60px; border-color: var(--line); background: #111; }
.lab-tag::before { width: 20px; height: 2px; border-radius: 0; box-shadow: none; }
.live-status { color: #92928f; }
.ghost-button { border-color: #3b3b39; border-radius: 3px; background: #181818; color: #aaa; }
.ghost-button:hover { background: #202020; color: var(--orange); }

.preview-workspace {
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    radial-gradient(ellipse at 55% 43%, #2b211c 0, #171411 38%, #090909 79%);
  background-size: 48px 48px, 48px 48px, auto;
}
.preview-workspace::before { background: rgba(243,108,45,.05); filter: blur(10px); }
.preview-workspace::after { border-color: rgba(243,108,45,.07); }
.thumbs { border-color: var(--line); background: rgba(8,8,8,.76); }
.thumb { border-color: #353533; border-radius: 3px; background: #151515; color: #8f8f8c; }
.thumb.is-active { border-color: var(--orange); background: #23160f; box-shadow: none; }
.thumb-upload { background: #20140f; }
.view-paddle::before { border-color: #a9a9a5; background: #eee; box-shadow: none; }
.view-paddle::after { background: #111; }
.model-loading { background: rgba(11,11,11,.96); }
.model-loading span { border-color: #3a302b; border-top-color: var(--orange); }
.viewer-hint { border-color: #3b3b39; border-radius: 3px; background: rgba(9,9,9,.82); color: #999; }
.side-switch button { border-color: #3b3b39; border-radius: 3px; background: rgba(9,9,9,.85); color: #aaa; }
.visual-footer { border-color: var(--line); background: #0f0f0f; }
.proof-item { border-color: var(--line); border-radius: 3px; background: #161616; }
.proof-item:last-child { border-color: var(--line); }
.proof-icon { border-radius: 3px; background: #28170f; }

.product-kicker { color: var(--orange); }
.product-kicker span { border-radius: 3px; background: #25160f; }
.product-info h1, .panel-title, .section-head h2, .process-card h3 { font-family: "Inter", ui-sans-serif, sans-serif; }
.product-info h1 { font-weight: 850; }
.product-info h1 em { color: var(--orange); font-weight: 850; }
.product-intro { color: #a0a09d; }
.rating-row { border-radius: 3px; background: #161616; color: #888; }
.rating-row b { color: #d5d5d2; }
.metric { border-color: #333; border-radius: 3px; background: #141414; }
.metric:last-child { border-color: #333; }
.metric strong { color: #fff; }
.pricing-note { border-color: #4a2c1c; border-left: 3px solid var(--orange); border-radius: 0; background: #1b130f; }
.pricing-note span { color: #b39889; }

.steps { gap: 0; margin: 0; padding: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #0e0e0e; }
.step { min-height: 58px; border-right: 1px solid var(--line); border-radius: 0; }
.step:last-child { border-right: 0; }
.step b { border-color: #454542; border-radius: 3px; background: #171717; }
.step.is-active { background: #21140e; box-shadow: inset 0 -3px var(--orange); }
.step.is-active b { border-color: var(--orange); }
.step.is-done b { border-color: #375b3e; background: #152119; }
.config-panel { padding: 24px; }
.panel-title { font-weight: 750; }
.palette-guide, .prototype-note { border: 1px solid #3a2a22; border-radius: 3px; background: #1d1511; color: #bda597; }
.material-card, .option-card {
  border-color: #333;
  border-radius: 3px;
  background: #181818;
  color: #e7e7e4;
}
.material-card:hover, .option-card:hover { border-color: #71503f; background: #1d1b19; }
.material-card.is-active, .option-card.is-active { border-color: var(--orange); background: #241711; box-shadow: none; }
.material-card.is-active::after, .option-card.is-active::after { border-radius: 2px; }
.option-thumb { border-color: #3a3a38; border-radius: 3px; background: #f4f4f0; }
.material-copy small, .option-copy small { color: #8e8e8b; }
.popular { border-radius: 3px; background: #142318; }
.press-symbol { border-radius: 3px; background: #17221a; }
.press-symbol.hot { background: #28160f; }
.prototype-note span { border-radius: 2px; background: #2a1b14; }
.primary-button, .secondary-button { min-height: 46px; border-radius: 3px; }
.primary-button { background: var(--orange); box-shadow: none; }
.secondary-button { border-color: #444; background: #171717; color: #fff; }
.secondary-button:hover { background: #202020; }
.start-design { border-color: #885038; border-radius: 3px; background: #17120f; color: #fff; }
.start-design .upload-button-icon { border-radius: 3px; }
.design-check { border-color: #30302e; border-radius: 3px; background: #171717; }

.color-editor { border-color: #30302e; border-radius: 3px; background: #171717; }
.swatch { border-color: #292929; border-radius: 3px; box-shadow: 0 0 0 1px #4a4a47; }
.swatch.is-active { box-shadow: 0 0 0 2px var(--orange); }
.picker-shell, .hex-field { border-color: #484845; border-radius: 3px; background: #0f0f0f; color: #fff; }
.pantone-row { border: 1px solid #3a2a22; border-radius: 3px; background: #1d1511; }
.pantone-row input { border-color: #67412f; border-radius: 3px; background: #0f0f0f; color: #fff; }
.pantone-row small { color: #a88d7e; }

.summary { border-color: #333; border-radius: 3px; }
.summary-row { border-color: #333; }
.field label { color: #aaa; }
.field input, .field textarea, .field select { border-color: #444; border-radius: 3px; background: #0e0e0e; color: #fff; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--orange); }

.process-section { border-color: var(--line); background: #0b0b0b; }
.section-head span { color: var(--orange); }
.process-grid { gap: 0; border-top: 1px solid #333; border-left: 1px solid #333; }
.process-card, .process-card:nth-child(2), .process-card:nth-child(3), .process-card:nth-child(4), .process-card:nth-child(5) {
  min-height: 205px;
  transform: none;
  border: 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-radius: 0;
  background: #131313;
}
.process-card:hover { background: #181818; }
.process-card:last-child { border-right: 1px solid #333; }

.design-dialog { background: rgba(0,0,0,.78); }
.design-dialog-card { border-color: #3b3b39; border-radius: 4px; background: #111; }
.design-close { border-color: #444; border-radius: 3px; background: #171717; color: #fff; }
.design-side { border-color: #333; background: #0d0d0d; }
.design-side-title { background: var(--orange); font-family: "Inter", sans-serif; font-weight: 800; }
.side-choice { border-color: #333; color: #aaa; }
.side-choice.is-active { background: #24160f; color: var(--orange); }
.side-links a { color: #888; }
.editor-head, .editor-tools, .design-savebar { border-color: #333; background: #111; }
.editor-head button, .tool-btn { border-color: #444; background: #181818; color: #ddd; }
.tool-btn:hover, .tool-btn.is-active { background: #25160f; }
.editor-stage { background: radial-gradient(circle at center, #3b332e, #101010 74%); }
.editor-empty { border-radius: 3px; }
.editor-empty i { border-radius: 3px; }
.crop-wrap { background: #fff; }
.zoom-control, .editor-input-control { border-color: #444; border-radius: 3px; color: #aaa; }
.editor-input-control input[type="text"], .angle-control input[type="number"] { border-color: #444; background: #111; color: #fff; }
.save-design { border-radius: 3px; background: var(--orange); }

@media (max-width: 760px) {
  .visual-card, .configurator { border-radius: 3px; }
  .thumbs { border-color: #333; }
  .metrics { grid-template-columns: 1fr 1fr 1fr; }
  .metric { padding: 11px 9px; }
  .metric strong { font-size: 13px; }
  .metric span { font-size: 7px; }
  .config-panel { padding: 17px 14px; }
  .process-grid { grid-template-columns: 1fr; }
  .design-dialog-card { border-radius: 0; }
}

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