/* СТРЕЛА CRM — демо CRM для агентства недвижимости. Тёмная тема по умолчанию (как в витрине), светлая — переключателем. */
:root{
  --bg:#131316; --side:#0F0F12; --card:#1B1B20; --card2:#222229; --hover:#26262E; --line:#2A2A33; --line2:#34343F;
  --ink:#F4F4F7; --soft:#A2A2B0; --faint:#6E6E7C;
  --acc:#6A4DFF; --acc2:#7B5CFF; --acc-ink:#B3A4FF; --acc-bg:rgba(106,77,255,.16);
  --ok:#3DD68C; --ok-bg:rgba(61,214,140,.13); --bad:#FF7A7A; --bad-bg:rgba(255,122,122,.13);
  --warn:#F5B84C; --warn-bg:rgba(245,184,76,.14); --info:#5BC0F8; --info-bg:rgba(91,192,248,.13);
  --shadow:0 24px 60px -24px rgba(0,0,0,.6);
  --r:16px; --r-sm:10px;
  --font:'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#F4F4F7; --side:#FFFFFF; --card:#FFFFFF; --card2:#F4F4F8; --hover:#EFEFF4; --line:#E4E4EB; --line2:#D6D6E0;
  --ink:#16161B; --soft:#5C5C69; --faint:#83838F;
  --acc:#5B3FFF; --acc2:#6A4DFF; --acc-ink:#4B2FE0; --acc-bg:rgba(91,63,255,.1);
  --ok:#17875A; --ok-bg:rgba(23,135,90,.1); --bad:#D23F42; --bad-bg:rgba(210,63,66,.09);
  --warn:#A56A08; --warn-bg:rgba(214,146,26,.13); --info:#1F72B8; --info-bg:rgba(31,114,184,.1);
  --shadow:0 20px 50px -24px rgba(30,24,80,.28);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0; height:100%;}
