/* CRM «Новая Среда» — фирменная палитра сайта */
:root{
  --bg:#FBF9F4; --card:#FFFFFF; --tint:#F5EFE2;
  --ink:#2B2620; --muted:#7A7263; --line:#EBE3D2;
  --sun:#FFC12E; --sun-ink:#332600; --sun-soft:#FFF3D3;
  --teal:#1FA79A; --teal-soft:#DFF3F1; --teal-deep:#0E7C72;
  --orange:#F79433; --orange-soft:#FDEBD6;
  --red:#D9534F; --red-soft:#FBE4E3;
  --green:#3B9E4F; --green-soft:#E2F2E5;
  --deep:#332D24; --deep-ink:#F8F4EA; --deep-muted:#B4AA97;
  --shadow-sm:0 4px 14px rgba(51,45,36,.08);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font:500 15px/1.55 'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Rubik','Manrope',system-ui,sans-serif; margin:0; line-height:1.2; text-wrap:balance}
button{font:inherit; cursor:pointer}
a{color:inherit}
/* Фокус: мягкое бирюзовое кольцо на полях, аккуратный контур на ссылках/кнопках */
a:focus-visible,button:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft)}

/* каркас */
.app{display:grid; grid-template-columns:232px 1fr; min-height:100vh}
.side{background:var(--card); border-right:1px solid var(--line); padding:20px 14px;
  display:flex; flex-direction:column; gap:4px}
.logo{display:flex; align-items:center; gap:10px; padding:4px 10px 18px; text-decoration:none}
.logo-mark{width:36px; height:36px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--sun),var(--orange)); display:grid; place-items:center;
  font:900 15px 'Rubik',sans-serif; color:var(--sun-ink)}
.logo-text{font:900 15px 'Rubik',sans-serif; line-height:1.15}
.logo-text small{display:block; font:700 10.5px 'Manrope',sans-serif; color:var(--teal-deep);
  letter-spacing:.06em; text-transform:uppercase}
.nav-label{font:800 10.5px 'Manrope',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:12px 10px 5px}
.side a.nav{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:11px;
  text-decoration:none; font-weight:700; font-size:14px; color:var(--muted)}
.side a.nav:hover{background:var(--tint); color:var(--ink)}
.side a.nav[aria-current]{background:var(--sun-soft); color:var(--sun-ink)}
.side a.nav .n{margin-left:auto; background:var(--teal); color:#fff; font-size:11px; font-weight:800;
  border-radius:999px; padding:1px 8px}
.side .who{margin-top:auto; border-top:1px solid var(--line); padding:14px 10px 4px;
  display:flex; gap:10px; align-items:center}
.side .who form{margin-left:auto}
.side .who button{border:0; background:none; color:var(--muted); font-size:12px; font-weight:700; padding:4px}
.side .who button:hover{color:var(--red)}
.ava{width:34px; height:34px; border-radius:50%; background:var(--teal-soft); color:var(--teal-deep);
  display:grid; place-items:center; font-weight:800; font-size:13px; flex:none}
.who small{display:block; color:var(--muted); font-size:12px}

.main{padding:26px 30px 48px; min-width:0}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:6px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--teal-deep)}
.pagehead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.pagehead h1{font-size:26px; font-weight:900}
.pagehead .sp{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.btn{display:inline-flex; align-items:center; gap:8px; border:0; text-decoration:none;
  font-weight:800; font-size:13.5px; border-radius:11px; padding:10px 18px}
.btn-sun{background:var(--sun); color:var(--sun-ink)}
.btn-teal{background:var(--teal); color:#fff}
.btn-ghost{background:var(--card); color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-deep)}
.btn-danger{background:var(--card); color:var(--red); border:1.5px solid var(--red-soft)}
.btn-danger:hover{border-color:var(--red)}

/* бейджи статусов */
.pill{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:11.5px;
  border-radius:999px; padding:3px 10px; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.p-new{background:var(--sun-soft); color:var(--sun-ink)}
.p-work{background:var(--teal-soft); color:var(--teal-deep)}
.p-kp{background:var(--orange-soft); color:var(--orange)}
.p-contract{background:var(--teal-soft); color:var(--teal-deep)}
.p-deal,.p-won{background:var(--green-soft); color:var(--green)}
.p-rejected,.p-lost{background:var(--red-soft); color:var(--red)}

/* дашборд */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px;
  box-shadow:var(--shadow-sm)}
.stat .k{font-size:12.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.stat .v{font:900 26px 'Rubik',sans-serif; margin-top:4px; font-variant-numeric:tabular-nums}
.stat .d{font-size:12.5px; font-weight:700; margin-top:2px; color:var(--muted)}

.sect{font-size:17px; font-weight:800; margin:0 0 12px}
.board{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
.col{background:var(--tint); border-radius:16px; padding:12px; min-height:80px}
.col h3{font-size:13px; font-weight:800; display:flex; align-items:center; gap:8px; padding:2px 4px 10px}
.col h3 .cnt{margin-left:auto; color:var(--muted); font-weight:800; font-size:12px; font-variant-numeric:tabular-nums}
.col h3 .dot{width:9px; height:9px; border-radius:50%; flex:none}
.dot-new{background:var(--sun)} .dot-work{background:var(--teal)}
.dot-kp{background:var(--orange)} .dot-contract{background:var(--teal-deep)}
.dot-won{background:var(--green)} .dot-lost{background:var(--red)}
.deal-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow-sm); text-decoration:none;
  transition:transform .12s ease}
.deal-card:hover{transform:translateY(-2px)}
.deal-card .t{font-weight:800; font-size:13.5px; line-height:1.35}
.deal-card .c{color:var(--muted); font-size:12.5px; margin-top:3px}
.deal-card .m{display:flex; align-items:center; gap:8px; margin-top:9px; font-size:12.5px}
.deal-card .sum{font-weight:800; font-variant-numeric:tabular-nums}
.deal-card .cm{margin-left:auto; color:var(--muted); font-weight:700}
.col .empty{color:var(--muted); font-size:12.5px; text-align:center; padding:14px 6px}

/* таблицы */
.tblwrap{overflow-x:auto; border-radius:16px; box-shadow:var(--shadow-sm)}
table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; font-size:13.5px}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); text-align:left;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--tint); white-space:nowrap}
td{padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--tint)}
td .nm{font-weight:800}
td .nm a{text-decoration:none}
td .nm a:hover{color:var(--teal-deep)}
td .sub{color:var(--muted); font-size:12.5px}
.dt{color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.rowlink{position:relative}
.rowlink a.cover{position:absolute; inset:0}

/* фильтры */
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.filters a{text-decoration:none; font-weight:800; font-size:12.5px; padding:6px 14px;
  border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--muted)}
