@import "/static/fonts.css";
:root{
  --paper:#FCFBF8; --paper-2:#F4F2EC; --ink:#000; --body:rgba(0,0,0,.80);
  --muted:rgba(0,0,0,.55); --faint:rgba(0,0,0,.34); --line:rgba(0,0,0,.12); --line-soft:rgba(0,0,0,.07);
  --orange:#FF5600; --blue:#000CE1; --green:#2FA86A; --white:#fff;
  --serif:"Playfair Display",Georgia,serif; --sans:"Onest",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:14px;
}
*{ box-sizing:border-box; } html,body{ height:100%; margin:0; }
body{ background:var(--paper); color:var(--body); font-family:var(--sans); font-size:15px; font-weight:450; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden; }
[hidden]{ display:none !important; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; color:var(--ink); margin:0; letter-spacing:-.015em; }
.label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
a{ color:inherit; }
code{ font-family:var(--mono); font-size:12.5px; background:var(--paper-2); padding:1px 6px; border-radius:6px; }

#app{ height:100dvh; display:grid; grid-template-columns:256px 1fr; }
@media(max-width:800px){ #app{ grid-template-columns:1fr; } .side{ display:none; } }

/* sidebar — dark gradient + orange glow (korsaai.ru admin) */
.side{ position:relative; display:flex; flex-direction:column; gap:22px; padding:24px 18px; color:#fff; overflow:hidden;
  background:linear-gradient(155deg,#2c2723 0%,#3b352f 55%,#4d443c 100%); }
.side::before{ content:""; position:absolute; right:-30%; top:-8%; width:90%; height:48%; background:radial-gradient(circle,rgba(255,86,0,.24),transparent 68%); pointer-events:none; }
.side>*{ position:relative; z-index:1; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.brand b{ font-family:var(--serif); font-weight:800; font-size:22px; }
.brand span{ font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.22); border-radius:5px; padding:2px 6px; }
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav a{ display:flex; align-items:center; gap:11px; text-decoration:none; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.62); padding:10px 12px; border-radius:10px; cursor:pointer; transition:.15s; }
.nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav a.on{ background:rgba(255,255,255,.14); color:#fff; }
.nav a .ic{ width:18px; text-align:center; opacity:.9; }
.kbd{ margin-top:2px; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.4); padding:8px 12px; }
.kbd b{ color:rgba(255,255,255,.7); font-weight:500; background:rgba(255,255,255,.1); border-radius:5px; padding:1px 6px; }
.side-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.12); padding-top:14px; }
.side-foot a{ color:rgba(255,255,255,.6); text-decoration:underline; text-underline-offset:3px; } .side-foot a:hover{ color:#fff; }
.side-foot .env{ display:flex; gap:5px; align-items:center; }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; } .dot.v{ background:var(--orange); } .dot.c{ background:#7BC47F; }

/* main */
.main{ min-width:0; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); }
.top{ display:flex; align-items:center; gap:16px; padding:0 34px; height:70px; flex:0 0 70px; border-bottom:1px solid var(--line-soft); }
.top h1{ font-family:var(--serif); font-weight:500; font-size:27px; flex:1; }
.top .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.view{ flex:1; min-height:0; overflow:auto; padding:26px 34px 80px; }
.view-in{ max-width:1000px; margin:0 auto; }
.loading{ color:var(--muted); padding:40px 4px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-size:15px; font-weight:600; padding:11px 20px; border-radius:9px; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:transform .15s,background .2s,border-color .2s,color .2s; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--ink); color:#fff; } .btn-primary:hover{ background:var(--orange); }
.btn-outline{ background:transparent; color:var(--ink); border-color:rgba(0,0,0,.4); } .btn-outline:hover{ border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--muted); } .btn-ghost:hover{ color:var(--ink); }
.btn-danger{ color:var(--orange); border-color:rgba(255,86,0,.4); } .btn-danger:hover{ background:rgba(255,86,0,.06); }
.btn-sm{ padding:8px 14px; font-size:14px; }

/* stat cards */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:10px; }
@media(max-width:800px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.stat .n{ font-family:var(--serif); font-weight:500; font-size:34px; line-height:1; color:var(--ink); }
.stat .l{ color:var(--muted); font-size:13.5px; margin-top:8px; }
.stat .s{ color:var(--faint); font-size:12px; margin-top:4px; }
.stat .metric{ color:var(--orange); }
.sec-h{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:30px 0 14px; }
.sec-h.first{ margin-top:6px; }
.lead{ color:var(--muted); margin:0 0 18px; max-width:640px; font-size:16px; font-weight:450; }

/* list rows (agents) */
.rows{ display:flex; flex-direction:column; gap:10px; }
.row-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:.15s; }
.row-card:hover{ border-color:rgba(0,0,0,.28); transform:translateY(-1px); }
.row-card .av{ width:40px; height:40px; border-radius:11px; background:var(--paper-2); display:grid; place-items:center; font-size:19px; flex:none; }
.row-card .ti{ flex:1; min-width:0; }
.row-card .ti b{ color:var(--ink); font-weight:650; font-size:16px; }
.row-card .ti .m{ color:var(--muted); font-size:13px; margin-top:2px; }
.pill{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; padding:4px 10px; border-radius:999px; background:var(--paper-2); color:var(--muted); white-space:nowrap; }
.pill.ok{ background:rgba(47,168,106,.13); color:var(--green); }
.pill.orange{ background:rgba(255,86,0,.12); color:var(--orange); }

