/* LithoLight
   Палитра взята с самого изделия: непросвеченный PLA и тёплое свечение лампы.
   Одно яркое место на странице — свет. Всё остальное держим тихим. */

:root {
  --ink: #171021;
  --ink-raised: #201730;
  --ink-line: #2f2344;
  --plastic: #f2ebe0;
  --plastic-dim: #bdb2c9;
  --muted: #8f82a6;
  --glow: #ffb65c;
  --glow-soft: #ffd9a3;
  --cool: #bfd8ff;
  --danger: #ff8080;
  --ok: #8ee6a8;

  --measure: 66ch;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--plastic);
  font-family: Commissioner, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

a { color: var(--glow-soft); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--glow); }

:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 .6rem; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: 0; }
p { max-width: var(--measure); }

.shell { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }

/* --- шапка --- */
.top {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--ink-line);
}
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--plastic); text-decoration: none; }
.brand span { color: var(--glow); }
.top nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.top nav a { color: var(--plastic-dim); text-decoration: none; font-size: .95rem; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--glow); }

/* --- герой: настоящая физика на просвет --- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0 3rem; }
.hero p.lead { font-size: 1.15rem; color: var(--plastic-dim); }
.wedge { margin: 2.5rem 0 1rem; display: block; width: 100%; height: auto; }
.wedge-note {
  font-size: .9rem; color: var(--muted); max-width: 52ch;
}
.wedge-note code { color: var(--glow-soft); font-family: inherit; }

/* --- цены --- */
.variants { display: grid; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); margin: 3rem 0; }
@media (min-width: 720px) { .variants { grid-template-columns: repeat(3, 1fr); } }
.variant { background: var(--ink); padding: 1.6rem; }
.variant.featured { background: var(--ink-raised); box-shadow: inset 0 2px 0 var(--glow); }
.variant .price { font-size: 2rem; font-weight: 200; color: var(--glow); display: block; margin: .4rem 0 .8rem; }
.variant p { color: var(--plastic-dim); font-size: .95rem; margin: 0; }

/* --- производственная цепочка: это действительно последовательность --- */
.chain { counter-reset: step; margin: 3rem 0; padding: 0; list-style: none; }
.chain li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem;
  padding: .9rem 0; border-top: 1px solid var(--ink-line);
}
.chain li::before {
  content: counter(step); color: var(--glow); font-weight: 300; font-size: 1.1rem;
}
.chain strong { font-weight: 500; }
.chain span { display: block; color: var(--muted); font-size: .92rem; }

/* --- формы --- */
.panel { background: var(--ink-raised); border: 1px solid var(--ink-line); padding: 1.5rem; border-radius: var(--radius); }
label { display: block; font-size: .93rem; color: var(--plastic-dim); margin-bottom: .35rem; }
.field + .field { margin-top: 1.2rem; }
.helptext { display: block; color: var(--muted); font-size: .85rem; margin-top: .35rem; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  width: 100%; padding: .6rem .7rem;
  background: var(--ink); color: var(--plastic);
  border: 1px solid var(--ink-line); border-radius: var(--radius);
  font: inherit;
}
input[type="file"] { color: var(--plastic-dim); font: inherit; }
input[type="range"] { width: 100%; accent-color: var(--glow); }

ul#id_modules { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
ul#id_modules label { display: flex; gap: .55rem; align-items: baseline; color: var(--plastic); margin: 0; }

