:root{
  --accent:#ffd400; --accent-ink:#111;
  --ink:#111; --dim:#4a4a4a;
  --line:#dadbe2; --bg:#f6f7fb; --card:#ffffff;
  --radius:16px; --shadow:0 6px 20px rgba(0,0,0,.06);

  --tag-film:#e7f0ff; --tag-film-ink:#0746a7;
  --tag-paper:#e9f9e3; --tag-paper-ink:#1a4d00;
  --tag-other:#f3e9ff; --tag-other-ink:#4b0d8a;
  --tag-format:#f0f0f5; --tag-format-ink:#333;
}

html[data-theme="dark"]{
  --accent:#ffd400; --accent-ink:#111;
  --ink:#f7f7f7; --dim:#c6c6c6;
  --line:#3b3e46; --bg:#14161a; --card:#1b1e24;
  --shadow:none;

  --tag-film:#1d2a3a; --tag-film-ink:#9ac1ff;
  --tag-paper:#1f2a1d; --tag-paper-ink:#b6f29a;
  --tag-other:#261e33; --tag-other-ink:#d2b6ff;
  --tag-format:#2a2d34; --tag-format-ink:#d5d8df;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
header{display:flex;gap:12px;align-items:center;margin-bottom:14px;font-weight:800}
.badge{background:var(--accent);padding:6px 10px;border-radius:10px;color:var(--accent-ink)}
.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:12px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); transition: box-shadow .25s ease}
.card h2{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px}
.card .body{padding:12px 14px}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:end}
.field{grid-column:span 6}
.field.sm{grid-column:span 2}
.field.md{grid-column:span 4}
.field.lg{grid-column:span 8}
.field.full{grid-column:1/-1}
label{display:block;font-size:11px;color:var(--dim);margin-bottom:6px}
input[type=number],input[type=text],input[type=password],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:14px;
  transition:border-color .2s,box-shadow .2s
}
textarea#note{min-height:120px}
input:focus,textarea:focus,select:focus,.tile:focus-visible,.btn:focus-visible,.switch .slider:focus-visible{
  outline:2px solid #7da2ff; outline-offset:2px; box-shadow:none;
}
.btn{border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;font-weight:700;cursor:pointer; transition: transform .2s ease }
.btn:hover{ transform: translateY(-1px) }
.btn.secondary{background:#111;color:#fff}
html[data-theme="dark"] .btn.secondary{background:#2a2f39;color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);font-weight:600;color:var(--ink)}
.btn-sm{padding:8px 10px;border-radius:10px}
.btn.danger{background:#ffebe9;color:#8a0515;border:1px solid #f1c0bd}
html[data-theme="dark"] .btn.danger{background:#3a2020;color:#ffd7d4;border-color:#5a2a2a}

.tile-group{display:flex;gap:8px;flex-wrap:wrap}
.tile{flex:0 0 auto;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);cursor:pointer;user-select:none;transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease}
.tile:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.tile.active{border-color:#a5a5ff;box-shadow:0 0 0 3px rgba(100,100,255,.15)}
.tile .title{font-weight:700;font-size:13px}
.tile .sub{font-size:12px;color:var(--dim)}

.table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;font-size:13px}
.small{font-size:12px;color:var(--dim)}
.footer-link{color:inherit;text-decoration:none;font-weight:bold}

.result-card{position:relative;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card);margin-bottom:10px; transition: box-shadow .25s ease, transform .25s ease}
.result-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-1px) }
.fadein{animation: fadein .25s ease}
@keyframes fadein{from{opacity:0; transform: translateY(4px)} to{opacity:1; transform: translateY(0)}}

