/* Палитра CRMmebel — тот же фирменный стиль, что у CNCOptim */
:root{
  --bg:#0F1113; --bg-2:#141719; --panel:#1A1E21; --panel-2:#212629;
  --line:#2A3034; --line-soft:#232A2E;
  --text:#E8EBED; --muted:#9AA4AC; --muted-2:#6E7A82;
  --accent:#3E9CFF; --accent-2:#6BB7FF; --accent-soft:rgba(62,156,255,.12);
  --ok:#4ADE80; --soon:#FBBF24; --hot:#FB923C; --over:#FF5C5C;
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 10px 40px rgba(0,0,0,.45);
  --r:14px; --r-sm:10px; --on-accent:#0B1620;
  color-scheme: dark;
}
/* Светлая тема — включается кнопкой в меню */
:root[data-theme="light"]{
  --bg:#f4f5f7; --bg-2:#eef0f3; --panel:#ffffff; --panel-2:#fafbfc;
  --line:#e3e6ea; --line-soft:#eceff2;
  --text:#16191d; --muted:#6b7280; --muted-2:#9aa4ac;
  --accent:#0B72E7; --accent-2:#3E9CFF; --accent-soft:rgba(11,114,231,.09);
  --ok:#16a34a; --soon:#d97706; --hot:#ea580c; --over:#dc2626;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --shadow-lg:0 10px 30px rgba(16,24,40,.18); --on-accent:#ffffff;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap;
}
.brand{font-weight:700;font-size:18px;letter-spacing:-.3px;display:flex;align-items:center;gap:0}
.brand span{color:var(--accent)}
.top .spacer{flex:1;order:3}
.top .row2{display:flex;gap:8px;align-items:center;order:2;flex:0 1 auto}
.top .brand{order:1}
.top .live{order:4}
.top .who{order:5}
.top .menu{order:6}
.btn{
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:8px 13px;
  font-weight:500;transition:.12s;white-space:nowrap;
}
.btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--accent-soft);border-color:transparent}
.btn.danger{color:var(--over);border-color:transparent;background:transparent}
.btn.danger:hover{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.35)}
.btn:disabled{opacity:.5;cursor:default}
.who{color:var(--muted);font-size:13px}
.live{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block}
.live.off i{background:var(--over)}

