/* NOTHING-style: монохром + красный акцент, точечная матрица, техно-панели.
   Без внешних библиотек и шрифтов — только системный monospace. */
:root{
  --paper:#f4f4f2;
  --ink:#0a0a0a;
  --grey:#8a8a8a;
  --line:#0a0a0a;
  --red:#d71920;
  --red-dim:#7a0e12;
  --card:#ffffff;
  --radius:12px;
  /* резкие технические анимации */
  --m3-ease:cubic-bezier(.2,0,0,1);
  --m3-ease-emph:cubic-bezier(.16,1,.3,1);
  --m3-short:140ms;
  --m3-med:280ms;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"SF Mono","Cascadia Mono",ui-monospace,Menlo,Consolas,"Courier New",monospace;
  background-image:radial-gradient(#0a0a0a14 1px,transparent 1px);
  background-size:12px 12px;
}
/* левая боковая панель вместо верхней */
.app-bar{position:fixed;left:0;top:0;bottom:0;width:336px;z-index:50;
  display:flex;flex-direction:column;gap:24px;align-items:stretch;justify-content:flex-start;
  padding:29px 24px;background:var(--ink);color:#fff;border-right:3px solid var(--red)}
.title-wrap{display:flex;gap:17px;align-items:center}
.app-icon{width:22px;height:22px;border-radius:50%;background:var(--red);flex:none;
  animation:blink 1.6s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.title-wrap h1{font-size:26px;margin:0;text-transform:uppercase;letter-spacing:3px;font-weight:700}
.title-wrap h1::after{content:"_";color:var(--red);animation:blink 1s steps(2,jump-none) infinite}
.subtitle{margin:6px 0 0;color:#e8e8e8;font-size:14px;text-transform:uppercase;letter-spacing:2px;line-height:1.8}
.stats{display:flex;flex-direction:column;gap:14px}
.chip{background:transparent;color:#f0f0f0;border:1px solid #fff;border-radius:10px;padding:14px 19px;font-size:16px;
  letter-spacing:2px;text-transform:uppercase}
.chip b{display:block;color:#ff5252;font-size:38px;letter-spacing:1px;margin-top:2px}
/* раскладка: место под левый сайдбар */
.layout{display:grid;grid-template-columns:408px 1fr;gap:24px;padding:24px 34px;max-width:1680px;margin:0 auto 0 336px;align-items:start}
@media(max-width:860px){
  .layout{grid-template-columns:1fr;margin:0 auto}
  /* на мобиле сайдбар снова становится верхней панелью */
  .app-bar{position:static;width:auto;border-right:0;border-bottom:3px solid var(--red)}
  .stats{flex-direction:row;flex-wrap:wrap}
  .stats .chip{flex:1 1 40%}
  .chip b{font-size:29px}
}
@media(min-width:861px){.panel{position:sticky;top:16px}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:19px;min-height:480px}
.panel h2{margin:0 0 4px;font-size:18px;text-transform:uppercase;letter-spacing:3px}
.panel h2::before{content:"01 // ";color:var(--red)}
.hint{font-size:13px;color:#555;text-transform:uppercase;letter-spacing:1px;line-height:1.7}
.cards{display:flex;flex-direction:column;gap:12px;margin-top:14px;min-height:120px}
/* карточки заявок — белые плашки с красной меткой */
.card{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--ink);
  border-radius:var(--radius);padding:14px 14px 14px 12px;cursor:grab;
  display:flex;gap:12px;align-items:center;
  transition:transform var(--m3-short) var(--m3-ease),box-shadow var(--m3-short) var(--m3-ease);will-change:transform;
  transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card:hover{transform:perspective(600px) translate(-2px,-2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:4px 4px 0 var(--ink)}
.card.enter{animation:achieveIn var(--m3-med) var(--m3-ease-emph) backwards}
.card.selected{border-left-color:var(--red);box-shadow:4px 4px 0 var(--red);
  animation:floatY 2s var(--m3-ease) .5s infinite}
@keyframes achieveIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{translate:0 0}50%{translate:0 -4px}}
.card .emoji{font-size:29px;filter:grayscale(1) contrast(1.4)}
.card.selected .emoji{filter:none}
.card b{font-size:16px;text-transform:uppercase;letter-spacing:2px}
.card.dragging{opacity:.4}
.legend{margin-top:19px;font-size:16px;background:var(--ink);color:#f5f5f5;border-radius:10px;padding:17px;
  letter-spacing:1px;line-height:2}
.legend h3{margin:0;font-size:14px;letter-spacing:3px;color:#ff5252}
.legend ul{margin:6px 0 0;padding-left:16px}
/* карта: 4 техно-панели */
.map{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:600px){.map{grid-template-columns:1fr}}
.district{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:19px;min-height:264px;
  outline:2px dashed transparent;outline-offset:-8px;transition:var(--m3-short) var(--m3-ease);position:relative}
.map .district:nth-child(1) h2::before{content:"A. "}
.map .district:nth-child(2) h2::before{content:"B. "}
.map .district:nth-child(3) h2::before{content:"C. "}
.map .district:nth-child(4) h2::before{content:"D. "}
.district h2{margin:0;font-size:19px;text-transform:uppercase;letter-spacing:3px}
.district::after{content:"";position:absolute;top:17px;right:17px;width:12px;height:12px;border-radius:50%;
  background:var(--grey)}
.district.dragover{border-color:var(--red);box-shadow:6px 6px 0 var(--red);transform:translate(-2px,-2px)}
.district.dragover::after{background:var(--red);animation:blink .5s steps(2,jump-none) infinite}
.district.overloaded{border-style:double}
.district.overloaded::after{background:var(--red)}
.district.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.d-cap{font-size:12px;color:#555;margin:6px 0 10px;text-transform:uppercase;letter-spacing:2px}
.district .load{font-weight:700;color:var(--red)}
.slots{display:flex;flex-direction:column;gap:10px;min-height:120px}
.slot{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;
  display:flex;gap:8px;align-items:center;text-transform:uppercase;letter-spacing:1px;
  transition:transform var(--m3-short) var(--m3-ease)}
.slot .emoji,.slot span:first-child{filter:grayscale(1)}
.slot:hover{transform:translateX(4px)}
.slot.enter{animation:slotIn var(--m3-med) var(--m3-ease-emph) backwards}
@keyframes slotIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.slot.conflict{background:#2b0507;color:#ff8a8a;outline:2px solid var(--red)}
.card.conflict{background:#2b0507;color:#ff8a8a;outline:2px solid var(--red)}
/* тост — чёрная плашка */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#f5f5f5;border-left:6px solid var(--red);padding:17px 24px;border-radius:10px;
  font-size:16px;letter-spacing:1px;
  transition:var(--m3-short) var(--m3-ease);max-width:90vw;line-height:1.6}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.overlay{position:fixed;inset:0;background:rgba(10,10,10,.7);display:flex;align-items:center;justify-content:center}
.overlay.hidden{display:none}
.dialog{background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--red);
  border-radius:16px;padding:38px;text-align:center;min-width:360px}
.dialog h2{text-transform:uppercase;letter-spacing:4px}
.dialog h2::before{content:"■ ";color:var(--red)}
.muted{color:#555;font-size:14px;text-transform:uppercase;letter-spacing:1px}
.btn-filled{background:var(--ink);color:#f5f5f5;border:0;border-radius:10px;
  padding:17px 34px;font-size:17px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.btn-filled:hover{background:var(--red)}
.count{background:var(--red);color:#fff;border-radius:6px;padding:0 10px;font-size:16px}
/* плашка за курсором */
.cursor-card{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--ink);color:#fff;
  border:1px solid var(--red);border-radius:10px;padding:10px 12px;font-size:26px;
  box-shadow:4px 4px 0 var(--red);transition:opacity var(--m3-short) var(--m3-ease)}
.cursor-card.hidden{opacity:0}
.cursor-card span{display:inline-block;filter:grayscale(1);animation:wobble 1.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
/* запретная кнопка */
.nopress-wrap{position:fixed;right:29px;bottom:29px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.nopress-bubble{background:var(--ink);color:#ff5a52;font-size:17px;font-weight:700;max-width:336px;text-align:right;
  border:1px solid var(--red);border-left:6px solid var(--red);border-radius:12px;padding:14px 19px;
  letter-spacing:1px;line-height:1.7;
  transition:opacity var(--m3-short) var(--m3-ease);text-shadow:0 0 12px #ff3b3066}
.nopress-bubble.hidden{opacity:0}
.nopress-bubble.stage-2{animation:flicker 1.1s var(--m3-ease) infinite}
.nopress-bubble.stage-3{color:#ff1414;font-size:19px;
  text-shadow:2px 0 0 #590000,-2px 0 0 #ff6b6b,0 0 18px #ff0000;
  animation:tremble .28s linear infinite}
@keyframes flicker{0%,100%{opacity:1}8%{opacity:.4}10%{opacity:1}46%{opacity:1}48%{opacity:.5}50%{opacity:1}}
@keyframes tremble{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(1px,-1px) rotate(.4deg)}50%{transform:translate(-1px,1px) rotate(-.4deg)}75%{transform:translate(1px,1px) rotate(.3deg)}100%{transform:translate(-1px,-1px) rotate(-.3deg)}}
.fab-nopress{border:2px solid var(--ink);cursor:pointer;
  background:var(--red);color:#fff;font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  border-radius:14px;padding:22px 34px;box-shadow:6px 6px 0 var(--ink);
  transition:transform var(--m3-short) var(--m3-ease),box-shadow var(--m3-short) var(--m3-ease)}
.fab-nopress:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.fab-nopress.deny{animation:shake .3s}