.result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.result-title{font-weight:800}
.price{font-size:18px;font-weight:800}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;font-size:12px;color:#333}
html[data-theme="dark"] .kv{color:#ddd}
.kv div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:2px 0}
.kv div span{color:var(--dim)}
.select-send{display:flex;gap:8px;margin-top:8px;align-items:center}
.select-send .send-right{margin-left:auto}
.success{color:#1f7a1f}.error{color:#c03}
.alert{background:#fff5cc;border:1px solid #ffe08a;padding:8px 10px;border-radius:10px}
html[data-theme="dark"] .alert{background:#3b3217;border-color:#6b5a1a;color:#f3e8c7}

.preview{margin-top:10px;border:1px dashed var(--line);border-radius:12px;padding:10px;background:transparent}

/* Подсветка карточки из лог-ссылки */
.result-card.highlight{
  box-shadow: 0 0 0 3px rgba(255,212,0,.6), 0 10px 28px rgba(0,0,0,.10);
  animation: pulseHL .8s ease-out 2;
}
@keyframes pulseHL{
  0%{transform:translateY(-1px)}
  50%{transform:translateY(0)}
  100%{transform:translateY(-1px)}
}

/* Toggle */
.switch{position:relative;width:46px;height:26px;display:inline-block}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{position:absolute;cursor:pointer;inset:0;background:#e5e5ea;border-radius:999px;transition:.25s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.25s}
.switch input:checked + .slider{background:#8bd06c}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* Итоги */
.totals{margin-top:8px;border-top:1px dashed var(--line);padding-top:6px}
.total-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.total-row .label{color:var(--dim)}
.total-row .price{margin-left:auto;font-size:16px;font-weight:800}

/* Бейдж лучшего предложения — в углу карточки */
.badge-best{display:inline-block;background:#ffd400;color:#000;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:900;border:1px solid #d6b800}
.badge-corner{position:absolute;top:10px;right:10px;z-index:1}

/* Метки материалов и форматов */
.tag{display:inline-flex;gap:6px;align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; margin-left:8px}
.tag-film{background:var(--tag-film); color:var(--tag-film-ink); border:1px solid rgba(0,0,0,.05)}
.tag-paper{background:var(--tag-paper); color:var(--tag-paper-ink); border:1px solid rgba(0,0,0,.05)}
.tag-other{background:var(--tag-other); color:var(--tag-other-ink); border:1px solid rgba(0,0,0,.05)}
.tag-format{background:var(--tag-format); color:var(--tag-format-ink); border:1px solid rgba(0,0,0,.05)}
.tag-icon{display:inline-flex}

/* Липкая панель */
.sticky{position:sticky; top:0; z-index:50; background:var(--bg); padding:6px 0 8px; margin-bottom:10px}
.sticky-row{max-width:1200px;margin:0 auto;padding:0 16px;display:flex;gap:12px;justify-content:space-between;align-items:center}
.sticky b{font-weight:800}

/* Скелетон */
.skeleton-list{display:grid; gap:10px}
.skeleton-card{border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--card)}
.skeleton-line{height:12px; background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06)); background-size:200% 100%; border-radius:8px; animation: shimmer 1.2s infinite}
.skeleton-line + .skeleton-line{margin-top:8px}
.skeleton-line.w60{width:60%}
.skeleton-line.w80{width:80%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Footer copyright */
.site-footer{margin-top:16px;border-top:1px solid var(--line);background:transparent}
.site-footer .footer-inner{max-width:1200px;margin:0 auto;padding:14px 16px 18px}
.site-footer .copyright{margin:0;text-align:center;font-size:12px;line-height:1.4;color:#8e8e93;letter-spacing:.2px}
html[data-theme="dark"] .site-footer .copyright{color:#9ea1a8}
.site-footer .copyright a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.site-footer .copyright a:hover{color:#111;border-bottom-color:transparent}
html[data-theme="dark"] .site-footer .copyright a:hover{color:#fff;border-bottom-color:transparent}

/* Доступность: если пользователь отключил анимации */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}
.visually-hidden{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}


/* --- Copyloft extras --- */
body { min-height: 100vh; }
.header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; }
.brand { display:flex; align-items:baseline; gap:10px; }
.brand h1 { margin:0; font-size:18px; letter-spacing:0.2px; }
.brand .tag { font-size:12px; opacity:0.75; }
.container { display:grid; grid-template-columns: 280px 1fr 320px; gap:12px; padding: 0 12px 12px; }
.panel { border:1px solid var(--line); background:var(--card); border-radius:14px; padding:12px; box-shadow: var(--shadow); }
.thumb-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.thumb { position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg2); cursor:pointer; }
.thumb img { width:100%; height:120px; object-fit:cover; display:block; }
.thumb .meta { padding:6px 8px; font-size:12px; opacity:0.85; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.thumb input[type="checkbox"] { transform:scale(1.1); }
.thumb.active { outline:2px solid var(--accent); }
.workgrid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
.canvasbox { border:1px solid var(--line); background:var(--bg2); border-radius:14px; padding:10px; position:relative; }
.canvasbox canvas { width:100%; height:auto; background:#0000; border-radius:10px; display:block; }
.canvasbox .label { position:absolute; top:10px; left:10px; background:rgba(0,0,0,0.45); color:white; padding:4px 8px; border-radius:999px; font-size:12px; }
.controls .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.controls .row label { font-size:12px; opacity:0.8; }
.controls input[type="range"] { width:100%; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); padding:8px 10px; border-radius:12px; cursor:pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.danger { border-color: #b23; color: #b23; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.preset { padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:var(--bg2); cursor:pointer; font-size:12px; }
.preset.active { background:var(--accent); color:var(--accent-ink); border-color: transparent; }
.notice { font-size:12px; opacity:0.75; line-height:1.4; }
.footer { padding: 10px 18px 18px; font-size:12px; opacity:0.85; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; padding:18px; z-index:9999; }
.modal { width:min(520px, 100%); border:1px solid var(--line); background:var(--card); border-radius:16px; box-shadow: var(--shadow); padding:14px; }
.modal h2 { margin:0 0 8px; font-size:16px; }
.modal .row { display:flex; gap:10px; margin-top:10px; }
.modal input[type="password"], .modal input[type="text"] { width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--bg2); color:var(--ink); }
.progress { height:10px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; }
.progress > div { height:100%; width:0%; background:var(--accent); }
.small { font-size:12px; opacity:0.8; }

@media (max-width: 1100px){
  .container { grid-template-columns: 1fr; }
  .workgrid { grid-template-columns: 1fr; }
  .thumb-grid { grid-template-columns: repeat(3, 1fr); }
}