body{background:var(--bg); color:var(--ink); font:14px/1.45 var(--font); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
svg{flex-shrink:0;}
.num{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--acc2); outline-offset:2px; border-radius:8px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{position:fixed; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:10px; background:var(--acc); color:#fff; font-weight:600;}
.skip:focus{top:12px;}

/* ── каркас ───────────────────────────────────────────────── */
.app{display:grid; grid-template-columns:76px minmax(0,1fr); min-height:100vh;}
.side{position:sticky; top:0; height:100vh; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:18px 0 16px; gap:6px; z-index:20;}
.logo{width:44px; height:44px; border-radius:13px; background:linear-gradient(145deg,var(--acc2),var(--acc)); display:grid; place-items:center; color:#fff; margin-bottom:14px; box-shadow:0 10px 24px -10px var(--acc);}
.nav{display:flex; flex-direction:column; gap:6px; align-items:center;}
.nav a{position:relative; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:var(--faint); transition:background-color .15s, color .15s;}
.nav a:hover{color:var(--ink); background:var(--hover);}
.nav a[aria-current="page"]{color:var(--acc-ink); background:var(--acc-bg); box-shadow:inset 0 0 0 1px rgba(123,92,255,.35);}
.nav .badge{position:absolute; top:6px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--acc); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; border:2px solid var(--side);}
.nav a .tip{position:absolute; left:58px; top:50%; transform:translateY(-50%); white-space:nowrap; padding:6px 10px; border-radius:8px; background:var(--card2); border:1px solid var(--line); color:var(--ink); font-size:12.5px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:var(--shadow);}
.nav a:hover .tip, .nav a:focus-visible .tip{opacity:1;}
.side-bottom{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:10px;}
.me{width:40px; height:40px; border-radius:50%; background:#1F9E63; color:#fff; font-weight:700; font-size:13px; display:grid; place-items:center; border:0;}

.main{min-width:0; padding:26px 32px 40px; width:100%;}
@media (min-width:1800px){ .main{padding:30px 44px 48px;} .chart{height:300px;} }
.top{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;}
.title{flex:1 1 auto; min-width:0;}
.title h1{margin:0; font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.15;}
.title p{margin:4px 0 0; color:var(--soft); font-size:13.5px;}
.title p b{color:var(--ink); font-weight:600;}
.top-actions{display:flex; align-items:center; gap:10px;}
.search{position:relative; width:280px;}
.search input{width:100%; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--card); padding:0 64px 0 38px; outline:none; transition:border-color .15s;}
.search input:focus{border-color:var(--acc2);}
.search input::placeholder{color:var(--faint);}
.search > svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint);}
.search kbd{position:absolute; right:9px; top:50%; transform:translateY(-50%); font:600 11px var(--font); color:var(--faint); padding:3px 7px; border-radius:6px; border:1px solid var(--line2);}
.results{position:absolute; left:0; right:0; top:48px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:6px; z-index:60; max-height:380px; overflow:auto;}
.results a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;}
.results a:hover, .results a.on{background:var(--hover);}
.results small{color:var(--faint); margin-left:auto; font-size:11.5px;}
.results .grp{padding:8px 10px 4px; color:var(--faint); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;}
.results .none{padding:14px; color:var(--soft);}
.icon-btn{position:relative; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; color:var(--soft); transition:color .15s, border-color .15s;}
.icon-btn:hover{color:var(--ink); border-color:var(--line2);}
.icon-btn .dot{position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--bad); border:2px solid var(--card);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:12px; border:1px solid transparent; font-weight:600; font-size:14px; white-space:nowrap; transition:filter .15s, background-color .15s, border-color .15s;}
.btn-p{background:linear-gradient(135deg,var(--acc2),var(--acc)); color:#fff; box-shadow:0 10px 24px -12px var(--acc);}
.btn-p:hover{filter:brightness(1.08);}
.btn-g{background:var(--card); border-color:var(--line); color:var(--ink);}
.btn-g:hover{border-color:var(--line2); background:var(--hover);}
.btn-s{height:34px; padding:0 12px; border-radius:10px; font-size:13px;}
.pop{position:absolute; right:0; top:50px; width:340px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px; z-index:60;}
.pop h3{margin:6px 10px 8px; font-size:14px;}
.pop .it{display:flex; gap:10px; padding:10px; border-radius:10px;}
.pop .it:hover{background:var(--hover);}
.pop .it small{display:block; color:var(--faint); font-size:12px; margin-top:2px;}
.rel{position:relative;}

/* ── общие блоки ──────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px;}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.card-h h2{margin:0; font-size:16.5px; font-weight:650; letter-spacing:-.01em;}
.card-h h2 span{color:var(--faint); font-weight:500; margin-left:6px;}
.card-h .more{color:var(--acc-ink); font-weight:600; font-size:13px;}
.card-h .more:hover{text-decoration:underline;}
.grid{display:grid; gap:16px;}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
.kpi{position:relative; overflow:hidden;}
.kpi small{color:var(--soft); font-size:13px;}
.kpi b{display:block; font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:6px; line-height:1.1;}
.kpi .spark{position:absolute; right:16px; top:18px; width:96px; height:36px;}
.chg{display:inline-flex; align-items:center; gap:3px; margin-top:10px; padding:3px 8px; border-radius:7px; font-size:12px; font-weight:650;}
.chg.up{background:var(--ok-bg); color:var(--ok);} .chg.down{background:var(--bad-bg); color:var(--bad);}
.chg em{font-style:normal; color:var(--faint); font-weight:500; margin-left:4px;}
.seg{display:inline-flex; padding:3px; border-radius:11px; background:var(--card2); border:1px solid var(--line); gap:2px;}
.seg button{height:30px; padding:0 12px; border-radius:8px; border:0; background:none; color:var(--soft); font-size:12.5px; font-weight:600;}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.25);}
.pill{display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:7px; font-size:12px; font-weight:600; white-space:nowrap;}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.pill.nodot::before{display:none;}
.s-lead{background:var(--info-bg); color:var(--info);}
.s-select{background:var(--acc-bg); color:var(--acc-ink);}
.s-show{background:rgba(155,135,255,.14); color:#B3A4FF;}
html[data-theme="light"] .s-show{color:#6A4DFF;}
.s-reserve{background:var(--warn-bg); color:var(--warn);}
.s-deal{background:var(--ok-bg); color:var(--ok);}
.s-lost{background:var(--bad-bg); color:var(--bad);}
.ava{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; flex-shrink:0;}
.ava.sm{width:26px; height:26px; font-size:10px;}
.ava.lg{width:64px; height:64px; font-size:21px;}
.muted{color:var(--soft);} .faint{color:var(--faint);}
.empty{padding:36px 16px; text-align:center; color:var(--soft);}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{height:34px; padding:0 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--soft); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;}
.chip:hover{color:var(--ink); border-color:var(--line2);}
.chip[aria-pressed="true"]{color:var(--acc-ink); background:var(--acc-bg); border-color:rgba(123,92,255,.4);}
.chip i{font-style:normal; color:var(--faint); font-weight:500;}
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.toolbar .grow{flex:1;}
.field{position:relative;}
.field input, .field select, .inp{height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card); padding:0 12px; outline:none; min-width:0;}
.field input:focus, .field select:focus, .inp:focus{border-color:var(--acc2);}
.field.s input{padding-left:34px; width:240px;}
.field.s svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint);}

/* ── дашборд ──────────────────────────────────────────────── */
.dash-row{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); margin-top:16px;}
.chart{position:relative; height:250px;}
.chart svg{width:100%; height:100%; display:block; overflow:visible;}
.legend{display:flex; gap:16px; color:var(--soft); font-size:12.5px; align-items:center;}
.legend i{display:inline-block; width:14px; height:3px; border-radius:2px; background:var(--acc2); vertical-align:middle; margin-right:6px;}
.legend i.prev{background:none; border-top:2px dashed var(--faint); height:0;}
.tt{position:absolute; pointer-events:none; background:var(--card2); border:1px solid var(--line2); border-radius:11px; padding:8px 11px; font-size:12px; color:var(--soft); white-space:nowrap; transform:translate(-50%,-100%); box-shadow:var(--shadow); z-index:3;}
.tt b{display:block; color:var(--ink); font-size:15px;}
.tt em{font-style:normal; color:var(--ok); font-weight:650; margin-left:6px; font-size:12px;}
.funnel{display:flex; flex-direction:column; gap:14px;}
.funnel .row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; font-size:13.5px;}
.funnel .row span{color:var(--soft);}
.funnel .row b{font-weight:650;}
.bar{grid-column:1/-1; height:8px; border-radius:6px; background:var(--card2); overflow:hidden;}
.bar i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--acc),var(--acc2)); transform-origin:left; animation:grow .8s cubic-bezier(.22,1,.36,1) both;}
@keyframes grow{from{transform:scaleX(0)}}
.funnel-foot{display:flex; justify-content:space-between; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--soft); font-size:13px;}
.funnel-foot b{color:var(--ink);}
.tbl{width:100%; border-collapse:collapse;}
.tbl th{text-align:left; font-size:11.5px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; padding:0 10px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.tbl th button{border:0; background:none; padding:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; display:inline-flex; align-items:center; gap:4px;}
.tbl th button:hover{color:var(--ink);}
.tbl td{padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
.tbl tr:last-child td{border-bottom:0;}
.tbl tbody tr{cursor:pointer; transition:background-color .12s;}
.tbl tbody tr:hover td{background:var(--hover);}
.tbl .who{display:flex; align-items:center; gap:10px; min-width:0;}
.tbl .who b{font-weight:600; display:block;}
.tbl .who small{color:var(--faint); font-size:12px;}
.tbl .r{text-align:right;}
.tasks{display:flex; flex-direction:column;}
.task{display:flex; gap:12px; align-items:flex-start; padding:11px 2px; border-bottom:1px solid var(--line);}
.task:last-child{border-bottom:0;}
.task input{appearance:none; width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line2); margin:1px 0 0; display:grid; place-items:center; cursor:pointer; flex-shrink:0; background:var(--card);}
.task input:checked{background:var(--acc); border-color:var(--acc);}
.task input:checked::after{content:""; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg);}
.task label{flex:1; cursor:pointer;}
.task label small{display:block; color:var(--faint); font-size:12px; margin-top:2px;}
.task.done label > span{text-decoration:line-through; color:var(--faint);}
.task .time{font-size:12px; color:var(--soft); font-weight:600; white-space:nowrap;}
.task .time.late{color:var(--bad);}
.dash-3{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); margin-top:16px;}

