:root{
  /* фирменные токены adbydad.com */
  --acid:#c9f534; --acid-dark:#b6e21f;
  --ink:#0e0e0e; --ink-soft:#5c5c5c; --ink-faint:#9a9a9a;
  --bg:#f4f4f3; --card:#ffffff; --line:#e6e6e3;
  --dark:#0e0e0e; --dark-soft:#1a1a1a; --dark-line:#2a2a2a;
  --green:#3fae5a; --red:#e05252;
}
*{box-sizing:border-box; margin:0; padding:0}
/* iOS TG-WebView рисует каретку tint-цветом темы (в тёмной — белой, невидимой на белом поле); currentColor привязывает её к цвету текста поля */
input,textarea,select,[contenteditable]{caret-color:currentColor}
body{font:14px/1.45 'Manrope', -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink)}
h1,h2,h3{font-family:'Geologica','Manrope',sans-serif}
.logo{display:flex; align-items:center; gap:12px; white-space:nowrap; text-decoration:none}
.logo img{height:22px; display:block}
.logo span{color:#9a9a9a; font-family:'Geologica',sans-serif; font-weight:500; font-size:12px; letter-spacing:.22em; border-left:1px solid var(--dark-line); padding-left:12px; line-height:22px}
.btn{border:1px solid var(--line); background:var(--card); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; gap:7px; text-decoration:none}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.acid{background:var(--acid); border-color:var(--acid); color:var(--ink)}
.btn.sm{padding:4px 10px; font-size:12px}

/* login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh}
.login-logo{margin-bottom:18px}
.login-logo span{border-left-color:var(--line); color:var(--ink-soft)}
.login-logo img{height:26px}
.login-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; width:320px; display:flex; flex-direction:column; gap:12px; box-shadow:0 8px 30px rgba(0,0,0,.06)}
.login-card label{font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:5px}
.login-card input{border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:14px}
.login-card .btn{justify-content:center; margin-top:6px}
.login-error{background:#fdecec; border:1px solid #f5c6c6; color:#a33; border-radius:8px; padding:8px 12px; font-size:13px}

/* topbar — тёмный, как adbydad.com */
.topbar{display:flex; align-items:center; gap:18px; background:var(--dark); border-bottom:1px solid var(--dark-line); padding:0 20px; height:56px; position:sticky; top:0; z-index:50}
.ws-switch{display:flex; background:var(--dark-soft); border:1px solid var(--dark-line); border-radius:8px; padding:2px}
.ws-switch a{padding:5px 14px; border-radius:6px; font-weight:700; font-size:13px; color:#8a8a8a; text-decoration:none}
.ws-switch a.on{background:var(--acid); color:var(--ink)}
.ws-switch.page-ws{background:var(--card); border-color:var(--line)}
.ws-switch.page-ws a:not(.on){color:var(--ink-faint)}
.nav{display:flex; gap:4px; margin-left:auto}
.nav a{padding:7px 12px; border-radius:8px; font-size:13px; font-weight:600; color:#9a9a9a; text-decoration:none}
.nav a:hover{color:#fff}
.nav a.on{background:var(--dark-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--dark-line)}
.me-box{display:flex; align-items:center; gap:8px}
.me-name{font-size:13px; font-weight:600; color:#e6e6e3}
.me-box .btn{background:transparent; color:#9a9a9a; border-color:var(--dark-line)}
.me-box .btn:hover{color:#fff}
.wrap{padding:18px 20px; max-width:1500px; margin:0 auto}
h1{font-size:18px; letter-spacing:-.01em}
.stub{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:32px; text-align:center; color:var(--ink-soft); margin-top:24px}
.stub h1{color:var(--ink); margin-bottom:8px}

/* panels & tables */
.page-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px}
table.items{width:100%; border-collapse:collapse; font-size:13px}
table.items th{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); text-align:left; padding:4px 8px; border-bottom:1px solid var(--line)}
table.items td{padding:7px 8px; border-bottom:1px solid var(--line)}
table.items tr:last-child td{border-bottom:0}
.user-form{display:flex; gap:8px; flex-wrap:wrap}
.user-form input, .user-form select{border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}

/* clients */
.muted{color:var(--ink-faint); font-size:13px}
.search-inline{margin-left:auto}
.search-inline input{border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:13px; width:260px; background:var(--card)}
.panel-h{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:12px; font-weight:700}
.two-col{display:grid; grid-template-columns:minmax(420px,1.1fr) minmax(340px,1fr); gap:16px; align-items:start}
.two-col > *{min-width:0} /* иначе широкая таблица внутри распирает grid-колонку вместо внутреннего скролла */
@media(max-width:980px){.two-col{grid-template-columns:1fr}}
.inn-line{display:flex; gap:8px; margin-bottom:12px}
.inn-line input{flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}
.dadata-hint{background:#f3fadd; border:1px solid #dcedb0; border-radius:8px; padding:8px 12px; font-size:12px; color:#4a5e14; margin-bottom:12px}
.kv-form{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kv-form label{font-size:12px; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px}
.kv-form label.wide, .kv-form .wide{grid-column:1 / -1}
.kv-form input, .kv-form textarea{border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; font-family:inherit}
.person-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.person-row:last-of-type{border-bottom:0}
.mini-deal{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.mini-deal:last-child{border-bottom:0}
.mini-deal .money{margin-left:auto; font-weight:700; white-space:nowrap}
.chip{font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap}
.chip-process{background:#eaf4fb; color:#2b6a99}
.chip-success{background:#e8f4ec; color:#2c7a44}
.chip-failure{background:#fdecec; color:#a33}
.chip-apology{background:#fdf3dc; color:#8a6413}

/* services */
.dir-chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.dir-chips .chip-on{background:var(--ink); color:#fff; border-color:var(--ink)}
.num-in{border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:13px; width:80px; text-align:right}
.row-off td{opacity:.5}

/* deal */
.req-text{width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:13px/1.5 inherit; font-family:inherit; resize:vertical}
.ov-grid{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.ov-econ{margin-top:10px; border-top:1px dashed var(--line); padding-top:8px}
.ov-econ .num-in{width:90px}
.ov-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.ov-chip{background:var(--bg); color:var(--ink); border:1px solid var(--line); cursor:pointer; font-family:inherit}
.ov-chip:hover{background:var(--acid); border-color:var(--acid-dark)}
.item-add{display:flex; gap:6px; margin:10px 0; flex-wrap:wrap}
.item-add input, .item-add select{border:1px solid var(--line); border-radius:7px; padding:6px 9px; font-size:13px; min-width:60px}
.it-name{border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:13px; min-width:180px; width:60%}
.it-bill{border:1px solid var(--line); border-radius:7px; padding:5px 6px; font-size:12px; margin-left:6px; color:var(--ink-faint)}
.it-act{white-space:nowrap}
.it-act form{display:inline}
.btn.saved-ok{background:#2e7d32; border-color:#2e7d32; color:#fff; transition:background .15s}
.btn.saved-err{background:#c0392b; border-color:#c0392b; color:#fff}
.tl .txt a{color:var(--acid); text-decoration:underline; word-break:break-word}
.money-strip{display:flex; gap:10px; margin-top:12px}
.money-box{flex:1; background:var(--bg); border-radius:10px; padding:10px 12px}
.money-box .lbl{font-size:11px; color:var(--ink-faint); font-weight:600}
.money-box .val{font-size:16px; font-weight:800; margin-top:2px; white-space:nowrap}
.doc-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px}
.doc-row .nm{font-weight:600}
.doc-row .dt{font-size:11px; color:var(--ink-faint)}
.doc-row .act{margin-left:auto; display:flex; gap:6px}
.doc-ico{width:28px; height:28px; border-radius:7px; background:var(--bg); display:flex; align-items:center; justify-content:center; flex:none; font-size:13px; color:var(--ink-soft)}
.file-add{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:10px}
.file-in{font-size:12px; max-width:210px}
.tl-input{display:flex; gap:8px; margin-bottom:12px}
.tl-input input{flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}
.tl{list-style:none}
.tl li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:0}
.tl .body{flex:1}
.tl .who{font-weight:700; font-size:12.5px}
.tl .when{font-size:11px; color:var(--ink-faint); margin-left:6px; font-weight:400}
.tl .txt{font-size:13px; margin-top:2px}
.tl-act{display:inline-flex; gap:2px; margin-left:6px; vertical-align:middle; opacity:0; transition:opacity .12s}
.tl li:hover .tl-act, .tl li:focus-within .tl-act{opacity:1}
@media (hover:none){.tl-act{opacity:1}}
.tl-act form{display:inline}
.tl-act button{border:0; background:none; cursor:pointer; font-size:12px; color:var(--ink-faint); padding:0 3px; line-height:1}
.tl-act button:hover{color:var(--ink)}
.tl-edit{display:flex; gap:6px; margin-top:4px}
.tl-edit[hidden]{display:none}
.tl-edit input{flex:1; border:1px solid var(--acid-dark); border-radius:8px; padding:5px 10px; font-size:13px; outline:none}
.tl-hint{font-size:11px; color:var(--ink-faint); margin-top:3px}
.tl li.system{opacity:.7}
.tl li.system .txt{font-size:12.5px; color:var(--ink-soft)}
.sys-dot{width:8px; height:8px; border-radius:50%; background:var(--line); margin:6px 9px 0; flex:none}
.kv{display:grid; grid-template-columns:130px 1fr; row-gap:8px; column-gap:12px; font-size:13px}
.kv dt{color:var(--ink-faint)}
.kv dd{font-weight:600}
.close-menu{position:relative}
.close-menu summary{list-style:none; cursor:pointer}
.close-pop{position:absolute; right:0; top:40px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; width:230px; box-shadow:0 10px 30px rgba(0,0,0,.12); z-index:20}
.kv-form select{border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; background:var(--card)}

/* board */
.board{display:flex; gap:10px; overflow-x:auto; padding:4px 0 20px; align-items:flex-start}
.col{flex:0 0 240px; background:#ecece9; border-radius:10px; padding:8px; min-height:120px}
.col.drop{outline:2px dashed var(--acid-dark)}
.col-h{display:flex; align-items:baseline; gap:6px; padding:2px 6px 6px}
.col-h .nm{font-size:12px; font-weight:700}
.col-h .cnt{font-size:11px; color:var(--ink-faint); font-weight:600}
.col-h .sum{margin-left:auto; font-size:11px; color:var(--ink-soft); font-weight:600; white-space:nowrap}
.col-bar{height:3px; border-radius:2px; margin:0 6px 8px}
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:9px 10px; margin-bottom:7px; cursor:grab; text-decoration:none; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card:hover{border-color:var(--ink-faint)}
.card .num{font-family:'Geologica',sans-serif; font-size:16px; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.card .ttl{font-weight:600; font-size:13px; margin:2px 0 2px}
.card .sub{font-size:12px; color:var(--ink-soft)}
.card .foot{display:flex; align-items:center; gap:6px; margin-top:7px}
.card .money{font-weight:700; font-size:13px; white-space:nowrap}
.card .days{margin-left:auto; font-size:11px; color:var(--ink-faint); white-space:nowrap}

/* invoice form */
.inv-details{margin-bottom:10px}
.inv-details summary{list-style:none; cursor:pointer; display:inline-flex}
.inv-form{border:1px solid var(--line); border-radius:10px; padding:12px; margin-top:8px; background:var(--bg)}

/* overee periods */
.period-box{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px}
.period-box.cur{border-color:var(--acid-dark); background:#fbfff0}
.period-h{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px}
.pack{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.per-dates{display:inline-flex; align-items:center; gap:4px; font-weight:400}
.per-dates input[type=date]{flex-shrink:0}
.pack-clean{background:#f1f1ee; color:#777; font-weight:400; margin-left:-4px}
.pack-chip{background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); font-weight:600; padding:4px 10px; border-radius:7px; font-size:12px; text-decoration:none}
.pack-chip:hover{border-color:var(--ink-faint)}

/* топбар: поиск */
.top-search input{background:var(--dark-soft); border:1px solid var(--dark-line); border-radius:8px; padding:7px 12px; font-size:13px; color:#e6e6e3; width:210px}
.top-search input::placeholder{color:#777}
.top-search input:focus{outline:none; border-color:var(--acid)}

/* канбан: внутренний скролл колонок */
.board{height:calc(100vh - 158px); align-items:stretch; padding-bottom:8px}
.col{display:flex; flex-direction:column; min-height:0}
.col-cards{overflow-y:auto; flex:1; min-height:0; padding-bottom:2px}
.col-cards::-webkit-scrollbar{width:8px}
.col-cards::-webkit-scrollbar-thumb{background:#d5d5d1; border-radius:4px}
/* канбан: постоянный горизонтальный скролл доски (иначе на macOS overlay-скролл виден только при прокрутке тачпадом) */
.board::-webkit-scrollbar{height:10px}
.board::-webkit-scrollbar-track{background:transparent}
.board::-webkit-scrollbar-thumb{background:#d5d5d1; border-radius:5px}
.board::-webkit-scrollbar-thumb:hover{background:#bdbdb8}
.chip-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* новая сделка: блок нового клиента */
.new-client-box{border:1px dashed var(--line); border-radius:10px; padding:10px 12px; background:var(--bg)}
.new-client-box input{border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}

/* новая сделка: поиск клиента */
.client-picker{position:relative; display:block}
.client-picker input[type="text"]{width:100%}
.client-picker input.picked{border-color:var(--ink); font-weight:600}
.client-suggest{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; background:var(--card);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.10); overflow:hidden}
.client-suggest[hidden]{display:none}
.client-suggest-item{padding:9px 12px; font-size:13px; font-weight:400; cursor:pointer}
.client-suggest-item:hover{background:var(--bg)}
.client-suggest-item + .client-suggest-item{border-top:1px solid var(--line)}

/* календарь напоминаний */
.cal-pill{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.cal-pill button{border:0; background:var(--card); padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; color:var(--ink-soft)}
.cal-pill button.on{background:var(--ink); color:#fff}
.cal-legend{display:flex; gap:14px; margin-left:auto; font-size:12px; color:var(--ink-soft); align-items:center; flex-wrap:wrap}
.avm{display:inline-flex; width:18px; height:18px; border-radius:50%; color:#fff; font-size:10px; font-weight:700; align-items:center; justify-content:center; margin-right:6px; vertical-align:-4px; flex:none; overflow:hidden}
.avm img{width:100%; height:100%; object-fit:cover; display:block}
/* аватарки: шапка и страница пользователей */
.me-ava{width:26px; height:26px; border-radius:50%; object-fit:cover; display:block; flex:none}
.more-me{display:flex; align-items:center; gap:8px}
.more-me .me-ava{width:30px; height:30px}
.u-ava{width:34px; height:34px; border-radius:50%; object-fit:cover; display:block}
.u-ava-stub{width:34px; height:34px; font-size:14px; background:var(--ink); margin:0}
.u-ava-cell{white-space:nowrap}
.u-ava-cell > *{display:inline-block; vertical-align:middle}
.u-ava-form{margin-left:8px}
.u-ava-form form{display:inline}
.cal-hy{display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start}
@media(max-width:840px){.cal-hy{grid-template-columns:1fr}}
.cal-mh{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-family:'Geologica'; font-weight:600; font-size:13px}
.cal-mini table{width:100%; border-collapse:collapse; font-size:12px}
.cal-mini th{color:var(--ink-faint); font-size:10px; font-weight:700; padding:3px 0; text-transform:uppercase}
.cal-mini td{text-align:center; padding:2px 0}
.cal-mini td span{display:inline-flex; flex-direction:column; align-items:center; width:30px; height:32px; border-radius:8px; cursor:pointer; padding-top:4px; line-height:1.2; user-select:none}
.cal-mini td span:hover{background:var(--bg)}
.cal-mini td span.sel{background:var(--ink); color:#fff}
.cal-mini td span.today:not(.sel){background:var(--acid)}
.cal-mini .dots{display:flex; gap:2px; height:5px; margin-top:1px}
.cal-mini .dots i{width:4px; height:4px; border-radius:50%; display:block}
.cal-add input[name="text"]{width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}
.cal-add input[type="time"]{border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; font-family:inherit}
.panel-h.red{color:var(--red)}
.ag-row{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:6px; font-size:13px}
.ag-row.late{background:#fdecec; border-color:#f5c6c6}
.ag-row .t{font-weight:700; font-size:12px; color:var(--ink-soft); min-width:44px; flex-shrink:0}
.ag-row .txt{flex:1; min-width:0}
.ag-row .deal{color:var(--ink-soft); font-size:12px; text-decoration:underline; white-space:nowrap}
.ag-row .who{font-size:11px; color:var(--ink-faint); white-space:nowrap}
.ag-row .ops{display:flex; gap:5px; flex-shrink:0}
.badge-priv{font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-faint); border:1px dashed var(--line); border-radius:5px; padding:1px 6px; white-space:nowrap}
/* подпись автора у напоминаний в сделке */
.rem-row .avm{margin-right:0}

/* редактирование контактного лица */
.person-edit{display:none; gap:6px; flex-wrap:wrap; padding:8px 0 10px; border-bottom:1px solid var(--line)}
.person-edit.open{display:flex}
.person-edit input{border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; min-width:110px; flex:1}

/* прогресс-бар стадий в сделке */
.stage-line{display:flex; gap:3px; margin:2px 0 6px}
.stage-line i{flex:1; height:7px; border-radius:3px; background:#e2e2de; cursor:pointer; transition:transform .08s}
.stage-line i:hover{transform:scaleY(1.5)}
.stage-line i.done{background:var(--acid-dark)}
.stage-line i.cur{background:var(--ink); cursor:default}
.stage-line i.fail{background:var(--red)}
.stage-cap{font-size:12.5px; color:var(--ink-soft); margin-bottom:14px}

/* лента сделки: скролл внутри, страницу не растягивает */
.tl{max-height:56vh; overflow-y:auto; padding-right:6px}
.tl::-webkit-scrollbar{width:8px}
.tl::-webkit-scrollbar-thumb{background:#d5d5d1; border-radius:4px}

.btn.danger{color:var(--red); border-color:#f0c9c9}
.btn.danger:hover{background:#fdecec}

/* конструктор договора */
.stage-row{border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; background:var(--card)}
.stage-row-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.stage-fields{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end}
.stage-fields .sf{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--ink-faint); flex:1; min-width:120px}
.stage-fields .sf input{border:1px solid var(--line); border-radius:7px; padding:6px 9px; font-size:13px; color:var(--ink)}

/* напоминание в карточке сделки (панель над лентой) */
.rem-row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--line)}
.rem-row .txt{font-weight:600}
.rem-row .when{font-size:12px; color:var(--ink-faint); font-weight:600}
.rem-row.late .when{color:var(--red)}
.rem-row .sp{margin-left:auto; display:flex; gap:6px}
.rem-row .sp form{margin:0}
.rem-edit,.ag-edit{display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:8px 0 8px 30px; border-bottom:1px solid var(--line)}
.rem-edit[hidden],.ag-edit[hidden]{display:none}
.rem-edit input,.ag-edit input{border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; color:var(--ink)}
.rem-edit input[name=text],.ag-edit input[name=text]{flex:1; min-width:140px}
.ag-edit{border-bottom:0; margin:-4px 0 6px; padding-left:38px}
.rem-add{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.rem-add input[type=text]{flex:1; min-width:160px; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px}
.rem-add input[type=datetime-local]{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; color:var(--ink)}

/* Маркетинг: бейдж новых лидов в шапке */
.lead-badge{display:inline-block; min-width:16px; padding:0 5px; border-radius:9px; font-size:11px; line-height:16px; text-align:center; background:var(--acid); color:var(--ink)}

/* SEO: стрелки динамики */
.seo-up{color:var(--green); font-weight:700}
.seo-down{color:var(--red); font-weight:700}

/* SEO: таблицы скроллятся внутри панели, шапка прилипает */
.tbl-scroll{max-height:var(--tbl-max, 60vh); overflow:auto}
.tbl-scroll table{margin:0}
.tbl-scroll th{position:sticky; top:0; background:var(--card); z-index:1; box-shadow:0 1px 0 var(--line)}

/* Рассылки: двухпанельный редактор кампании + статусы */
.mail-editor{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:1000px){.mail-editor{grid-template-columns:1fr}}
.mail-editor iframe{width:100%; height:75vh; border:1px solid var(--line); border-radius:8px; background:#fff}
.mail-block{border:1px solid var(--line); border-radius:8px; padding:10px; margin-bottom:8px}
.mail-block form{display:inline}
.mail-block-form{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.mail-block-form input,.mail-block-form textarea{width:100%}
.mail-block-form button{align-self:flex-start}
.mail-manual{max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:8px}
.mail-st{font-size:12px; padding:2px 8px; border-radius:10px; background:var(--line)}
.mail-st-running{background:#c9f534; color:#111}
.mail-st-paused{background:#ffd66b; color:#111}
.mail-st-done{background:#b7e4c7; color:#111}
.mail-st-cancelled{background:#f1b0b0; color:#111}
.mail-funnel{display:flex; gap:18px; flex-wrap:wrap; margin-top:10px}
.mail-funnel > div{display:flex; flex-direction:column; min-width:90px}
.mail-funnel b{font-size:22px}

/* пагинатор списков */
.pager{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.pager .pg{min-width:32px; padding:5px 9px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:600; text-align:center; text-decoration:none; color:var(--ink); background:var(--card)}
.pager a.pg:hover{border-color:var(--ink)}
.pager .pg.cur{background:var(--ink); color:#fff; border-color:var(--ink)}

/* просчёт ABD-сделки */
.abd-table input.abd-name{width:150px; font-size:12px; padding:3px 6px; border:1px solid var(--line); border-radius:6px}
.abd-c-del{border:none; background:none; cursor:pointer; color:var(--red); font-size:12px; padding:2px 4px}

/* отчёт по продажам */
.rep-filters{display:flex; gap:8px; margin-left:auto}
.rep-filters select{border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--card); color:var(--ink)}
.rep-kpi{flex-wrap:wrap; margin-bottom:16px}
.rep-chart-wrap{position:relative}
.rep-chart{width:100%; height:auto; display:block}
.rep-grid{stroke:var(--line); stroke-width:1}
.rep-grid-lbl{font-size:9px; fill:#999}
.rep-x-lbl{font-size:9px; fill:#999; text-anchor:middle}
.rep-bar-fill{fill:var(--ink)}
.rep-bar:hover .rep-bar-fill{fill:var(--acid)}
.rep-bar-zero{fill:var(--line)}
.rep-tip{position:fixed; z-index:10; background:var(--ink); color:#fff; font-size:12px; padding:5px 9px; border-radius:7px; pointer-events:none; white-space:nowrap}
.rep-minibar{background:var(--bg); border-radius:4px; height:10px; overflow:hidden; min-width:60px}
.rep-minibar i{display:block; height:100%; background:var(--acid); border-radius:4px}
.rep-delta{font-size:11px; font-weight:700; color:#999; margin-top:2px}
.rep-delta.up{color:var(--green)}
.rep-delta.down{color:var(--red)}
.rep-dates{display:flex; align-items:center; gap:5px; font-size:12px; color:#777}
.rep-dates input{border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:12px; background:var(--card); color:var(--ink)}

/* Сверка с бюджеткой (отчёт) */
.rep-budget { margin: 12px 0 24px; }
.rep-budget-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rep-budget-status form { margin: 0; }
.rep-budget-err { color: #c0392b; }
.rep-budget-issues { margin: 10px 0 0; padding-left: 20px; }
.rep-budget-issues li { margin: 2px 0; }

/* Финансы */
.fin-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.fin-bank-total { font-size: 26px; font-weight: 700; padding: 8px 0; }
.fin-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.fin-filters select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--card); color: var(--ink); }
.fin-months td, .fin-months th { white-space: nowrap; }
.fin-plan td { font-size: 12px; }
.fin-in td:nth-child(3) { color: #1d7a3d; }
.fin-out td:nth-child(3) { color: #c0392b; }
.fin-int { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }

/* средние ширины (узкое окно на десктопе): меню не влезает в одну строку — топбар в два ряда */
@media (min-width:841px) and (max-width:1240px){
  .topbar{flex-wrap:wrap; height:auto; padding:8px 20px; row-gap:4px}
  .top-search{flex:1; min-width:160px}
  .top-search input{width:100%}
  .nav{order:9; flex-basis:100%; margin-left:0; overflow-x:auto; padding-bottom:2px}
  .nav a{white-space:nowrap}
}

/* ═══════════ Мобильная версия ═══════════ */

/* нижний таб-бар и шторка «Ещё» — на десктопе спрятаны */
.mnav{display:none}
.more-sheet{display:none}
.more-sheet[hidden]{display:none}
/* лента стадий канбана — мобильная, на десктопе спрятана */
.mstages{display:none}

@media(max-width:840px){
  /* топбар: лого + поиск, остальное в нижний бар/шторку */
  .topbar{gap:12px; padding:0 14px; height:52px}
  .topbar .nav{display:none}
  .topbar .me-box{display:none}
  .logo span{display:none}
  .top-search{flex:1; min-width:0}
  .top-search input{width:100%}

  /* нижний таб-бар */
  .mnav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--dark); border-top:1px solid var(--dark-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mnav a, .mnav button{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font:600 10.5px 'Manrope',sans-serif; color:#8a8a8a; text-decoration:none;
    background:none; border:0; padding:4px 0; cursor:pointer; min-width:0}
  .mnav svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .mnav svg .f{fill:currentColor; stroke:none}
  .mnav .on{color:var(--acid)}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

  /* шторка «Ещё» */
  .more-sheet{display:block; position:fixed; inset:0; z-index:70}
  .more-sheet[hidden]{display:none}
  .more-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
  .more-panel{position:absolute; left:0; right:0; bottom:0; background:var(--card);
    border-radius:16px 16px 0 0; padding:10px 16px calc(16px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:2px}
  .more-grab{width:36px; height:4px; border-radius:2px; background:var(--line); margin:2px auto 8px}
  .more-me{font-size:12px; font-weight:700; color:var(--ink-faint); padding:4px 2px 8px; text-transform:uppercase; letter-spacing:.05em}
  .more-panel a{display:block; padding:12px 2px; font-size:15px; font-weight:600; color:var(--ink);
    text-decoration:none; border-top:1px solid var(--line)}
  .more-panel a.on{color:var(--acid-dark)}
  .more-panel form{border-top:1px solid var(--line); padding-top:12px; margin-top:2px}
  .more-panel .btn{width:100%; justify-content:center}

  /* общий каркас страниц */
  .wrap{padding:12px}
  body{overflow-x:hidden} /* страховка: страница не скроллится вбок, широкое скроллится внутри блоков */
  h1{font-size:17px}
  .page-head h1{flex-basis:100%; min-width:0}
  .page-head select.btn{max-width:100%}
  .close-menu{flex-shrink:0} /* «Закрыть сделку» переносится вниз, а не сплющивается */
  .stage-cap .muted{display:none} /* подсказка про клик по полосе — на таче есть селект стадий */
  .page-head{flex-wrap:wrap; row-gap:8px}
  /* длинные счётчики-подписи в шапке — отдельной строкой вниз, не распирают ряд */
  .page-head > span.muted{flex-basis:100%; order:99; font-size:12px; margin-left:0 !important}
  /* формы: 16px, чтобы iPhone не зумил при фокусе */
  input, select, textarea{font-size:16px !important}
  .kv-form{grid-template-columns:1fr}
  .kv{grid-template-columns:110px 1fr}
  /* широкие таблицы скроллятся внутри панели, страницу не растягивают */
  table.items{display:block; overflow-x:auto}
  /* внутри .tbl-scroll скроллит сам контейнер — таблице возвращаем нормальный display, иначе липкая шапка ломается */
  .tbl-scroll table.items{display:table}
  .tbl-scroll{overflow:auto}
  .fin-ops td{white-space:nowrap}
  .fin-ops td:last-child{white-space:normal; min-width:160px}
  .money-strip{flex-wrap:wrap}
  .money-box{min-width:45%}
  .search-inline{margin-left:0; width:100%}
  .search-inline input{width:100%}
  .rep-filters{margin-left:0; flex-wrap:wrap}
  .fin-bank-total{font-size:22px}
  .mail-funnel b{font-size:18px}
  .close-pop{position:fixed; left:12px; right:12px; top:auto; bottom:calc(80px + env(safe-area-inset-bottom)); width:auto}

  /* канбан: лента стадий + одна колонка */
  .mstages{display:flex; gap:6px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch}
  .mstage{flex:none; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
    background:var(--card); border-radius:20px; padding:7px 13px; font:600 13px 'Manrope',sans-serif;
    color:var(--ink-soft); cursor:pointer; border-bottom:3px solid var(--sc, var(--line))}
  .mstage span{font-size:11px; font-weight:700; color:var(--ink-faint)}
  .mstage.on{background:var(--ink); color:#fff; border-color:var(--ink)}
  .mstage.on span{color:var(--acid)}
  .board{display:block; height:auto; overflow:visible; padding-bottom:0}
  .col{display:none; width:100%; background:none; padding:0; min-height:0}
  .col.m-on{display:block}
  .col-h{display:none}
  .col-bar{display:none}
  .col-cards{overflow:visible; max-height:none}
  .card{padding:12px; margin-bottom:8px}
}

/* Задачи */
.tview-switch a{cursor:pointer}
.task-deal-filter select{max-width:220px}
.task-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.task-add input[name=title]{flex:1; min-width:200px}
.task-row{display:flex; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line)}
.task-row:last-child{border-bottom:0}
.task-row .ttl{flex:1; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.task-row.late .when{color:#c4356b; font-weight:700}
.task-row .tick{background:none; border:1.5px solid var(--ink-faint); border-radius:50%; width:20px; height:20px; line-height:1; cursor:pointer; flex-shrink:0; padding:0}
.task-row .tick:hover{border-color:var(--acid)}
.task-row .tick.done{border:0; color:#0e8f6f; font-weight:700; display:inline-flex; align-items:center; justify-content:center; width:20px}
.tick-form{display:inline; flex-shrink:0}
.task-row .when, .task-row .st, .task-row .who{flex-shrink:0; font-size:13px}
.task-edit{display:flex; gap:6px; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line)}
.task-card .days.tlate{color:#c4356b; font-weight:700}
@media (max-width:840px){
  .task-row .st, .task-row .who{display:none}
  .task-deal-filter select{max-width:140px}
  .tasks-head{flex-wrap:wrap; row-gap:8px}
  .task-row{flex-wrap:wrap; row-gap:2px}
  .task-row .ttl{white-space:normal; flex:1 1 calc(100% - 34px)}
  .task-row .when, .task-row a.muted, .task-row .st{font-size:12px}
}
.task-add[hidden], .task-edit[hidden]{display:none}

/* Карточка задачи + попап */
.task-form{display:flex; flex-direction:column; gap:10px}
.task-form label, .task-modal-form label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--ink-soft); font-weight:600}
.task-form input, .task-form select, .task-form textarea,
.task-modal-form input, .task-modal-form select, .task-modal-form textarea{border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit}
.task-form-row{display:flex; gap:10px}
.task-form-row label{flex:1}
.task-late-badge{color:#c4356b; font-size:11px; margin-left:8px}
.task-status-switch{display:flex; gap:6px; align-items:center}
.task-mat-row{display:flex; gap:10px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line)}
.task-mat-row a{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.task-mat-add{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center}
.task-mat-add input[name=url]{flex:1; min-width:160px}
.task-ev{padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; display:flex; gap:10px; align-items:baseline}
.task-ev:last-child{border-bottom:0}
.task-ev-when{flex-shrink:0; font-size:11px}
.task-modal{position:fixed; inset:0; z-index:80}
.task-modal[hidden]{display:none}
.task-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.task-modal-panel{position:absolute; left:50%; top:8%; transform:translateX(-50%); width:min(520px,92vw); max-height:84vh; overflow:auto; background:var(--card); border-radius:14px; padding:18px}
.task-modal-form{display:flex; flex-direction:column; gap:10px}
.task-row .ttl{color:var(--ink); text-decoration:none}
.task-row .ttl:hover{text-decoration:underline}
@media (max-width:840px){
  .task-modal-panel{left:0; right:0; bottom:0; top:auto; transform:none; width:auto; border-radius:16px 16px 0 0; padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* Отчёты Директа: длинные таблицы скроллятся внутри панели */
.rep-clamp{max-height:480px;overflow:auto}
.rep-clamp th{position:sticky;top:0;background:var(--card);z-index:1}