.btn {
  display: inline-block; padding: .7rem 1.4rem; border: 0; border-radius: var(--radius);
  background: var(--glow); color: #2a1a05; font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--glow-soft); color: #2a1a05; }
.btn.ghost { background: transparent; color: var(--plastic); border: 1px solid var(--ink-line); }
.btn.ghost:hover { border-color: var(--glow); color: var(--glow); }

/* --- заказы --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--ink-line); font-size: .95rem; }
th { color: var(--muted); font-weight: 500; }

.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .8rem; border: 1px solid var(--ink-line); color: var(--plastic-dim);
}
.badge.done { border-color: var(--ok); color: var(--ok); }
.badge.failed { border-color: var(--danger); color: var(--danger); }
.badge.running, .badge.queued { border-color: var(--glow); color: var(--glow); }

.layer-grid { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .layer-grid { grid-template-columns: repeat(2, 1fr); } }
.layer img { width: 100%; height: auto; border-radius: var(--radius); background: #000; display: block; }
.layer figcaption { color: var(--muted); font-size: .88rem; margin-top: .5rem; }

.files { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; font-size: .9rem; }

.notice { padding: .8rem 1rem; border-left: 2px solid var(--glow); background: var(--ink-raised); margin: 1rem 0; }
.notice.warn { border-color: var(--danger); }

pre.log {
  background: #0f0a16; border: 1px solid var(--ink-line); padding: 1rem;
  overflow-x: auto; font-size: .85rem; color: var(--plastic-dim); border-radius: var(--radius);
}

footer { margin: 5rem 0 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); color: var(--muted); font-size: .88rem; }

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

/* --- конструктор --- */
.builder { display: grid; gap: 1.75rem; align-items: start; margin-top: 1.5rem; }
@media (min-width: 960px) { .builder { grid-template-columns: 1fr 340px; } }

.drop {
  border: 1px dashed var(--ink-line); border-radius: var(--radius);
  padding: 1.25rem; min-height: 320px; background: var(--ink-raised);
}
.drop.over { border-color: var(--glow); }
.drop-empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.drop-empty p { max-width: 42ch; margin-inline: auto; }

.tiers { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tier {
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: var(--radius);
  overflow: hidden; cursor: grab;
}
.tier.dragging { opacity: .4; }
.tier.over { border-color: var(--glow); }
.tier canvas { display: block; width: 100%; height: auto; background: #000; }
.tier-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; font-size: .85rem; }
.tier-num { color: var(--glow); font-weight: 500; }
.tier-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tier-del {
  background: none; border: 0; color: var(--muted); font-size: 1.2rem;
  line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.tier-del:hover { color: var(--danger); }

.controls { display: grid; gap: 1.25rem; }
.controls .panel { padding: 1.1rem; }
.total table { margin-bottom: .6rem; }
.total td { padding: .35rem 0; border-bottom: 1px solid var(--ink-line); font-size: .9rem; }
.total td:last-child { text-align: right; color: var(--plastic-dim); white-space: nowrap; }
.total-sum { display: flex; justify-content: space-between; align-items: baseline; margin: .8rem 0 1rem; }
.total-sum b { font-size: 1.6rem; font-weight: 300; color: var(--glow); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* --- собранное изделие в конструкторе --- */
.assembled { margin-top: 2rem; }
.assembled canvas {
  width: 100%; max-width: 420px; height: auto; display: block;
  background: radial-gradient(ellipse at 50% 40%, #241a33 0%, var(--ink) 70%);
  border-radius: var(--radius);
}
.spin-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .75rem; color: var(--plastic); font-size: .93rem;
}
.spin-toggle input { accent-color: var(--glow); }

/* --- редактор фотографии --- */
.editor { margin-top: 1.5rem; background: var(--ink-raised); border: 1px solid var(--ink-line);
          border-radius: var(--radius); padding: 1.25rem; }
.editor-body { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .editor-body { grid-template-columns: 260px 1fr; } }
.editor canvas { width: 100%; max-width: 260px; height: auto; border-radius: var(--radius);
                 background: #000; display: block; }
.editor-controls { display: grid; gap: .7rem; align-content: start; }
.editor-controls label { display: block; font-size: .9rem; color: var(--plastic-dim); margin: 0; }
.editor-controls label b { float: right; color: var(--glow); font-weight: 500; }
.editor-controls label.chk { display: flex; gap: .5rem; align-items: center; color: var(--plastic); }
.editor-controls input[type="range"] { width: 100%; accent-color: var(--glow); margin-top: .15rem; }
.editor-buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.tier-edit { background: transparent; border: 1px solid var(--ink-line); color: var(--plastic-dim);
             font: inherit; font-size: .82rem; padding: .15rem .6rem; border-radius: var(--radius);
             cursor: pointer; margin-left: auto; }
.tier-edit:hover { border-color: var(--glow); color: var(--glow); }