/* ── канбан ───────────────────────────────────────────────── */
.board{display:grid; grid-template-columns:repeat(5,minmax(224px,1fr)); gap:12px; overflow-x:auto; padding-bottom:10px; align-items:start;}
.col{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px; min-height:200px; transition:border-color .15s, background-color .15s;}
.col.over{border-color:var(--acc2); background:var(--acc-bg);}
.col-h{display:flex; align-items:center; gap:8px; padding:2px 4px 12px;}
.col-h b{font-size:14px;}
.col-h .n{color:var(--faint); font-weight:600; font-size:13px;}
.col-h .sum{margin-left:auto; color:var(--soft); font-size:12.5px; font-weight:600;}
.col-h .dotc{width:9px; height:9px; border-radius:50%;}
.cards{display:flex; flex-direction:column; gap:10px; min-height:60px;}
.dcard{background:var(--card2); border:1px solid var(--line); border-radius:13px; padding:12px; cursor:grab; user-select:none; transition:border-color .15s, box-shadow .15s, transform .15s; touch-action:pan-y;}
.dcard:hover{border-color:var(--line2);}
.dcard:active{cursor:grabbing;}
.dcard.drag{opacity:.35;}
.ghost{position:fixed; pointer-events:none; z-index:300; transform:rotate(2deg); box-shadow:var(--shadow); opacity:.95;}
.dcard .o{font-weight:650; font-size:13.5px;}
.dcard .c{color:var(--soft); font-size:12.5px; margin-top:2px;}
.dcard .f{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.dcard .f b{font-size:14px;}
.dcard .meta{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11.5px; color:var(--faint);}
.dcard .meta .late{color:var(--bad); font-weight:600;}
.src{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--soft);}
.drop-hint{border:1.5px dashed var(--line2); border-radius:12px; height:56px;}

