/* Внешность взята из нашей CRM: один визуальный язык на два продукта дешевле,
   чем два. Токены, сайдбар, кнопки и таблицы повторяют AgencyOS. */
:root{
  --bg:#e9eef5; --panel:#fff; --panel-2:#f1f5f9;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#94a3b8; --line:#e6eaf1;
  --accent:#4f46e5; --accent-2:#4338ca; --accent-bg:#eef2ff; --accent-bd:#c7d2fe;
  --on-accent:#fff;
  --danger:#b91c1c; --danger-bg:#fef2f2; --danger-bd:#fecaca;
  --success:#15803d; --success-bg:#f0fdf4; --success-bd:#bbf7d0;
  --warn:#b45309; --warn-bg:#fffbeb; --warn-bd:#fde68a;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.08);
  --font:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); font-family:var(--font); color:var(--ink);
          font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.app{display:flex; height:100vh}

/* сайдбар */
.sb{width:196px; border-right:.5px solid var(--line); display:flex;
    flex-direction:column; flex-shrink:0; overflow-y:auto}
.sb-logo{padding:13px 14px; font-size:14px; font-weight:500; display:flex;
         align-items:center; gap:8px; border-bottom:.5px solid var(--line)}
.lm{width:22px; height:22px; border-radius:6px; background:var(--accent);
    color:var(--on-accent); display:flex; align-items:center;
    justify-content:center; font-size:12px; font-weight:600}
.sb-sec{font-size:10px; font-weight:500; color:var(--ink-3);
        padding:12px 14px 3px; letter-spacing:.06em; text-transform:uppercase}
.ni{display:flex; align-items:center; gap:8px; padding:6px 10px; margin:1px 6px;
    border-radius:7px; font-size:12px; color:var(--ink-2)}
