/* Базовые стили перенесены из HTML-прототипа index.html без изменений. */
:root {
  --bg:#F0F0F3;
  --surface:#FFFFFF;
  --surface-alt:#E9E9ED;
  --text-1:#19191B;
  --text-2:#6E6E78;
  --text-3:#A0A0AA;
  --border:#D4D4DA;
  --sep:#E2E2E7;
  --accent:#2C2C2E;
  --red:#E03E3E;
  --green:#2D9A2D;
  --r:4px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--text-1);-webkit-font-smoothing:antialiased;overflow:hidden}
#app{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--bg)}

.header{padding:10px 16px 0;padding-top:calc(10px + var(--safe-t));flex-shrink:0;background:var(--bg);z-index:50}
.header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.logo{font-size:21px;font-weight:800;letter-spacing:-.7px}
.logo b{color:var(--text-3);font-weight:400}
.add-car-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--accent);color:#fff;border:none;border-radius:14px;font:600 13px/1 'Manrope',sans-serif;cursor:pointer;transition:transform .12s}
.add-car-btn:active{transform:scale(.95)}
.add-car-btn svg{width:14px;height:14px}

.search-row{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.filter-btn{width:34px;height:34px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;transition:all .15s}
.filter-btn.on{background:var(--accent);border-color:var(--accent)}
.filter-btn.on svg{stroke:#fff}
.filter-badge{position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;border-radius:50%;background:var(--red);color:#fff;font:700 9px/15px 'Manrope';text-align:center}
.search-input{flex:1;min-width:0;padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--r);font:400 13px/1.3 'Manrope',sans-serif;background:var(--surface);color:var(--text-1);outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--text-3)}
.reset-btn{width:34px;height:34px;border-radius:var(--r);background:var(--surface);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.reset-btn:active{background:var(--surface-alt)}
.hidden{display:none!important}

.car-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + var(--safe-b))}
.car-item{display:flex;flex-direction:column;padding:10px 16px;background:var(--surface);cursor:pointer;border-bottom:.5px solid var(--sep);transition:background .1s}
.car-item:active{background:var(--surface-alt)}
.car-row1{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.car-title{font-size:14px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.car-vin{font:400 10px/1 'SF Mono','Fira Code','Consolas',monospace;color:var(--text-3);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-pipe{color:var(--text-3);font-size:11px;flex-shrink:0}
.car-row2{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.car-client-name{font-size:12px;font-weight:500;color:var(--text-2)}
.car-balance{font-size:11px;font-weight:600;white-space:nowrap}
.car-balance.debt{color:var(--red)}
.car-balance.credit{color:var(--green)}
.car-row3{display:flex;align-items:center;justify-content:space-between}
.car-date{font-size:10px;color:var(--text-3)}
.car-status-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:var(--r);color:#fff;text-transform:uppercase;letter-spacing:.3px}
.car-meta-sub{font-size:10px;color:var(--text-3);margin-top:1px}

.empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:50%;color:var(--text-3);text-align:center;padding:40px}
.empty-list .icon{font-size:40px;margin-bottom:12px;opacity:.3}

.panel{position:fixed;inset:0;max-width:480px;margin:0 auto;background:var(--bg);z-index:200;display:flex;flex-direction:column;will-change:transform}
.panel.from-right{animation:slideR .28s cubic-bezier(.32,.72,0,1)}
.panel.from-bottom{animation:slideB .28s cubic-bezier(.32,.72,0,1)}
.panel.from-left{animation:slideL .28s cubic-bezier(.32,.72,0,1)}
@keyframes slideR{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideB{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideL{from{transform:translateX(-100%)}to{transform:translateX(0)}}

.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;padding-top:calc(14px + var(--safe-t));flex-shrink:0;position:relative}
.panel-back{background:none;border:none;font:500 15px/1 'Manrope',sans-serif;color:var(--text-2);cursor:pointer;padding:4px 0}
.panel-title{font-size:16px;font-weight:700;position:absolute;left:50%;transform:translateX(-50%)}
.panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(20px + var(--safe-b))}

.detail-info{padding:16px}
.detail-main-title{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:2px}
.detail-vin{font:400 12px/1.4 'SF Mono','Fira Code',monospace;color:var(--text-3);letter-spacing:.5px;margin-bottom:10px}
.detail-client-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.detail-client-name{font-size:15px;font-weight:600}
.detail-client-phone{font-size:13px;color:var(--text-2)}
.detail-balance{font-size:14px;font-weight:700;text-align:right}
.detail-field{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:.5px solid var(--sep);font-size:14px}
.detail-field-label{color:var(--text-2)}
.detail-field-value{font-weight:600;text-align:right}

.detail-section-title{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;padding:16px 16px 8px}
.status-date-list{padding:0 16px}
.status-date-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:.5px solid var(--sep);cursor:pointer}
.status-date-row:last-child{border-bottom:none}
.status-date-row:active{opacity:.6}
.sd-left{display:flex;align-items:center;gap:10px}
.sd-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sd-label{font-size:14px;font-weight:500}
.sd-date{font-size:13px;color:var(--text-2);font-weight:500}
.sd-date.empty{color:var(--text-3);font-style:italic;font-weight:400}
.detail-delete-btn{display:block;width:calc(100% - 32px);margin:20px 16px 0;padding:13px;border:none;border-radius:var(--r);background:none;color:var(--red);font:500 15px/1 'Manrope',sans-serif;cursor:pointer;text-align:center}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;display:flex;align-items:flex-end;justify-content:center;max-width:480px;margin:0 auto;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-sheet{width:100%;background:var(--bg);border-radius:10px 10px 0 0;padding:20px 16px;padding-bottom:calc(20px + var(--safe-b));animation:sheetUp .25s cubic-bezier(.32,.72,0,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:16px}
.modal-date-input{width:100%;padding:14px;border:1.5px solid var(--border);border-radius:var(--r);font:500 16px/1.3 'Manrope',sans-serif;background:var(--surface);color:var(--text-1);text-align:center;outline:none;margin-bottom:12px}
.modal-btns{display:flex;gap:10px}
.modal-btn{flex:1;padding:14px;border:none;border-radius:var(--r);font:600 15px/1 'Manrope',sans-serif;cursor:pointer;transition:opacity .12s}
.modal-btn:active{opacity:.7}
.modal-btn.primary{background:var(--accent);color:#fff}
.modal-btn.secondary{background:var(--surface-alt);color:var(--text-1)}
.modal-btn.danger{background:none;color:var(--red);border:1.5px solid var(--red)}

.filter-list{padding:8px 16px}
.filter-check-row{display:flex;align-items:center;gap:12px;padding:13px 0;cursor:pointer;border-bottom:.5px solid var(--sep)}
.filter-check-row:last-child{border-bottom:none}
.filter-check-row:active{opacity:.6}
.filter-check-row.select-all{padding-bottom:14px;margin-bottom:2px;border-bottom:2px solid var(--border)}
.fcheck{width:22px;height:22px;border-radius:var(--r);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:#fff;font-weight:700;transition:all .12s}
.fcheck.on{border-color:transparent}
.fcheck-label{font-size:15px;font-weight:500;flex:1}
.fcheck-count{font-size:13px;color:var(--text-3);font-weight:600}
.filter-footer{padding:16px;padding-bottom:calc(16px + var(--safe-b))}
.filter-apply-btn{width:100%;padding:15px;border:none;border-radius:var(--r);background:var(--accent);color:#fff;font:600 15px/1 'Manrope',sans-serif;cursor:pointer}
.filter-apply-btn:active{opacity:.8}

.step-bar{display:flex;gap:4px;padding:0 16px 10px;flex-shrink:0}
.step-pip{height:3px;flex:1;border-radius:2px;background:var(--surface-alt);transition:background .3s}
.step-pip.on{background:var(--accent)}
.step-pip.done{background:var(--text-3)}
.wizard-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.vin-step{padding:20px;flex:1;display:flex;flex-direction:column;gap:20px}
.vin-title{font-size:26px;font-weight:800;letter-spacing:-.5px}
.vin-sub{font-size:14px;color:var(--text-2);margin-top:4px}
.vin-input{width:100%;padding:16px;border:2px solid var(--border);border-radius:var(--r);font:500 18px/1 'SF Mono','Fira Code',monospace;letter-spacing:2px;text-transform:uppercase;background:var(--surface);color:var(--text-1);outline:none;text-align:center}
.vin-input:focus{border-color:var(--accent)}
.vin-input::placeholder{color:var(--text-3);letter-spacing:1px;text-transform:none}
.vin-count{text-align:center;font-size:13px;color:var(--text-3)}
.wiz-next-btn{width:100%;padding:16px;border:none;border-radius:var(--r);background:var(--accent);color:#fff;font:600 16px/1 'Manrope',sans-serif;cursor:pointer;margin-top:auto}
.wiz-next-btn:disabled{opacity:.25;cursor:default}
.wiz-next-btn:not(:disabled):active{opacity:.8}

.ilist{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ilist-search{margin:0 16px 8px;padding:10px 14px;border:none;border-radius:var(--r);background:var(--surface-alt);font:400 14px/1.3 'Manrope',sans-serif;color:var(--text-1);outline:none}
.ilist-search::placeholder{color:var(--text-3)}
.ilist-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.ilist-section{padding:5px 16px;font:700 12px/1 'Manrope',sans-serif;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;background:var(--bg);position:sticky;top:0;z-index:2}
.ilist-item{padding:12px 16px;cursor:pointer;border-bottom:.5px solid var(--sep);transition:background .1s}
.ilist-item:active{background:var(--surface-alt)}
.ilist-item-main{font-size:15px;font-weight:500}
.ilist-item-sub{font-size:12px;color:var(--text-3);margin-top:1px}
.ilist-alpha{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;z-index:10;padding:2px}
.ilist-alpha span{font-size:9px;font-weight:700;color:var(--text-2);padding:1px 3px;cursor:pointer;line-height:1.4}
.add-client-trigger{padding:14px 16px;font:600 14px/1 'Manrope',sans-serif;color:var(--accent);cursor:pointer;border-bottom:.5px solid var(--sep);display:flex;align-items:center;gap:6px}
.add-client-trigger:active{background:var(--surface-alt)}
.new-client-form{padding:20px;flex:1;display:flex;flex-direction:column;gap:14px}
.nc-title{font-size:20px;font-weight:800}
.nc-label{font:700 12px/1 'Manrope';color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.nc-input{width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--r);font:400 15px/1.3 'Manrope',sans-serif;background:var(--surface);color:var(--text-1);outline:none}
.nc-input:focus{border-color:var(--accent)}

/* ---------- Дополнения поверх прототипа ---------- */

.page-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + var(--safe-b))}

.tabbar{display:flex;flex-shrink:0;border-top:.5px solid var(--sep);background:var(--surface);padding-bottom:var(--safe-b)}
.tabbar a{flex:1;padding:10px 0 9px;text-align:center;text-decoration:none;color:var(--text-3);font:600 11px/1.4 'Manrope',sans-serif;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar a.on{color:var(--text-1)}
.tabbar svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}

.chip-row{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;padding:5px 11px;border-radius:12px;background:var(--surface);border:1.5px solid var(--border);font:600 11px/1.3 'Manrope',sans-serif;color:var(--text-2);text-decoration:none;white-space:nowrap}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

.list-count{padding:0 16px 8px;font:600 11px/1 'Manrope',sans-serif;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}

.form-page{padding:16px;display:flex;flex-direction:column;gap:14px}
.form-row{display:flex;flex-direction:column}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-help{font-size:11px;color:var(--text-3);margin-top:4px}
.form-error{font-size:12px;color:var(--red);margin-top:4px}
.form-errors{background:#fdecec;border:1.5px solid var(--red);color:var(--red);border-radius:var(--r);padding:10px 12px;font-size:13px}
.nc-input[type=date]{font-family:'Manrope',sans-serif}
select.nc-input{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236E6E78' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:32px}
textarea.nc-input{min-height:76px;resize:vertical;font-family:'Manrope',sans-serif}
.section-block{background:var(--surface);border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep);margin-top:8px}

.btn-primary{width:100%;padding:15px;border:none;border-radius:var(--r);background:var(--accent);color:#fff;font:600 15px/1 'Manrope',sans-serif;cursor:pointer}
.btn-primary:active{opacity:.8}
.btn-secondary{width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-1);font:600 14px/1 'Manrope',sans-serif;cursor:pointer;text-align:center;text-decoration:none;display:block}
.btn-inline{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-1);font:600 12px/1 'Manrope',sans-serif;cursor:pointer;text-decoration:none}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 16px}
.photo-cell{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--surface-alt)}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-del{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font:700 12px/1 'Manrope';cursor:pointer}
.photo-upload{padding:12px 16px 0}
.photo-upload input[type=file]{display:none}
.photo-upload label{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border:1.5px dashed var(--border);border-radius:var(--r);color:var(--text-2);font:600 13px/1 'Manrope',sans-serif;cursor:pointer;background:var(--surface)}
.photo-upload label:active{background:var(--surface-alt)}
.photo-chosen{font-size:12px;color:var(--text-2);text-align:center;margin-top:8px}

.money-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:.5px solid var(--sep);font-size:13px}
.money-row .m-name{color:var(--text-2)}
.money-row .m-val{font-weight:600;white-space:nowrap}
.money-total{display:flex;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:700;background:var(--surface-alt)}

.comment{padding:11px 16px;border-bottom:.5px solid var(--sep)}
.comment-meta{font-size:11px;color:var(--text-3);margin-bottom:3px}
.comment-text{font-size:13px;line-height:1.45;white-space:pre-wrap}

.login-wrap{height:100%;display:flex;flex-direction:column;justify-content:center;padding:24px;gap:16px}
.login-logo{font-size:32px;font-weight:800;letter-spacing:-1px;text-align:center;margin-bottom:6px}
.login-logo b{color:var(--text-3);font-weight:400}
.login-sub{text-align:center;font-size:13px;color:var(--text-2);margin-bottom:12px}

.badge-role{display:inline-block;padding:2px 7px;border-radius:var(--r);background:var(--surface-alt);color:var(--text-2);font:700 9px/1.6 'Manrope';text-transform:uppercase;letter-spacing:.3px;margin-right:4px}
.status-date-row form{display:contents}
.sd-date-input{border:none;background:none;font:500 13px/1 'Manrope',sans-serif;color:var(--text-2);text-align:right;outline:none;width:120px}

/* ---------- Выбор участника через drawer ---------- */

.picker-trigger{width:100%;padding:13px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-1);font:400 15px/1.3 'Manrope',sans-serif;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.picker-trigger:active{background:var(--surface-alt)}
.picker-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-trigger.empty .picker-value{color:var(--text-3)}
.picker-trigger svg{width:11px;height:11px;flex-shrink:0;stroke:var(--text-3);fill:none;stroke-width:2}

.picker-panel{z-index:600}
.picker-panel .ilist-search{margin-top:2px}
.picker-clear{padding:12px 16px;font:600 14px/1 'Manrope',sans-serif;color:var(--text-2);cursor:pointer;border-bottom:.5px solid var(--sep)}
.picker-clear:active{background:var(--surface-alt)}
.ilist-item.on{background:var(--surface-alt)}
.ilist-empty{padding:40px 16px;text-align:center;color:var(--text-3);font-size:14px}
.creator-panel{z-index:700}
.creator-panel .new-client-form{padding:20px 16px}

/* ---------- Компактный список этапов в карточке авто ---------- */

.stages-head{display:flex;align-items:baseline;justify-content:space-between;padding:16px 16px 6px}
.stages-title{font:700 11px/1 'Manrope';color:var(--text-3);text-transform:uppercase;letter-spacing:1.4px}
.stages-count{font:600 11px/1 'Manrope';color:var(--text-3)}

.stages{background:var(--surface);border-top:.5px solid var(--sep);border-bottom:.5px solid var(--sep)}
.stage{position:relative;display:flex;align-items:center;gap:8px;padding:6px 16px;min-height:30px;cursor:pointer}
.stage + .stage{border-top:.5px solid var(--sep)}
.stage:active{background:var(--surface-alt)}
.stage.on{background:var(--surface-alt)}
.stage.on .stage-name{font-weight:700}
.stage.done .stage-name{color:var(--text-2)}

.stage-no{flex-shrink:0;width:16px;text-align:right;font:400 11px/1 'Manrope';color:var(--text-3);font-variant-numeric:tabular-nums}
.stage-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%}
.stage-name{flex:1;min-width:0;font:500 13px/1.25 'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-date{flex-shrink:0;font:600 12px/1 'Manrope';color:var(--text-1);font-variant-numeric:tabular-nums}
.stage-clear{position:relative;z-index:2;flex-shrink:0;width:16px;height:16px;border:none;border-radius:50%;background:var(--surface-alt);color:var(--text-3);font:700 11px/1 'Manrope';cursor:pointer;padding:0}
.stage-clear:active{background:var(--border)}
.stage-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;padding:0;margin:0;background:none;cursor:pointer;-webkit-appearance:none}

/* ---------- Финансы ---------- */

.totals{display:flex;gap:6px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.totals::-webkit-scrollbar{display:none}
.total-cell{flex-shrink:0;min-width:96px;padding:8px 10px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r)}
.total-cur{font:700 10px/1 'Manrope';color:var(--text-3);letter-spacing:.5px;margin-bottom:4px}
.total-in{font:600 12px/1.4 'Manrope';color:var(--green)}
.total-out{font:600 12px/1.4 'Manrope';color:var(--red)}

.op-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 16px;background:var(--surface);border-bottom:.5px solid var(--sep)}
.op-main{flex:1;min-width:0}
.op-title{font:600 13px/1.3 'Manrope';margin-bottom:2px}
.op-sub{font:400 11px/1.4 'Manrope';color:var(--text-3)}
.op-sub a{color:var(--text-2);text-decoration:none}
.op-note{font:400 11px/1.4 'Manrope';color:var(--text-2);margin-top:2px}
.op-amount{flex-shrink:0;font:700 14px/1.2 'Manrope';white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.op-amount.in{color:var(--green)}
.op-amount.out{color:var(--red)}
.op-cur{display:block;font:600 10px/1.4 'Manrope';color:var(--text-3)}

.pager{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.pager-info{font:600 12px/1 'Manrope';color:var(--text-3)}

.money-actions{display:flex;gap:8px;margin-top:12px}
.btn-money{flex:1;padding:11px;border-radius:var(--r);border:1.5px solid;background:var(--surface);font:600 14px/1 'Manrope',sans-serif;cursor:pointer}
.btn-money.in{color:var(--green);border-color:var(--green)}
.btn-money.out{color:var(--red);border-color:var(--red)}
.btn-money:active{opacity:.7}

.op-drawer{z-index:500}
.dir-switch{display:flex;gap:8px}
.dir-option{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:12px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);font:600 14px/1 'Manrope',sans-serif;color:var(--text-2);cursor:pointer}
.dir-option input{position:absolute;opacity:0;pointer-events:none}
.dir-option:has(input:checked).dir-in{border-color:var(--green);background:var(--green);color:#fff}
.dir-option:has(input:checked).dir-out{border-color:var(--red);background:var(--red);color:#fff}

/* Разделитель дня в списке проводок */
.day-sep{display:flex;align-items:center;gap:10px;padding:14px 16px 8px;background:var(--bg)}
.day-sep::before,.day-sep::after{content:"";flex:1;height:.5px;background:var(--border)}
.day-label{font:700 11px/1 'Manrope';color:var(--text-3);text-transform:uppercase;letter-spacing:.6px;white-space:nowrap}
/* Обязательное поле, которое заполняется через панель выбора. */
.picker-trigger.needed .picker-value::after{content:' *';color:var(--red)}

/* ---------- Карточка проводки ----------
   Оформление то же, что у таблицы финансов: ярлыки прихода и расхода,
   табличные цифры, волосяные разделители, мелкие прописные подписи. */

.tag{display:inline-block;padding:1px 7px;border-radius:9px;font:700 9.5px/1.6 'Manrope',sans-serif;
     text-transform:uppercase;letter-spacing:.4px}
.tag.pos{background:#E4F3E4;color:#1F6B1F}
.tag.neg{background:#FBE7E7;color:#B02525}

.opcard{padding:0 0 28px}
.opcard-flash{margin:12px 16px 0;padding:8px 12px;border-radius:var(--r);background:#E8F5E8;
              color:#1F6B1F;font:600 12px/1.4 'Manrope',sans-serif}

.opcard-head{padding:16px 16px 14px;border-bottom:1px solid var(--sep);background:var(--surface)}
.opcard-sum{font:700 28px/1.1 'Manrope',sans-serif;letter-spacing:-1px;
            font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.opcard-sum.pos{color:var(--green)}
.opcard-sum.neg{color:var(--red)}
.opcard-cur{margin-left:8px;font:600 13px/1 'Manrope',sans-serif;color:var(--text-3);letter-spacing:.5px}
.opcard-meta{display:flex;align-items:center;gap:10px;margin-top:8px}
.opcard-date,.opcard-id{font:600 11px/1 'Manrope',sans-serif;color:var(--text-3);
                        font-variant-numeric:tabular-nums;letter-spacing:.3px}

.opcard-label{font:700 9.5px/1 'Manrope',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
              color:var(--text-3);margin-bottom:5px}

/* Одна колонка: карточка одинаковая и на телефоне, и в узкой панели на ПК. */
.opcard-form{display:flex;flex-direction:column;gap:12px;padding:16px}
.opcard-field{min-width:0}
/* Дата, сумма и валюта в одну строку. Поля в ней чуть мельче: втроём они
   должны уместиться в ширину телефонного экрана. */
.opcard-row{display:grid;grid-template-columns:1.15fr 1fr .9fr;gap:8px}
.opcard-row .nc-input,.opcard-row .picker-trigger{padding:11px 9px;font-size:14px}
.opcard input[name=amount]{text-align:right;font-variant-numeric:tabular-nums}
.opcard-actions{display:flex;justify-content:flex-end;margin-top:2px}
.opcard-actions button{padding:10px 22px}

.opcard-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.opcard-link{flex:1 1 220px;min-width:0;padding:9px 12px;border:1px solid var(--border);
             border-radius:var(--r);background:var(--surface);text-decoration:none;color:inherit}
.opcard-link:hover{border-color:var(--accent)}
.opcard-link-name{display:block;font:600 12.5px/1.35 'Manrope',sans-serif;
                  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opcard-link .mono{font-size:10.5px;color:var(--text-3)}

.opcard-info{border-top:1px solid var(--sep)}
.opcard-info>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
                 padding:9px 16px;border-bottom:1px solid var(--sep)}
.opcard-info dt{font:600 11.5px/1.3 'Manrope',sans-serif;color:var(--text-2)}
.opcard-info dd{font:500 12px/1.3 'Manrope',sans-serif;text-align:right;min-width:0;
                overflow:hidden;text-overflow:ellipsis}

.opcard-remove{padding:16px}
.opcard-remove button{width:100%;padding:11px;border:1px solid var(--border);border-radius:var(--r);
                      background:none;color:var(--red);font:600 13px/1 'Manrope',sans-serif;cursor:pointer}
.opcard-remove button:hover{border-color:var(--red);background:#FDF3F3}

/* ---------- Заведение авто по шильдику ---------- */

.plate-page{padding:16px;display:flex;flex-direction:column;gap:18px}

.plate-found{padding:14px 16px;background:var(--surface);border:1px solid var(--border);
             border-radius:var(--r)}
.plate-number{font:700 21px/1.3 'SF Mono','Fira Code',Consolas,monospace;letter-spacing:1.5px;
              word-break:break-all;margin:6px 0 4px}
.plate-derived{font:500 12.5px/1.45 'Manrope',sans-serif;color:var(--text-2)}

.plate-confirm{display:flex;flex-direction:column;gap:12px}
/* Номер сверяют посимвольно, поэтому моноширинный и с разрядкой. */
.plate-input{font:600 16px/1.3 'SF Mono','Fira Code',Consolas,monospace;letter-spacing:1.2px;
             text-transform:uppercase}

.plate-shoot input[type=file]{display:none}
.plate-shoot label{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px;
                   border:1.5px dashed var(--border);border-radius:var(--r);background:var(--surface);
                   color:var(--text-1);font:600 14px/1 'Manrope',sans-serif;cursor:pointer}
.plate-shoot label:active{background:var(--surface-alt)}
.plate-shoot label.busy{opacity:.5;pointer-events:none}
.plate-hint{margin-top:8px;font:400 11.5px/1.5 'Manrope',sans-serif;color:var(--text-3);
            text-align:center}

.plate-raw pre{margin-top:6px;padding:10px 12px;background:var(--surface-alt);border-radius:var(--r);
               font:400 11px/1.5 'SF Mono',Consolas,monospace;white-space:pre-wrap;
               max-height:180px;overflow:auto;color:var(--text-2)}
.plate-raw .btn-secondary{margin-top:10px}
.header-actions{display:flex;align-items:center;gap:7px}
.add-car-btn.ghost{background:var(--surface);color:var(--text-1);border:1.5px solid var(--border)}
.add-car-btn.ghost svg{width:15px;height:15px}