/* ── выезжающая панель ────────────────────────────────────── */
.drawer-bg{position:fixed; inset:0; background:rgba(5,5,10,.55); z-index:80; animation:fade .2s ease;}
.drawer{position:fixed; right:0; top:0; bottom:0; width:min(520px,100%); background:var(--bg); border-left:1px solid var(--line); z-index:81; overflow:auto; animation:slideIn .28s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column;}
.drawer-h{position:sticky; top:0; z-index:2; background:var(--bg); display:flex; align-items:center; gap:10px; padding:18px 22px; border-bottom:1px solid var(--line);}
.drawer-h h2{margin:0; font-size:18px; flex:1; min-width:0;}
.drawer-b{padding:20px 22px 30px; display:flex; flex-direction:column; gap:16px;}
@keyframes slideIn{from{transform:translateX(40px); opacity:0}}
@keyframes fade{from{opacity:0}}
.kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px;}
.kv small{display:block; color:var(--faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.kv b{font-weight:600; font-size:14px;}
.stages{display:flex; gap:4px;}
.stages button{flex:1; height:34px; border:0; border-radius:8px; background:var(--card2); color:var(--soft); font-size:12px; font-weight:600;}
.stages button.done{background:var(--acc-bg); color:var(--acc-ink);}
.stages button.cur{background:var(--acc); color:#fff;}
.timeline{display:flex; flex-direction:column; gap:0;}
.tl{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; position:relative; padding-bottom:14px;}
.tl::before{content:""; position:absolute; left:10px; top:22px; bottom:0; width:2px; background:var(--line);}
.tl:last-child::before{display:none;}
.tl i{width:22px; height:22px; border-radius:50%; background:var(--acc-bg); color:var(--acc-ink); display:grid; place-items:center;}
.tl b{font-weight:600; display:block; font-size:13.5px;}
.tl span{color:var(--soft); font-size:13px;}
.tl small{display:block; color:var(--faint); font-size:12px; margin-top:2px;}
.note-form{display:flex; gap:8px;}
.note-form textarea{flex:1; min-height:44px; max-height:140px; resize:vertical; border-radius:10px; border:1px solid var(--line); background:var(--card); padding:10px 12px; outline:none;}
.note-form textarea:focus{border-color:var(--acc2);}

/* ── модалка ──────────────────────────────────────────────── */
.modal-bg{position:fixed; inset:0; z-index:90; background:rgba(5,5,10,.6); display:grid; place-items:center; padding:20px; animation:fade .2s;}
.modal{width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); animation:pop .22s cubic-bezier(.22,1,.36,1);}
@keyframes pop{from{transform:translateY(10px) scale(.98); opacity:0}}
.modal-h{display:flex; align-items:center; justify-content:space-between; padding:20px 22px 6px;}
.modal-h h2{margin:0; font-size:19px;}
.modal form{padding:10px 22px 22px; display:flex; flex-direction:column; gap:14px;}
.modal label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--soft);}
.modal label .inp, .modal label select, .modal label textarea{height:42px; border-radius:11px; border:1px solid var(--line); background:var(--card2); padding:0 12px; outline:none; color:var(--ink); font-weight:500;}
.modal label textarea{height:80px; padding:10px 12px; resize:vertical;}
.modal .two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.modal .err{margin:0; color:var(--bad); font-size:13px; font-weight:600;}
.modal .err:empty{display:none;}
.modal .acts{display:flex; justify-content:flex-end; gap:10px; margin-top:4px;}
.bad{border-color:var(--bad) !important;}