/* editor cards + fields */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:16px; }
.card-h{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
label.fld{ display:block; margin:0 0 16px; font-size:13.5px; color:var(--muted); }
label.fld:last-child{ margin-bottom:0; }
label.fld .h{ color:var(--faint); font-weight:400; }
input[type=text],input[type=number],input[type=password],select,textarea{ width:100%; margin-top:7px; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14.5px; transition:.12s; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,86,0,.12); }
textarea{ resize:vertical; line-height:1.55; min-height:54px; font-family:var(--sans); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:560px){ .grid2{ grid-template-columns:1fr; } }
label.chk{ display:flex; align-items:flex-start; gap:11px; margin:0 0 12px; color:var(--ink); font-size:14px; font-weight:500; cursor:pointer; }
label.chk input{ width:auto; margin:2px 0 0; accent-color:var(--orange); }
label.chk .h{ display:block; color:var(--faint); font-size:12.5px; }
.sub-box{ margin-top:12px; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); }
details.adv summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:6px 0; }
details.adv summary::-webkit-details-marker{ display:none; }
details.adv summary::before{ content:"› "; } details.adv[open] summary::before{ content:"⌄ "; }

/* editor header + savebar */
.ehead{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.ehead .title-in{ flex:1; min-width:220px; font-family:var(--serif); font-weight:500; font-size:26px; padding:6px 12px; background:transparent; border:1px solid transparent; margin:0; }
.ehead .title-in:hover{ border-color:var(--line); } .ehead .title-in:focus{ border-color:var(--orange); box-shadow:none; }
.savebar{ position:sticky; bottom:0; display:flex; align-items:center; gap:10px; padding:16px 0 6px; background:linear-gradient(to top,var(--paper) 86%,transparent); flex-wrap:wrap; }
.savebar .msg{ margin-left:auto; font-size:14px; color:var(--orange); }
.savebar .msg.ok{ color:var(--green); } .savebar .msg.err{ color:#d33; }
.chip{ display:inline-block; width:34px; height:22px; border-radius:6px; border:1px solid var(--line); vertical-align:middle; margin-left:6px; }

/* tables */
.tablecard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
th{ text-align:left; padding:12px 18px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); }
td{ padding:12px 18px; border-bottom:1px solid var(--line-soft); font-size:14px; }
tbody tr:last-child td{ border-bottom:none; } tbody tr:hover{ background:var(--paper-2); }

.err-box{ color:#c33; padding:14px; border:1px solid rgba(200,40,40,.3); border-radius:11px; background:rgba(200,40,40,.05); }
.back{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); cursor:pointer; background:none; border:none; padding:0 0 14px; }

/* ⌘K palette */
.pal-bg{ position:fixed; inset:0; background:rgba(30,25,20,.35); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; }
.pal{ width:min(560px,92vw); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.28); overflow:hidden; }
.pal input{ width:100%; margin:0; border:none; border-bottom:1px solid var(--line-soft); border-radius:0; padding:16px 18px; font-size:16px; box-shadow:none; }
.pal input:focus{ box-shadow:none; }
.pal-list{ max-height:340px; overflow:auto; padding:6px; }
.pal-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; cursor:pointer; font-size:14.5px; }
.pal-item .ic{ width:18px; text-align:center; }
.pal-item.sel{ background:var(--paper-2); }
.pal-item small{ color:var(--faint); margin-left:auto; font-family:var(--mono); font-size:11px; }

