:root{--bg:#050816;--panel:#101a46;--panel2:#142055;--border:rgba(115,156,255,.22);--text:#f5f7ff;--muted:#a7b2d8;--blue:#3b63ff;--blue2:#2e8bff;--yellow:#ffbf14;--yellow2:#ff9f0a;--green:#30d158;--danger:#ff5a6b} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:#040712;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%}body{min-height:100vh;position:relative}body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at top left,#152b7a 0%,#0b1231 24%,#070b1f 62%,#040712 100%)}.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:12px 10px 28px}.shell{border-radius:28px;padding:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));box-shadow:0 10px 30px rgba(0,0,0,.35)}.header{text-align:center;padding:8px 2px 10px}.title{font-weight:800;font-size:22px}.subtitle{font-size:12px;color:var(--muted);margin-top:2px}.top-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 18px}.top-pill{background:linear-gradient(180deg,rgba(24,41,106,.98),rgba(12,22,62,.98));border:1px solid var(--border);border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px}.top-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff8,#fff2);font-size:18px}.top-copy{min-width:0}.top-copy strong{display:block;font-size:24px;line-height:1.05}.top-copy span{color:var(--muted);font-size:12px}.tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:18px}.tab{border:0;border-radius:16px;padding:13px 6px;background:rgba(227,232,255,.9);color:#1f2550;font-size:13px;font-weight:800}.tab:nth-child(1),.tab:nth-child(2),.tab:nth-child(3){grid-column:span 2}.tab:nth-child(4),.tab:nth-child(5),.tab:nth-child(6){grid-column:span 2}.tab.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 8px 25px rgba(46,99,255,.38)}.section-title{font-size:18px;font-weight:800;margin:14px 4px 10px}.card{background:linear-gradient(180deg,rgba(18,31,85,.98),rgba(11,22,64,.98));border:1px solid var(--border);border-radius:22px;padding:16px;margin-bottom:12px;box-shadow:0 14px 32px rgba(3,7,17,.32)}.row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.car-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}.car-info{min-width:0}.car-name{font-size:20px;font-weight:800;line-height:1.15;overflow-wrap:anywhere;word-break:break-word}.muted{color:var(--muted);font-size:13px;line-height:1.4}.hidden{display:none!important}.health-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.health-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800}.health-ok{background:rgba(48,209,88,.12);color:#8ff0ae;border:1px solid rgba(48,209,88,.25)}.health-bad{background:rgba(255,90,107,.12);color:#ff9aa7;border:1px solid rgba(255,90,107,.25)}.status-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(48,209,88,.12);color:#8ff0ae;border:1px solid rgba(48,209,88,.25);white-space:nowrap;flex-shrink:0}.kv{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}.kv span:last-child{text-align:right}.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);margin:12px 0}label{display:block;font-size:13px;color:var(--muted);margin:2px 2px 6px}input,textarea,select{width:100%;min-width:0;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:var(--text);border-radius:16px;padding:14px;font-size:16px;outline:none}textarea{min-height:78px;resize:vertical}.date-field{position:relative;width:100%;min-width:0;height:52px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.06);color:var(--text);border-radius:16px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:hidden;font-size:16px}.date-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.date-value.empty{color:var(--muted)}.date-icon{flex:0 0 auto;color:var(--muted);font-size:18px;line-height:1;pointer-events:none}.date-field input[type=date]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:16px!important;opacity:.001!important;cursor:pointer!important;-webkit-appearance:auto!important;appearance:auto!important;color-scheme:dark}.date-field input[type=date]::-webkit-calendar-picker-indicator{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0!important;cursor:pointer!important}#history{min-width:0;overflow-x:hidden}#history>.card{min-width:0;max-width:100%;overflow:hidden}.actions{display:flex;gap:10px;margin-top:12px}.actions button{flex:1}button{appearance:none;border:0;cursor:pointer;font-weight:800;font-size:15px;border-radius:16px;padding:13px}.primary{background:linear-gradient(180deg,var(--yellow),var(--yellow2));color:#1d1f28}.secondary{background:linear-gradient(180deg,#3b63ff,#274cff);color:#fff}.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff}.danger{background:linear-gradient(180deg,#ff7b86,#ff4f66);color:#fff}.loader{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.loader:before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-card{border-color:rgba(255,90,107,.45)}.switch-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.toggle{position:relative;width:52px;height:30px;border-radius:999px;background:#465071;border:1px solid rgba(255,255,255,.12);flex:0 0 auto;transition:.2s}.toggle:after{content:"";position:absolute;width:24px;height:24px;left:2px;top:2px;border-radius:50%;background:white;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.3)}.toggle.on{background:#2fcf70}.toggle.on:after{transform:translateX(22px)}.toggle.busy{opacity:.55;pointer-events:none}.car-edit-grid{display:grid;gap:10px}.hint{font-size:12px;color:var(--muted);margin-top:8px}.plate-input{text-transform:uppercase}.white-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(245,247,255,.12);border:1px solid rgba(245,247,255,.28);color:#f5f7ff;font-size:12px;font-weight:800;white-space:nowrap}.white-summary{border-color:rgba(245,247,255,.32);background:linear-gradient(180deg,rgba(31,42,86,.98),rgba(15,24,60,.98))}.white-toggle.on{background:#e8ecff}.white-toggle.on:after{background:#101a46}.white-note{font-size:12px;color:#d7ddff;line-height:1.45;margin-top:6px} .system-card{padding:13px 15px;margin:-5px 0 14px;overflow:hidden}.system-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none}.system-head:focus-visible{outline:2px solid rgba(115,156,255,.65);outline-offset:5px;border-radius:10px}.system-title{font-size:15px;font-weight:800;white-space:nowrap}.system-summary-wrap{display:inline-flex;align-items:center;gap:10px;min-width:0}.system-summary{font-size:12px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}.system-summary.ok{color:#8ff0ae}.system-summary.bad{color:#ff9aa7}.system-summary.unknown{color:#ffd36a}.system-chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;color:var(--muted);transform:rotate(45deg);transition:transform .2s ease;flex:0 0 auto;margin-top:-4px}.system-card.expanded .system-chevron{transform:rotate(225deg);margin-top:4px}.service-list{display:grid;gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07);max-height:280px;opacity:1;overflow:hidden;transition:max-height .22s ease,opacity .16s ease,margin-top .22s ease,padding-top .22s ease,border-color .22s ease}.system-card:not(.expanded) .service-list{max-height:0;opacity:0;margin-top:0;padding-top:0;border-top-color:transparent}.service-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.service-state{display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}.service-state.ok{color:#8ff0ae}.service-state.bad{color:#ff9aa7}.service-state.unknown{color:#ffd36a}.service-dot{font-size:11px}.service-error{font-size:11px;color:#ff9aa7;margin:-2px 0 1px;overflow-wrap:anywhere} .event-alert{position:sticky;top:6px;z-index:20;background:linear-gradient(180deg,#ffbd18,#ff9610);color:#171a24;border-radius:18px;padding:12px 14px;margin-bottom:12px;font-weight:800;box-shadow:0 12px 28px rgba(255,166,20,.28);display:flex;justify-content:space-between;gap:10px;align-items:center}.event-alert button{padding:9px 12px;background:#111a42;color:#fff;border-radius:12px}.event-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.event-actions .wide{grid-column:1/-1}.badge-dot{display:inline-flex;min-width:19px;height:19px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#ff5364;color:#fff;font-size:11px;margin-left:3px;vertical-align:1px}.status-warn{color:#ffd36a}.status-ok{color:#8ff0ae}#home,#history,#finance,#debts,#cars,#events{background:transparent}.live-value{font-variant-numeric:tabular-nums} /* v10: fullscreen shell + service switch + lockers */ html,body{width:100%;overflow-x:hidden}.app{padding-top:calc(max(12px,var(--tg-content-safe-area-inset-top,0px),env(safe-area-inset-top,0px)) + 4px);padding-left:max(10px,var(--tg-content-safe-area-inset-left,0px),env(safe-area-inset-left,0px));padding-right:max(10px,var(--tg-content-safe-area-inset-right,0px),env(safe-area-inset-right,0px));padding-bottom:calc(28px + max(var(--tg-content-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px)))}body.tg-fullscreen .app{padding-top:calc(max(12px,var(--tg-safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px),env(safe-area-inset-top,0px)) + 66px)}.service-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 10px;padding:4px;background:rgba(8,15,42,.76);border:1px solid rgba(115,156,255,.18);border-radius:18px;backdrop-filter:blur(14px);overflow:hidden}.service-choice{min-width:0;padding:10px 7px;border-radius:14px;background:transparent;color:var(--muted);box-shadow:none;font-size:14px;white-space:nowrap}.service-choice.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 7px 20px rgba(46,99,255,.3)}.locker-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}.locker-tab{border:0;border-radius:16px;padding:12px 7px;background:rgba(227,232,255,.9);color:#1f2550;font-size:13px;font-weight:800;min-width:0;white-space:normal;line-height:1.15}.locker-tab.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 8px 25px rgba(46,99,255,.38)}.locker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.locker-tile{position:relative;isolation:isolate;min-width:0;background:linear-gradient(180deg,rgba(18,31,85,.99),rgba(11,22,64,.99));border:1px solid var(--border);border-radius:16px;padding:13px;box-shadow:0 14px 32px rgba(3,7,17,.32);overflow:hidden}.locker-tile:before{content:"";position:absolute;z-index:-1;inset:-38% auto auto -25%;width:115px;height:115px;border-radius:50%;filter:blur(24px);opacity:.24;pointer-events:none}.locker-tile.paid:before{background:#30d158}.locker-tile.unpaid:before{background:#ff5a6b}.locker-tile.due:before{background:#ffbf14}.locker-tile.free:before{background:#2e8bff}.locker-tile.empty:before,.locker-tile.disabled:before{display:none}.locker-visual{width:72px;height:72px;border-radius:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.025));box-shadow:inset 0 0 20px rgba(255,255,255,.04),0 0 20px rgba(0,0,0,.22)}.locker-tile.paid .locker-visual{border-color:rgba(48,209,88,.58);box-shadow:0 0 24px rgba(48,209,88,.2),inset 0 0 22px rgba(48,209,88,.08)}.locker-tile.unpaid .locker-visual{border-color:rgba(255,90,107,.62);box-shadow:0 0 24px rgba(255,90,107,.24),inset 0 0 22px rgba(255,90,107,.08)}.locker-tile.due .locker-visual{border-color:rgba(255,191,20,.62);box-shadow:0 0 24px rgba(255,191,20,.2)}.locker-tile.free .locker-visual{border-color:rgba(46,139,255,.7);box-shadow:0 0 24px rgba(46,139,255,.22),inset 0 0 22px rgba(46,139,255,.08)}.locker-number{font-size:20px;font-weight:900;line-height:1}.locker-word{font-size:10px;color:var(--muted);margin-top:5px}.locker-owner{font-size:15px;font-weight:800;line-height:1.2;overflow-wrap:anywhere;min-height:36px}.locker-meta{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.45}.locker-status{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11px;font-weight:800}.locker-status.paid{color:#8ff0ae}.locker-status.unpaid{color:#ff9aa7}.locker-status.due{color:#ffd36a}.locker-status.free{color:#86bdff}.locker-status.empty,.locker-status.disabled{color:#a7b2d8}.locker-edit-card .actions{flex-wrap:wrap}.locker-edit-card .actions button{min-width:110px}.locker-edit-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.locker-slot{font-size:18px;font-weight:900}.locker-date-field{margin-bottom:2px}.locker-summary-note{font-size:12px;color:var(--muted);margin:2px 3px 14px}.mini-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;border-radius:999px;padding:6px 9px}.mini-badge.red{color:#ff9aa7;background:rgba(255,90,107,.11);border:1px solid rgba(255,90,107,.22)}.mini-badge.green{color:#8ff0ae;background:rgba(48,209,88,.11);border:1px solid rgba(48,209,88,.22)}.mini-badge.blue{color:#86bdff;background:rgba(46,139,255,.11);border:1px solid rgba(46,139,255,.24)}.free-note{font-size:11px;color:#86bdff;margin-top:6px}.free-fields.disabled-fields{opacity:.45;filter:saturate(.65)}.free-fields.disabled-fields input,.free-fields.disabled-fields .date-field{pointer-events:none}#lockerOverview,#lockerFinance,#lockerDebts,#lockerEdit{background:transparent}.fullscreen-hint{display:none}@media(max-width:370px){.locker-grid{grid-template-columns:1fr}.service-choice{font-size:13px}.top-pill{padding:11px 10px}.top-copy strong{font-size:21px}}@media(min-width:700px){.locker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.locker-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}} /* v10.2: lockers grow only when added, numeric order, size selector */ .locker-size{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#c4cdef;font-size:10px;font-weight:800}.locker-tile.large .locker-visual{width:80px;height:80px}.locker-tile.large .locker-word:after{content:" · БОЛЬШОЙ"}.locker-empty-state{text-align:center}.new-locker-card{border-style:dashed}.new-locker-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.new-locker-actions button{width:100%}select{color-scheme:dark}select option{background:#111a46;color:#f5f7ff} /* v10.3: manual locker debt accrual and independent active/payment states */ .locker-state-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.locker-state-box{padding:10px 11px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.locker-state-box span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.locker-state-box b{font-size:12px}.state-good{color:#8ff0ae}.state-bad{color:#ff9aa7}.state-blue{color:#86bdff}.manual-charge-open{width:100%;margin:2px 0 10px;background:rgba(255,90,107,.12);color:#ffb0ba;border:1px solid rgba(255,90,107,.24)}.manual-charge-box{margin:0 0 12px;padding:12px;border-radius:16px;background:rgba(8,14,40,.68);border:1px solid rgba(255,90,107,.18)}.manual-charge-title{font-size:13px;font-weight:900;margin-bottom:4px}.manual-charge-sub{font-size:11px;color:var(--muted);line-height:1.45;margin-bottom:10px}.charge-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.charge-method{padding:10px 8px;border-radius:12px;background:rgba(227,232,255,.9);color:#20264d;font-size:12px;font-weight:800}.charge-method.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff}.charge-calc{margin-top:6px;font-size:11px;color:#86bdff}.charge-submit{width:100%;margin-top:10px}.charge-source{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800;background:rgba(46,139,255,.11);border:1px solid rgba(46,139,255,.2);color:#86bdff} /* v10.4: debt corrections, compact locker cards, one sticky save action */ .locker-tile.large .locker-word:after{content:""!important}.locker-status{display:flex;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.25}.locker-status.unpaid{font-size:11px}.locker-size{max-width:100%;white-space:normal;line-height:1.2}.sticky-save-space{height:74px}.sticky-save-bar{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(10px + max(var(--tg-content-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px)));width:min(486px,calc(100vw - 28px));padding:8px;border:1px solid rgba(115,156,255,.25);border-radius:20px;background:rgba(8,15,42,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 30px rgba(0,0,0,.38)}.sticky-save-bar button{width:100%;box-shadow:0 8px 24px rgba(46,99,255,.3)}.sticky-save-bar.dirty button:after{content:" •"}.locker-delete-only{display:flex;justify-content:flex-end;margin-top:10px}.locker-delete-only button{width:100%}.locker-debt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.locker-debt-actions button{min-width:0;padding:12px 7px;font-size:12px}.correction-note{font-size:11px;color:#ffd36a;margin-top:8px;line-height:1.4}.toggle-local-note{font-size:10px;color:#86bdff;margin-top:3px}.save-ok-flash{animation:saveflash .65s ease}@keyframes saveflash{0%{filter:brightness(1)}45%{filter:brightness(1.35)}100%{filter:brightness(1)}} .client-debt-total{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 2px;padding:10px 12px;border-radius:14px;background:rgba(255,90,107,.10);border:1px solid rgba(255,90,107,.2);font-size:13px}.client-debt-total b{color:#ff9aa7;white-space:nowrap}.payment-audit{margin-top:10px;padding:9px 11px;border-radius:14px;background:rgba(48,209,88,.09);border:1px solid rgba(48,209,88,.18);font-size:12px;line-height:1.45;color:#9cebb3}.payment-audit .muted{font-size:11px}.owner-total{font-size:12px;color:#ff9aa7;font-weight:800;margin-top:6px} /* CLIENT_PORTAL_PROD_V1 */ .client-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; } .client-tab{ border:0; border-radius:16px; padding:13px 8px; background:rgba(227,232,255,.9); color:#1f2550; font-size:14px; font-weight:800; } .client-tab.active{ background:linear-gradient(180deg,var(--blue2),var(--blue)); color:#fff; box-shadow:0 8px 25px rgba(46,99,255,.38); } .client-welcome{ margin-bottom:12px; font-size:13px; color:var(--muted); } .client-active-card{ border-color:rgba(48,209,88,.28); } .client-payment-box{ margin-top:12px; padding:13px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); } .client-payment-min{ margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(255,191,20,.08); border:1px solid rgba(255,191,20,.18); color:#ffd36a; font-size:12px; line-height:1.45; } .client-payment-pending{ margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(46,139,255,.09); border:1px solid rgba(46,139,255,.2); color:#86bdff; font-size:12px; line-height:1.45; } .client-total-card{ border-color:rgba(255,90,107,.25); } .client-total-number{ font-size:28px; font-weight:900; margin-top:5px; color:#ff9aa7; } /* CLIENT_PORTAL_NO_ADMIN_FLASH_V1 */ body:not(.role-ready) .shell{ visibility:hidden !important; } /* ========================================================== CLIENT_GARAGE_PROD_V1 ========================================================== */ body.client-garage-mode{ background:#eef3f7!important; } body.client-garage-mode #appTitle{ display:none!important; } body.client-garage-mode .shell{ max-width:560px; padding-left:0!important; padding-right:0!important; } body.client-garage-mode #clientPanel{ margin:0!important; padding:0!important; } body.client-garage-mode #clientTabs{ display:none!important; } .client-garage{ --g-text:#101b2a; --g-muted:#728092; min-height:100vh; padding: 18px 16px 110px; color:var(--g-text); background: radial-gradient( circle at 50% 2%, #cbd7e1 0%, #e9eff4 23%, #f8fafb 48%, #edf3f7 100% ); } .garage-header{ padding:14px 0 20px; text-align:center; } .garage-title{ margin:0; font-size:31px; font-weight:470; letter-spacing:.18em; color:#111b29; } .garage-tagline{ margin-top:8px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#7e8a98; } .garage-visuals{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; } .garage-visuals::-webkit-scrollbar{ display:none; } .garage-visual{ position:relative; flex:1 0 145px; min-width:145px; padding:8px 8px 10px; border: 1px solid rgba(35,54,73,.08); border-radius:22px; background: rgba(247,250,252,.63); box-shadow: inset 0 1px 0 rgba(255,255,255,.88); color:var(--g-text); } .garage-visual.active{ border-color: rgba(29,47,66,.63); box-shadow: 0 10px 26px rgba(52,70,88,.10); } .garage-visual img{ width:100%; height:86px; display:block; object-fit:cover; border-radius:15px; mix-blend-mode:multiply; } .garage-visual-name{ display:block; margin-top:6px; text-align:center; font-size:12px; font-weight:650; } .garage-check{ display:none; position:absolute; top:8px; right:8px; width:25px; height:25px; align-items:center; justify-content:center; border-radius:50%; background:#203042; color:white; font-size:13px; z-index:2; } .garage-visual.active .garage-check{ display:flex; } .garage-hero{ height:255px; margin: 4px -7px 0; position:relative; display:flex; align-items:center; justify-content:center; } .garage-hero:after{ content:""; position:absolute; left:15%; right:15%; bottom:33px; height:22px; border-radius:50%; background: rgba(44,61,78,.17); filter:blur(15px); } .garage-hero img{ width:100%; height:100%; object-fit:contain; position:relative; z-index:1; mix-blend-mode:multiply; } .garage-card{ margin-top:-5px; padding:21px; border: 1px solid rgba(255,255,255,.90); border-radius:29px; background: linear-gradient( 135deg, rgba(255,255,255,.88), rgba(239,245,249,.71) ); box-shadow: 0 18px 50px rgba(44,64,83,.10); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .garage-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; } .garage-brand{ font-size:28px; line-height:1.1; font-weight:760; letter-spacing:-.025em; } .garage-plate{ margin-top:6px; font-size:19px; letter-spacing:.11em; text-transform:uppercase; color:#566476; } .garage-status{ display:flex; align-items:center; gap:8px; max-width:180px; padding:10px 12px; border-radius:19px; background: rgba(233,239,244,.83); } .garage-dot{ width:13px; height:13px; flex:0 0 13px; border-radius:50%; background:#abb6c1; box-shadow: 0 0 0 5px rgba(171,182,193,.14); } .garage-status.ok .garage-dot{ background:#30c957; box-shadow: 0 0 0 5px rgba(48,201,87,.13); } .garage-status.warn .garage-dot{ background:#ff453a; box-shadow: 0 0 0 5px rgba(255,69,58,.12); } .garage-status-title{ font-size:12px; font-weight:720; line-height:1.2; } .garage-status-sub{ margin-top:3px; font-size:10px; color:var(--g-muted); } .garage-stats{ display:grid; grid-template-columns: 1fr 1px 1fr; gap:18px; margin-top:22px; } .garage-line{ width:1px; background: rgba(37,55,73,.10); } .garage-label{ font-size:12px; color:var(--g-muted); } .garage-value{ margin-top:5px; font-size:26px; line-height:1; font-weight:730; } .garage-date{ margin-top:6px; font-size:11px; color:var(--g-muted); } .garage-pay{ width:100%; height:57px; margin-top:21px; position:relative; display:flex; align-items:center; justify-content:center; border:0; border-radius:19px; background: linear-gradient( 135deg, #2b3745, #151e28 ); color:white; font-size:16px; font-weight:670; box-shadow: 0 12px 25px rgba(20,30,42,.18); } .garage-pay-arrow{ position:absolute; right:21px; font-size:25px; font-weight:300; } .garage-pay:disabled{ opacity:.48; } .garage-section{ margin:28px 4px 12px; display:flex; align-items:center; gap:7px; font-size:20px; font-weight:720; } .garage-count{ min-width:25px; height:25px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; background:#dce5ed; font-size:12px; } .garage-cars{ display:grid; gap:10px; } .garage-car{ display:grid; grid-template-columns: 105px 1fr 24px; gap:13px; align-items:center; padding:10px; border: 1px solid rgba(255,255,255,.90); border-radius:22px; background: rgba(255,255,255,.66); box-shadow: 0 9px 28px rgba(44,63,81,.07); } .garage-car.selected{ outline: 1px solid rgba(37,55,74,.28); } .garage-car img{ width:105px; height:67px; object-fit:cover; border-radius:15px; mix-blend-mode:multiply; } .garage-car-brand{ font-size:12px; color:#657386; } .garage-car-plate{ margin-top:2px; font-size:16px; font-weight:700; letter-spacing:.05em; } .garage-car-state{ margin-top:4px; font-size:10px; color:#8a96a5; } .garage-chevron{ font-size:25px; color:#778596; } .garage-empty{ padding:26px; border-radius:26px; text-align:center; background: rgba(255,255,255,.67); color:#627184; } .garage-client-nav{ position:fixed; left:50%; bottom: max( 10px, env(safe-area-inset-bottom) ); transform: translateX(-50%); width: min( calc(100% - 24px), 536px ); z-index:1000; display:grid; grid-template-columns: repeat(4,1fr); padding:9px 5px; border: 1px solid rgba(255,255,255,.96); border-radius:27px; background: rgba(248,250,252,.93); box-shadow: 0 14px 45px rgba(46,65,84,.16); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); } .garage-client-nav button{ border:0; padding:5px 2px; background:transparent; color:#8794a3; font-size:10px; } .garage-client-nav button.active{ color:#172334; font-weight:700; } .garage-nav-icon{ display:block; margin-bottom:5px; font-size:20px; } /* Existing PROD payment screen -> light client theme */ body.client-garage-mode #clientDebts{ min-height:100vh; padding: 28px 16px 110px; color:#101b2a; background: radial-gradient( circle at 50% 2%, #d5dfe7 0%, #f8fafb 43%, #edf3f7 100% ); } body.client-garage-mode #clientDebts:before{ content:"Оплата"; display:block; margin-bottom:20px; text-align:center; font-size:28px; font-weight:550; letter-spacing:.13em; color:#111b29; } body.client-garage-mode #clientDebts .card{ color:#101b2a; border: 1px solid rgba(255,255,255,.90); background: rgba(255,255,255,.72); box-shadow: 0 14px 38px rgba(44,64,83,.09); } body.client-garage-mode #clientDebts .muted{ color:#748294!important; } body.client-garage-mode #clientDebts .primary{ background:#1d2733!important; color:white!important; } /* Admin-only client-visible brand */ .garage-admin-brand{ margin-top:10px; padding:11px; border-radius:15px; background: rgba(120,120,128,.065); } .garage-admin-brand-row{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; } .garage-admin-brand-row button{ white-space:nowrap; } @media(max-width:390px){ .garage-title{ font-size:28px; } .garage-hero{ height:225px; } .garage-card{ padding:18px; } .garage-brand{ font-size:24px; } .garage-plate{ font-size:17px; } .garage-status{ max-width:150px; } .garage-stats{ gap:12px; } } /* CLIENT_GARAGE_SCOPED_V3 */ body.client-garage-mode.client-garage-v3 { background:#f4f7fb !important; } body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell { background: linear-gradient( 180deg, #f1f5f9 0%, #f8fafc 42%, #f3f6fa 100% ) !important; } body.client-garage-mode.client-garage-v3 #clientPanel { color:#111827; background:transparent !important; padding-bottom: calc( 22px + max( env(safe-area-inset-bottom,0px), var(--tg-content-safe-area-inset-bottom,0px) ) ) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif; } body.client-garage-mode.client-garage-v3 #clientPanel button, body.client-garage-mode.client-garage-v3 #clientPanel input, body.client-garage-mode.client-garage-v3 #clientPanel textarea { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif; } /* ------------------------------------------ Пока V3 не успел обработать первый render, не показываем старый selector на один кадр. Только CLIENT HOME. ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientPanel:not(.garage-v3-ready) #clientHome { visibility:hidden; } /* ------------------------------------------ СТАРЫЙ ВЕРХНИЙ ВЫБОР МОДЕЛЕЙ ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-old-selector { display:none !important; } /* ------------------------------------------ НИЖНЕЕ МЕНЮ КЛИЕНТА ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientPanel #clientTabs { display:none !important; } /* ------------------------------------------ HERO — БОЛЬШАЯ МАШИНА ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { position:relative !important; width:100% !important; min-height:clamp(210px,52vw,330px); display:flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; margin:4px 0 12px !important; padding:18px 14px 12px !important; border-radius:28px !important; background: radial-gradient( ellipse at 50% 75%, rgba(194,203,214,.36) 0%, rgba(221,227,234,.20) 30%, rgba(245,248,251,0) 66% ), linear-gradient( 180deg, #f8fafc 0%, #eef2f6 100% ) !important; overflow:hidden !important; } body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image { display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:300px !important; object-fit:contain !important; object-position:center !important; margin:auto !important; filter: drop-shadow( 0 15px 12px rgba(26,35,48,.13) ); transition: transform .22s ease, opacity .18s ease; } /* У двух PNG одинаковый canvas, но видимый автомобиль №2 немного уже. Компенсируем только визуальный размер. */ body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image[data-garage-v3-model="2"] { transform:scale(1.055); } /* ------------------------------------------ КАРАНДАШ ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil { position:absolute !important; top:13px !important; right:14px !important; width:38px !important; height:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; border:1px solid rgba(30,41,59,.10) !important; border-radius:50% !important; background: rgba(255,255,255,.88) !important; color:#182230 !important; box-shadow: 0 5px 18px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.95) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:8 !important; cursor:pointer; } body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil svg { display:block; width:17px; height:17px; } /* ------------------------------------------ ОПЛАТА НА ТОЙ ЖЕ ГЛАВНОЙ ------------------------------------------ */ body.client-garage-mode.client-garage-v3 #clientPanel #clientDebts.garage-v3-inline-debts { display:block !important; margin:18px 0 0 !important; padding:0 0 8px !important; background:transparent !important; color:#111827 !important; } body.client-garage-mode.client-garage-v3 #clientPanel #clientDebts.garage-v3-no-debt { display:none !important; } body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts .card { color:#111827 !important; background: rgba(255,255,255,.82) !important; border: 1px solid rgba(148,163,184,.20) !important; box-shadow: 0 10px 30px rgba(15,23,42,.055) !important; } body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts .muted { color:#778394 !important; } body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts .section-title { color:#111827 !important; } body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts .primary { color:#fff !important; background: linear-gradient( 180deg, #202936 0%, #111827 100% ) !important; border-color:transparent !important; } /* ========================================================== MODEL PICKER Живёт внутри #clientPanel. ========================================================== */ body.client-garage-mode.client-garage-v3 #clientPanel #garageV3Picker { display:none; position:fixed; inset:0; z-index:10000; align-items:flex-end; justify-content:center; padding: 18px 14px calc( 14px + max( env(safe-area-inset-bottom,0px), var(--tg-content-safe-area-inset-bottom,0px) ) ); box-sizing:border-box; background: rgba(15,23,42,.28); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); } body.client-garage-mode.client-garage-v3 #clientPanel #garageV3Picker.is-open { display:flex; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-picker-sheet { width:min(520px,100%); box-sizing:border-box; padding:18px 16px 16px; border: 1px solid rgba(148,163,184,.20); border-radius:30px; background: rgba(249,251,253,.97); box-shadow: 0 24px 70px rgba(15,23,42,.22); } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-picker-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-picker-title { font-size:20px; line-height:1.2; font-weight:700; color:#111827; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-picker-close { width:34px; height:34px; padding:0; border:0; border-radius:50%; background:#e9eef4; color:#263241; font-size:20px; line-height:34px; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-picker-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice { position:relative; min-width:0; padding:10px 9px 12px; border: 1.5px solid rgba(148,163,184,.22); border-radius:22px; background:#f2f5f8; color:#111827; box-shadow:none; overflow:hidden; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice.is-selected { border-color:#283444; background:#f8fafc; box-shadow: 0 0 0 1px rgba(40,52,68,.08); } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice-media { height:92px; display:flex; align-items:center; justify-content:center; overflow:hidden; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice-media img { display:block; width:100%; height:100%; object-fit:contain; filter: drop-shadow( 0 9px 8px rgba(15,23,42,.12) ); } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice[data-garage-v3-choice="2"] .garage-v3-choice-media img { transform:scale(1.055); } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice-name { display:block; margin-top:4px; text-align:center; font-size:14px; font-weight:650; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice-check { position:absolute; top:9px; right:9px; width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#263241; color:#fff; font-size:13px; font-weight:800; opacity:0; transform:scale(.85); transition: opacity .16s ease, transform .16s ease; } body.client-garage-mode.client-garage-v3 #clientPanel .garage-v3-choice.is-selected .garage-v3-choice-check { opacity:1; transform:scale(1); } /* CLIENT_GARAGE_V3_FLAT_FIX */ body.client-garage-mode{ background: linear-gradient(180deg,#edf1f5 0%,#f4f6f8 100%) !important; color:#111827 !important; } body.client-garage-mode .shell{ background: transparent !important; box-shadow: none !important; border: none !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; } body.client-garage-mode #clientPanel{ background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 16px 24px !important; } body.client-garage-mode #clientHome{ background: transparent !important; box-shadow: none !important; border: none !important; padding-bottom: 8px !important; } /* прячем старые клиентские табы/нижнее меню */ body.client-garage-mode #clientTabs, body.client-garage-mode .client-bottom-nav, body.client-garage-mode .garage-bottom-nav, body.client-garage-mode nav[data-client-nav], body.client-garage-mode nav[data-client-tabs]{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; overflow:hidden !important; } /* убираем вложенную "карточность" */ body.client-garage-mode .garage-main, body.client-garage-mode .garage-app, body.client-garage-mode .garage-screen, body.client-garage-mode .garage-layout, body.client-garage-mode .garage-surface, body.client-garage-mode .garage-wrap{ background: transparent !important; box-shadow: none !important; border: none !important; } /* чуть аккуратнее верхний блок */ body.client-garage-mode .garage-hero, body.client-garage-mode .garage-header{ background: linear-gradient(180deg,#dfe6ec 0%,#edf1f5 100%) !important; box-shadow: none !important; border: none !important; } /* если где-то осталась нижняя полоса safe-area */ body.client-garage-mode .safe-bottom, body.client-garage-mode .bottom-safe{ display:none !important; } /* ========================================================= CLIENT_GARAGE_FINAL_DIRECT_V5 Approved light premium layout CLIENT ONLY ========================================================= */ body.client-garage-mode.client-garage-v3 { --garage-v5-bg:#edf4f9; --garage-v5-text:#081526; --garage-v5-muted:#738196; --garage-v5-card:#f8fbfd; color: var(--garage-v5-text) !important; background: linear-gradient( 180deg, #edf4f9 0%, #edf4f9 9%, #eaf2f8 52%, #e1ebf3 100% ) !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", Arial, sans-serif !important; -webkit-font-smoothing: antialiased; } body.client-garage-mode.client-garage-v3::before { background: linear-gradient( 180deg, #edf4f9 0%, #edf4f9 10%, #eaf2f8 54%, #e1ebf3 100% ) !important; } /* ------------------------------------------- ONE SURFACE / NO APP-ON-BACKGROUND FEEL ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .app { max-width: 520px !important; margin: 0 auto !important; padding-left: 18px !important; padding-right: 18px !important; padding-bottom: calc( 32px + max( env(safe-area-inset-bottom,0px), var(--tg-content-safe-area-inset-bottom,0px) ) ) !important; background: transparent !important; } body.client-garage-mode.client-garage-v3 .shell { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome, body.client-garage-mode.client-garage-v3 .client-garage { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.client-garage-mode.client-garage-v3 #clientPanel { padding: 0 0 22px !important; } /* ------------------------------------------- NO BOTTOM MENU ------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientTabs, body.client-garage-mode.client-garage-v3 .client-bottom-nav, body.client-garage-mode.client-garage-v3 .garage-bottom-nav, body.client-garage-mode.client-garage-v3 nav[data-client-nav], body.client-garage-mode.client-garage-v3 nav[data-client-tabs] { display: none !important; } /* ------------------------------------------- CLIENT MAIN ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .client-garage { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------- TITLE ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-header { margin: 22px 0 11px !important; padding: 0 !important; text-align: center !important; background: transparent !important; } body.client-garage-mode.client-garage-v3 .garage-title { margin: 0 !important; padding: 0 !important; color: #071426 !important; font-size: clamp(38px,10vw,48px) !important; line-height: 1.05 !important; font-weight: 430 !important; letter-spacing: .15em !important; } body.client-garage-mode.client-garage-v3 .garage-tagline { margin: 12px 0 0 !important; color: #78869a !important; font-size: 10.5px !important; line-height: 1 !important; font-weight: 520 !important; letter-spacing: .31em !important; text-transform: uppercase !important; } /* ------------------------------------------- OLD TOP MODEL SELECTOR GONE ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-visuals, body.client-garage-mode.client-garage-v3 .garage-v3-old-selector { display: none !important; } /* ------------------------------------------- HERO No rectangle/background behind car ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-hero { position: relative !important; width: 100% !important; min-height: clamp(260px,68vw,345px) !important; margin: 0 0 4px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.client-garage-mode.client-garage-v3 .garage-hero::after { display: none !important; } body.client-garage-mode.client-garage-v3 .garage-v3-hero-wrap { position: relative !important; width: 100% !important; min-height: inherit !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.client-garage-mode.client-garage-v3 .garage-hero img, body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image { display: block !important; width: 108% !important; max-width: 108% !important; height: auto !important; max-height: 328px !important; margin: auto !important; object-fit: contain !important; object-position: center center !important; filter: drop-shadow( 0 17px 13px rgba(44,58,75,.17) ) !important; transform-origin: center center !important; } body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="2" ] { transform: scale(1.055) !important; } body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="1" ] { transform: scale(1) !important; } /* ------------------------------------------- PENCIL ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-v3-pencil { position: absolute !important; top: 7px !important; right: 1px !important; width: 46px !important; height: 46px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(255,255,255,.96) !important; border-radius: 50% !important; background: rgba(251,253,255,.91) !important; color: #152335 !important; box-shadow: 0 10px 25px rgba(45,62,81,.12) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 8 !important; } body.client-garage-mode.client-garage-v3 .garage-v3-pencil svg { width: 18px !important; height: 18px !important; } /* ------------------------------------------- MAIN GLASS CARD ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-card { margin: 0 2px 31px !important; padding: 23px 21px 21px !important; border: 1.2px solid rgba(255,255,255,.94) !important; border-radius: 34px !important; color: #081526 !important; background: linear-gradient( 145deg, rgba(255,255,255,.88) 0%, rgba(247,250,253,.72) 100% ) !important; box-shadow: 0 19px 52px rgba(59,78,99,.10) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body.client-garage-mode.client-garage-v3 .garage-card-head { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: start !important; gap: 14px !important; } body.client-garage-mode.client-garage-v3 .garage-identity { min-width: 0; } body.client-garage-mode.client-garage-v3 .garage-brand { margin: 0 !important; color: #071426 !important; font-size: 24px !important; line-height: 1.12 !important; font-weight: 730 !important; letter-spacing: -.025em !important; overflow-wrap: anywhere; } body.client-garage-mode.client-garage-v3 .garage-plate { margin-top: 7px !important; color: #77859a !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: .025em !important; } /* ------------------------------------------- STATUS — approved two-line alignment ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-status { min-width: 166px !important; min-height: 72px !important; padding: 12px 15px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 11px !important; border: 0 !important; border-radius: 23px !important; color: #0b1829 !important; background: rgba(228,236,244,.82) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.63) !important; white-space: normal !important; } body.client-garage-mode.client-garage-v3 .garage-dot { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; border-radius: 50% !important; background: #afbdcc !important; box-shadow: 0 0 0 6px rgba(175,189,204,.17) !important; } body.client-garage-mode.client-garage-v3 .garage-status.ok .garage-dot { background: #30c96a !important; box-shadow: 0 0 0 6px rgba(48,201,106,.14) !important; } body.client-garage-mode.client-garage-v3 .garage-status.warn .garage-dot { background: #ff5969 !important; box-shadow: 0 0 0 6px rgba(255,89,105,.13) !important; } body.client-garage-mode.client-garage-v3 .garage-status-copy, body.client-garage-mode.client-garage-v3 .garage-status > div { min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: 3px !important; text-align: left !important; } body.client-garage-mode.client-garage-v3 .garage-status-title { margin: 0 !important; color: #0b1728 !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 730 !important; white-space: nowrap !important; } body.client-garage-mode.client-garage-v3 .garage-status-sub { margin: 0 !important; color: #778599 !important; font-size: 11.5px !important; line-height: 1.2 !important; font-weight: 450 !important; white-space: nowrap !important; } /* ------------------------------------------- STATS ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-stats { display: grid !important; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) !important; gap: 18px !important; align-items: stretch !important; margin: 23px 0 0 !important; padding: 19px 0 2px !important; border-top: 1px solid rgba(124,143,164,.12) !important; } body.client-garage-mode.client-garage-v3 .garage-stat { min-width: 0; } body.client-garage-mode.client-garage-v3 .garage-line { width: 1px !important; height: auto !important; background: rgba(127,145,164,.17) !important; } body.client-garage-mode.client-garage-v3 .garage-label { color: #8592a4 !important; font-size: 11px !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } body.client-garage-mode.client-garage-v3 .garage-value { margin-top: 7px !important; color: #091526 !important; font-size: 22px !important; line-height: 1.05 !important; font-weight: 720 !important; } body.client-garage-mode.client-garage-v3 .garage-date { margin-top: 5px !important; color: #7a8799 !important; font-size: 11px !important; line-height: 1.2 !important; } /* ------------------------------------------- PAY ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-pay { width: 100% !important; min-height: 64px !important; margin: 20px 0 0 !important; padding: 0 23px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; border: 0 !important; border-radius: 23px !important; color: #fff !important; background: linear-gradient( 135deg, #344252 0%, #111b28 100% ) !important; box-shadow: 0 14px 29px rgba(21,32,46,.16) !important; font-size: 18px !important; font-weight: 620 !important; } body.client-garage-mode.client-garage-v3 .garage-pay:disabled { opacity: .88 !important; cursor: default !important; } body.client-garage-mode.client-garage-v3 .garage-pay-arrow { font-size: 24px !important; line-height: 1 !important; font-weight: 350 !important; } /* ------------------------------------------- MY CARS ------------------------------------------- */ body.client-garage-mode.client-garage-v3 .garage-section { margin: 0 7px 15px !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 9px !important; color: #091526 !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 740 !important; letter-spacing: -.03em !important; } body.client-garage-mode.client-garage-v3 .garage-count { min-width: 27px !important; height: 27px !important; padding: 0 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; color: #637388 !important; background: rgba(218,228,237,.86) !important; font-size: 12px !important; font-weight: 700 !important; } body.client-garage-mode.client-garage-v3 .garage-cars { display: grid !important; gap: 12px !important; margin: 0 2px !important; } body.client-garage-mode.client-garage-v3 .garage-car { min-height: 98px !important; padding: 12px 14px !important; display: grid !important; grid-template-columns: 116px minmax(0,1fr) auto !important; gap: 13px !important; align-items: center !important; border: 1px solid rgba(255,255,255,.94) !important; border-radius: 26px !important; color: #0a1627 !important; background: linear-gradient( 145deg, rgba(255,255,255,.87), rgba(247,250,253,.73) ) !important; box-shadow: 0 14px 36px rgba(57,75,96,.075) !important; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); } body.client-garage-mode.client-garage-v3 .garage-car.selected { border-color: rgba(255,255,255,.98) !important; } body.client-garage-mode.client-garage-v3 .garage-car-image-wrap { width: 116px; height: 74px; display: flex; align-items: center; justify-content: center; overflow: visible; } body.client-garage-mode.client-garage-v3 .garage-car-image { display: block !important; width: 112px !important; height: 70px !important; object-fit: contain !important; filter: drop-shadow( 0 7px 6px rgba(45,58,74,.13) ) !important; } body.client-garage-mode.client-garage-v3 .garage-car-copy { min-width: 0; } body.client-garage-mode.client-garage-v3 .garage-car-brand { color: #0b1728 !important; font-size: 16px !important; line-height: 1.15 !important; font-weight: 720 !important; overflow-wrap: anywhere; } body.client-garage-mode.client-garage-v3 .garage-car-plate { margin-top: 5px !important; color: #6f7e92 !important; font-size: 12.5px !important; font-weight: 520 !important; } body.client-garage-mode.client-garage-v3 .garage-car-state { margin-top: 5px !important; color: #8a96a6 !important; font-size: 11px !important; line-height: 1.2 !important; } body.client-garage-mode.client-garage-v3 .garage-chevron { color: #a5b1c0 !important; font-size: 28px !important; line-height: 1 !important; font-weight: 300 !important; } /* ------------------------------------------- PICKER ------------------------------------------- */ body.client-garage-mode.client-garage-v3 #garageV3Picker { background: rgba(28,40,54,.22) !important; } body.client-garage-mode.client-garage-v3 .garage-v3-picker-sheet { border: 1px solid rgba(255,255,255,.96) !important; border-radius: 30px !important; background: rgba(247,251,254,.98) !important; box-shadow: 0 28px 75px rgba(39,54,72,.22) !important; } body.client-garage-mode.client-garage-v3 .garage-v3-picker-title { color: #091526 !important; } body.client-garage-mode.client-garage-v3 .garage-v3-choice { color: #0a1728 !important; background: #edf3f8 !important; border-color: rgba(125,145,166,.18) !important; } body.client-garage-mode.client-garage-v3 .garage-v3-choice.is-selected { border-color: #263749 !important; background: #f9fbfd !important; } /* ------------------------------------------- DEBT DETAILS — same visual family ------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts { color: #091526 !important; background: transparent !important; } body.client-garage-mode.client-garage-v3 #clientDebts.garage-v3-inline-debts .card { color: #091526 !important; background: rgba(249,252,254,.86) !important; border: 1px solid rgba(255,255,255,.94) !important; box-shadow: 0 14px 35px rgba(57,75,96,.07) !important; } /* ------------------------------------------- SMALL PHONES ------------------------------------------- */ @media(max-width:390px){ body.client-garage-mode.client-garage-v3 .app { padding-left: 14px !important; padding-right: 14px !important; } body.client-garage-mode.client-garage-v3 .garage-card { padding: 21px 17px 19px !important; } body.client-garage-mode.client-garage-v3 .garage-status { min-width: 145px !important; padding: 11px 12px !important; } body.client-garage-mode.client-garage-v3 .garage-status-title { font-size: 12.5px !important; } body.client-garage-mode.client-garage-v3 .garage-status-sub { font-size: 10px !important; } body.client-garage-mode.client-garage-v3 .garage-car { grid-template-columns: 101px minmax(0,1fr) auto !important; } body.client-garage-mode.client-garage-v3 .garage-car-image-wrap { width: 101px; } body.client-garage-mode.client-garage-v3 .garage-car-image { width: 100px !important; } } /* ========================================================= CLIENT_GARAGE_VISUAL_V31 ONE SURFACE / NO HERO ISLAND ========================================================= */ /* --------------------------------------------------------- ЕДИНЫЙ ФОН ВСЕГО ЛК Светлый центр + более холодные/тёмные края. Никаких отдельных фоновых слоёв app/shell. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 { min-height:100vh !important; min-height:100dvh !important; margin:0 !important; background: radial-gradient( ellipse 72% 38% at 50% 7%, rgba(255,255,255,.96) 0%, rgba(249,252,255,.86) 38%, rgba(234,242,249,.32) 68%, rgba(220,231,241,0) 100% ), radial-gradient( ellipse 86% 58% at 50% 48%, rgba(250,253,255,.92) 0%, rgba(239,246,251,.72) 46%, rgba(214,227,239,.24) 78%, rgba(195,212,227,.06) 100% ), linear-gradient( 180deg, #dce8f2 0%, #edf4f9 25%, #f2f7fb 51%, #e7f0f7 76%, #d7e4ee 100% ) !important; background-attachment:fixed !important; color:#101827 !important; } /* --------------------------------------------------------- УБИРАЕМ ЭФФЕКТ: "приложение лежит поверх собственного background" --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome, body.client-garage-mode.client-garage-v3 #clientHome main { background:transparent !important; background-image:none !important; box-shadow:none !important; border-color:transparent !important; } body.client-garage-mode.client-garage-v3 .app { min-height:100vh !important; min-height:100dvh !important; width:100% !important; padding:0 !important; margin:0 !important; } body.client-garage-mode.client-garage-v3 .shell { width:100% !important; max-width:640px !important; margin:0 auto !important; box-sizing:border-box !important; border:0 !important; border-radius:0 !important; overflow:visible !important; padding-left:14px !important; padding-right:14px !important; } body.client-garage-mode.client-garage-v3 #clientPanel { width:100% !important; max-width:none !important; margin:0 !important; box-sizing:border-box !important; border:0 !important; border-radius:0 !important; overflow:visible !important; } /* --------------------------------------------------------- НИЖНЕЕ МЕНЮ — УБРАТЬ ПОЛНОСТЬЮ Не важно, находится оно внутри clientPanel или рядом. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientTabs { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; position:absolute !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; max-width:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } /* --------------------------------------------------------- HERO КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: больше НЕТ белой/серой карточки вокруг машины. Wrapper теперь — просто область позиционирования картинки и карандаша на ОБЩЕМ фоне страницы. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:clamp( 230px, 57vw, 355px ) !important; box-sizing:border-box !important; /* ВАЖНО: никакого островка */ background:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; margin: 2px 0 4px 0 !important; padding: 4px 0 3px 0 !important; overflow:visible !important; isolation:auto !important; } /* Убираем возможные декоративные псевдослои. */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap::before, body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap::after { display:none !important; content:none !important; } /* --------------------------------------------------------- МАШИНА Только PNG + естественная тень. Никакого прямоугольника под картинкой. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image { display:block !important; width:100% !important; max-width:100% !important; height:auto !important; max-height:335px !important; margin: auto 0 !important; object-fit:contain !important; object-position:center !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; filter: drop-shadow( 0 15px 10px rgba(35,47,61,.13) ) !important; transition: transform .20s ease, opacity .16s ease !important; } /* Модель №2 немного увеличиваем, чтобы визуально приблизить её к референсу. */ body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image[ data-garage-v3-model="2" ] { transform:scale(1.085) !important; } /* Модель №1 чуть спокойнее. */ body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image[ data-garage-v3-model="1" ] { transform:scale(1.01) !important; } /* --------------------------------------------------------- КАРАНДАШ Он остаётся "плавающим", но уже непосредственно над общим фоном, а не внутри белой hero-карточки. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil { top:7px !important; right:5px !important; width:38px !important; height:38px !important; border: 1px solid rgba(255,255,255,.88) !important; border-radius:50% !important; background: rgba(255,255,255,.91) !important; color:#142033 !important; box-shadow: 0 7px 22px rgba(42,57,72,.11), inset 0 1px 0 rgba(255,255,255,.95) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* --------------------------------------------------------- ОСНОВНАЯ ИНФО-КАРТОЧКА Карточка остаётся — как на хорошем макете. Но тень мягче, чтобы она не выглядела ещё одним отдельным "экраном". --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-card, body.client-garage-mode.client-garage-v3 #clientHome .garage-main-card { background: rgba(255,255,255,.76) !important; border: 1px solid rgba(255,255,255,.82) !important; box-shadow: 0 14px 38px rgba(65,82,99,.07) !important; backdrop-filter: blur(13px) !important; -webkit-backdrop-filter: blur(13px) !important; } /* --------------------------------------------------------- МОИ АВТО Сохраняем карточку, но без тяжёлой внешней тени. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-cars { background:transparent !important; box-shadow:none !important; } /* --------------------------------------------------------- Убираем горизонтальные артефакты / выход за края. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3, body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel { overflow-x:hidden !important; } /* --------------------------------------------------------- На узком iPhone сохраняем нормальные края. --------------------------------------------------------- */ @media (max-width:430px){ body.client-garage-mode.client-garage-v3 .shell { padding-left:12px !important; padding-right:12px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { min-height:255px !important; margin-top:0 !important; } body.client-garage-mode.client-garage-v3 #clientHome img.garage-v3-hero-image[ data-garage-v3-model="2" ] { transform:scale(1.075) !important; } } /* ========================================================== CLIENT_GARAGE_EXACT_V33 Exact selectors from current PROD DOM/CSS ========================================================== */ /* ========================================================== 1. REAL BACKGROUND Более тёмные холодные края + светлый центр. ========================================================== */ body.client-garage-mode.client-garage-v3 { background: #d6e3ed !important; min-height: 100vh !important; min-height: 100dvh !important; } /* Используем существующий body::before, который уже находится ПОД .app. */ body.client-garage-mode.client-garage-v3::before { content:"" !important; position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; opacity:1 !important; background: /* светлая центральная область сверху */ radial-gradient( ellipse 68% 39% at 50% 20%, rgba(255,255,255,.98) 0%, rgba(250,252,254,.92) 27%, rgba(239,246,251,.63) 55%, rgba(222,234,243,.12) 78%, rgba(205,220,232,0) 100% ), /* дополнительный мягкий свет в центре страницы */ radial-gradient( ellipse 64% 53% at 50% 56%, rgba(250,253,255,.84) 0%, rgba(242,248,252,.57) 48%, rgba(222,234,244,.07) 100% ), /* именно боковой градиент как на референсе */ linear-gradient( 90deg, #bfd0de 0%, #ccdae6 6%, #dde8f0 15%, #edf4f8 28%, #f5f8fb 44%, #f7f9fb 50%, #f5f8fb 56%, #edf4f8 72%, #dde8f0 85%, #ccdae6 94%, #bfd0de 100% ) !important; } /* Всё содержимое остаётся поверх нашего background. */ body.client-garage-mode.client-garage-v3 .app { position:relative !important; z-index:1 !important; background: transparent !important; } body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome, body.client-garage-mode.client-garage-v3 .client-garage { background: transparent !important; background-image: none !important; } /* ========================================================== 2. TITLE Сейчас он слишком высоко. Перемещаем вниз, ближе к композиции из референса. ========================================================== */ body.client-garage-mode.client-garage-v3 .garage-header { margin: 72px 0 5px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } body.client-garage-mode.client-garage-v3 .garage-tagline { margin: 10px 0 0 !important; } /* ========================================================== 3. HERO ЭТО ГЛАВНАЯ ПРИЧИНА ПУСТОГО МЕСТА. Убираем: min-height clamp(260px,68vw,345px) height 225px ========================================================== */ body.client-garage-mode.client-garage-v3 .garage-hero { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 8px 0 0 !important; padding: 0 !important; display: block !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================== 4. JS WRAPPER Убираем inherited min-height и V3.1 = 255px. ========================================================== */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: block !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================== 5. CAR IMAGE Теперь высота определяется самой ОБРЕЗАННОЙ PNG, а не искусственным hero контейнером. ========================================================== */ body.client-garage-mode.client-garage-v3 .garage-hero img.garage-v3-hero-image, body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image { display: block !important; width: 106% !important; max-width: 106% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 -3% !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow( 0 12px 9px rgba(38,53,68,.15) ) !important; } /* После ручной crop больше не растягиваем canvas scale(). */ body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="1" ], body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="2" ] { transform: none !important; } /* ========================================================== 6. INFO CARD Подтягиваем непосредственно к машине. ========================================================== */ body.client-garage-mode.client-garage-v3 .garage-card { margin: 3px 2px 27px !important; } /* ========================================================== 7. PENCIL Теперь относительно реальной высоты автомобиля. ========================================================== */ body.client-garage-mode.client-garage-v3 .garage-v3-pencil { top: 4px !important; right: 2px !important; } /* ========================================================== 8. MOBILE Никакого возврата min-height:255px. ========================================================== */ @media (max-width:430px) { body.client-garage-mode.client-garage-v3 .garage-header { margin-top: 66px !important; } body.client-garage-mode.client-garage-v3 .garage-hero, body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { height: auto !important; min-height: 0 !important; max-height: none !important; } body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="1" ], body.client-garage-mode.client-garage-v3 img.garage-v3-hero-image[ data-garage-v3-model="2" ] { transform: none !important; } } /* ========================================================== 9. BOTTOM NAV IS DEFINITELY GONE ========================================================== */ body.client-garage-mode.client-garage-v3 #clientTabs, body.client-garage-mode.client-garage-v3 .garage-client-nav { display: none !important; } /* CLIENT_GARAGE_V33_SPACING_PENCIL_FIX */ body.client-garage-mode.client-garage-v3 .garage-hero { margin: 28px 0 23px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { margin:0 !important; padding:0 !important; min-height:0 !important; height:auto !important; } body.client-garage-mode.client-garage-v3 .garage-v3-pencil { top:-18px !important; right:2px !important; width:46px !important; height:46px !important; } /* CLIENT_GARAGE_CAR_SWITCH_V38 */ /* ========================================================= STATUS — больше не выходит за карточку ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-card-head { gap:10px !important; align-items:flex-start !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-identity { min-width:0 !important; flex: 1 1 auto !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status { box-sizing:border-box !important; width:44% !important; min-width:0 !important; max-width:220px !important; flex: 0 1 44% !important; padding: 14px 12px !important; overflow:hidden !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-copy { min-width:0 !important; width:100% !important; overflow:hidden !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title { width:100% !important; max-width:100% !important; font-size:15px !important; line-height:1.08 !important; white-space:normal !important; word-break:normal !important; overflow-wrap:break-word !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-sub { width:100% !important; max-width:100% !important; margin-top:3px !important; font-size:12px !important; line-height:1.15 !important; white-space:normal !important; overflow-wrap:break-word !important; } /* ========================================================= PAYMENT LOCK ========================================================= */ .garage-pay-note-v38 { margin-top:9px; padding: 10px 12px; border-radius:14px; background: rgba( 255, 89, 108, .085 ); color:#a14552; font-size:12px; font-weight:650; line-height:1.25; } /* ========================================================= ONE "МОИ АВТО" BUTTON ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-cars-v38-trigger { width:100% !important; box-sizing:border-box !important; margin: 16px 0 0 !important; padding: 15px 16px !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap:12px !important; border: 1px solid rgba( 39, 61, 84, .10 ) !important; border-radius:24px !important; background: rgba( 255, 255, 255, .74 ) !important; color:#0c182a !important; box-shadow: 0 9px 28px rgba( 44, 66, 88, .065 ) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor:pointer !important; -webkit-tap-highlight-color: transparent !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-cars-v38-trigger:active { transform: scale(.985) !important; background: rgba( 240, 247, 252, .92 ) !important; } .garage-cars-v38-trigger-left, .garage-cars-v38-trigger-right { display:flex; align-items:center; min-width:0; } .garage-cars-v38-trigger-left { gap:9px; flex: 0 0 auto; } .garage-cars-v38-trigger-title { font-size:25px; line-height:1; font-weight:800; } .garage-cars-v38-trigger-right { gap:9px; justify-content:flex-end; flex: 1 1 auto; } .garage-cars-v38-trigger-current { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: rgba( 12, 24, 42, .52 ); font-size:13px; font-weight:600; } .garage-cars-v38-trigger-circle { width:38px; height:38px; flex: 0 0 38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: rgba( 255, 255, 255, .95 ); border: 1px solid rgba( 30, 52, 74, .08 ); box-shadow: 0 5px 15px rgba( 37, 56, 75, .08 ); font-size:19px; font-weight:700; } /* ========================================================= CAR PICKER ========================================================= */ #garageCarsV38Picker { position:fixed; inset:0; z-index:40000; display:none; align-items:flex-end; justify-content:center; } #garageCarsV38Picker.is-open { display:flex; } .garage-cars-v38-backdrop { position:absolute; inset:0; background: rgba( 21, 33, 47, .26 ); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .garage-cars-v38-sheet { position:relative; z-index:1; width: min( 100%, 560px ); max-height: min( 70vh, 620px ); overflow-y:auto; box-sizing:border-box; padding: 20px 16px calc( 22px + env( safe-area-inset-bottom, 0px ) ); border-radius: 30px 30px 0 0; background: rgba( 245, 249, 252, .97 ); box-shadow: 0 -16px 50px rgba( 20, 37, 55, .16 ); -webkit-overflow-scrolling: touch; } .garage-cars-v38-head { display:flex; align-items:center; justify-content: space-between; gap:16px; margin-bottom:14px; } .garage-cars-v38-title { color:#0b1729; font-size:27px; font-weight:800; } .garage-cars-v38-subtitle { margin-top:3px; color: rgba( 11, 23, 41, .45 ); font-size:13px; } .garage-cars-v38-close { width:44px; height:44px; flex: 0 0 44px; border:0; border-radius:50%; background:#fff; color:#142034; font-size:27px; line-height:1; cursor:pointer; box-shadow: 0 6px 18px rgba( 34, 53, 73, .08 ); } .garage-cars-v38-item { width:100%; box-sizing:border-box; display:grid; grid-template-columns: 112px minmax(0,1fr) 34px; align-items:center; gap:13px; margin-top:10px; padding: 12px 12px; border: 1px solid rgba( 38, 59, 81, .09 ); border-radius:21px; background: rgba( 255, 255, 255, .80 ); color:#111d30; text-align:left; cursor:pointer; } .garage-cars-v38-item.selected { border-color: rgba( 35, 67, 97, .26 ); background:#fff; box-shadow: 0 7px 20px rgba( 43, 65, 87, .07 ); } .garage-cars-v38-image { width:112px; height:64px; display:flex; align-items:center; justify-content:center; } .garage-cars-v38-image img { display:block; width:112px; height:64px; object-fit:contain; object-position:center; } .garage-cars-v38-copy { min-width:0; } .garage-cars-v38-brand { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:17px; font-weight:800; } .garage-cars-v38-plate { margin-top:3px; color: rgba( 17, 29, 48, .59 ); font-size:14px; font-weight:600; } .garage-cars-v38-state { margin-top:4px; color: rgba( 17, 29, 48, .42 ); font-size:12px; } .garage-cars-v38-check { display:flex; align-items:center; justify-content:center; color: rgba( 17, 29, 48, .55 ); font-size:22px; font-weight:800; } /* ========================================================= PAYMENT: COPY остаются normal clickable ========================================================= */ body.client-garage-mode.client-garage-v3 #clientDebts [data-copy-card], body.client-garage-mode.client-garage-v3 #clientDebts [data-copy-amount] { pointer-events:auto !important; cursor:pointer !important; filter:none !important; } /* small screens */ @media(max-width:390px){ body.client-garage-mode.client-garage-v3 #clientHome .garage-status { width:43% !important; max-width:180px !important; } .garage-cars-v38-trigger-title { font-size:23px; } .garage-cars-v38-trigger-current { max-width:125px; font-size:12px; } .garage-cars-v38-item { grid-template-columns: 96px minmax(0,1fr) 30px; } .garage-cars-v38-image, .garage-cars-v38-image img { width:96px; height:58px; } } /* ADMIN CARS FULLSCREEN V2 — PROD */ .admin-car-source-card { display: none !important; } .admin-car-compact-row { position: relative; display: flex; width: 100%; min-height: 72px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; margin: 9px 0; padding: 13px 48px 13px 16px; box-sizing: border-box; border: 1px solid rgba(125,145,255,.22); border-radius: 18px; background: linear-gradient( 145deg, rgba(39,70,180,.32), rgba(15,30,90,.32) ); color: #fff; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } .admin-car-compact-row:active { transform: scale(.993); } .admin-car-compact-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.2; font-weight: 750; color: #fff; } .admin-car-compact-plate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; letter-spacing: .07em; color: rgba(226,232,255,.68); } .admin-car-compact-arrow { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); font-size: 32px; line-height: 1; font-weight: 300; color: rgba(231,235,255,.72); } /* FULLSCREEN CAR PAGE */ body.admin-cars-sheet-open { overflow: hidden !important; } .admin-cars-sheet-backdrop { position: fixed; z-index: 99990; top: 0; right: 0; bottom: 0; left: 0; display: block; padding: 0; margin: 0; background: linear-gradient( 180deg, #08143d 0%, #0b1747 48%, #09123a 100% ); overflow: hidden; } .admin-cars-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; background: transparent; color: #fff; box-shadow: none; } /* space for Telegram header */ .admin-cars-sheet-head { position: relative; flex: 0 0 auto; min-height: 70px; padding: calc(env(safe-area-inset-top) + 50px) 18px 14px; box-sizing: border-box; border-bottom: 1px solid rgba(123,145,255,.16); background: linear-gradient( 180deg, rgba(8,20,61,.98), rgba(8,20,61,.94) ); } .admin-cars-sheet-topline { display: flex; align-items: center; gap: 12px; } .admin-cars-sheet-back { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 40px; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 17px; line-height: 1; font-weight: 650; cursor: pointer; } .admin-cars-sheet-back-arrow { font-size: 27px; line-height: 1; transform: translateY(-1px); } .admin-cars-sheet-heading { min-width: 0; flex: 1; } .admin-cars-sheet-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; line-height: 1.15; font-weight: 780; color: #fff; } .admin-cars-sheet-plate { margin-top: 4px; font-size: 13px; line-height: 1.2; letter-spacing: .07em; color: rgba(220,227,255,.62); } /* scroll area */ .admin-cars-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 14px 120px; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: linear-gradient( 180deg, #0a1645 0%, #0a1747 100% ); } .admin-cars-modal-card.admin-car-source-card { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .admin-cars-modal-card .car-edit-grid { border-radius: 22px; padding: 18px 16px; background: linear-gradient( 150deg, rgba(26,48,129,.93), rgba(8,24,78,.96) ); border: 1px solid rgba(103,132,255,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015); } /* fix labels in dark theme */ .admin-cars-modal-card label, .admin-cars-modal-card b { color: #fff !important; } .admin-cars-modal-card .muted, .admin-cars-modal-card .toggle-local-note, .admin-cars-modal-card .white-note { color: rgba(221,228,255,.72) !important; } /* inputs */ .admin-cars-modal-card input, .admin-cars-modal-card textarea { color: #fff !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(151,171,255,.22) !important; } /* FOOTER */ .admin-cars-sheet-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: block; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(123,145,255,.17); background: linear-gradient( 180deg, rgba(8,20,61,.93), rgba(8,20,61,.99) ); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .admin-cars-sheet-save { width: 100%; min-height: 52px; margin: 0 !important; border: 0 !important; border-radius: 18px !important; color: #fff !important; background: linear-gradient( 135deg, #3159ff, #2845dd ) !important; box-shadow: 0 8px 24px rgba(40,74,255,.22); font-weight: 750 !important; } /* hide old extra modal buttons */ .admin-cars-sheet-done, .admin-cars-sheet-close { display: none !important; } @media (max-width: 430px) { .admin-cars-sheet-head { padding-left: 16px; padding-right: 16px; } .admin-cars-sheet-body { padding-left: 12px; padding-right: 12px; } .admin-cars-sheet-title { font-size: 19px; } } /* ================================================= ADMIN CARS V2.1 - no duplicate title/plate in fullscreen header - large safe Back button - native brand Save hidden visually ================================================= */ /* Header only contains Back now */ .admin-cars-sheet-topline { justify-content: flex-start !important; } /* Large Back button, deliberately away from Telegram's own Close control */ .admin-cars-sheet-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 132px !important; min-height: 48px !important; padding: 0 20px 0 15px !important; border: 1px solid rgba(132,157,255,.30) !important; border-radius: 16px !important; background: linear-gradient( 135deg, #3159ff, #2845dd ) !important; color: #fff !important; box-shadow: 0 7px 22px rgba(38,70,230,.22) !important; font-size: 17px !important; font-weight: 750 !important; -webkit-tap-highlight-color: transparent; } .admin-cars-sheet-back:active { transform: scale(.975); } .admin-cars-sheet-back-arrow { margin-right: 3px; font-size: 30px !important; font-weight: 400 !important; } /* * Brand has its own legacy/native Save button. * It stays in DOM and its original onclick stays alive, * but the administrator no longer sees a second Save. */ .admin-cars-modal-card [id^="garageBrandSave"] { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; } /* * Let the brand input use the space that was occupied * by the separate Save button. */ .admin-cars-modal-card .garage-admin-brand-row { display: block !important; } .admin-cars-modal-card .garage-admin-brand-row input { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* * Slightly reduce the fullscreen header because * duplicate car title/plate are gone. */ .admin-cars-sheet-head { padding-bottom: 12px !important; } /* ========================================== ADMIN CARS V2.2 — FLAT BRAND FIELD Remove separate translucent brand island and align brand with other fields ========================================== */ .admin-cars-modal-card .garage-admin-brand { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* same vertical rhythm as other form fields */ .admin-cars-modal-card .garage-admin-brand > label, .admin-cars-modal-card .garage-admin-brand label { display: block !important; margin: 0 0 10px !important; padding: 0 !important; color: #fff !important; font-size: inherit !important; font-weight: inherit !important; } /* remove row/card styling */ .admin-cars-modal-card .garage-admin-brand-row { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* brand input = same width/alignment as Name / Plate / Telegram */ .admin-cars-modal-card .garage-admin-brand-row input, .admin-cars-modal-card [id^="garageBrandInput"] { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* description should also sit directly under input, not inside a separate panel */ .admin-cars-modal-card .garage-admin-brand .muted, .admin-cars-modal-card .garage-admin-brand-note { margin-top: 9px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.client-garage-mode{ background: radial-gradient(120% 58% at 50% -6%, rgba(159,186,220,.42) 0%, rgba(159,186,220,.22) 28%, rgba(159,186,220,0) 62%), radial-gradient(30% 70% at 0% 50%, rgba(177,201,229,.42) 0%, rgba(177,201,229,0) 72%), radial-gradient(30% 70% at 100% 50%, rgba(177,201,229,.42) 0%, rgba(177,201,229,0) 72%), linear-gradient(180deg, #eef4fb 0%, #ebf2fa 48%, #e5eef8 100%) !important; } body.client-garage-mode .client-garage-page, body.client-garage-mode .client-garage-app, body.client-garage-mode .cg-page, body.client-garage-mode .cg-app, body.client-garage-mode [data-client-garage="page"]{ min-height:100vh !important; height:100vh !important; overflow:hidden !important; background:transparent !important; padding-top:26px !important; } body.client-garage-mode .client-garage-scroll, body.client-garage-mode .cg-scroll, body.client-garage-mode [data-client-garage="scroll"]{ height:100% !important; overflow:hidden !important; padding-bottom:0 !important; } body.client-garage-mode .client-garage-header, body.client-garage-mode .cg-header, body.client-garage-mode [data-client-garage="header"]{ margin:54px 0 10px !important; } body.client-garage-mode .client-garage-title, body.client-garage-mode .cg-title, body.client-garage-mode [data-client-garage="title"]{ margin:0 0 8px !important; } body.client-garage-mode .client-garage-subtitle, body.client-garage-mode .cg-subtitle, body.client-garage-mode [data-client-garage="subtitle"]{ margin:0 0 10px !important; } body.client-garage-mode .client-garage-hero, body.client-garage-mode .cg-hero, body.client-garage-mode [data-client-garage="hero"]{ position:relative !important; margin-top:6px !important; margin-bottom:0 !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; } body.client-garage-mode .client-garage-visual, body.client-garage-mode .client-garage-main-visual, body.client-garage-mode .cg-visual, body.client-garage-mode .cg-main-visual, body.client-garage-mode [data-client-garage="visual"]{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 auto -4px !important; overflow:visible !important; } body.client-garage-mode .client-garage-visual img, body.client-garage-mode .client-garage-main-car, body.client-garage-mode .cg-main-car, body.client-garage-mode [data-client-garage="visual"] img{ display:block !important; width:100% !important; max-width:760px !important; height:auto !important; margin:0 auto !important; object-fit:contain !important; } body.client-garage-mode .client-garage-edit, body.client-garage-mode .client-garage-pencil, body.client-garage-mode .cg-edit-btn, body.client-garage-mode .cg-pencil, body.client-garage-mode [data-client-garage="edit-model"]{ position:absolute !important; right:12px !important; top:30% !important; /* уровень крыши */ transform:translateY(-50%) !important; z-index:30 !important; width:56px !important; height:56px !important; border-radius:50% !important; border:1px solid rgba(20,34,58,.08) !important; background:rgba(255,255,255,.94) !important; box-shadow:0 10px 28px rgba(26,40,62,.12) !important; } body.client-garage-mode .client-garage-card, body.client-garage-mode .client-garage-summary, body.client-garage-mode .cg-card, body.client-garage-mode .cg-summary, body.client-garage-mode [data-client-garage="summary"]{ margin-top:-6px !important; } body.client-garage-mode .client-garage-cars, body.client-garage-mode .client-garage-cars-list, body.client-garage-mode .cg-cars, body.client-garage-mode .cg-cars-list, body.client-garage-mode [data-client-garage="cars"]{ margin-top:12px !important; } body.client-garage-mode .client-garage-bottom-nav, body.client-garage-mode .client-bottom-nav, body.client-garage-mode .cg-bottom-nav, body.client-garage-mode .cg-tabs, body.client-garage-mode nav[data-client-garage="bottom-nav"]{ display:none !important; } /* ========================================================= CLIENT_GARAGE_VISUAL_V33 exact current V3 selectors ========================================================= */ /* --------------------------------------------------------- NO SCROLL — ТОЛЬКО CLIENT --------------------------------------------------------- */ html:has(body.client-garage-mode.client-garage-v3) { height:100% !important; overflow:hidden !important; overscroll-behavior:none !important; } body.client-garage-mode.client-garage-v3 { position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; height:100dvh !important; overflow:hidden !important; overscroll-behavior:none !important; margin:0 !important; background:#e9f2fa !important; } /* --------------------------------------------------------- НАСТОЯЩИЙ ВИДИМЫЙ GRADIENT Не z-index:-1. Он лежит ПОВЕРХ старых backgrounds, но ПОД интерфейсом. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3::before { content:"" !important; position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background: radial-gradient( ellipse 76% 28% at 50% 4%, rgba(255,255,255,.98) 0%, rgba(247,251,255,.88) 29%, rgba(217,232,246,.55) 59%, rgba(184,207,228,.19) 100% ), radial-gradient( ellipse 33% 78% at 0% 52%, rgba(146,181,214,.38) 0%, rgba(177,204,228,.22) 31%, rgba(210,227,241,.07) 68%, rgba(255,255,255,0) 100% ), radial-gradient( ellipse 33% 78% at 100% 52%, rgba(146,181,214,.38) 0%, rgba(177,204,228,.22) 31%, rgba(210,227,241,.07) 68%, rgba(255,255,255,0) 100% ), linear-gradient( 180deg, #d8e7f4 0%, #edf5fb 22%, #f5f9fc 48%, #edf5fb 73%, #d5e5f2 100% ) !important; } /* дополнительная мягкая виньетка по бокам */ body.client-garage-mode.client-garage-v3::after { content:"" !important; position:fixed !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background: linear-gradient( 90deg, rgba(92,132,166,.13) 0%, rgba(117,153,182,.055) 9%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 75%, rgba(117,153,182,.055) 91%, rgba(92,132,166,.13) 100% ) !important; } /* --------------------------------------------------------- ВСЕ ОСНОВНЫЕ CLIENT LAYERS ПРОЗРАЧНЫЕ --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome { position:relative !important; z-index:1 !important; background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } /* --------------------------------------------------------- ЧУТЬ ОПУСКАЕМ ВЕСЬ CLIENT UI --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientPanel { transform:translateY(16px) !important; height:calc(100dvh - 16px) !important; overflow:hidden !important; } /* --------------------------------------------------------- HERO — НЕ СОЗДАЁТ ОСТРОВ --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { position:relative !important; min-height:0 !important; height:auto !important; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; background:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; } /* --------------------------------------------------------- HERO IMAGE --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-image { display:block !important; width:100% !important; height:auto !important; margin: -3px auto -4px !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* --------------------------------------------------------- КАРАНДАШ X остаётся практически тем же. Y задаётся JS от реальной высоты изображения. --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil { right:4px !important; width:38px !important; height:38px !important; z-index:50 !important; margin:0 !important; transform:translateY(-50%) !important; } /* --------------------------------------------------------- НИЖНЕЕ МЕНЮ --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #clientTabs { display:none !important; visibility:hidden !important; position:absolute !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; pointer-events:none !important; } /* --------------------------------------------------------- MODAL выбора модели должен остаться поверх всего --------------------------------------------------------- */ body.client-garage-mode.client-garage-v3 #garageV3Picker { z-index:10000 !important; } /* --------------------------------------------------------- iPhone narrow --------------------------------------------------------- */ @media (max-width:430px) { body.client-garage-mode.client-garage-v3 #clientPanel { transform:translateY(13px) !important; height:calc(100dvh - 13px) !important; } } /* ========================================================= CLIENT_GARAGE_VISUAL_V34 FINAL POSITION / SCROLL / STRONGER GRADIENT ========================================================= */ /* ========================================================= SCROLL LOCK ========================================================= */ html:has(body.client-garage-mode.client-garage-v3), body.client-garage-mode.client-garage-v3 { width:100% !important; height:100% !important; max-height:100% !important; overflow:hidden !important; overflow-x:hidden !important; overflow-y:hidden !important; overscroll-behavior:none !important; -webkit-overflow-scrolling:auto !important; } body.client-garage-mode.client-garage-v3 { position:fixed !important; inset:0 !important; touch-action:manipulation !important; } body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome { overflow:hidden !important; overflow-x:hidden !important; overflow-y:hidden !important; overscroll-behavior:none !important; -webkit-overflow-scrolling:auto !important; } /* ========================================================= STRONGER PREMIUM GRADIENT ========================================================= */ body.client-garage-mode.client-garage-v3::before { background: radial-gradient( ellipse 78% 31% at 50% 2%, rgba(255,255,255,1) 0%, rgba(248,252,255,.96) 25%, rgba(217,234,249,.78) 53%, rgba(173,204,232,.40) 78%, rgba(146,184,218,.18) 100% ), radial-gradient( ellipse 39% 88% at -3% 51%, rgba(102,153,198,.46) 0%, rgba(132,174,210,.34) 28%, rgba(172,203,229,.18) 58%, rgba(218,234,247,.04) 86%, rgba(255,255,255,0) 100% ), radial-gradient( ellipse 39% 88% at 103% 51%, rgba(102,153,198,.46) 0%, rgba(132,174,210,.34) 28%, rgba(172,203,229,.18) 58%, rgba(218,234,247,.04) 86%, rgba(255,255,255,0) 100% ), radial-gradient( ellipse 75% 34% at 50% 100%, rgba(161,198,228,.27) 0%, rgba(207,226,241,.12) 58%, rgba(255,255,255,0) 100% ), linear-gradient( 180deg, #d0e3f3 0%, #e7f1f9 19%, #f5f9fc 43%, #f5f9fc 62%, #e5f0f8 82%, #ccdfef 100% ) !important; } /* Ещё заметнее подчёркиваем края. */ body.client-garage-mode.client-garage-v3::after { background: linear-gradient( 90deg, rgba(68,119,161,.22) 0%, rgba(93,139,176,.13) 5%, rgba(135,173,203,.055) 13%, rgba(255,255,255,0) 27%, rgba(255,255,255,0) 73%, rgba(135,173,203,.055) 87%, rgba(93,139,176,.13) 95%, rgba(68,119,161,.22) 100% ) !important; } /* ========================================================= CONTENT LOWER Было ~13–16 px. Теперь заметно ниже. ========================================================= */ body.client-garage-mode.client-garage-v3 #clientPanel { transform: translateY(27px) !important; height: calc( 100dvh - 27px ) !important; max-height: calc( 100dvh - 27px ) !important; overflow:hidden !important; } /* Не даём самому HOME создать дополнительный scroll-height. */ body.client-garage-mode.client-garage-v3 #clientHome { height:100% !important; max-height:100% !important; overflow:hidden !important; margin:0 !important; } /* ========================================================= HERO ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-wrap { margin-top:0 !important; margin-bottom:0 !important; overflow:visible !important; } /* ========================================================= PENCIL right оставляем на текущем хорошем месте. vertical position дальше уточняет JS. ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil { right:4px !important; width:38px !important; height:38px !important; z-index:100 !important; transform: translateY(-50%) !important; } /* ========================================================= NAV ABSOLUTELY DEAD ========================================================= */ body.client-garage-mode.client-garage-v3 #clientTabs { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; position:fixed !important; left:-99999px !important; top:-99999px !important; width:0 !important; height:0 !important; min-width:0 !important; min-height:0 !important; max-width:0 !important; max-height:0 !important; overflow:hidden !important; } /* ========================================================= iPhone narrow ========================================================= */ @media (max-width:430px){ body.client-garage-mode.client-garage-v3 #clientPanel { transform: translateY(24px) !important; height: calc( 100dvh - 24px ) !important; max-height: calc( 100dvh - 24px ) !important; } } /* ========================================================= CLIENT_GARAGE_VISUAL_V35 PAYMENT PAGE + PENCIL ========================================================= */ /* ========================================================= КАРАНДАШ JS выставит точную высоту, X оставляем как сейчас. ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-pencil { right:4px !important; z-index:100 !important; } /* ========================================================= HOME = NO SCROLL ========================================================= */ html:has( body.client-garage-mode.client-garage-v3:not(.garage-v35-payment-open) ), body.client-garage-mode.client-garage-v3:not(.garage-v35-payment-open) { overflow:hidden !important; overflow-y:hidden !important; overscroll-behavior:none !important; } /* ========================================================= PAYMENT = SCROLL ALLOWED Это ПЕРЕБИВАЕТ V3.4. ========================================================= */ html:has( body.client-garage-mode.client-garage-v3.garage-v35-payment-open ) { height:auto !important; min-height:100% !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:auto !important; -webkit-overflow-scrolling:touch !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open { position:relative !important; inset:auto !important; width:100% !important; height:auto !important; min-height:100dvh !important; max-height:none !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:auto !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-y !important; } /* app / shell тоже больше не блокируют payment */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open .app, body.client-garage-mode.client-garage-v3.garage-v35-payment-open .shell, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientPanel, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; overscroll-behavior:auto !important; -webkit-overflow-scrolling:touch !important; } /* В payment не нужен сдвиг V3.4 */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientPanel { transform:none !important; padding-bottom: calc( 35px + env(safe-area-inset-bottom,0px) ) !important; } /* HOME скрываем полностью */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientHome { display:none !important; } /* PAYMENT занимает нормальную страницу */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { display:block !important; visibility:visible !important; width:100% !important; margin:0 !important; box-sizing:border-box !important; padding: calc( 92px + env(safe-area-inset-top,0px) ) 14px 40px !important; color:#111827 !important; background:transparent !important; } /* убираем старый псевдо-заголовок */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts::before { display:none !important; content:none !important; } /* ========================================================= PAYMENT HEADER ========================================================= */ body.client-garage-mode.client-garage-v3 #garageV35PaymentHeader { display:flex; align-items:center; gap:14px; margin: 0 0 18px; min-height:42px; } body.client-garage-mode.client-garage-v3 #garageV35Back { width:auto !important; min-width:92px !important; height:42px !important; margin:0 !important; padding:0 16px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; border: 1px solid rgba(82,103,126,.12) !important; border-radius:21px !important; background: rgba(255,255,255,.82) !important; color:#172235 !important; font-size:15px !important; font-weight:650 !important; box-shadow: 0 6px 18px rgba(42,58,76,.07) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.client-garage-mode.client-garage-v3 #garageV35PaymentTitle { color:#111827; font-size:28px; line-height:1; font-weight:760; letter-spacing:-.4px; } /* ========================================================= PAYMENT CARDS ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .card { color:#111827 !important; background: rgba(255,255,255,.82) !important; border: 1px solid rgba(255,255,255,.86) !important; border-radius:28px !important; box-shadow: 0 12px 35px rgba(50,70,90,.07) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ========================================================= УБИРАЕМ БЕСПОЛЕЗНУЮ КНОПКУ "ОПЛАТИТЬ" В payment page реквизиты открываются автоматически. ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-client-pay-open] { display:none !important; } /* ========================================================= PAYMENT BOX ALWAYS OPEN ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [id^="clientPaymentBox"] { display:block !important; visibility:visible !important; opacity:1 !important; } /* ========================================================= COPY BUTTONS Теперь их реально видно. ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card], body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount] { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:44px !important; margin: 10px 0 0 !important; padding: 10px 14px !important; box-sizing:border-box !important; border: 1px solid rgba(95,116,139,.15) !important; border-radius:15px !important; background: #edf3f8 !important; color: #182437 !important; opacity:1 !important; font-size:14px !important; font-weight:700 !important; text-shadow:none !important; box-shadow:none !important; } /* чуть различим две copy кнопки */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card]::before { content:"⧉ "; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount]::before { content:"⧉ "; } /* ========================================================= Я ОПЛАТИЛ ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-client-paid] { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:54px !important; margin-top:18px !important; border:0 !important; border-radius:18px !important; background: linear-gradient( 180deg, #273445 0%, #111a28 100% ) !important; color:#fff !important; font-size:16px !important; font-weight:750 !important; opacity:1 !important; } /* текст-пояснение */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .muted { color:#7d8999 !important; } /* ========================================================= PAYMENT SECTION TITLES ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .section-title { color:#111827 !important; font-size:20px !important; font-weight:760 !important; margin: 18px 2px 10px !important; } /* ========================================================= PAYMENT PAGE — опускаем ниже Telegram chrome ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { padding-top: calc( 150px + max( env(safe-area-inset-top,0px), var(--tg-safe-area-inset-top,0px), var(--tg-content-safe-area-inset-top,0px) ) ) !important; padding-left:14px !important; padding-right:14px !important; padding-bottom:48px !important; box-sizing:border-box !important; } /* ========================================================= HEADER PAYMENT Назад всегда ниже Telegram buttons ========================================================= */ body.client-garage-mode.client-garage-v3 #garageV35PaymentHeader { position:sticky !important; top: calc( 82px + max( env(safe-area-inset-top,0px), var(--tg-safe-area-inset-top,0px), var(--tg-content-safe-area-inset-top,0px) ) ) !important; z-index:500 !important; display:flex !important; align-items:center !important; gap:14px !important; min-height:48px !important; margin: 0 0 24px !important; padding: 5px 4px !important; background: rgba(225,239,249,.86) !important; border-radius:24px !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; } body.client-garage-mode.client-garage-v3 #garageV35Back { position:relative !important; z-index:501 !important; min-width:105px !important; height:44px !important; padding: 0 16px !important; border: 1px solid rgba(73,95,118,.14) !important; border-radius:22px !important; background: rgba(255,255,255,.95) !important; color:#121b2a !important; font-size:16px !important; font-weight:750 !important; opacity:1 !important; pointer-events:auto !important; box-shadow: 0 7px 20px rgba(45,61,79,.09) !important; } body.client-garage-mode.client-garage-v3 #garageV35PaymentTitle { color:#111827 !important; font-size:28px !important; font-weight:780 !important; line-height:1 !important; } /* ========================================================= COPY BUTTONS ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card], body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount] { position:relative !important; cursor:pointer !important; transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease !important; -webkit-tap-highlight-color:transparent; } /* mouse / desktop */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card]:hover, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount]:hover { background:#e3edf5 !important; border-color: rgba(71,96,122,.25) !important; box-shadow: 0 5px 16px rgba(54,76,99,.08) !important; } /* iPhone tap */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card]:active, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount]:active { transform:scale(.97) !important; background:#d9e7f2 !important; } /* состояние после успешного копирования */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .garage-copy-success { background: #dcefe5 !important; border-color: rgba(44,122,79,.26) !important; color:#17643a !important; box-shadow: 0 6px 18px rgba(38,110,71,.09) !important; } /* ========================================================= TOAST "СКОПИРОВАНО" ========================================================= */ #garageCopyToast { position:fixed !important; left:50% !important; bottom: calc( 28px + env(safe-area-inset-bottom,0px) ) !important; transform: translate(-50%,20px) scale(.97); z-index:20000 !important; max-width: calc(100vw - 40px); padding: 12px 18px; border-radius:18px; background: rgba(21,31,45,.94); color:#fff; font-size:14px; font-weight:750; text-align:center; white-space:nowrap; box-shadow: 0 12px 35px rgba(10,20,32,.22); opacity:0; pointer-events:none; transition: opacity .18s ease, transform .18s ease; } #garageCopyToast.show { opacity:1; transform: translate(-50%,0) scale(1); } /* ========================================================= PAYMENT PAGE ========================================================= */ /* Payment начинается достаточно низко, чтобы Telegram chrome вообще не пересекался с UI. */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { padding-top: calc( 118px + max( env(safe-area-inset-top,0px), var(--tg-safe-area-inset-top,0px), var(--tg-content-safe-area-inset-top,0px) ) ) !important; padding-left:14px !important; padding-right:14px !important; padding-bottom: calc( 42px + env(safe-area-inset-bottom,0px) ) !important; box-sizing:border-box !important; } /* ========================================================= НОВЫЙ ЗАГОЛОВОК "ОПЛАТА" ========================================================= */ #garagePaymentV36Hero { width:100%; box-sizing:border-box; text-align:center; margin: 0 auto 18px; padding: 0 8px; } #garagePaymentV36Title { margin:0; color:#0b1730; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; font-size:48px; font-weight:500; line-height:1; letter-spacing:.075em; } /* ========================================================= СТАРЫЙ HEADER: теперь он только держит кнопку НАЗАД. ========================================================= */ body.client-garage-mode.client-garage-v3 #garageV35PaymentHeader { position:relative !important; top:auto !important; left:auto !important; right:auto !important; z-index:500 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; width:100% !important; min-height:54px !important; margin: 0 0 18px !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Старую надпись "Оплата" в этом header скрываем. Теперь есть новый большой title выше. */ body.client-garage-mode.client-garage-v3 #garageV35PaymentTitle { display:none !important; } /* ========================================================= BACK BUTTON Большое физическое поле нажатия. ========================================================= */ body.client-garage-mode.client-garage-v3 #garageV35Back { position:relative !important; z-index:510 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:136px !important; min-width:136px !important; max-width:136px !important; height:52px !important; min-height:52px !important; max-height:52px !important; margin:0 !important; padding: 0 18px !important; box-sizing:border-box !important; border: 1px solid rgba(73,95,118,.12) !important; border-radius:26px !important; background: rgba(255,255,255,.93) !important; color:#111b2d !important; font-size:17px !important; line-height:1 !important; font-weight:750 !important; cursor:pointer !important; pointer-events:auto !important; user-select:none !important; -webkit-user-select:none !important; -webkit-tap-highlight-color: transparent !important; box-shadow: 0 7px 20px rgba(42,61,82,.08) !important; } body.client-garage-mode.client-garage-v3 #garageV35Back:active { transform: scale(.97) !important; background: #e8f0f7 !important; } /* ========================================================= STATUS CHIP ON HOME Исправляем "Пока не выезжайте". ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status-wrap-v36 { box-sizing:border-box !important; width: min( 48vw, 238px ) !important; min-width:0 !important; max-width:238px !important; flex: 0 1 238px !important; overflow:hidden !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title-v36, body.client-garage-mode.client-garage-v3 #clientHome .garage-status-subtitle-v36 { display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:normal !important; word-break:normal !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title-v36 { font-size:16px !important; line-height:1.12 !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-subtitle-v36 { margin-top:3px !important; font-size:13px !important; line-height:1.18 !important; } /* ========================================================= PAYMENT BLOCKED STATE ========================================================= */ .garage-pay-blocked-v36 { opacity:.48 !important; cursor:not-allowed !important; pointer-events:none !important; filter:saturate(.35) !important; } body.client-garage-mode.client-garage-v3 #clientHome button.garage-pay-blocked-v36 { background: linear-gradient( 135deg, #aab4c0, #8f9aa8 ) !important; color: rgba(255,255,255,.90) !important; box-shadow:none !important; } /* Сообщение под заблокированной кнопкой */ .garage-payment-block-note-v36 { width:100%; box-sizing:border-box; margin-top:10px; padding: 12px 14px; border-radius:15px; background: rgba(255,92,112,.095); border: 1px solid rgba(255,92,112,.14); color:#a44151; font-size:13px; font-weight:650; line-height:1.3; } /* ========================================================= COPY BUTTONS ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card], body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount] { cursor:pointer !important; -webkit-tap-highlight-color: transparent !important; transition: transform .10s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important; } /* Desktop / mouse */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card]:hover, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount]:hover { background: #e1ebf4 !important; border-color: rgba(65,91,119,.22) !important; box-shadow: 0 5px 16px rgba(48,69,93,.08) !important; } /* iPhone tap */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-card]:active, body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts [data-copy-amount]:active { transform: scale(.96) !important; background: #d7e5f1 !important; } /* Copy success/toast visuals are owned by client-payment-v351.css. */ /* ========================================================= SMALL IPHONE ========================================================= */ @media(max-width:390px){ #garagePaymentV36Title { font-size:43px; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-wrap-v36 { width:192px !important; max-width:192px !important; flex-basis:192px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title-v36 { font-size:15px !important; } } /* ========================================================= PAYMENT COMPACT ALIGNMENT — PHASE 2.1 - title aligns vertically with Garage composition - payment details align with car header edges - redundant debt/card metadata is removed in app-main.js ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #garagePaymentV36Hero { margin-top:72px !important; margin-bottom:18px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts > .client-total-card { margin-top:0 !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .card:not(.client-total-card) { padding:16px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .card:not(.client-total-card) > .car-head { align-items:start !important; margin:0 !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .card:not(.client-total-card) > .car-head > b { margin:0 !important; text-align:right !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box { margin-top:20px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .kv { display:grid !important; grid-template-columns:minmax(92px,auto) minmax(0,1fr) !important; align-items:baseline !important; gap:14px !important; width:100% !important; padding:4px 0 !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .kv > :first-child { min-width:0 !important; text-align:left !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .kv > :last-child { min-width:0 !important; text-align:right !important; overflow-wrap:anywhere !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .actions { margin-top:12px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .actions + .actions { margin-top:14px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .hint { margin-top:12px !important; } @media(max-width:390px){ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #garagePaymentV36Hero { margin-top:66px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts .client-payment-box > .kv { grid-template-columns:82px minmax(0,1fr) !important; gap:10px !important; } } /* ========================================================= PAYMENT HEADER ALIGNMENT — PHASE 2.2 Match the payment page to the exact vertical rhythm and title typography used by the Garage home screen. Home has a historical clientPanel translateY offset: 16px normally, 24px on narrow iPhone. Payment mode removes that transform, so we restore the same visual offset on the whole payment section. This moves title, Back button, cards, and debt content together without changing their internal gaps. ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { transform:translateY(16px) !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #garagePaymentV36Title { margin:0 !important; padding:0 !important; color:#071426 !important; font-size:clamp(38px,10vw,48px) !important; line-height:1.05 !important; font-weight:430 !important; letter-spacing:.15em !important; } @media (max-width:430px) { body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts { transform:translateY(24px) !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #garagePaymentV36Hero { margin-top:66px !important; } } /* ========================================================= PAYMENT CARD RHYTHM — PHASE 2.4 - remove the redundant "Долги" heading - increase Back -> total-debt spacing - keep total-debt -> first car card compact ========================================================= */ body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts > .section-title { display:none !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts > .client-total-card { margin-top:26px !important; margin-bottom:12px !important; } body.client-garage-mode.client-garage-v3.garage-v35-payment-open #clientDebts > .client-total-card + .card { margin-top:0 !important; } /* Кнопка Назад гарантированно находится поверх остальных слоёв и имеет большую физическую touch-area. */ body.client-garage-mode.client-garage-v3 #garageV35Back { position:relative !important; z-index:5000 !important; width:140px !important; min-width:140px !important; height:54px !important; min-height:54px !important; pointer-events:auto !important; touch-action:manipulation !important; cursor:pointer !important; -webkit-tap-highlight-color:transparent !important; user-select:none !important; -webkit-user-select:none !important; } body.client-garage-mode.client-garage-v3 #garageV35Back:active { transform:scale(.96) !important; background:#e4edf5 !important; } /* ========================================================= STATUS ONLY ========================================================= */ /* Главная строка карточки: [марка / номер] [статус] Не даём статусу сжиматься до вертикальной полосы. */ body.client-garage-mode.client-garage-v3 #clientHome .garage-card-head { display:grid !important; grid-template-columns: minmax(0,1fr) 205px !important; gap:14px !important; align-items:start !important; width:100% !important; box-sizing:border-box !important; } /* ========================================================= STATUS CHIP ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status { width:205px !important; min-width:205px !important; max-width:205px !important; flex:none !important; flex-shrink:0 !important; box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:11px !important; min-height:72px !important; padding: 12px 15px !important; border-radius: 23px !important; overflow:visible !important; white-space:normal !important; } /* ========================================================= DOT ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status .garage-dot { flex: 0 0 auto !important; margin:0 !important; } /* ========================================================= COPY ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status-copy { display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; flex: 1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; gap:3px !important; overflow:visible !important; text-align:left !important; } /* ========================================================= TITLE ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title { display:block !important; width:auto !important; max-width:100% !important; margin:0 !important; color:#0b1728 !important; font-size: 14px !important; line-height: 1.15 !important; font-weight: 730 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens:none !important; text-align:left !important; } /* ========================================================= SUBTITLE ========================================================= */ body.client-garage-mode.client-garage-v3 #clientHome .garage-status-sub { display:block !important; width:auto !important; max-width:100% !important; margin:3px 0 0 !important; color: #778599 !important; font-size: 11.5px !important; line-height: 1.2 !important; font-weight: 450 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens:none !important; text-align:left !important; } /* ========================================================= iPHONE / NARROW ========================================================= */ @media(max-width:430px){ body.client-garage-mode.client-garage-v3 #clientHome .garage-card-head { grid-template-columns: minmax(0,1fr) 184px !important; gap: 10px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status { width: 184px !important; min-width: 184px !important; max-width: 184px !important; padding: 11px 12px !important; gap: 9px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-title { font-size: 13px !important; } body.client-garage-mode.client-garage-v3 #clientHome .garage-status-sub { font-size: 10.5px !important; } } /* ========================================================== GARAGE UI MICRO V1 1. Центрированный SVG-крестик в окне "Мои авто". 2. Новый SVG switch-icon вместо emoji ↕. ========================================================== */ /* Оба SVG всегда рисуются по геометрическому центру кнопки */ .garage-ui-v1-close, .garage-ui-v1-switch { box-sizing:border-box !important; display:grid !important; place-items:center !important; padding:0 !important; line-height:0 !important; text-indent:0 !important; font-size:0 !important; flex-shrink:0 !important; } /* CLOSE BUTTON Не используем текстовый ×: у системного шрифта baseline визуально опускает его вниз. */ .garage-ui-v1-close { position:relative !important; } .garage-ui-v1-close > svg { display:block !important; width:24px !important; height:24px !important; margin:0 !important; position:absolute !important; left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important; pointer-events:none !important; } .garage-ui-v1-close > svg path { vector-effect: non-scaling-stroke; } /* SWITCH CARS BUTTON Сохраняем существующий белый контейнер, меняем только внутренний знак. */ .garage-ui-v1-switch > svg { display:block !important; width:25px !important; height:25px !important; margin:auto !important; pointer-events:none !important; } /* Более аккуратное нажатие, без изменения размеров/позиции кнопки. */ .garage-ui-v1-switch { transition: transform .14s ease, background-color .14s ease !important; } .garage-ui-v1-switch:active { transform: scale(.94) !important; } /* Only stability/accessibility and the requested admin switch. Original colours, typography, spacing and cards live in the unchanged CSS above. */ :root { --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px)); } .boot-status { position: fixed; inset: 0; display: grid; place-items: center; background: #edf4f9; color: #526577; z-index: 60000; font: 16px system-ui; } .app-feedback { position: fixed; z-index: 50000; bottom: max(16px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); width: min(90%, 440px); background: #13243a; color: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 8px 32px #08152630; font-size: 14px; pointer-events: none; } .role-switch { display: block; width: 100%; min-height: 44px; margin: 0 0 16px; border-radius: 14px; padding: 10px 12px; font: 650 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; } body.client-garage-mode.client-garage-v3 #roleSwitch { position: fixed; top: calc(10px + var(--app-safe-top)); left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 28px)); z-index: 6000; margin: 0; color: #244769; background: rgba(249,251,253,.97); border: 1px solid rgba(148,163,184,.2); box-shadow: 0 3px 12px #2030400a; } /* Do not crop the original layout on short screens or resize it with the keyboard. The original content translations and all inner spacing remain in effect. */ html:has(body.client-garage-mode.client-garage-v3), body.client-garage-mode.client-garage-v3 { height: auto !important; min-height: 100svh !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; } body.client-garage-mode.client-garage-v3 { position: relative !important; inset: auto !important; } body.client-garage-mode.client-garage-v3 .app, body.client-garage-mode.client-garage-v3 .shell, body.client-garage-mode.client-garage-v3 #clientPanel, body.client-garage-mode.client-garage-v3 #clientHome { height: auto !important; max-height: none !important; overflow: visible !important; } /* The PNGs share a 1672x522 canvas. HTML dimensions reserve the final image height. */ body.client-garage-mode.client-garage-v3 #clientHome .garage-v3-hero-image { aspect-ratio: 1672 / 522; } /* Native modal top layer prevents transformed #clientPanel from clipping the original bottom sheets. Reset only browser dialog defaults. */ dialog#garageV3Picker, dialog#garageCarsV38Picker { margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; color: inherit; } dialog#garageCarsV38Picker { padding: 0; background: transparent; } dialog#garageV3Picker::backdrop, dialog#garageCarsV38Picker::backdrop { background: transparent; } dialog#garageV3Picker:not([open]), dialog#garageCarsV38Picker:not([open]) { display: none !important; } body.client-garage-mode.client-garage-v3 .garage-v3-picker-sheet { max-height: 100%; overflow-y: auto; } @media (prefers-reduced-motion: reduce) { body.client-garage-mode *, body.client-garage-mode *::before, body.client-garage-mode *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } .history-timeline{margin-top:12px;border-top:1px solid rgba(127,127,127,.18);padding-top:4px} .history-event{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:8px 0;border-bottom:1px solid rgba(127,127,127,.12);font-size:13px} .history-event .muted{grid-column:1/-1;font-size:12px} .system-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap} .problem-card{border-left:4px solid rgba(127,127,127,.35)} .problem-critical{border-left-color:#d64545}.problem-warning{border-left-color:#d39b20}.problem-action{margin-top:10px;font-size:13px;color:var(--muted,#526577)} /* V8 is scoped to admin sections. No client layout, fonts or car assets. */ #diagnostics .ops-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} #diagnostics .ops-scroll,.ops-reminders .ops-scroll{overflow:auto;max-height:420px} #diagnostics table,.ops-reminders table{width:100%;border-collapse:collapse;font-size:13px} #diagnostics td,#diagnostics th,.ops-reminders td,.ops-reminders th{text-align:left;padding:9px 7px;border-bottom:1px solid rgba(128,128,128,.22);vertical-align:top} #diagnostics svg{display:block;width:100%;height:auto;max-height:200px} #diagnostics .ops-chart-label{fill:currentColor;font-size:11px} #diagnostics .ops-value{font-size:23px;font-weight:700;margin:6px 0} #diagnostics .ops-warning,.ops-reminders .ops-warning{border-left:3px solid #d98a18;padding:9px 12px;margin:10px 0} #diagnostics pre,.ops-reminders pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit} #diagnostics .ops-stage{min-width:160px} #diagnostics .ops-chart{color:inherit} .ops-reminders .actions{flex-wrap:wrap} .ops-reminders button:disabled{opacity:.5;cursor:wait} .ops-reminders .ops-message{padding:14px;border:1px solid rgba(128,128,128,.25);border-radius:12px;line-height:1.5} .ops-reminders select{width:100%;max-width:100%;margin:8px 0} .ops-reminders .ops-confirm-note{margin:12px 0;line-height:1.45} /* Admin navigation only: four equal columns, with the disclosure out of flow. */ #parkingTabs{position:relative;grid-template-columns:repeat(4,minmax(0,1fr))} #parkingTabs>.tab{grid-column:auto;min-width:0;min-height:44px;padding:12px 4px;white-space:nowrap;line-height:20px} #parkingMoreButton{position:relative} #parkingMoreButton.more-active,#parkingMoreButton[aria-expanded="true"]{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff;box-shadow:0 8px 25px rgba(46,99,255,.38)} #parkingTabs .parking-more-chevron{font-size:11px} #parkingMoreBadge{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#e74b61;box-shadow:0 0 0 2px rgba(255,255,255,.8)} #parkingMoreMenu{position:absolute;z-index:80;top:calc(100% + 8px);right:0;display:grid;gap:4px;width:240px;max-width:100%;max-height:min(340px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 14px 35px rgba(0,0,0,.4)} #parkingMoreMenu[hidden],#parkingMoreBadge[hidden]{display:none} #parkingMoreMenu>.tab{grid-column:auto;min-width:0;min-height:44px;padding:12px;text-align:left;border-radius:11px;background:transparent;color:var(--text);box-shadow:none;font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere} #parkingMoreMenu>.tab.active{background:linear-gradient(180deg,var(--blue2),var(--blue));color:#fff} #parkingTabs button:focus-visible{outline:2px solid #86bdff;outline-offset:2px} @media(hover:hover){#parkingMoreMenu>.tab:not(.active):hover{background:rgba(115,156,255,.14)}} /* Client notification composer: stable fields and accessible recipient rows. */ .ops-reminders textarea{width:100%;box-sizing:border-box;min-height:150px;resize:vertical} .ops-reminders .ops-recipient-list{max-height:360px;overflow:auto;margin:12px 0;border:1px solid rgba(128,128,128,.25);border-radius:12px} .ops-reminders .ops-recipient{display:flex;align-items:center;gap:12px;padding:13px 12px;margin:0;cursor:pointer;border-bottom:1px solid rgba(128,128,128,.18)} .ops-reminders .ops-recipient:last-child{border-bottom:0} .ops-reminders .ops-recipient[hidden],.ops-reminders [hidden]{display:none!important} .ops-reminders .ops-recipient input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:#5298d5} .ops-reminders .ops-recipient>span{flex:1;min-width:0;overflow-wrap:anywhere} .ops-reminders .ops-recipient .muted{display:block;margin-top:4px;font-size:12px} .ops-reminders .ops-recipient:has(input:checked){background:rgba(82,152,213,.12)} .ops-reminders .ops-recipient:focus-within{outline:2px solid #5298d5;outline-offset:-2px} .ops-reminders .ops-preview-list details{padding:12px 0;border-bottom:1px solid rgba(128,128,128,.2)} .ops-reminders .ops-preview-list summary{cursor:pointer;line-height:1.5;overflow-wrap:anywhere} .ops-reminders [data-reminder-result]{margin-top:24px;scroll-margin-top:20px} .ops-reminders [data-reminder-error]:not(:empty){margin:12px 0;color:#dd5555} /* Notification attachments. */ .ops-reminders .ops-attachments{padding:12px 0;margin-bottom:12px;border-bottom:1px solid rgba(128,128,128,.25)} .ops-reminders .ops-attachment{display:flex;align-items:center;gap:10px;padding:10px 0} .ops-reminders .ops-attachment img{width:54px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0} .ops-reminders .ops-file-icon{width:54px;text-align:center;font-size:28px;flex-shrink:0} .ops-reminders .ops-attachment>span:not(.ops-file-icon){min-width:0;flex:1} .ops-reminders .ops-attachment strong{display:block;overflow-wrap:anywhere;font-size:13px} .ops-reminders .ops-attachment small{display:block;margin-top:4px;opacity:.7} .ops-reminders .ops-attachment button{min-width:40px;min-height:40px;padding:6px;font-size:24px;flex-shrink:0} .ops-reminders .ops-batch-files{padding:12px;border:1px solid rgba(128,128,128,.25);border-radius:12px;overflow-wrap:anywhere} .ops-reminders .ops-batch-files ul{padding-left:20px;line-height:1.6}