/* ── клиенты / объекты ───────────────────────────────────── */
.client-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.client-head h1{margin:0; font-size:26px;}
.client-head .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.crumbs{color:var(--faint); font-size:13px; margin-bottom:14px;}
.crumbs a:hover{color:var(--ink);}
.cl-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); margin-top:18px; align-items:start;}
.side-list{display:flex; flex-direction:column; gap:10px;}
.mini{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:12px; background:var(--card2); border:1px solid var(--line);}
.mini b{display:block; font-size:13.5px;}
.mini small{color:var(--faint); font-size:12px;}
.doc{display:flex; align-items:center; gap:10px; padding:8px 4px;}
.doc i{width:34px; height:34px; border-radius:9px; background:var(--acc-bg); color:var(--acc-ink); font-style:normal; font-size:10px; font-weight:700; display:grid; place-items:center;}
.doc b{display:block; font-size:13.5px; font-weight:600;}
.doc small{color:var(--faint); font-size:12px;}
.objs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.ocard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:border-color .15s, transform .2s cubic-bezier(.22,1,.36,1);}
.ocard:hover{border-color:var(--line2); transform:translateY(-3px);}
.ocard .ph{position:relative; aspect-ratio:16/10; background:var(--card2);}
.ocard .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.ocard .ph .pill{position:absolute; left:10px; top:10px; background:rgba(15,15,18,.72); color:#fff; backdrop-filter:blur(4px);}
.ocard .bd{padding:14px 16px 16px;}
.ocard .bd b{font-size:15px;}
.ocard .bd .l{color:var(--soft); font-size:12.5px; margin-top:2px;}
.ocard .ft{display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.ocard .ft b{font-size:17px;}
.ocard .ft span{color:var(--faint); font-size:12px;}
.ohero{aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--card2);}
.ohero img{width:100%; height:100%; object-fit:cover; display:block;}

/* ── сообщения ────────────────────────────────────────────── */
.inbox{display:grid; grid-template-columns:320px minmax(0,1fr); height:calc(100vh - 140px); min-height:520px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card);}
.threads{border-right:1px solid var(--line); overflow:auto;}
.thread{display:flex; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer;}
.thread:hover{background:var(--hover);}
.thread[aria-current="true"]{background:var(--acc-bg);}
.thread .t{flex:1; min-width:0;}
.thread .t b{display:flex; justify-content:space-between; gap:8px; font-weight:600; font-size:13.5px;}
.thread .t b small{color:var(--faint); font-weight:500; font-size:11.5px;}
.thread .t p{margin:2px 0 0; color:var(--soft); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.thread .un{min-width:18px; height:18px; border-radius:9px; background:var(--acc); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; padding:0 5px; align-self:center;}
.chan{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; color:#fff; position:absolute; right:-2px; bottom:-2px; border:2px solid var(--card);}
.chat{display:flex; flex-direction:column; min-width:0;}
.chat-h{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line);}
.chat-h b{display:block;}
.chat-h small{color:var(--faint); font-size:12px;}
.msgs{flex:1; overflow:auto; padding:18px; display:flex; flex-direction:column; gap:8px;}
.msg{max-width:72%; padding:10px 13px; border-radius:14px; background:var(--card2); font-size:13.5px; align-self:flex-start; border-bottom-left-radius:5px;}
.msg.out{align-self:flex-end; background:var(--acc); color:#fff; border-bottom-left-radius:14px; border-bottom-right-radius:5px;}
.msg small{display:block; font-size:10.5px; opacity:.65; margin-top:3px; text-align:right;}
.day{align-self:center; color:var(--faint); font-size:11.5px; font-weight:600; padding:6px 0;}
.compose{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);}
.compose input{flex:1; height:42px; border-radius:11px; border:1px solid var(--line); background:var(--card2); padding:0 14px; outline:none;}
.compose input:focus{border-color:var(--acc2);}
.quick{display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap;}
.quick button{height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--line); background:none; color:var(--soft); font-size:12px;}
.quick button:hover{color:var(--ink); border-color:var(--line2);}