.ni:hover{background:var(--panel); color:var(--ink)}
.ni.on{background:var(--panel); color:var(--ink); font-weight:500}
.ni svg{width:14px; height:14px; flex-shrink:0; stroke:currentColor; fill:none;
        stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.sb-bot{margin-top:auto; padding:10px 12px; border-top:.5px solid var(--line);
        font-size:11px; color:var(--ink-3)}

/* каркас страницы */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{height:48px; padding:0 16px; background:var(--panel);
        border-bottom:.5px solid var(--line); display:flex; align-items:center;
        justify-content:space-between; gap:10px; flex-shrink:0}
.tb-title{font-size:13px; font-weight:500}
.tb-sub{font-size:11px; color:var(--ink-3)}
.content{flex:1; padding:16px; overflow-y:auto}
.hint{font-size:12px; color:var(--ink-2); max-width:76ch; margin-bottom:14px}

.panel{background:var(--panel); border:1px solid var(--line);
       border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.panel + .panel{margin-top:12px}
.panel h2{font-size:13px; font-weight:600; margin-bottom:10px}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.row3{display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr}
.stack{display:flex; flex-direction:column; gap:12px}

label{display:block; font-size:11px; color:var(--ink-3); margin:10px 0 3px;
      text-transform:uppercase; letter-spacing:.04em}
input[type=text],input[type=email],select,textarea{
  width:100%; padding:6px 9px; border:.5px solid var(--line); border-radius:7px;
  background:var(--panel); color:var(--ink); font:inherit; font-size:12px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(79,70,229,.08)}
textarea{min-height:70px; resize:vertical}
.checks{display:grid; gap:5px 12px; margin-top:6px;
        grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.checks label{display:flex; gap:7px; align-items:center; color:var(--ink);
              font-size:12px; margin:0; text-transform:none; letter-spacing:0}
.checks input{width:auto}

.btn{display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
     border-radius:7px; border:.5px solid var(--line); background:var(--panel);
     color:var(--ink); font-size:12px; cursor:pointer; font-family:var(--font)}
.btn:hover{background:var(--bg)}
.btn-p{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-p:hover{background:var(--accent-2)}
.btn-sm{padding:4px 10px; font-size:11px}
.bar{display:flex; gap:8px; align-items:center; margin-top:14px}

.tbl{width:100%; border-collapse:collapse; font-size:12px}
.tbl th{text-align:left; padding:7px 10px; border-bottom:.5px solid var(--line);
        color:var(--ink-3); font-weight:500; font-size:11px;
        background:var(--panel-2); white-space:nowrap}
.tbl td{padding:8px 10px; border-bottom:.5px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:none}

.tag{display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px;
     font-size:11px; font-weight:500; white-space:nowrap; background:var(--panel-2);
     color:var(--ink-2); margin-right:4px}
.tag-blue{background:var(--accent-bg); color:var(--accent-2)}
.tag-green{background:var(--success-bg); color:var(--success)}
.tag-yellow{background:var(--warn-bg); color:var(--warn)}
.tag-red{background:var(--danger-bg); color:var(--danger)}
.muted{color:var(--ink-3)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:11px;
      color:var(--ink-3)}
.empty{color:var(--ink-3); padding:18px 0; font-size:12px}
.trouble{background:var(--danger-bg); color:var(--danger);
         border:1px solid var(--danger-bd); border-radius:8px; padding:9px 12px;
         margin-bottom:12px; font-size:12px}

/* вход */
.gate{display:flex; align-items:center; justify-content:center; height:100vh}
.gate .panel{width:380px; text-align:center}
.gate h1{font-size:17px; margin-bottom:6px}

/* ── превью подач ─────────────────────────────────────────────────────────
   Картинка не занимает место постоянно: список остаётся списком, а подача
   показывается при наведении. Постоянные превью съедали экран — выбирать из
   трёх десятков подач, прокручивая сетку картинок, неудобно. */
.thumb{width:34px; height:44px; object-fit:cover; border-radius:4px;
       border:.5px solid var(--line); cursor:zoom-in; display:block;
       background:var(--panel-2)}
.peek{position:relative; display:inline-flex; align-items:center; gap:6px}
.peek .pop{position:absolute; left:0; bottom:calc(100% + 6px); z-index:40;
           display:none; padding:4px; background:var(--panel);
           border:1px solid var(--line); border-radius:9px;
           box-shadow:var(--shadow)}
.peek:hover .pop{display:block}
.peek .pop img{width:190px; height:250px; object-fit:cover; border-radius:6px;
               display:block}
.peek .dot{width:9px; height:9px; border-radius:50%; background:var(--accent-bd);
           flex-shrink:0}
.pick{display:grid; gap:4px 10px; margin-top:8px;
      grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pick label{display:flex; gap:7px; align-items:center; margin:0;
            text-transform:none; letter-spacing:0; font-size:12px;
            color:var(--ink); padding:3px 0; cursor:pointer}
.pick input{width:auto; flex-shrink:0}
.pick .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap}
dialog.look{border:0; padding:0; background:rgba(12,14,20,.94); max-width:100vw;
            max-height:100vh; width:100vw; height:100vh}
dialog.look::backdrop{background:rgba(12,14,20,.8)}
dialog.look .in{display:grid; grid-template-rows:1fr auto; height:100%}
dialog.look img{max-width:100%; max-height:100%; margin:auto; display:block;
                object-fit:contain; cursor:zoom-out}
dialog.look .cap{color:#e9eaee; font-size:12px; padding:10px 16px;
                 display:flex; justify-content:space-between; align-items:center;
                 border-top:1px solid #2b2f3a}
dialog.look button{background:none; border:1px solid #454b59; color:#e9eaee;
                   border-radius:6px; padding:5px 12px; font:inherit}

/* Набор стилей площадки: свёрнут, пока не нужен — иначе таблица площадок
   превращается в простыню из трёх десятков строк на каждую площадку. */
details.styleset summary{cursor:pointer; list-style:none; font-size:12px}
details.styleset summary::-webkit-details-marker{display:none}
details.styleset .count{display:inline-block; padding:2px 8px; border-radius:20px;
  background:var(--success-bg); color:var(--success); font-size:11px}
details.styleset .count.thin{background:var(--warn-bg); color:var(--warn)}
details.styleset .pick{max-height:220px; overflow-y:auto; padding:6px 2px 2px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* Подача без картинки: её рисует работник на холостом ходу, и до
   тех пор показывать битое изображение хуже, чем не показывать. */
.peek.nopic .pop{display:none !important}
.peek.nopic .dot{background:var(--muted, #888)}