/* ---------- поиск ---------- */
.search{
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:8px 12px;min-width:180px;
}
.search:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* ---------- доска ---------- */
.board{display:flex;gap:12px;padding:14px 16px 40px;align-items:flex-start;overflow-x:auto;min-height:calc(100vh - 60px)}
.col{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);
  flex:1 1 0;min-width:275px;display:flex;flex-direction:column;max-height:calc(100vh - 90px);
}
.col.drop{outline:2px dashed var(--accent);outline-offset:-2px;background:var(--accent-soft)}
.col-head{
  padding:11px 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
  position:sticky;top:0;background:var(--panel);border-radius:var(--r) var(--r) 0 0;z-index:2;
}
.col-head b{font-size:13.5px;font-weight:650}
.count{background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:1px 8px;font-size:12px;color:var(--muted)}
.col-body{padding:9px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.col-empty{color:var(--muted);font-size:13px;text-align:center;padding:18px 8px}

/* ---------- карточка ---------- */
.card{
  background:var(--panel-2);border:1px solid var(--line-soft);border-left:3px solid var(--line);
  border-radius:var(--r-sm);padding:10px 11px;box-shadow:var(--shadow);cursor:pointer;transition:.12s;
}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.card.dragging{opacity:.4}
.card.u-overdue{border-left-color:var(--over)}
.card.u-hot{border-left-color:var(--hot)}
.card.u-soon{border-left-color:var(--soon)}
.card.u-ok{border-left-color:var(--ok)}
.card-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.num{font-weight:700;font-size:12px;background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:1px 6px}
.card h4{margin:0;font-size:14px;font-weight:620;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .line{color:var(--muted);font-size:12.5px;display:flex;gap:6px;align-items:center;margin-top:3px}
.card .line b{color:var(--text);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.chip{font-size:11.5px;padding:2px 7px;border-radius:20px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.chip.days{font-weight:650}
.chip.u-overdue{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.4);color:var(--over)}
.chip.u-hot{background:rgba(234,88,12,.12);border-color:rgba(234,88,12,.4);color:var(--hot)}
.chip.u-soon{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.4);color:var(--soon)}
.chip.u-ok{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.35);color:var(--ok)}
.chip.money{color:var(--text)}

/* ---------- вкладки на телефоне ---------- */
.tabs{display:none;gap:6px;padding:8px 12px;overflow-x:auto;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:53px;z-index:30}
.tabs button{border:1px solid var(--line);background:var(--panel-2);border-radius:20px;padding:7px 13px;font-size:13px;white-space:nowrap}
.tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

/* ---------- модальные окна ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,14,20,.55);backdrop-filter:blur(2px);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;max-width:840px;margin:auto;display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.modal form{display:flex;flex-direction:column;min-height:0;max-height:100%}
.modal.narrow{max-width:440px}
.modal-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);border-radius:var(--r) var(--r) 0 0;z-index:3}
.modal-head h3{margin:0;font-size:16px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-head .btn{padding:6px 11px;font-size:13px}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1;min-height:0}
.modal-foot{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;background:var(--panel);border-radius:0 0 var(--r) var(--r)}
.x{border:none;background:transparent;font-size:22px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px}
.x:hover{background:var(--panel-2);color:var(--text)}

/* ---------- формы ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.f{display:flex;flex-direction:column;gap:5px}
.f.wide{grid-column:1/-1}
.f label{font-size:12.5px;color:var(--muted);font-weight:500}
.f input,.f select,.f textarea{
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:9px 11px;width:100%;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.f textarea{resize:vertical;min-height:66px}
.hint{font-size:12px;color:var(--muted)}
.calc{font-size:13px;color:var(--muted);padding:2px 0 2px;display:block}
.calc.wide{grid-column:1/-1}
.calc b{color:var(--text);font-weight:650}
.calc b{color:var(--text)}

.sect{margin-top:20px;border-top:1px solid var(--line);padding-top:15px}
.sect h4{margin:0 0 10px;font-size:13.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}

/* изделия */
.item-row{display:flex;gap:7px;align-items:center;margin-bottom:6px}
.item-row input[type=text]{flex:1;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:7px 10px}
.item-row input[type=number]{width:62px;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:7px 8px}
.item-row select{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:7px 8px}
.item-row label{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}

/* файлы */
.dz{
  border:2px dashed var(--line);border-radius:11px;background:var(--panel-2);
  padding:18px 14px;text-align:center;cursor:pointer;transition:.12s;margin-top:4px;
}
.dz:hover{border-color:var(--accent);background:var(--accent-soft)}
.dz.over{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}
.dz-ico{font-size:24px;line-height:1;margin-bottom:6px}
.dz-main{font-weight:600;margin-bottom:5px}
.dz .hint{font-size:12px}
.ftag{font-size:11px;color:var(--accent);background:var(--accent-soft);border-radius:5px;padding:1px 6px;white-space:nowrap}
.file.pending{border-style:dashed;opacity:.85}
.thumb-tag{position:absolute;left:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;border-radius:4px;padding:1px 5px}
.files{display:flex;flex-wrap:wrap;gap:8px}
.file{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:8px;padding:7px 10px;font-size:13px;max-width:100%}
.file a{text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.file small{color:var(--muted)}
.file .x{font-size:16px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.thumb{width:94px;height:94px;border-radius:8px;overflow:hidden;border:1px solid var(--line);position:relative;background:var(--panel-2)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border-radius:5px;font-size:14px;padding:0 5px}
.uploader{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}

/* комментарии */
.cmt{border-left:2px solid var(--line);padding:2px 0 2px 10px;margin-bottom:10px}
.cmt .meta{font-size:12px;color:var(--muted);margin-bottom:2px}
.cmt .txt{white-space:pre-wrap}

/* таблица журнала */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:7px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.tbl td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:var(--panel-2)}
.old{color:var(--muted);text-decoration:line-through}
.new{color:var(--ok);font-weight:600}

/* вход */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:28px;width:100%;max-width:370px}
.login h1{margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.4px}
.login h1 .acc{color:var(--accent)}
.login p{margin:0 0 20px;color:var(--muted);font-size:13.5px}
.err{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.35);color:var(--over);border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:12px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--text);color:var(--bg);padding:10px 17px;border-radius:9px;box-shadow:var(--shadow-lg);z-index:99;font-size:13.5px}

.menu{position:relative}
.menu-pop[hidden]{display:none!important}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column;min-width:170px;z-index:50}
.menu-pop button{border:none;background:transparent;text-align:left;padding:9px 11px;border-radius:7px}
.menu-pop button:hover{background:var(--accent-soft)}
.menu-pop .who{padding:8px 11px;border-bottom:1px solid var(--line);margin-bottom:4px}

@media (max-width:860px){
  .top{padding:8px 11px;gap:8px}
  .top .row2{order:9;width:100%;display:flex;gap:8px}
  .top .menu{order:5}
  .top .live{order:4}
  .desktop-only{display:none}
  .col-head{display:none}
  .col{border:none;background:transparent}
  .col-body{padding:0}
  .tabs{top:0}
  .board{display:block;padding:10px 10px 60px;overflow:visible}
  .col{display:none;max-height:none;min-width:0}
  .col.on{display:flex}
  .col-body{max-height:none;overflow:visible}
  .tabs{display:flex}
  .grid,.grid.three{grid-template-columns:1fr}
  .modal{max-width:100%}
  .overlay{padding:0}
  .modal-head{border-radius:0}
  .modal-foot{border-radius:0}
  .search{min-width:0;flex:1}
}