/* ── календарь ────────────────────────────────────────────── */
.cal{display:grid; grid-template-columns:56px repeat(7,minmax(110px,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:auto;}
.cal .hd{position:sticky; top:0; z-index:1; background:var(--card); padding:10px 8px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); text-align:center; font-size:12px; color:var(--soft); font-weight:600;}
.cal .hd b{display:block; font-size:18px; color:var(--ink);}
.cal .hd.today b{color:#fff; background:var(--acc); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; margin:2px auto 0;}
.cal .hours{grid-row:2; grid-column:1; position:relative;}
.cal .hours span{position:absolute; right:8px; font-size:11px; color:var(--faint); transform:translateY(-50%);}
.cal .dcol{grid-row:2; position:relative; border-left:1px solid var(--line); background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 56px;}
.cal .dcol.today{background-color:rgba(106,77,255,.05);}
.ev{position:absolute; left:4px; right:4px; border-radius:9px; padding:6px 8px; font-size:11.5px; overflow:hidden; border-left:3px solid; cursor:pointer;}
.ev b{display:block; font-size:12px; font-weight:650; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ev .w{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.4;}
.cal .hours span:first-child{transform:none; top:4px !important;}
.pill i.ev.show{background:var(--acc2);} .pill i.ev.call{background:var(--info);} .pill i.ev.notary{background:var(--ok);} .pill i.ev.meet{background:var(--warn);}
.ev.show{background:var(--acc-bg); border-color:var(--acc2); color:var(--ink);}
.ev.call{background:var(--info-bg); border-color:var(--info); color:var(--ink);}
.ev.notary{background:var(--ok-bg); border-color:var(--ok); color:var(--ink);}
.ev.meet{background:var(--warn-bg); border-color:var(--warn); color:var(--ink);}
.now{position:absolute; left:0; right:0; height:2px; background:var(--bad); z-index:2;}
.now::before{content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--bad);}

/* ── аналитика ────────────────────────────────────────────── */
.an-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); margin-top:16px;}
.bars{display:flex; align-items:flex-end; gap:12px; height:220px; padding-top:20px;}
.bars .b{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bars .b i{width:100%; max-width:42px; border-radius:8px 8px 4px 4px; background:linear-gradient(180deg,var(--acc2),var(--acc)); transform-origin:bottom; animation:growY .7s cubic-bezier(.22,1,.36,1) both;}
.bars .b.cur i{background:linear-gradient(180deg,#9B87FF,var(--acc2)); box-shadow:0 0 0 2px rgba(155,135,255,.35);}
.bars .b span{font-size:11.5px; color:var(--faint);}
.bars .b small{font-size:11px; color:var(--soft); font-weight:600;}
@keyframes growY{from{transform:scaleY(0)}}
.donut{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.donut svg{width:170px; height:170px;}
.donut ul{list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; gap:10px; min-width:160px;}
.donut li{display:flex; align-items:center; gap:9px; font-size:13.5px;}
.donut li i{width:10px; height:10px; border-radius:3px;}
.donut li b{margin-left:auto;}
.prog{height:6px; border-radius:4px; background:var(--card2); overflow:hidden; width:140px;}
.prog i{display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--acc2)); border-radius:4px;}

/* ── настройки ────────────────────────────────────────────── */
.set-grid{grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;}
.integr{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.integr:last-child{border-bottom:0;}
.integr .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;}
.integr div{flex:1;}
.integr small{display:block; color:var(--faint); font-size:12px;}
.credit{font-size:12px; color:var(--faint); margin-top:18px;}
.credit a{color:var(--soft); text-decoration:underline; text-underline-offset:3px;}
.credit a:hover{color:var(--ink);}

/* ── тост ─────────────────────────────────────────────────── */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; background:var(--card2); border:1px solid var(--line2); color:var(--ink); padding:12px 18px; border-radius:12px; box-shadow:var(--shadow); z-index:400; transition:opacity .2s, transform .25s cubic-bezier(.22,1,.36,1); pointer-events:none; font-weight:500; max-width:calc(100% - 32px);}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ── мобильная навигация ─────────────────────────────────── */
.tabbar{display:none;}
.sheet{display:none;}
.mob-only{display:none;}

@media (max-width:1280px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1100px){
  .tbl .t-hide{display:none;}
  .dash-row, .dash-3, .an-row, .cl-grid, .set-grid{grid-template-columns:minmax(0,1fr);}
  .search{width:220px;}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);}
  .side{display:none;}
  .main{padding:16px 16px 96px;}
  .top{gap:10px; margin-bottom:16px;}
  .title{flex-basis:100%; order:-1;}
  .title h1{font-size:23px;}
  .top-actions{width:100%;}
  .search{flex:1; width:auto;}
  .search kbd{display:none;}
  .search input{padding-right:12px;}
  .top-actions .btn-p span{display:none;}
  .top-actions .btn-p{width:42px; padding:0;}
  .kpis{gap:10px;}
  .kpi{padding:14px;}
  .kpi b{font-size:22px;}
  .kpi .spark{display:none;}
  .kpi small{font-size:12px;}
  .card{padding:16px;}
  .chart{height:200px;}
  .hide-m{display:none !important;}
  .mob-only{display:block;}
  .board{grid-template-columns:repeat(5,86%); scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 10px; scroll-padding:0 16px;}
  .col{scroll-snap-align:start;}
  .inbox{grid-template-columns:minmax(0,1fr); height:calc(100vh - 200px);}
  .inbox.open .threads{display:none;}
  .inbox:not(.open) .chat{display:none;}
  .cal{grid-template-columns:44px repeat(7,minmax(96px,1fr)); margin:0 -16px; border-radius:0; border-left:0; border-right:0;}
  .field.s input{width:100%;}
  .field.s{flex:1;}
  .modal .two{grid-template-columns:1fr;}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kv b{overflow-wrap:anywhere;}
  .card-h{flex-wrap:wrap;}
  .tbl.stack thead{display:none;}
  .tbl.stack tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; padding:12px 4px; border-bottom:1px solid var(--line);}
  .tbl.stack td{padding:0; border:0;}
  .tbl.stack td.m-hide{display:none;}
  .tbl.stack td.r{text-align:right;}
  .tbl.stack td.r ~ td.r{grid-column:2; justify-self:end;}
  .top-actions:has(.seg){flex-wrap:wrap;}
  .top-actions .seg{order:9; width:100%;}
  .top-actions .seg button{flex:1;}
  .bars{gap:6px;}
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:40; background:color-mix(in srgb, var(--side) 94%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .tabbar a, .tabbar button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; font-size:10.5px; font-weight:600; color:var(--faint); background:none; border:0; position:relative;}
  .tabbar [aria-current="page"]{color:var(--acc-ink);}
  .tabbar .badge{position:absolute; top:2px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; background:var(--acc); color:#fff; font-size:9.5px; display:grid; place-items:center; padding:0 4px;}
  .sheet{display:block; position:fixed; left:0; right:0; bottom:0; z-index:85; background:var(--card); border-radius:20px 20px 0 0; border-top:1px solid var(--line); padding:10px 16px calc(20px + env(safe-area-inset-bottom)); animation:up .25s cubic-bezier(.22,1,.36,1);}
  .sheet[hidden]{display:none;}
  .sheet .grab{width:40px; height:4px; border-radius:2px; background:var(--line2); margin:0 auto 12px;}
  .sheet nav{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .sheet nav a, .sheet nav button{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border-radius:14px; background:var(--card2); border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink);}
  .drawer{width:100%; border-left:0;}
  .pop{position:fixed; left:12px; right:12px; top:70px; width:auto;}
  .results{position:fixed; left:12px; right:12px; top:120px;}
}
@keyframes up{from{transform:translateY(40px); opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}