.filters a:hover{color:var(--ink)}
.filters a[aria-current]{background:var(--sun); border-color:var(--sun); color:var(--sun-ink)}

/* детальные страницы */
.detail{display:grid; grid-template-columns:1fr 330px; gap:20px; align-items:start}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-sm); padding:20px 22px}
.card + .card{margin-top:16px}
.card h2{font-size:15px; font-weight:800; margin-bottom:14px}
.kv{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; font-size:14px; margin:0}
.kv dt{color:var(--muted); font-weight:700}
.kv dd{margin:0; font-weight:600; overflow-wrap:anywhere}
.kv dd a{color:var(--teal-deep); font-weight:700; text-decoration:none}
.kv dd a:hover{text-decoration:underline}
.msgbox{background:var(--tint); border-radius:12px; padding:14px 16px; font-size:14px; margin-top:14px}

/* этапы сделки */
.stages{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap}
.stages form{flex:1; min-width:110px; display:flex}
.stage{flex:1; border:0; text-align:center; font-weight:800; font-size:12px; padding:9px 6px;
  background:var(--tint); color:var(--muted); border-radius:9px}
.stage:hover{color:var(--ink)}
.stage.done{background:var(--teal-soft); color:var(--teal-deep)}
.stage.now{background:var(--teal); color:#fff}

/* комментарии */
.comment{display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line)}
.comment:first-of-type{border-top:0; padding-top:4px}
.comment .body{min-width:0}
.comment .head{font-size:12.5px; color:var(--muted)}
.comment .head b{color:var(--ink); font-weight:800}
.comment p{margin:4px 0 0; font-size:14px; white-space:pre-wrap}
.comment.sys p{color:var(--muted); font-style:italic}
.comment.sys .ava{background:var(--tint); color:var(--muted)}
.cform{display:flex; gap:10px; margin-top:14px; align-items:flex-end}
.cform textarea{flex:1; min-height:44px}
.nocomments{color:var(--muted); font-size:13.5px}

/* формы */
input[type=text],input[type=password],input[type=number],input[type=email],textarea,select{
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink); width:100%;
  border-radius:11px; padding:10px 13px; font:600 14px 'Manrope',system-ui,sans-serif; resize:vertical}
label{font-weight:800; font-size:12.5px; color:var(--muted); display:block; margin:10px 0 4px}
label:first-child{margin-top:0}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}

/* правая колонка */
.aside .card h2{margin-bottom:10px}
.contact-line{display:flex; gap:10px; align-items:center; padding:2px 0 8px}
.contact-line b a{text-decoration:none}
.contact-line b a:hover{color:var(--teal-deep)}
.acts{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.acts .btn{justify-content:center}
.acts form{display:flex; flex-direction:column; gap:8px}
.timeline{font-size:13px; color:var(--muted); display:grid; gap:8px}
.timeline b{color:var(--ink); font-variant-numeric:tabular-nums}

/* вход */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(700px 380px at 85% -10%, var(--sun-soft), transparent 68%),
             radial-gradient(700px 380px at -8% 108%, var(--orange-soft), transparent 66%), var(--bg)}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 16px 44px rgba(51,45,36,.12); padding:34px 32px; width:100%; max-width:400px}
.login-card .logo{padding:0 0 20px}
.login-card h1{font-size:21px; margin-bottom:16px}
.login-card .btn{width:100%; justify-content:center; margin-top:18px}
.login-err{background:var(--red-soft); color:var(--red); font-weight:700; font-size:13.5px;
  border-radius:10px; padding:10px 14px; margin-bottom:6px}
.login-hint{color:var(--muted); font-size:12.5px; margin-top:14px; text-align:center}

@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .side{flex-direction:row; align-items:center; overflow-x:auto; border-right:0;
    border-bottom:1px solid var(--line); padding:10px 14px}
  .side .logo{padding:0 8px 0 0}
  .nav-label{display:none}
  .side .who{margin-top:0; border-top:0; padding:0 0 0 10px}
  .side .who > .ava, .side .who > span{display:none}
}
@media (max-width:640px){
  .main{padding:18px 14px 40px}
  .board,.stats{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){ .deal-card{transition:none} }