/* База: переменные темы, типографика, кнопки, поля, карточки, теги, модалки.
   Палитра задана в RGB; тема переключается атрибутом data-theme на <html>. */

:root{
  --primary: rgb(59,130,246);
  --primary-600: rgb(37,99,235);
  --primary-100: rgb(219,234,254);
  --accent: rgb(139,92,246);
  --accent-100: rgb(237,233,254);
  --success: rgb(34,197,94);
  --success-100: rgb(220,252,231);
  --warn: rgb(245,158,11);
  --warn-100: rgb(254,249,195);
  --danger: rgb(239,68,68);
  --danger-100: rgb(254,226,226);
  --bg: rgb(244,247,252);
  --surface: rgb(255,255,255);
  --surface-2: rgb(250,251,254);
  --text: rgb(23,33,47);
  --muted: rgb(107,122,144);
  --line: rgb(226,232,240);
  --shadow: 0 1px 2px rgb(15 23 42 / .06), 0 8px 24px rgb(15 23 42 / .06);
  --shadow-lg: 0 20px 50px rgb(15 23 42 / .16);
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Inter", "SF Pro Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"]{
  --primary: rgb(96,165,250);
  --primary-600: rgb(59,130,246);
  --primary-100: rgb(30,58,138);
  --accent: rgb(167,139,250);
  --accent-100: rgb(76,29,149);
  --success: rgb(74,222,128);
  --success-100: rgb(20,83,45);
  --warn: rgb(251,191,36);
  --warn-100: rgb(120,53,15);
  --danger: rgb(248,113,113);
  --danger-100: rgb(127,29,29);
  --bg: rgb(13,18,28);
  --surface: rgb(22,29,42);
  --surface-2: rgb(28,37,52);
  --text: rgb(230,237,247);
  --muted: rgb(151,166,186);
  --line: rgb(44,55,74);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
h1,h2,h3,h4{margin:0 0 10px; line-height:1.25; font-weight:700; letter-spacing:-.2px}
h1{font-size:34px} h2{font-size:24px} h3{font-size:18px} h4{font-size:15px}
p{margin:0 0 10px}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.center{text-align:center}
.row{display:flex; align-items:center; gap:8px}
.row.wrap{flex-wrap:wrap}
.spread{display:flex; align-items:center; justify-content:space-between; gap:10px}
.grow{flex:1 1 auto; min-width:0}
.stack{display:flex; flex-direction:column; gap:10px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.ellipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer;
  padding:9px 14px; font-family:inherit; font-size:14px; font-weight:600;
  background:var(--surface-2); color:var(--text); transition:.15s; white-space:nowrap;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary); color:rgb(255,255,255)}
.btn.primary:hover{background:var(--primary-600); filter:none}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--text)}
.btn.soft{background:var(--primary-100); color:var(--primary-600)}
.btn.danger{background:var(--danger); color:rgb(255,255,255)}
.btn.danger-soft{background:var(--danger-100); color:var(--danger)}
.btn.success{background:var(--success); color:rgb(255,255,255)}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:9px}
.btn.xs{padding:4px 8px; font-size:12px; border-radius:8px}
.btn.icon{padding:7px 9px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* ---------- поля ---------- */
label.field{display:block; margin-bottom:10px}
label.field > span{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:5px}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=time],
input[type=search],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; transition:.15s;
}
/* поля без атрибута type (напр. «Название» в диалогах) — те же ширина/скругление, что у описания */
label.field > input:not([type]){
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:14px; transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgb(59 130 246 / .16)}
textarea{min-height:90px; resize:vertical; line-height:1.5}
select{cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px}
input[type=color]{width:42px; height:38px; padding:2px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface); cursor:pointer}
label.field .color-row{display:flex; align-items:center; gap:8px}
label.field .color-row input[type=color]{flex:0 0 auto}
input[type=file]{font-size:13px; color:var(--muted)}
.check{display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer}
.check input{width:17px; height:17px; accent-color:var(--primary); cursor:pointer}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}

/* ---------- карточки ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow)}
.card.pad0{padding:0}
.card-title{font-size:15px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.panel{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px}
.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.kpi .item{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow)}
.kpi .item b{display:block; font-size:26px; font-weight:800; letter-spacing:-.5px}
.kpi .item span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}

/* ---------- теги и значки ---------- */
.tag{display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--primary-100); color:var(--primary-600);
  border:1px solid transparent}
.tag .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted)}
.badge{display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:999px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px}
.badge.high{background:var(--danger-100); color:var(--danger)}
.badge.normal{background:var(--primary-100); color:var(--primary-600)}
.badge.low{background:var(--surface-2); color:var(--muted)}
.badge.done{background:var(--success-100); color:var(--success)}
.badge.rec{background:var(--accent-100); color:var(--accent)}
.badge.ctrl{background:var(--warn-100); color:var(--warn)}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--primary); color:rgb(255,255,255);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}

/* ---------- модальные окна ---------- */
.modal-back{position:fixed; inset:0; background:rgb(15 23 42 / .55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:80}
.modal{background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg); width:100%;
  max-width:440px; max-height:92vh; overflow:auto; padding:22px; border:1px solid var(--line)}
.modal.wide{max-width:680px}
.modal h3{margin-bottom:4px}
.modal .close{position:absolute; top:14px; right:14px}
.toast-wrap{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:120}
.toast{background:var(--text); color:var(--surface); padding:11px 15px; border-radius:12px;
  box-shadow:var(--shadow-lg); font-size:14px; max-width:340px; animation:pop .18s ease-out}
.toast.err{background:var(--danger); color:rgb(255,255,255)}
.toast.ok{background:var(--success); color:rgb(255,255,255)}
@keyframes pop{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.spinner{width:16px; height:16px; border:2px solid rgb(255 255 255 / .5); border-top-color:rgb(255 255 255);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center; color:var(--muted); padding:26px 12px; font-size:14px}