/* login */
.login-body{ display:grid; grid-template-columns:1fr 1fr; height:100dvh; overflow:hidden; }
@media(max-width:760px){ .login-body{ grid-template-columns:1fr; } .auth-aside{ display:none; } }
.auth-aside{ position:relative; color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:linear-gradient(155deg,#2c2723 0%,#3b352f 55%,#4d443c 100%); }
.auth-aside::before{ content:""; position:absolute; right:-20%; top:-10%; width:80%; height:60%; background:radial-gradient(circle,rgba(255,86,0,.28),transparent 66%); }
.auth-aside>*{ position:relative; }
.auth-aside .b{ font-family:var(--serif); font-size:30px; font-weight:700; }
.auth-aside .big{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.4vw,46px); line-height:1.05; }
.auth-aside .cap{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.auth-main{ display:grid; place-items:center; padding:24px; }
.auth-card{ width:340px; }
.auth-card h2{ font-size:30px; margin-bottom:6px; }
.auth-card .s{ color:var(--muted); margin:0 0 22px; }
.auth-card form{ display:flex; gap:10px; }
.auth-card input{ flex:1; margin:0; }
.auth-card .err{ min-height:18px; font-size:13px; color:#d33; margin-top:10px; }

/* nav sections */
.nav-sec{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.34); padding:14px 12px 5px; }

/* dialogs split view */
.split{ display:grid; grid-template-columns:320px 1fr; gap:16px; height:calc(100dvh - 175px); min-height:420px; }
@media(max-width:900px){ .split{ grid-template-columns:1fr; height:auto; } .split-body{ min-height:420px; } }
.split-list{ overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.dlg{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; transition:.12s; }
.dlg:hover{ border-color:rgba(0,0,0,.28); }
.dlg.sel{ border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.dlg-t{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); }
.dlg-t .when{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.unread{ background:var(--orange); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; }
.dlg-s{ font-weight:600; color:var(--ink); font-size:13.5px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dlg-m{ color:var(--muted); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.split-body{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; }
.db-top{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--ink); }
.db-msgs{ flex:1; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; background:var(--paper); }
.bub{ max-width:78%; padding:10px 14px; border-radius:13px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.bub .who{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:4px; }
.bub.u{ align-self:flex-start; background:#fff; border:1px solid var(--line); }
.bub.a{ align-self:flex-end; background:var(--paper-2); border:1px solid var(--line-soft); }
.db-reply{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line-soft); align-items:flex-end; }
.db-reply textarea{ flex:1; margin:0; }

/* ── Нативные контролы в стиле сайта ─────────────────────────── */
/* Списки: без системной стрелки, своя каретка как на korsaai.ru */
select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:34px !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
select:hover{ border-color:rgba(0,0,0,.3); }
select option{ color:#111; background:#fff; }

/* Галочки: квадрат paper → чёрный с белой галкой, оранжевый фокус */
input[type=checkbox]{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:19px; height:19px; margin:0; flex:none;
  border:1.5px solid rgba(0,0,0,.35); border-radius:6px; background:#fff;
  display:inline-grid; place-items:center; vertical-align:middle;
  transition:background .15s, border-color .15s, transform .1s;
}
input[type=checkbox]:hover{ border-color:var(--ink); }
input[type=checkbox]:active{ transform:scale(.92); }
input[type=checkbox]:checked{
  background:var(--ink); border-color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'><path d='M1 4.5L4 7.5L10 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:center;
}
input[type=checkbox]:checked:hover{ background-color:var(--orange); border-color:var(--orange); }
input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,86,0,.18); }
label.chk input{ margin-top:1px; }

/* Радио — в том же духе */
input[type=radio]{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:18px; height:18px; margin:0; border:1.5px solid rgba(0,0,0,.35); border-radius:50%; background:#fff;
  display:inline-grid; place-items:center; transition:border-color .15s;
}
input[type=radio]:hover{ border-color:var(--ink); }
input[type=radio]:checked{ border-color:var(--ink); }
input[type=radio]:checked::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--ink); }
input[type=radio]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,86,0,.18); }

/* Календари и время: те же поля, светлая схема, каретка-иконка в тон */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{
  width:100%; margin-top:7px; padding:10px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14.5px; color-scheme:light; cursor:pointer;
}
input[type=date]:focus,input[type=time]:focus,input[type=datetime-local]:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,86,0,.12); }
::-webkit-calendar-picker-indicator{ opacity:.55; cursor:pointer; }
::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* Ползунки, если появятся */
input[type=range]{ accent-color:var(--orange); }
label.chk input[type=checkbox], td input[type=checkbox], .addrow input[type=checkbox]{ width:19px; height:19px; }

/* add-rows (телефония) */
.addrow{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; align-items:center; }
.addrow input,.addrow select{ margin:0; width:auto; flex:1; min-width:150px; }
.addrow .btn{ flex:none; }
.addrow label.chk{ margin:0; white-space:nowrap; flex:none; }
.msg{ font-size:14px; min-height:20px; margin-top:8px; }
.msg.ok{ color:var(--green); } .msg.err{ color:#d33; }
.addrow input[type=checkbox]{ flex:none; min-width:0; width:19px; }
td input[type=text]{ width:100%; min-width:120px; margin:0; padding:8px 10px; }
td select{ margin:0; padding:8px 32px 8px 10px; }