/* === ГЛОБАЛЬНОЕ ПРИМЕНЕНИЕ ROBOTO FLEX С ОСЯМИ === */
h1, h2, h3, h4, 
.brand-name, 
.hero-car-name, 
.stat-value, 
.metric-value, 
.pricing-price-main,
.car-card-name,
.car-card-plate,
.stat-delta,
.record-amount,
.payment-amount,
.record-view-type,
.record-view-total-value,
.record-view-total-label,
.account-avatar,
.usage-stat-value,
.auth-title,
.auth-logo-icon,
.about-logo,
.install-hero-ico,
.verify-digit,
.record-view-item-title,
.record-view-item-price,
.top-amt,
.top-rank,
.empty-title,
.confirm-title,
.modal-title,
.section-title,
.page-title,
.hero-meta-chip .val,
.pricing-plan-name,
.pricing-price-old,
.promo-title,
.legal-title,
.error-code,
.error-title {
    font-family: 'Roboto Flex', sans-serif !important;
    font-variation-settings: 
        'opsz' 70,    /* Optical Size: Auto */
        'slnt' 0,      /* Slant: 0 */
        'wdth' 150,    /* Width: 150 */
        'wght' 700,    /* Weight: 700 */
        'XOPQ' 96,     /* Thick Stroke: 96 */
        'XTRA' 520,    /* Counter Width: 520 */
        'YOPQ' 79,     /* Thin Stroke: 79 */
        'YTAS' 698,    /* Ascender Height: 698 */
        'YTDE' -203,   /* Descender Depth: -203 */
        'YTFI' 686,    /* Figure Height: 686 */
        'YTLC' 570,    /* Lowercase Height: 570 */
        'YTUC' 660;    /* Uppercase Height: 660 */
}

/* Для элементов, где нужен другой вес (например, 600 или 500), переопределяем только wght */
.metric-label, 
.record-view-section-title,
.settings-group-title,
.subscription-card-label,
.usage-stat-label,
.notification-empty-title,
.install-manual-title {
    font-variation-settings: 
        'opsz' 14, 'slnt' 0, 'wdth' 150, 'wght' 600, 
        'XOPQ' 96, 'XTRA' 520, 'YOPQ' 79, 
        'YTAS' 698, 'YTDE' -203, 'YTFI' 686, 'YTLC' 570, 'YTUC' 660;
}
/* ============================================
   GOLOS TEXT — body шрифт (cyrillic + latin)
   ============================================ */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/golos-text-cyrillic-400.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/golos-text-cyrillic-500.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/golos-text-cyrillic-600.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/golos-text-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/golos-text-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/golos-text-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ============================================
   ROBOTO FLEX — heading / display шрифт
   Variable font: все 12 осей. font-weight:100 1000
   ============================================ */
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/robotoflex-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/robotoflex-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Flex';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/robotoflex-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
--sp-6:24px;--sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;
--font-heading:'Roboto Flex',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
--font-body:'Golos Text',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
--r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;--r-2xl:32px;--r-full:999px;
--ease-out:cubic-bezier(0.25,1,0.5,1);
--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
--ease-smooth:cubic-bezier(0.4,0,0.2,1);
--dur-fast:180ms;--dur:280ms;--dur-slow:480ms;
--sat:env(safe-area-inset-top,0px);
--sab:env(safe-area-inset-bottom,0px);
--sal:env(safe-area-inset-left,0px);
--sar:env(safe-area-inset-right,0px);
--z-base:1;--z-header:50;--z-tabbar:60;--z-fab:70;--z-modal:100;--z-toast:120;--z-tooltip:110;
--tap:44px;
--focus-ring:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent);
--grad-accent:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);
--grad-accent-soft:linear-gradient(135deg,rgba(99,102,241,0.12) 0%,rgba(139,92,246,0.12) 100%);
--grad-hero:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);
--grad-mesh:radial-gradient(at 20% 20%,rgba(99,102,241,0.15) 0%,transparent 50%),
radial-gradient(at 80% 0%,rgba(168,85,247,0.12) 0%,transparent 50%),
radial-gradient(at 80% 80%,rgba(236,72,153,0.08) 0%,transparent 50%);
}
[data-theme="light"]{
--bg:#f7f7fb;--bg-elev:#ffffff;--bg-soft:#fafaff;
--surface:#ffffff;--surface-2:#f3f3f8;--surface-3:#ebebf2;
--text:#0f0f14;--text-2:#4a4a5a;--text-3:#8a8a9a;
--border:rgba(15,15,20,0.06);--border-strong:rgba(15,15,20,0.12);
--accent:#6366f1;--accent-2:#8b5cf6;
--accent-soft:rgba(99,102,241,0.10);--accent-glow:rgba(99,102,241,0.25);
--success:#10b981;--success-soft:rgba(16,185,129,0.12);
--danger:#ef4444;--danger-soft:rgba(239,68,68,0.10);
--warning:#f59e0b;--warning-soft:rgba(245,158,11,0.12);
--info:#3b82f6;
--shadow-xs:0 1px 2px rgba(15,15,20,0.04);
--shadow-sm:0 2px 8px rgba(15,15,20,0.04),0 1px 2px rgba(15,15,20,0.04);
--shadow-md:0 8px 24px rgba(15,15,20,0.06),0 2px 6px rgba(15,15,20,0.04);
--shadow-lg:0 20px 48px rgba(15,15,20,0.10),0 8px 16px rgba(15,15,20,0.06);
--shadow-xl:0 32px 80px rgba(15,15,20,0.16);
--shadow-accent:0 12px 32px rgba(99,102,241,0.35);
--skeleton-base:#ececf2;--skeleton-shine:#f7f7fc;
--glass:rgba(255,255,255,0.72);--glass-border:rgba(255,255,255,0.5);
}
[data-theme="dark"]{
--bg:#08080c;--bg-elev:#121218;--bg-soft:#0c0c12;
--surface:#18181f;--surface-2:#1f1f28;--surface-3:#282833;
--text:#f5f5fa;--text-2:#a8a8b8;--text-3:#6a6a7a;
--border:rgba(255,255,255,0.06);--border-strong:rgba(255,255,255,0.12);
--accent:#818cf8;--accent-2:#a78bfa;
--accent-soft:rgba(129,140,248,0.14);--accent-glow:rgba(129,140,248,0.35);
--success:#34d399;--success-soft:rgba(52,211,153,0.14);
--danger:#f87171;--danger-soft:rgba(248,113,113,0.14);
--warning:#fbbf24;--warning-soft:rgba(251,191,36,0.14);
--info:#60a5fa;
--shadow-xs:0 1px 2px rgba(0,0,0,0.4);
--shadow-sm:0 2px 8px rgba(0,0,0,0.4);
--shadow-md:0 8px 24px rgba(0,0,0,0.5);
--shadow-lg:0 20px 48px rgba(0,0,0,0.6);
--shadow-xl:0 32px 80px rgba(0,0,0,0.8);
--shadow-accent:0 12px 32px rgba(129,140,248,0.4);
--skeleton-base:#1a1a22;--skeleton-shine:#25252f;
--glass:rgba(18,18,24,0.72);--glass-border:rgba(255,255,255,0.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-y:auto;scrollbar-gutter:stable}
html.modal-lock{overflow:hidden;scroll-behavior:auto}
body{
font-family:var(--font-body);font-size:15px;line-height:1.5;
color:var(--text);background:var(--bg);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
letter-spacing:-0.01em;
min-height:100vh;min-height:100dvh;
overflow-x:hidden;
padding-top:calc(var(--sat) + 64px);
padding-bottom:calc(var(--sab) + 104px);
padding-left:var(--sal);padding-right:var(--sar);
transition:background-color var(--dur) var(--ease-smooth),color var(--dur) var(--ease-smooth);
position:relative;touch-action:pan-x pan-y;
}
body::before{
content:"";position:fixed;inset:0;
background:var(--grad-mesh);pointer-events:none;z-index:0;opacity:0.7;
}
[data-theme="dark"] body::before{opacity:0.5}
img,svg{display:block;max-width:100%}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit;color:inherit;font-size:16px}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-heading);letter-spacing:-0.02em;font-weight:600}
h1{font-size:clamp(28px,5vw,40px);line-height:1.1;font-weight:700}
h2{font-size:clamp(22px,3.5vw,28px);line-height:1.2;font-weight:600}
h3{font-size:clamp(17px,2.5vw,20px);line-height:1.3;font-weight:600}
h4{font-size:15px;line-height:1.4;font-weight:600}
p{margin:0}
*::-webkit-scrollbar{width:4px;height:4px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);opacity:0.5}
*::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
html{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,a:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}
.input:focus,.select:focus,.textarea:focus{
outline:none;border-color:var(--accent);
box-shadow:var(--focus-ring);background:var(--bg-elev);
}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--sp-5);position:relative;z-index:1}
@media (min-width:768px){.container{padding:0 var(--sp-7)}}
.app-header{
position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
background:var(--glass);
backdrop-filter:saturate(180%) blur(28px);
-webkit-backdrop-filter:saturate(180%) blur(28px);
border-bottom:1px solid var(--border);
transition:background-color var(--dur) var(--ease-smooth);
}
.header-inner{
max-width:1180px;margin:0 auto;
padding-top:calc(var(--sat) + var(--sp-3));
padding-bottom:var(--sp-3);
padding-left:var(--sp-5);
padding-right:var(--sp-5);
display:flex;align-items:center;justify-content:space-between;
gap:var(--sp-4);min-height:64px;
}
@media (min-width:768px){.header-inner{padding:var(--sp-3) var(--sp-7)}}
/* ===== CONNECTION STATUS INDICATOR (FIX-CONN-DOT-01: точка на иконке авто) ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.car-chip-iconwrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.connection-status {
position: absolute;
right: -4px;
bottom: -4px;
width: 14px;
height: 14px;
display: grid;
place-items: center;
pointer-events: none;
}
.connection-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 2px var(--surface);
animation: connBreathe 2.8s var(--ease-smooth) infinite;
}
.connection-status.syncing .connection-dot {
background: var(--warning);
animation-duration: 1.1s;
}
.connection-status.offline .connection-dot {
background: var(--danger);
animation-duration: 1.6s;
}
@keyframes connBreathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
.connection-dot { animation: none; }
}
.brand{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.brand-name{
font-family:var(--font-heading);font-weight:700;font-size:18px;
letter-spacing:-0.02em;color:var(--text);white-space:nowrap;
}
@media (max-width:420px){.brand-name{display:none}}
.car-chip{
display:flex;align-items:center;gap:var(--sp-3);
padding:5px var(--sp-3) 5px 5px;
border:1px solid var(--border);background:transparent;
border-radius:var(--r-lg);min-height:52px;cursor:pointer;
transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
max-width:70%;flex:0 1 auto;min-width:0;
}
.car-chip:hover{background:var(--surface-2);border-color:var(--border-strong)}
.car-chip:active{transform:scale(0.98)}
.car-chip-icon{
width:40px;height:40px;border-radius:var(--r-md);
background:var(--surface-2);display:grid;place-items:center;
flex-shrink:0;overflow:hidden;
transition:background var(--dur) var(--ease-out);
}
.car-chip:hover .car-chip-icon{background:var(--surface)}
.car-chip-icon svg{width:22px;height:22px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.car-chip-icon .car-brand-logo{width:26px !important;height:26px !important;max-width:26px !important;max-height:26px !important}
.car-chip-icon .car-brand-logo-fallback{width:100%;height:100%;border-radius:var(--r-md);font-size:16px}
.car-chip-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;max-width:100%;flex:1 1 auto;overflow:hidden}
.car-title{
font-family:var(--font-body);font-size:13px;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
max-width:100%;min-width:0;font-weight:600;letter-spacing:-0.01em;
}
.car-plate{
font-family:var(--font-body);font-weight:600;font-size:11px;
color:var(--text-3);letter-spacing:0.08em;white-space:nowrap;
font-variant-numeric:tabular-nums;
flex-shrink:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){
.car-chip{gap:var(--sp-2);padding:4px var(--sp-2) 4px 4px;min-height:46px}
.car-chip-icon{width:34px;height:34px}
.car-chip-icon .car-brand-logo{width:22px !important;height:22px !important;max-width:22px !important;max-height:22px !important}
.car-title{max-width:100%;font-size:12px}
.car-plate{font-size:10px}
}
.car-chip .chevron{
color:var(--text-3);flex-shrink:0;
transform:rotate(0deg);
transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.car-chip:hover .chevron{color:var(--accent)}
.car-chip[aria-expanded="true"] .chevron{transform:rotate(180deg);color:var(--accent)}
.page{display:none;animation:fadeUp var(--dur-slow) var(--ease-out);position:relative;z-index:1}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.page-head{padding:var(--sp-6) 0 var(--sp-4)}
.page-title{font-family:var(--font-heading);font-weight:700;letter-spacing:-0.03em}
.page-sub{color:var(--text-2);margin-top:var(--sp-1);font-size:14px}
.card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--sp-5);
box-shadow:var(--shadow-sm);transition:all var(--dur) var(--ease-out);
}
.card + .card{margin-top:var(--sp-4)}
.hero-car{
background:var(--grad-hero);border-radius:var(--r-xl);
padding:var(--sp-7) var(--sp-6);
border:1px solid rgba(255,255,255,0.1);
box-shadow:var(--shadow-lg),var(--shadow-accent);
position:relative;overflow:hidden;color:#fff;
}
.hero-car::before{
content:"";position:absolute;top:-60%;right:-30%;
width:500px;height:500px;
background:radial-gradient(circle,rgba(255,255,255,0.10) 0%,transparent 70%);
pointer-events:none;
}
.hero-car::after{
content:"";position:absolute;bottom:-30%;left:-10%;
width:400px;height:400px;
background:radial-gradient(circle,rgba(168,85,247,0.3) 0%,transparent 70%);
pointer-events:none;
}
.hero-car-name{
font-family:var(--font-heading);
font-size:clamp(26px,4.5vw,36px);font-weight:700;
letter-spacing:-0.03em;position:relative;z-index:1;color:#fff;
text-shadow:0 2px 20px rgba(0,0,0,0.15);
}
.hero-car-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);position:relative;z-index:1}
/* === FIX-HERO-01: ватермарка бренда, надзаголовок, компактные чипы === */
.hero-watermark{
position:absolute;right:-16px;top:50%;transform:translateY(-50%);
width:210px;height:210px;opacity:0.13;pointer-events:none;
display:grid;place-items:center;z-index:0;
}
.hero-watermark img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.hero-watermark-letter{font-family:var(--font-heading);font-size:150px;font-weight:700;color:#fff;line-height:1}
@media (max-width:640px){
.hero-watermark{width:140px;height:140px;right:-8px;opacity:0.11}
.hero-watermark-letter{font-size:100px}
}
.hero-overline{
font-size:11px;font-weight:700;letter-spacing:0.1em;
text-transform:uppercase;color:rgba(255,255,255,0.72);
margin-bottom:var(--sp-2);
}
.hero-meta-chip{padding:7px 12px;font-size:12px;min-height:34px;gap:8px}
.hero-meta-chip .chip-ico{
width:14px;height:14px;stroke:currentColor;stroke-width:2;
fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.85;flex-shrink:0;
}
.hero-meta-chip .val{font-size:12px;letter-spacing:0.08em}
.hero-meta-chip{
display:inline-flex;align-items:center;gap:var(--sp-2);
padding:8px 14px;background:rgba(255,255,255,0.16);
border:1px solid rgba(255,255,255,0.22);
border-radius:var(--r-full);font-size:13px;
color:rgba(255,255,255,0.95);cursor:pointer;
transition:all var(--dur) var(--ease-out);min-height:40px;
}
/* === FIX-HERO-15: чипы одинаковой высоты — глазок не распирает VIN-чип === */
.hero-meta-chip .copy-btn{padding:4px 8px}
.hero-meta-chip:hover{background:rgba(255,255,255,0.28);transform:translateY(-1px)}
.hero-meta-chip:active{transform:scale(0.97)}
.hero-meta-chip .val{color:#fff;font-weight:700;letter-spacing:0.06em;font-family:var(--font-heading);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-meta-chip .copy-btn{background:rgba(255,255,255,0.2);color:#fff}
.hero-meta-chip .copy-btn:hover{background:rgba(255,255,255,0.35)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-5)}
@media (min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--sp-4);
position:relative;cursor:default;
min-height:112px;display:flex;flex-direction:column;
justify-content:space-between;overflow:hidden;
container-type:inline-size;
}
.stat-card::before{
content:"";position:absolute;top:0;right:0;
width:80px;height:80px;background:var(--grad-accent-soft);
border-radius:50%;transform:translate(30%,-30%);opacity:0.6;
transition:all var(--dur) var(--ease-out);
}
.stat-label{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
font-size:11px;color:var(--text-3);text-transform:uppercase;
letter-spacing:0.06em;font-weight:600;position:relative;
}
.stat-label > span:first-child{
min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat-value{
font-family:'Roboto Flex',sans-serif !important;
font-variation-settings:
'opsz' 70,'slnt' 0,'wdth' 150,'wght' 700,'XOPQ' 96,'XTRA' 520,'YOPQ' 79,'YTAS' 698,'YTDE' -203,'YTFI' 686,'YTLC' 570,'YTUC' 660;
font-size:clamp(17px,5.4vw,22px);
font-size:clamp(15px,10.5cqw,22px);
font-weight:700;
letter-spacing:-0.02em;margin-top:var(--sp-2);position:relative;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:linear-gradient(135deg,var(--text) 0%,var(--text-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-delta{
font-size:11px;font-weight:600;display:inline-block;vertical-align:middle;
padding:4px 10px;border-radius:var(--r-full);margin-top:var(--sp-2);
align-self:flex-start;position:relative;font-family:var(--font-heading);
max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:360px){
.stat-delta{font-size:10px;padding:3px 8px}
}
.stat-delta.up{background:var(--danger-soft);color:var(--danger)}
.stat-delta.down{background:var(--success-soft);color:var(--success)}
.stat-delta.neutral{background:var(--surface-2);color:var(--text-3)}
/* SVG стрелочки для дельты расходов */
.stat-delta.up::before,
.stat-delta.down::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin-right: 4px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}

/* Стрелка вверх (для роста расходов — это плохо, поэтому красный) */
.stat-delta.up::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Стрелка вниз (для снижения расходов — это хорошо, поэтому зелёный) */
.stat-delta.down::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cpolyline points='19 12 12 19 5 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.section{margin-top:var(--sp-8)}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4);gap:var(--sp-3)}
.section-title{font-family:var(--font-heading);font-size:20px;font-weight:700;letter-spacing:-0.02em}
.section-link{
font-size:14px;color:var(--accent);font-weight:600;cursor:pointer;
padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
transition:all var(--dur) var(--ease-out);min-height:var(--tap);
display:inline-flex;align-items:center;gap:4px;
}
.section-link:hover{background:var(--accent-soft);gap:8px}
.section-link:active{transform:scale(0.97)}
.chart-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--sp-5);
box-shadow:var(--shadow-sm);width:100%;max-width:100%;overflow:hidden;
}
.chart-wrap{position:relative;height:260px;width:100%;max-width:100%;overflow:hidden}
@media (min-width:768px){.chart-wrap{height:320px}}
.chart-row{display:grid;grid-template-columns:1fr;gap:var(--sp-4);width:100%;max-width:100%}
@media (min-width:900px){.chart-row{grid-template-columns:1.4fr 1fr}}
.records-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.record-item{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);padding:var(--sp-4);cursor:pointer;
transition:all var(--dur) var(--ease-out);
display:flex;align-items:flex-start;gap:var(--sp-4);
}
.record-item:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.record-item:active{transform:scale(0.99)}
.record-icon{
width:46px;height:46px;border-radius:var(--r-md);
display:grid;place-items:center;flex-shrink:0;font-size:20px;
position:relative;overflow:hidden;
}
.record-icon::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 50%);
pointer-events:none;
}
.record-icon.to{background:var(--accent-soft);color:var(--accent)}
.record-icon.expense{background:var(--warning-soft);color:var(--warning)}
.record-icon.reminder{background:rgba(168,85,247,0.14);color:#a855f7}
.record-body{flex:1;min-width:0}
.record-title{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-sub{font-size:13px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-amount{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--text);flex-shrink:1;letter-spacing:-0.01em;max-width:45%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.record-preview{display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.record-preview-shop{
display:flex;align-items:center;gap:6px;font-size:12px;
color:var(--text-2);font-weight:500;padding:4px 10px;
background:var(--surface-2);border-radius:var(--r-full);
align-self:flex-start;max-width:100%;
}
.record-preview-shop svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:var(--accent)}
.record-preview-shop span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.record-preview-group{
display:flex;align-items:center;gap:6px;font-size:10px;
text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);
font-weight:700;margin-top:2px;
}
.record-preview-group::after{content:"";flex:1;height:1px;background:var(--border)}
.record-preview-chips{display:flex;flex-wrap:wrap;gap:5px}
.record-chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-full);
font-size:12px;color:var(--text);font-weight:500;
max-width:100%;transition:all var(--dur) var(--ease-out);min-width:0;
overflow:hidden;
}
.record-chip:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.record-chip .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.record-chip.part .dot{background:var(--accent)}
.record-chip.work .dot{background:#a855f7}
.record-chip.fuel .dot{background:var(--warning)}
.record-chip.wash .dot{background:var(--success)}
.record-chip.fine .dot{background:var(--danger)}
.record-chip.insurance .dot{background:#06b6d4}
.record-chip.parking .dot{background:#6366f1}
.record-chip.accessories .dot{background:#d97706}
.record-chip.tax .dot{background:#a855f7}
.record-chip.info .dot{background:var(--text-3)}
.record-chip .chip-main{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:var(--font-body);font-weight:500}
.record-chip .chip-sub{color:var(--text-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.record-chip .chip-sub::before{content:"·";margin:0 4px;color:var(--text-3);opacity:0.5}
.record-chip.badge{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.record-chip.badge.fuel{background:var(--warning-soft);border-color:var(--warning);color:var(--warning)}
.record-chip.badge.success{background:var(--success-soft);border-color:var(--success);color:var(--success)}
.record-chip.badge.danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.record-chip.badge svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.record-chip-more{
display:inline-flex;align-items:center;gap:4px;
padding:5px 10px;background:var(--accent-soft);
border:1px solid var(--accent);border-radius:var(--r-full);
font-size:11px;color:var(--accent);font-weight:700;cursor:pointer;
transition:all var(--dur) var(--ease-out);
}
.record-chip-more:hover{background:var(--accent);color:#fff;transform:translateX(2px)}
@media (max-width:480px){
.record-preview{gap:5px;margin-top:6px;padding-top:6px}
.record-chip{padding:4px 8px;font-size:11px}
.record-chip .chip-sub{font-size:10px}
.record-preview-shop{font-size:11px;padding:3px 8px}
.record-preview-group{font-size:9px}
}
.filter-tabs{
display:flex;gap:var(--sp-2);overflow-x:auto;
padding-bottom:var(--sp-1);margin-bottom:var(--sp-4);
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filter-tabs::-webkit-scrollbar{display:none}
.filter-tab{
padding:9px 18px;border-radius:var(--r-full);
background:var(--surface);border:1px solid var(--border);
font-size:13px;font-weight:500;color:var(--text-2);
white-space:nowrap;cursor:pointer;
transition:all var(--dur) var(--ease-out);
min-height:38px;display:inline-flex;align-items:center;
}
.filter-tab:hover{border-color:var(--border-strong);color:var(--text)}
.filter-tab.active{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:var(--shadow-sm)}
.filter-tab:active{transform:scale(0.97)}
.filter-tab[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}
.sort-wrap{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:13px;color:var(--text-3);flex-wrap:wrap}
.sort-btn{
padding:6px 12px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-full);
font-size:12px;font-weight:500;color:var(--text-2);
cursor:pointer;transition:all var(--dur) var(--ease-out);
min-height:32px;display:inline-flex;align-items:center;gap:4px;
}
.sort-btn:hover{border-color:var(--border-strong);color:var(--text)}
.sort-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.search-wrap{position:relative;margin-bottom:var(--sp-4)}
.search-input{
width:100%;padding:13px 48px 13px 48px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-full);font-size:16px;color:var(--text);
transition:all var(--dur) var(--ease-out);min-height:var(--tap);
}
.search-input::placeholder{color:var(--text-3)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.search-clear{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
width:32px;height:32px;border-radius:50%;
background:var(--surface-2);display:none;place-items:center;
color:var(--text-2);transition:all var(--dur) var(--ease-out);
}
.search-clear.visible{display:grid}
.search-clear:hover{background:var(--danger-soft);color:var(--danger)}
.search-clear:active{transform:translateY(-50%) scale(0.92)}
.field{margin-bottom:var(--sp-4)}
.field-label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:var(--sp-2);padding-left:var(--sp-1)}
.field-label.required::after {
  content: " *";
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}
[data-theme="dark"] .field-label.required::after {
  color: #f87171;
}
.field-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.field-hint::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* === СЕКЦИИ ФОРМЫ АВТОМОБИЛЯ === */
.car-form-section {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
}
.car-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.car-form-section-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.car-form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-3) 0;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    transition: color var(--dur) var(--ease-out);
    min-height: var(--tap);
}
.car-form-toggle:hover {
    color: var(--text);
}
.car-form-toggle svg {
    transition: transform var(--dur) var(--ease-out);
    flex-shrink: 0;
}
.car-form-toggle.open svg {
    transform: rotate(180deg);
}
.car-form-collapsible {
padding-top: var(--sp-3);
animation: carFormSlide 250ms var(--ease-out);
}
/* === FIX-CARFORM-GRID-01: две колонки формы, на узких экранах — одна === */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-3)}
@media (max-width:480px){
.form-grid-2{grid-template-columns:1fr}
}
@keyframes carFormSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.spec-chip.spec-owned svg {
    color: var(--success);
}
.input,.select,.textarea{
width:100%;padding:13px 16px;
background:var(--surface);border:1.5px solid var(--border);
border-radius:var(--r-md);font-size:16px;color:var(--text);
transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out);
min-height:var(--tap);font-family:var(--font-body);max-width:100%;
}
input[type="date"]{max-width:100%;min-width:0;appearance:none;-webkit-appearance:none;color-scheme:light dark;display:block;box-sizing:border-box}
.modal-body{padding:var(--sp-5);overflow-y:auto;overflow-x:hidden;flex:1;overscroll-behavior:contain}
.input::placeholder,.textarea::placeholder{color:var(--text-3);font-family:var(--font-body);font-size:16px;font-weight:400}
.textarea{min-height:96px;resize:vertical;line-height:1.5}
.select{
-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;background-position:right 14px center !important;
padding-right:40px;cursor:pointer;
}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
padding:13px 22px;border-radius:var(--r-md);font-size:15px;font-weight:500;
min-height:var(--tap);cursor:pointer;
transition:all 0.3s var(--ease-out);
border:1px solid transparent;font-family:var(--font-body);
letter-spacing:-0.01em;white-space:nowrap;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(0.98) translateY(0)}
.btn[disabled],.btn.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--grad-accent);color:#fff;box-shadow:var(--shadow-accent)}
.btn-primary:hover{box-shadow:var(--shadow-accent),var(--shadow-md)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{filter:brightness(1.08)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:13px;min-height:38px}
.fab-wrap{
position:fixed;right:calc(var(--sp-4) + var(--sar));
bottom:calc(var(--sp-4) + var(--sab) + 80px);
z-index:var(--z-fab);display:flex;flex-direction:column;
align-items:flex-end;gap:var(--sp-3);width:auto;pointer-events:none;
}
@media (min-width:1260px){.fab-wrap{right:calc((100vw - 1180px) / 2 + var(--sp-4) + var(--sar)) !important}}
.fab,.fab-menu.open{pointer-events:auto}
.fab{
width:60px;height:60px;border-radius:50%;
background:var(--grad-accent);color:#fff;
display:grid;place-items:center;
box-shadow:var(--shadow-accent),var(--shadow-lg);cursor:pointer;
transition:all var(--dur) var(--ease-spring);position:relative;
}
.fab::before{
content:"";position:absolute;inset:-4px;border-radius:50%;
background:var(--grad-accent);opacity:0;filter:blur(12px);
transition:opacity var(--dur) var(--ease-out);z-index:-1;
}
.fab:hover{transform:scale(1.08) rotate(90deg)}
.fab:hover::before{opacity:0.6}
.fab:active{transform:scale(0.95)}
.fab svg{transition:transform var(--dur) var(--ease-out)}
.fab.open{transform:rotate(135deg)}
.fab.open:hover{transform:rotate(135deg) scale(1.08)}
.fab-menu{
display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-end;
opacity:0;transform:translateY(12px) scale(0.9);pointer-events:none;
transition:all var(--dur-slow) var(--ease-spring);
}
.fab-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab-option{
display:flex;align-items:center;gap:var(--sp-3);
padding:10px 18px 10px 14px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-full);
box-shadow:var(--shadow-md);cursor:pointer;
transition:all var(--dur) var(--ease-out);white-space:nowrap;
}
.fab-option:hover{transform:translateX(-6px);border-color:var(--accent);box-shadow:var(--shadow-lg)}
.fab-option:active{transform:scale(0.97)}
.fab-option-icon{
width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-sm);
}
.fab-option-label{font-size:14px;font-weight:500}
.tabbar{
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:calc(var(--sab) + 16px);
z-index:var(--z-tabbar);
background:var(--glass);
backdrop-filter:saturate(180%) blur(28px);
-webkit-backdrop-filter:saturate(180%) blur(28px);
border:1px solid var(--border);
border-radius:28px;
padding:8px 12px;
box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,0.04) inset;
width:auto;
max-width:calc(100vw - 32px);
transition:background-color var(--dur) var(--ease-smooth),
           border-color var(--dur) var(--ease-smooth),
           box-shadow var(--dur) var(--ease-smooth);
}
.tabbar-inner{
max-width:none;
display:flex;
align-items:center;
gap:4px;
padding:0;
height:auto;
}
.tab{
width:50px;
height:50px;
border-radius:16px;
display:grid;
place-items:center;
color:var(--text-3);
cursor:pointer;
transition:all var(--dur) var(--ease-out);
min-height:auto;
position:relative;
flex-shrink:0;
}
.tab:hover{
color:var(--text);
background:var(--surface-2);
}
.tab.active{
color:#fff;
background:var(--grad-accent);
box-shadow:var(--shadow-accent);
}
.tab.active::before{
display:none;
}
.tab-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
}
.tab-label{
display:none;
}
.tab:active{
transform:scale(0.92);
}
.modal-backdrop{
position:fixed;inset:0;background:rgba(8,8,12,0.55);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
z-index:var(--z-modal);display:none;align-items:flex-end;justify-content:center;
padding:var(--sp-4);
padding-top:calc(var(--sat) + var(--sp-4));
padding-bottom:calc(var(--sab) + var(--sp-4));
opacity:0;transition:opacity var(--dur) var(--ease-out);
}
.modal-backdrop.open{display:flex;opacity:1}
@media (min-width:768px){.modal-backdrop{align-items:center;padding:var(--sp-8)}}
.modal{
width:100%;max-width:540px;
max-height:calc(100dvh - var(--sat) - var(--sab) - var(--sp-8));
background:var(--bg-elev);
border-radius:var(--r-2xl);
border:1px solid var(--border);box-shadow:var(--shadow-xl);
display:flex;flex-direction:column;overflow:hidden;
transform:translateY(24px) scale(0.96);
transition:transform var(--dur-slow) var(--ease-spring);min-width:0;
}
.modal-backdrop.open .modal{transform:translateY(0) scale(1)}
@media (min-width:768px){.modal{border-radius:var(--r-xl);max-height:85vh}}
.modal-header{
padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
flex-shrink:0;
background:linear-gradient(180deg,var(--surface) 0%,var(--bg-elev) 100%);
position:relative;user-select:none;-webkit-user-select:none;
}
.modal-header::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:var(--grad-accent);opacity:0.8;
}
.modal-title{
font-family:var(--font-heading);font-size:17px;font-weight:600;
letter-spacing:-0.02em;display:flex;align-items:center;gap:var(--sp-3);min-width:0;
}
.modal-title .ico{
width:34px;height:34px;border-radius:var(--r-sm);
display:grid;place-items:center;background:var(--grad-accent);
color:#fff;box-shadow:var(--shadow-accent);flex-shrink:0;
}
.modal-title .ico svg{width:16px;height:16px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.modal-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-close{
width:34px;height:34px;border-radius:50%;
background:var(--surface-2);display:grid;place-items:center;
color:var(--text-2);cursor:pointer;
transition:all var(--dur) var(--ease-out);flex-shrink:0;
}
.modal-close:hover{background:var(--danger-soft);color:var(--danger);transform:rotate(90deg)}
.modal-close:active{transform:scale(0.92)}
.modal-footer{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border);display:flex;gap:var(--sp-3);flex-shrink:0;background:var(--bg-elev)}
.modal-footer .btn{flex:1}
.modal-footer > div{display:contents}
/* === FIX-SHARE-BTN-01: три кнопки управления ссылкой переносятся на узких экранах === */
.modal-body .flex.gap-2{flex-wrap:wrap}
.modal-body .flex.gap-2 .btn{min-width:120px}
.record-view{display:flex;flex-direction:column;gap:var(--sp-4)}
.record-view-hero{
background:var(--grad-hero);border-radius:var(--r-xl);
padding:var(--sp-6);position:relative;overflow:hidden;color:#fff;
display:flex;align-items:center;gap:var(--sp-4);
box-shadow:var(--shadow-lg),var(--shadow-accent);
}
.record-view-hero::before{
content:"";position:absolute;top:-40%;right:-10%;
width:300px;height:300px;
background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);
pointer-events:none;
}
.record-view-hero::after{
content:"";position:absolute;bottom:-30%;left:-10%;
width:260px;height:260px;
background:radial-gradient(circle,rgba(168,85,247,0.35) 0%,transparent 70%);
pointer-events:none;
}
.record-view-hero-icon{
width:56px;height:56px;border-radius:var(--r-lg);
background:rgba(255,255,255,0.22);backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.28);
display:grid;place-items:center;flex-shrink:0;position:relative;
box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.record-view-hero-icon svg{width:26px;height:26px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.record-view-hero-content{flex:1;min-width:0;position:relative}
.record-view-type{
font-family:var(--font-heading);
font-size:clamp(18px,3vw,22px);font-weight:700;
letter-spacing:-0.02em;text-shadow:0 2px 12px rgba(0,0,0,0.15);
line-height:1.2;word-break:break-word;
}
.record-view-date{
font-size:13px;color:rgba(255,255,255,0.88);margin-top:6px;
font-variant-numeric:tabular-nums;font-weight:500;
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.record-view-date .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);display:inline-block}
.record-view-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.record-view-section-title{
font-family:var(--font-heading);font-size:11px;text-transform:uppercase;
letter-spacing:0.1em;color:var(--text-3);font-weight:700;
margin-bottom:var(--sp-3);display:flex;align-items:center;gap:8px;
}
.record-view-section-title::before{content:"";width:18px;height:2px;background:var(--grad-accent);border-radius:var(--r-full)}
.record-view-item{
background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
position:relative;transition:all var(--dur) var(--ease-out);
}
.record-view-item + .record-view-item{margin-top:var(--sp-2)}
.record-view-item:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.record-view-item-head{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
padding-bottom:var(--sp-2);margin-bottom:var(--sp-2);
border-bottom:1px dashed var(--border-strong);
}
.record-view-item-title{
font-family:var(--font-heading);font-size:15px;font-weight:600;
letter-spacing:-0.01em;color:var(--text);
display:flex;align-items:center;gap:8px;flex:1;min-width:0;
}
.record-view-item-title .ico{
width:28px;height:28px;border-radius:var(--r-sm);
background:var(--grad-accent-soft);display:grid;place-items:center;
flex-shrink:0;color:var(--accent);
}
.record-view-item-title .ico svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.record-view-item-price{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--text);letter-spacing:-0.01em;flex-shrink:0}
.record-view-row{
display:grid;grid-template-columns:minmax(110px,1fr) 1.5fr;
gap:var(--sp-3);padding:8px 0;font-size:14px;align-items:flex-start;
}
.record-view-row + .record-view-row{border-top:1px solid var(--border)}
.record-view-row .k{color:var(--text-3);font-weight:500;font-size:13px;display:flex;align-items:center;gap:6px}
.record-view-row .v{
color:var(--text);font-weight:500;text-align:right;
word-break:break-word;display:flex;align-items:center;
justify-content:flex-end;gap:6px;flex-wrap:wrap;
}
.record-view-row .v.mono{font-variant-numeric:tabular-nums;letter-spacing:0.04em;font-weight:600;font-family:var(--font-body)}
.record-view-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);font-size:12px;font-weight:600;font-family:var(--font-heading)}
.record-view-badge.success{background:var(--success-soft);color:var(--success)}
.record-view-badge.danger{background:var(--danger-soft);color:var(--danger)}
.record-view-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* === [FIX-VIEW-001-CSS] Разбивка итоговой суммы: запчасти + работы === */
.record-view-total{
background:linear-gradient(135deg,var(--surface) 0%,var(--accent-soft) 100%);
border:1.5px solid var(--accent);border-radius:var(--r-lg);
padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;
gap:var(--sp-3);
box-shadow:var(--shadow-sm),0 0 0 1px var(--accent-soft);
position:relative;overflow:hidden;
}
.record-view-total::before{
content:"";position:absolute;top:-30%;right:-10%;
width:180px;height:180px;
background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
pointer-events:none;opacity:0.5;
}

/* Разбивка по строкам */
.record-view-total-breakdown{
display:flex;flex-direction:column;gap:4px;
padding-bottom:var(--sp-2);
border-bottom:1px dashed var(--border-strong);
position:relative;
}
.record-view-total-row{
display:flex;justify-content:space-between;align-items:center;
font-size:13px;color:var(--text-2);font-weight:500;
line-height:1.3;
}
.record-view-total-row span:first-child{
color:var(--text-3);
}
.record-view-total-row span:last-child{
font-family:var(--font-heading);
font-weight:600;
color:var(--text);
font-variant-numeric:tabular-nums;
letter-spacing:-0.01em;
}

/* Итоговая линия */
.record-view-total-line{
display:flex;align-items:center;justify-content:space-between;
gap:var(--sp-3);position:relative;
}
.record-view-total-label{
font-family:var(--font-heading);font-size:12px;text-transform:uppercase;
letter-spacing:0.12em;color:var(--text-2);font-weight:700;position:relative;
}
.record-view-total-value{
font-family:var(--font-heading);font-size:clamp(22px,4vw,28px);font-weight:700;
letter-spacing:-0.03em;background:var(--grad-accent);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
position:relative;line-height:1.1;
}

/* Итоги по секциям (запчасти/работы) */
.record-view-section-total{
display:flex;justify-content:space-between;align-items:center;
padding:var(--sp-3) var(--sp-4);
margin-top:var(--sp-3);
background:var(--surface);
border:1px solid var(--border-strong);
border-radius:var(--r-md);
transition:all var(--dur) var(--ease-out);
}
.record-view-section-total:hover{
border-color:var(--accent);
background:var(--surface-2);
}
.record-view-section-total-label{
font-size:12px;
font-weight:600;
color:var(--text-2);
text-transform:uppercase;
letter-spacing:0.08em;
}
.record-view-section-total-value{
font-family:var(--font-heading);
font-weight:700;
font-size:16px;
color:var(--text);
letter-spacing:-0.01em;
font-variant-numeric:tabular-nums;
}

@media (max-width:480px){
.record-view-total{padding:var(--sp-3) var(--sp-4)}
.record-view-total-line{flex-direction:column;align-items:flex-start;gap:4px}
.record-view-total-value{align-self:flex-start}
.record-view-section-total{padding:var(--sp-3)}
}
.record-view-note{
display:flex;align-items:flex-start;gap:var(--sp-3);
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
font-size:14px;color:var(--text-2);line-height:1.55;
}
.record-view-note-icon{
flex-shrink:0;
width:20px;height:20px;
color:var(--text-3);
margin-top:1px;
}
.record-view-note-icon svg{
width:100%;height:100%;
stroke:currentColor;stroke-width:2;fill:none;
stroke-linecap:round;stroke-linejoin:round;
}
.record-view-note-text{
flex:1;min-width:0;
word-break:break-word;
}
.record-view-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}
.record-view-actions .btn{min-height:48px;font-weight:600;font-size:14px}
@media (max-width:480px){
.record-view-hero{padding:var(--sp-5);gap:var(--sp-3)}
.record-view-hero-icon{width:48px;height:48px}
.record-view-hero-icon svg{width:22px;height:22px}
.record-view-row{grid-template-columns:1fr;gap:2px}
.record-view-row .v{justify-content:flex-start;text-align:left}
.record-view-row + .record-view-row{border-top:none;padding-top:6px}
.record-view-actions{grid-template-columns:1fr}
}

/* ============================================
   [VIEW-REDESIGN-001] ПРОФЕССИОНАЛЬНЫЙ ДИЗАЙН МОДАЛКИ ПРОСМОТРА
   ============================================ */

/* === SHOP CARD: выделенная карточка для СТО === */
.record-view-shop-card{
display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-md);
}
.record-view-shop-icon{
width:40px;height:40px;border-radius:var(--r-sm);
background:var(--accent-soft);color:var(--accent);
display:grid;place-items:center;flex-shrink:0;
}
.record-view-shop-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.record-view-shop-info{flex:1;min-width:0}
.record-view-shop-label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);font-weight:600;margin-bottom:2px}
.record-view-shop-name{font-size:15px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* === ITEM CARD (деталь/работа): улучшенная карточка === */
.record-view-item-card{
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:var(--sp-4);
transition:all var(--dur) var(--ease-out);
}
.record-view-item-card + .record-view-item-card{margin-top:var(--sp-3)}
.record-view-item-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.record-view-item-card-header{
display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
margin-bottom:var(--sp-3);
}
.record-view-item-card-title{
display:flex;align-items:center;gap:10px;flex:1;min-width:0;
}
.record-view-item-card-title-icon{
width:32px;height:32px;border-radius:var(--r-sm);
display:grid;place-items:center;flex-shrink:0;
}
.record-view-item-card-title-icon.part{background:rgba(99,102,241,0.12);color:#6366f1}
.record-view-item-card-title-icon.work{background:rgba(168,85,247,0.12);color:#a855f7}
.record-view-item-card-title-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.record-view-item-card-name{
font-size:15px;font-weight:600;color:var(--text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;word-break:break-word;
line-height:1.35;
}
.record-view-item-card-price{
font-family:var(--font-heading);
font-size:16px;font-weight:700;
color:var(--text);letter-spacing:-0.01em;
flex-shrink:0;white-space:nowrap;
}
.record-view-item-card-meta{
display:flex;flex-wrap:wrap;gap:6px;
margin-top:var(--sp-2);
}
.record-view-item-card-meta-item{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-full);
font-size:12px;font-weight:500;
color:var(--text-2);
}
.record-view-item-card-meta-item.mono{
font-variant-numeric:tabular-nums;
letter-spacing:0.04em;
font-weight:600;
font-family:var(--font-body);
}
.record-view-item-card-meta-item .meta-label{
color:var(--text-3);
}
.record-view-item-card-analog{
margin-top:var(--sp-3);
padding:var(--sp-2) var(--sp-3);
background:var(--warning-soft);
border:1px solid rgba(245,158,11,0.3);
border-radius:var(--r-sm);
font-size:12px;color:var(--text-2);
line-height:1.4;
}
.record-view-item-card-analog-label{
font-weight:600;color:var(--warning);
}

/* === [FIX-CAT-STYLE-001] CATEGORY BADGE в карточке ===
Убран text-transform:uppercase и агрессивные цвета (синий/фиолетовый).
Теперь категория — нейтральный subtitle, не отвлекает от основной информации. */
.record-view-item-card-category{
display:inline-flex;align-items:center;gap:4px;
padding:2px 8px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-sm);
font-size:11px;font-weight:500;
color:var(--text-2);
letter-spacing:0;
margin-top:var(--sp-2);
}
/* [FIX-CAT-COLORS-001] Цветовая дифференциация категорий: детали = индиго, работы = фиолетовый */
.record-view-item-card--part .record-view-item-card-category{
background:rgba(99,102,241,0.08);
border-color:rgba(99,102,241,0.25);
color:#6366f1;
}
.record-view-item-card--work .record-view-item-card-category{
background:rgba(168,85,247,0.08);
border-color:rgba(168,85,247,0.25);
color:#a855f7;
}

/* === LINK BADGE (связь деталь↔работа) === */
.record-view-item-card-link{
display:inline-flex;align-items:center;gap:4px;
padding:3px 8px;
background:var(--accent-soft);
border:1px solid var(--accent);
border-radius:var(--r-full);
font-size:11px;font-weight:600;
color:var(--accent);
}
.record-view-item-card-link svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* === DETAIL GRID для расходов (ключ-значение в 2 колонки) === */
.record-view-detail-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:var(--sp-3);
}
@media (max-width:400px){
.record-view-detail-grid{grid-template-columns:1fr}
}
.record-view-detail-item{
display:flex;flex-direction:column;gap:2px;
}
.record-view-detail-item.full-width{grid-column:1 / -1}
.record-view-detail-label{
font-size:11px;text-transform:uppercase;
letter-spacing:0.08em;color:var(--text-3);
font-weight:600;
}
.record-view-detail-value{
font-size:14px;font-weight:500;color:var(--text);
word-break:break-word;
}
.record-view-detail-value.mono{
font-variant-numeric:tabular-nums;
letter-spacing:0.04em;
font-weight:600;
}

/* === STATUS BADGE для напоминаний === */
.record-view-status-badge{
display:inline-flex;align-items:center;gap:6px;
padding:6px 14px;
border-radius:var(--r-full);
font-size:13px;font-weight:600;
font-family:var(--font-heading);
}
.record-view-status-badge.done{
background:var(--success-soft);
color:var(--success);
}
.record-view-status-badge.missed{
background:var(--danger-soft);
color:var(--danger);
}
.record-view-status-badge.active{
background:var(--accent-soft);
color:var(--accent);
}
.record-view-status-badge svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* === SUMMARY STRIP (краткая сводка под hero) === */
.record-view-summary{
display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.record-view-summary-item{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-full);
font-size:12px;font-weight:600;
color:var(--text-2);
}
.record-view-summary-item svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.record-view-summary-item strong{
color:var(--text);
font-family:var(--font-heading);
}

/* === MOBILE ADJUSTMENTS === */
@media (max-width:480px){
.record-view-item-card{padding:var(--sp-3)}
.record-view-item-card-price{font-size:15px}
.record-view-item-card-meta-item{font-size:11px;padding:3px 8px}
}
.copy-btn{
display:inline-flex;align-items:center;gap:4px;
padding:5px 9px;border-radius:var(--r-xs);
background:var(--surface-2);color:var(--text-2);
font-size:11px;cursor:pointer;
transition:all var(--dur) var(--ease-out);
margin-left:var(--sp-2);vertical-align:middle;
font-weight:600;border:1px solid var(--border);
}
.copy-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.copy-btn:active{transform:scale(0.95)}
.record-view .copy-btn{padding:6px;width:28px;height:28px;display:inline-grid;place-items:center}
.record-view .copy-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toast-wrap{
position:fixed;
left:0;right:0;
bottom:calc(var(--sab) + 92px);
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-2);
z-index:10100;
pointer-events:none;
padding:0 var(--sp-4);
}
/* FIX-TOAST-02: на страницах без нижнего меню (тарифы, правовые, auth, админ) тост прижат к низу экрана */
body:not(.has-tabbar) .toast-wrap{
bottom:calc(var(--sab) + 24px);
}
.toast{
pointer-events:none;
position:relative;
display:flex;align-items:center;
gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
max-width:min(420px, 100%);
background:var(--glass);
backdrop-filter:blur(28px) saturate(180%);
-webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid var(--glass-border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,0.04) inset;
font-size:14px;font-weight:500;color:var(--text);
letter-spacing:-0.01em;
animation:toastIn 320ms var(--ease-spring) both;
overflow:hidden;
}
.toast::before{
content:"";position:absolute;inset:0;
background:var(--grad-mesh);opacity:0.35;pointer-events:none;
}
.toast-icon{
width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;flex-shrink:0;
position:relative;z-index:1;
}
.toast-icon svg{
width:18px;height:18px;stroke-width:2.5;fill:none;
stroke-linecap:round;stroke-linejoin:round;
}
.toast-icon.success{
background:var(--success-soft);color:var(--success);
box-shadow:0 0 32px var(--success-soft);
}
.toast-icon.success svg{
stroke:var(--success);
stroke-dasharray:30;stroke-dashoffset:30;
animation:toastDraw 600ms 150ms var(--ease-out) forwards;
}
.toast-icon.error{
background:var(--danger-soft);color:var(--danger);
box-shadow:0 0 32px var(--danger-soft);
}
.toast-icon.error svg{
stroke:var(--danger);
stroke-dasharray:24;stroke-dashoffset:24;
animation:toastDraw 500ms 150ms var(--ease-out) forwards;
}
.toast-icon.info{
background:var(--accent-soft);color:var(--accent);
box-shadow:0 0 32px var(--accent-soft);
}
.toast-icon.info svg{
stroke:var(--accent);
animation:toastPulse 1.2s ease-in-out infinite;
}
.toast-text{
position:relative;z-index:1;
font-family:var(--font-body);
font-weight:500;
line-height:1.3;
}
.toast.leaving{
animation:toastOut 320ms var(--ease-smooth) forwards;
}
@keyframes toastIn{
0%{opacity:0;transform:translateY(12px) scale(0.96);filter:blur(4px)}
60%{opacity:1;filter:blur(0)}
100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes toastOut{
0%{opacity:1;transform:scale(1);filter:blur(0)}
100%{opacity:0;transform:scale(0.9);filter:blur(4px)}
}
@keyframes toastDraw{
to{stroke-dashoffset:0}
}
@keyframes toastPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.7;transform:scale(0.94)}
}
@media (prefers-reduced-motion:reduce){
.toast{animation:none;opacity:1;transform:none}
.toast-icon.success svg,.toast-icon.error svg{animation:none;stroke-dashoffset:0}
}
.tooltip{
width:max-content;
position:fixed;z-index:20000;
background:var(--text);color:var(--bg);
padding:11px 15px;border-radius:var(--r-md);
font-size:13px;line-height:1.45;max-width:260px;
box-shadow:var(--shadow-lg);pointer-events:none;
opacity:0;transform:translateY(6px) scale(0.96);
transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
font-weight:500;
}
.tooltip.show{opacity:1;transform:translateY(0) scale(1)}
.tooltip::after{content:"";position:absolute;width:10px;height:10px;background:var(--text);transform:rotate(45deg)}
.tooltip.top::after{bottom:-5px;left:var(--arr-x,50%);margin-left:-5px}
.tooltip.bottom::after{top:-5px;left:var(--arr-x,50%);margin-left:-5px}
.skeleton{
background:linear-gradient(90deg,var(--skeleton-base) 0%,var(--skeleton-shine) 50%,var(--skeleton-base) 100%);
background-size:200% 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-line{height:14px;margin-bottom:var(--sp-2)}
.skel-line.w60{width:60%}.skel-line.w80{width:80%}.skel-line.w40{width:40%}
.skel-block{height:112px}.skel-circle{width:46px;height:46px;border-radius:50%}
.empty{text-align:center;padding:var(--sp-9) var(--sp-5);color:var(--text-3)}
.empty-ico{
width:76px;height:76px;margin:0 auto var(--sp-4);
border-radius:50%;background:var(--grad-accent-soft);
display:grid;place-items:center;color:var(--accent);
}
.empty-title{font-family:var(--font-heading);font-size:17px;color:var(--text);font-weight:600;margin-bottom:var(--sp-2)}
.empty-sub{font-size:14px;max-width:320px;margin:0 auto var(--sp-5);color:var(--text-2)}
.garage-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:640px){.garage-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.garage-grid{grid-template-columns:repeat(3,1fr)}}
.car-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--sp-5);
position:relative;transition:all var(--dur) var(--ease-out);
cursor:pointer;overflow:hidden;
display:flex;flex-direction:column;
}
.car-card::before{
content:"";position:absolute;top:0;right:0;
width:120px;height:120px;background:var(--grad-accent-soft);
border-radius:50%;transform:translate(40%,-40%);opacity:0;
transition:opacity var(--dur) var(--ease-out);
}
.car-card:hover{border-color:var(--border-strong);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.car-card:hover::before{opacity:1}
.car-card.active{
border-color:var(--accent);
box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-md);
background:linear-gradient(135deg,var(--surface) 0%,var(--accent-soft) 100%);
}
.car-card-badge{
position:absolute;top:var(--sp-3);right:var(--sp-3);
padding:5px 12px;background:var(--grad-accent);color:#fff;
font-size:11px;font-weight:700;border-radius:var(--r-full);
letter-spacing:0.04em;text-transform:uppercase;box-shadow:var(--shadow-accent);
}
.car-card-name{font-family:var(--font-heading);font-size:18px;font-weight:700;letter-spacing:-0.02em;position:relative}
.car-card-plate{
display:inline-block;margin-top:var(--sp-2);
padding:5px 12px;background:var(--grad-accent);color:#fff;
border-radius:var(--r-xs);font-family:var(--font-heading);
font-weight:700;font-size:12px;letter-spacing:0.08em;
position:relative;cursor:pointer;
transition:all var(--dur) var(--ease-out);
align-self:flex-start;
}
.car-card-plate:hover{transform:scale(1.02)}
.car-card-plate:active{transform:scale(0.98)}
.car-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3);font-size:12px;color:var(--text-3);position:relative}
.car-card-specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3);margin-bottom:var(--sp-4);position:relative}
.spec-chip{
display:inline-flex;align-items:center;gap:5px;
padding:5px 10px;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r-full);
font-size:11px;font-weight:600;color:var(--text-2);
letter-spacing:0.01em;white-space:nowrap;
}
.spec-chip svg{
width:12px;height:12px;stroke:currentColor;stroke-width:2;
fill:none;stroke-linecap:round;stroke-linejoin:round;
color:var(--text-3);flex-shrink:0;
}
.spec-chip.spec-year svg{color:var(--info)}
.spec-chip.spec-color svg{color:#ec4899}
.spec-chip.spec-gen svg{color:#a855f7}
.spec-chip.spec-fuel svg{color:var(--warning)}
.spec-chip.spec-engine svg{color:var(--success)}
.spec-chip.spec-gear svg{color:var(--accent)}
.spec-chip.spec-drive svg{color:var(--info)}
.spec-chip.spec-mileage{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.spec-chip.spec-mileage svg{color:var(--accent)}
.car-card-meta + .car-card-meta{margin-bottom:var(--sp-4)}
.car-card-actions{
display:flex;flex-direction:column;gap:var(--sp-2);margin-top:auto;
padding-top:var(--sp-3);border-top:1px solid var(--border);
position:relative;
}
.car-card-row{display:flex;gap:var(--sp-2)}
.car-card-row .btn-share{flex:1}
.car-card-row .btn-del{flex:0 0 42px;padding:10px 0}
.car-card-actions .btn{
padding:10px 14px;font-size:13px;min-height:40px;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
font-weight:600;letter-spacing:-0.01em;
border-radius:var(--r-md);transition:all var(--dur) var(--ease-out);
position:relative;overflow:hidden;
}
.car-card-actions .btn svg{
width:14px;height:14px;stroke:currentColor;stroke-width:2.2;
fill:none;stroke-linecap:round;stroke-linejoin:round;
flex-shrink:0;transition:transform var(--dur) var(--ease-out);
}
.car-card-actions .btn-edit{
background:var(--accent-soft);color:var(--accent);
border:1px solid transparent;
}
.car-card-actions .btn-edit:hover{
background:var(--grad-accent);color:#fff;
box-shadow:var(--shadow-accent);transform:translateY(-2px);
}
.car-card-actions .btn-edit:hover svg{transform:none}
.car-card-actions .btn-edit:active{transform:translateY(0) scale(0.98)}
.car-card-actions .btn-share{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
.car-card-actions .btn-share:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
.car-card-actions .btn-del{
background:var(--danger-soft);color:var(--danger);
border:1px solid transparent;
}
.car-card-actions .btn-del:hover{
background:var(--danger);color:#fff;
box-shadow:0 8px 20px rgba(239,68,68,0.25);transform:translateY(-2px);
}
.car-card-actions .btn-del:hover svg{transform:none}
.car-card-actions .btn-del:active{transform:translateY(0) scale(0.98)}
.reminder-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--sp-4);
display:flex;align-items:center;gap:var(--sp-4);
margin-bottom:var(--sp-3);transition:all var(--dur) var(--ease-out);
}
.reminder-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.reminder-card.urgent{border-color:var(--danger);background:var(--danger-soft)}
.reminder-card.soon{border-color:var(--warning);background:var(--warning-soft)}
.reminder-ico{
width:46px;height:46px;border-radius:var(--r-md);
background:rgba(168,85,247,0.14);color:#a855f7;
display:grid;place-items:center;flex-shrink:0;
}
.reminder-body{flex:1;min-width:0}
.reminder-title{font-weight:500;font-size:15px}
.reminder-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.reminder-actions{display:flex;gap:var(--sp-2);flex-shrink:0}
@media (max-width:480px){
.reminder-card{gap:var(--sp-3)}
.reminder-ico{width:40px;height:40px}
.reminder-ico svg{width:18px;height:18px}
}
/* === FIX-REM-BTN-01: икон-кнопки напоминаний в язык дизайн-кода === */
.reminder-action-btn{
width:38px;height:38px;border-radius:var(--r-md);
display:grid;place-items:center;
background:var(--surface-2);border:1px solid var(--border);
color:var(--text-2);cursor:pointer;
transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
flex-shrink:0;
}
.reminder-action-btn svg{
width:16px;height:16px;stroke:currentColor;stroke-width:2.2;
fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.reminder-action-btn:hover{
background:var(--accent-soft);border-color:var(--accent);color:var(--accent);
transform:translateY(-1px);
}
.reminder-action-btn:active{transform:scale(0.94)}
.reminder-action-btn.danger:hover{
background:var(--danger-soft);border-color:var(--danger);color:var(--danger);
}
/* === FIX-REM-ROW-01: напоминания — адаптивный ряд карточек с мерой 680px === */
#garageReminders{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:stretch}
#garageReminders:not(:empty){margin-bottom:var(--sp-4)}
#garageReminders .section-head{flex-basis:100%;margin-bottom:var(--sp-1)}
#garageReminders .reminder-card{flex:1 1 460px;margin-bottom:0}
.reminder-due-chip{
padding:5px 10px;border-radius:var(--r-full);
font-size:11px;font-weight:600;letter-spacing:0.02em;
background:var(--surface-2);color:var(--text-2);
border:1px solid var(--border);
white-space:nowrap;flex-shrink:0;
font-variant-numeric:tabular-nums;
}
.reminder-due-chip.warn{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.reminder-due-chip.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
@media (max-width:640px){
.reminder-due-chip{display:none}
}
.settings-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-4)}
.settings-group-title{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);font-weight:700;padding:var(--sp-3) var(--sp-4) var(--sp-2)}
.settings-item{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
padding:var(--sp-4);border-bottom:1px solid var(--border);
min-height:var(--tap);cursor:pointer;
transition:background var(--dur) var(--ease-out);
}
.settings-item-stacked{flex-direction:column;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4)}
.settings-item-text{width:100%}
.settings-item-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.settings-item-stacked .segmented-pills{width:auto;justify-content:flex-start;flex-wrap:nowrap}
@media (min-width:640px){
.settings-item-stacked{flex-direction:row;align-items:center;justify-content:space-between}
.settings-item-stacked .segmented-pills{width:auto}
}
.settings-item:last-child{border-bottom:0}
.settings-item:hover{background:var(--surface-2)}
.settings-item:active{background:var(--bg-soft)}
.settings-item-label{font-size:15px;font-weight:500}
.settings-item-value{font-size:14px;color:var(--text-3);display:flex;align-items:center;gap:var(--sp-2)}
.settings-item.danger .settings-item-label{color:var(--danger)}
.switch{
position:relative;width:48px;height:28px;
background:var(--surface-3);border:1px solid var(--border);
border-radius:var(--r-full);cursor:pointer;
transition:background var(--dur) var(--ease-out);flex-shrink:0;
}
.switch::after{
content:"";position:absolute;top:2px;left:2px;
width:22px;height:22px;background:#fff;border-radius:50%;
box-shadow:var(--shadow-sm);
transition:transform var(--dur) var(--ease-spring);
}
.switch.on{background:var(--grad-accent);border-color:transparent}
.switch.on::after{transform:translateX(20px)}
.segmented{display:inline-flex;background:var(--surface-2);border-radius:var(--r-full);padding:3px;gap:2px;border:1px solid var(--border);flex-wrap:wrap}
/* === FIX-AN-SEG-01: период на узких экранах — ровная сетка из 4 колонок === */
@media (max-width:480px){
#periodSeg{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
#periodSeg .segmented-btn{padding:9px 2px;font-size:12px;text-align:center;white-space:nowrap;min-height:34px}
}
.segmented-pills{background:var(--surface-2);border:1px solid var(--border);padding:4px;border-radius:var(--r-lg)}
.segmented-btn{
padding:9px 18px;border-radius:var(--r-full);
font-size:13px;font-weight:500;color:var(--text-2);
cursor:pointer;transition:all var(--dur) var(--ease-out);
min-height:34px;white-space:nowrap;
border:1px solid transparent;
}
.segmented-btn:hover{color:var(--text)}
.segmented-pills .segmented-btn{
padding:9px 16px;font-size:14px;font-weight:600;
color:var(--text-3);border-radius:var(--r-md);background:transparent;
border:1px solid transparent;
}
.segmented-pills .segmented-btn:hover{
color:var(--text-2);
background:var(--surface-3);
}
[data-theme="dark"] .segmented-pills .segmented-btn:hover{
background:rgba(255,255,255,0.05);
}
.segmented-pills .segmented-btn.active{
background:var(--surface);color:var(--text);
border:1px solid var(--border-strong);
box-shadow:var(--shadow-sm);
font-weight:700;
}
.segmented-pills .segmented-btn.active:hover{
background:var(--bg-elev);
box-shadow:var(--shadow-md);
}
.segmented-btn.active{
background:var(--surface);color:var(--text);
border:1px solid var(--border-strong);
box-shadow:var(--shadow-sm);
font-weight:600;
}
[data-theme="dark"] .segmented-pills .segmented-btn.active{
background:var(--surface-3);
border-color:rgba(255,255,255,0.14);
}
[data-theme="dark"] .segmented-pills .segmented-btn.active:hover{
background:rgba(255,255,255,0.14);
}
[data-theme="dark"] .segmented-btn.active{
background:var(--surface-3);
}
.parts-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.part-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);position:relative}
.part-remove{
position:absolute;top:8px;right:8px;
width:26px;height:26px;border-radius:50%;
background:var(--surface);display:grid;place-items:center;
color:var(--text-3);cursor:pointer;
transition:all var(--dur) var(--ease-out);border:1px solid var(--border);
}
.part-remove:hover{background:var(--danger);color:#fff;border-color:transparent;transform:rotate(90deg)}
.work-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);margin-top:var(--sp-2)}
.work-item.disabled{opacity:0.5;pointer-events:none}
.article-suggest{
position:absolute;top:100%;left:0;right:0;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:var(--shadow-lg);
max-height:220px;overflow-y:auto;z-index:10;
margin-top:4px;display:none;
}
.article-suggest.open{display:block}
.article-suggest-item{
padding:11px 14px;cursor:pointer;font-size:13px;
border-bottom:1px solid var(--border);
transition:background var(--dur) var(--ease-out);
}
.article-suggest-item:last-child{border-bottom:0}
.article-suggest-item:hover{background:var(--accent-soft)}
.article-suggest-item .main{font-weight:500;color:var(--text)}
.article-suggest-item .sub{font-size:12px;color:var(--text-3);margin-top:2px}
.article-history{
background:var(--accent-soft);border:1px solid var(--accent);
border-radius:var(--r-sm);padding:10px 13px;
margin-top:var(--sp-2);font-size:12px;color:var(--accent);
line-height:1.45;font-weight:500;
}
.confirm-body{padding:var(--sp-5);text-align:center}
.confirm-ico{
width:60px;height:60px;border-radius:50%;
background:var(--danger-soft);color:var(--danger);
display:grid;place-items:center;margin:0 auto var(--sp-4);
}
.confirm-ico.warning{
background:var(--warning-soft);color:var(--warning);
}
.confirm-ico.warning svg{
stroke:var(--warning);
}
.confirm-title{font-family:var(--font-heading);font-size:18px;font-weight:700;margin-bottom:var(--sp-2);letter-spacing:-0.02em}
.confirm-sub{color:var(--text-2);font-size:14px}
.chart-legend{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-3);justify-content:center}
.chart-legend-item{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:var(--text-2);font-weight:500;
cursor:pointer;padding:4px 8px;border-radius:var(--r-full);
transition:all var(--dur) var(--ease-out);
}
.chart-legend-item:hover{background:var(--surface-2)}
.chart-legend-item.legend-hidden{
  opacity:0.5;
  text-decoration:line-through;
  text-decoration-color:var(--text-3);
  text-decoration-thickness:2px;
}
.chart-legend-item.legend-hidden:hover{
  opacity:0.7;
}
.chart-legend-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}
.top-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.top-item{
display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-3);background:var(--surface);
border-radius:var(--r-md);transition:all var(--dur) var(--ease-out);
border:1px solid var(--border);cursor:pointer;
box-shadow:var(--shadow-xs);
}
.top-item:hover{background:var(--surface);border-color:var(--border-strong);transform:translateX(2px);box-shadow:var(--shadow-sm)}
.top-rank{
width:30px;height:30px;border-radius:50%;
background:var(--surface);display:grid;place-items:center;
font-family:var(--font-heading);font-weight:700;font-size:13px;
flex-shrink:0;color:var(--text-2);
}
.top-rank.gold{background:linear-gradient(135deg,var(--warning),#d97706);color:#fff;box-shadow:0 4px 12px var(--warning-soft)}
.top-rank.silver{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#fff}
.top-rank.bronze{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.top-body{flex:1;min-width:0}
.top-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.top-amt{font-family:var(--font-heading);font-weight:600;font-size:14px;flex-shrink:0}
.about-logo{
width:88px;height:88px;margin:0 auto var(--sp-4);
border-radius:var(--r-xl);background:var(--grad-accent);
display:grid;place-items:center;color:#fff;
font-family:var(--font-heading);font-weight:700;font-size:44px;
box-shadow:var(--shadow-accent),var(--shadow-lg);
position:relative;overflow:hidden;
}
.about-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 50%)}
.about-center{text-align:center}
.about-version{color:var(--text-3);font-size:13px;margin-top:var(--sp-1);font-weight:500}
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.visible{opacity:1;transform:translateY(0)}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.text-muted{color:var(--text-3)}.text-sm{font-size:13px}.text-xs{font-size:12px}.text-center{text-align:center}
.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}
.hidden{display:none !important}
input[type="number"]{font-variant-numeric:tabular-nums}
input[readonly]{
  cursor: default;
  background: var(--surface-2);
  color: var(--text-3);
  font-weight: 400;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
input[readonly]:focus {
  box-shadow: none;
  border-color: var(--border);
  background: var(--surface-2);
}
.metrics-card{display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-6) !important}
@media (min-width:768px){.metrics-card{flex-direction:row;align-items:stretch;gap:0}}
.metric-item{flex:1;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-3)}
@media (min-width:768px){
.metric-item{padding:var(--sp-4) var(--sp-6)}
.metric-item:first-child{padding-left:var(--sp-4)}
.metric-item:last-child{padding-right:var(--sp-4)}
}
.metric-label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);font-weight:700;display:flex;align-items:center;gap:6px}
/* === FIX-METRIC-ROW-02: зона подписи = 2 строки на всех колонках,
значения и единицы всегда стартуют с одной горизонтали === */
@media (min-width:768px){
.metric-label{min-height:2.8em;line-height:1.4;align-items:flex-start}
}
.metric-value{
font-family:var(--font-heading);font-weight:700;
letter-spacing:-0.03em;
background:linear-gradient(135deg,var(--text) 0%,var(--text-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
line-height:1.1;margin-top:var(--sp-1);
display:flex;flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.metric-value .metric-num{
font-size:clamp(24px,3vw,32px);
white-space:nowrap;
}
.metric-value .metric-unit{
font-size:clamp(13px,2vw,15px);font-weight:600;letter-spacing:0;
opacity:0.75;white-space:nowrap;
}
/* === Десктоп: узкие колонки — единица уходит на свою строку под число === */
@media (min-width:768px){
.metric-value{flex-direction:column;align-items:baseline;gap:2px;line-height:1}
.metric-value .metric-num{font-size:clamp(22px,2.4vw,28px)}
.metric-value .metric-unit{font-size:clamp(12px,1.2vw,14px)}
}
.metric-sub{font-size:13px;color:var(--text-3);margin-top:var(--sp-1);line-height:1.45}
.metric-progress{width:100%;height:8px;background:var(--surface-2);border-radius:var(--r-full);overflow:hidden;margin-top:var(--sp-2)}
.metric-progress-bar{height:100%;background:var(--grad-accent);border-radius:var(--r-full);transition:width 0.6s var(--ease-out);min-width:0}
.metric-divider{display:none}
@media (min-width:768px){
.metric-divider{display:block;width:1px;background:linear-gradient(180deg,transparent 0%,var(--border-strong) 20%,var(--border-strong) 80%,transparent 100%);flex-shrink:0}
}
@media (max-width:767px){
.metrics-card{padding:var(--sp-5) !important}
.metric-item{padding:var(--sp-3) 0}
.metric-item:not(:last-child){border-bottom:1px solid var(--border);padding-bottom:var(--sp-4)}
.metric-item:not(:first-child){padding-top:var(--sp-4)}
}
canvas{max-width:100% !important;height:auto !important}
.chart-wrap canvas{width:100% !important}
/* === UX-HOME-01: на узких экранах значения не обрезаются === */
/* === FIX-STAT-02: на смартфонах полные оси (wdth 150), размер через cqw === */
@media (max-width:480px){
.stat-label{font-size:10px;letter-spacing:0.04em}
.stat-value{
font-size:clamp(14px,10cqw,18px);
font-variation-settings:'opsz' 70,'slnt' 0,'wdth' 150,'wght' 700,'XOPQ' 96,'XTRA' 520,'YOPQ' 79,'YTAS' 698,'YTDE' -203,'YTFI' 686,'YTLC' 570,'YTUC' 660;
}
.stat-delta{font-size:10px}
.hero-watermark{width:120px;height:120px;opacity:0.08}
}
/* === FIX-HERO-08: VIN — копирование тапом, глазок для раскрытия, состояние на устройстве === */
#heroVinVal,#heroPlateVal{cursor:pointer;flex:1;min-width:0}
#heroVinVal:focus-visible,#heroPlateVal:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}
#heroVinChip,#heroPlateChip{cursor:pointer}
.hero-meta-chip .vin-eye svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-meta-chip .vin-eye .icon-eye-off{display:none}
.hero-meta-chip.revealed .vin-eye .icon-eye{display:none}
.hero-meta-chip.revealed .vin-eye .icon-eye-off{display:block}
.hero-meta-chip.revealed .val{
white-space:normal;
word-break:break-all;
overflow:visible;
text-overflow:clip;
}
@media (max-width:375px){
.chart-wrap{height:220px}
.hero-car{padding:var(--sp-5) var(--sp-4)}
.hero-car-name{font-size:clamp(22px,6vw,28px)}
.stats-grid{gap:var(--sp-2)}
.stat-card{padding:var(--sp-3);min-height:96px}
.stat-delta{font-size:11px;padding:2px 8px}
.car-card-specs{gap:4px}
.spec-chip{padding:4px 8px;font-size:10px}
}
/* === FIX-HERO-12: на узких экранах информация не обрезается, а переносится === */
@media (max-width:480px){
.stat-label{font-size:10px;letter-spacing:0.04em}
.stat-label > span:first-child{white-space:normal;line-height:1.3}
.stat-delta{font-size:10px;white-space:normal;line-height:1.3;padding:5px 10px;border-radius:var(--r-md)}
}
@media (max-width:320px){
.chart-wrap{height:200px}
.container{padding:0 var(--sp-3)}
}
.feedback-grid{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.feedback-card{
display:flex;align-items:center;gap:var(--sp-4);
padding:var(--sp-4);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-lg);
text-decoration:none;color:inherit;
transition:all var(--dur) var(--ease-out);
position:relative;overflow:hidden;
}
.feedback-card::before{
content:"";position:absolute;top:0;right:0;
width:100px;height:100px;border-radius:50%;
transform:translate(30%,-30%);opacity:0;
transition:opacity var(--dur) var(--ease-out);
}
.feedback-card:hover{
border-color:var(--border-strong);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.feedback-card:hover::before{opacity:0.15}
.feedback-card:active{transform:scale(0.98)}
.feedback-card.tg::before{background:#229ED9}
.feedback-card.email::before{background:var(--accent)}
.feedback-ico{
width:46px;height:46px;border-radius:var(--r-md);
display:grid;place-items:center;flex-shrink:0;
color:#fff;box-shadow:var(--shadow-sm);
position:relative;
}
.feedback-ico.tg{background:linear-gradient(135deg,#229ED9,#1DA1F2)}
.feedback-ico.email{background:var(--grad-accent)}
.feedback-ico svg{width:22px;height:22px}
.feedback-ico.tg svg{fill:#fff;stroke:none}
.feedback-ico.email svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feedback-body{flex:1;min-width:0}
.feedback-title{font-weight:600;font-size:15px;letter-spacing:-0.01em}
.feedback-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.feedback-arrow{
color:var(--text-3);flex-shrink:0;
transition:transform var(--dur) var(--ease-out);
}
.feedback-card:hover .feedback-arrow{transform:translateX(4px);color:var(--accent)}
.install-hero{
background:var(--grad-hero);border-radius:var(--r-xl);
padding:var(--sp-6);text-align:center;color:#fff;
position:relative;overflow:hidden;margin-bottom:var(--sp-4);
box-shadow:var(--shadow-lg),var(--shadow-accent);
}
.install-hero::before{
content:"";position:absolute;top:-50%;right:-20%;
width:400px;height:400px;
background:radial-gradient(circle,rgba(255,255,255,0.18) 0%,transparent 70%);
pointer-events:none;
}
.install-hero-ico{
width:80px;height:80px;margin:0 auto var(--sp-3);
border-radius:var(--r-xl);background:rgba(255,255,255,0.2);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.28);
display:grid;place-items:center;
font-family:var(--font-heading);font-weight:700;font-size:40px;
position:relative;box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.install-hero h3{
font-family:var(--font-heading);font-size:22px;font-weight:700;
letter-spacing:-0.02em;position:relative;margin-bottom:var(--sp-2);
}
.install-hero p{
font-size:14px;opacity:0.92;position:relative;max-width:320px;margin:0 auto;
}
.install-perks{
display:grid;grid-template-columns:1fr;gap:var(--sp-2);
margin-bottom:var(--sp-4);
}
@media (min-width:520px){.install-perks{grid-template-columns:1fr 1fr}}
.install-perk{
display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-3);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-md);
transition:all var(--dur) var(--ease-out);
}
.install-perk:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.install-perk-ico{
width:36px;height:36px;border-radius:var(--r-sm);
display:grid;place-items:center;flex-shrink:0;
background:var(--accent-soft);color:var(--accent);
}
.install-perk-ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.install-perk-text{font-size:13px;font-weight:500;line-height:1.3}
.install-btn{
width:100%;padding:15px 22px;
background:var(--grad-accent);color:#fff;
border-radius:var(--r-md);font-size:15px;font-weight:600;
display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
box-shadow:var(--shadow-accent);
transition:all var(--dur) var(--ease-out);
border:0;cursor:pointer;letter-spacing:-0.01em;
}
.install-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-accent),var(--shadow-md)}
.install-btn:active{transform:translateY(0) scale(0.98)}
.install-btn[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}
.install-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.install-manual{
margin-top:var(--sp-4);padding:var(--sp-4);
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);
}
.install-manual-title{
font-family:var(--font-heading);font-size:13px;font-weight:700;
text-transform:uppercase;letter-spacing:0.08em;
color:var(--text-3);margin-bottom:var(--sp-3);
display:flex;align-items:center;gap:8px;
}
.install-manual-title::before{
content:"";width:18px;height:2px;background:var(--grad-accent);border-radius:var(--r-full);
}
.install-steps{display:flex;flex-direction:column;gap:var(--sp-2)}
.install-step{
display:flex;align-items:flex-start;gap:var(--sp-3);
font-size:13px;color:var(--text-2);line-height:1.5;
}
.install-step-num{
width:22px;height:22px;border-radius:50%;
background:var(--accent-soft);color:var(--accent);
display:grid;place-items:center;flex-shrink:0;
font-family:var(--font-heading);font-weight:700;font-size:11px;
}
.install-step b{color:var(--text);font-weight:600}
.install-note{
margin-top:var(--sp-3);padding:var(--sp-3);
background:var(--surface-2);border-radius:var(--r-md);
font-size:12px;color:var(--text-3);line-height:1.5;
display:flex;align-items:flex-start;gap:8px;
}
.install-note svg{
width:14px;height:14px;stroke:currentColor;stroke-width:2.2;
fill:none;stroke-linecap:round;stroke-linejoin:round;
flex-shrink:0;margin-top:1px;color:var(--accent);
}
/* === ЭКРАН АВТОРИЗАЦИИ === */
.auth-screen{
position:fixed;inset:0;z-index:1000;
display:flex;align-items:center;justify-content:center;
background:var(--bg);
padding:var(--sp-4);
overflow-y:auto;
}
.auth-screen::before{
content:"";position:fixed;inset:0;
background:var(--grad-mesh);pointer-events:none;opacity:0.7;
}
[data-theme="dark"] .auth-screen::before{opacity:0.5}
.auth-container{
width:100%;max-width:440px;position:relative;z-index:1;
margin:auto;
animation:authFadeIn 500ms var(--ease-out) both;
}
@keyframes authFadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
.auth-card{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-2xl);padding:var(--sp-7);
box-shadow:var(--shadow-xl);
}
@media (max-width:480px){.auth-card{padding:var(--sp-5);border-radius:var(--r-xl)}}
.auth-logo{text-align:center;margin-bottom:var(--sp-6)}
.auth-logo-icon{
width:72px;height:72px;margin:0 auto var(--sp-4);
border-radius:var(--r-xl);background:var(--grad-accent);
display:grid;place-items:center;color:#fff;
font-family:var(--font-heading);font-weight:700;font-size:36px;
box-shadow:var(--shadow-accent),var(--shadow-lg);
position:relative;overflow:hidden;
}
.auth-logo-icon::after{
content:"";position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 50%);
}
.auth-title{
font-family:var(--font-heading);font-size:28px;font-weight:700;
letter-spacing:-0.03em;margin-bottom:var(--sp-2);
background:linear-gradient(135deg,var(--text) 0%,var(--text-2) 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-subtitle{font-size:14px;color:var(--text-2);line-height:1.5}
.auth-tabs{
display:flex;background:var(--surface-2);border-radius:var(--r-full);
padding:4px;margin-bottom:var(--sp-5);border:1px solid var(--border);
}
.auth-tab{
flex:1;padding:11px 16px;border-radius:var(--r-full);
font-size:14px;font-weight:600;color:var(--text-3);
cursor:pointer;transition:all var(--dur) var(--ease-out);
background:transparent;border:0;font-family:inherit;
}
.auth-tab.active{
background:var(--surface);color:var(--text);
box-shadow:var(--shadow-sm);
}
.auth-tab:hover:not(.active){color:var(--text)}
.auth-form{display:none}
.auth-form.active{display:block;animation:authFadeIn 300ms var(--ease-out)}
.auth-error{
margin-top:var(--sp-3);padding:var(--sp-3);
background:var(--danger-soft);color:var(--danger);
border-radius:var(--r-md);font-size:13px;
display:none;line-height:1.4;
border:1px solid rgba(239,68,68,0.2);
}
.auth-error.visible{display:block;animation:authFadeIn 200ms var(--ease-out)}
.auth-footer{margin-top:var(--sp-5);text-align:center}
.auth-footer-text{font-size:12px;color:var(--text-3);line-height:1.5}
.auth-forgot-btn{
background:none;border:0;color:var(--accent);
font-size:13px;font-weight:600;cursor:pointer;
font-family:inherit;padding:8px;
transition:all var(--dur) var(--ease-out);
}
.auth-forgot-btn:hover{color:var(--accent-2);text-decoration:underline}
.auth-success{
background:var(--success-soft);color:var(--success);
padding:12px;border-radius:var(--r-md);font-size:13px;
display:none;text-align:center;
border:1px solid rgba(16,185,129,0.2);
}
.auth-success.visible{display:block;animation:authFadeIn 200ms var(--ease-out)}
/* === ЭКРАН ПОДТВЕРЖДЕНИЯ EMAIL === */
.verify-code-inputs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.verify-digit {
  text-align: center !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  padding: 14px 4px !important;
  letter-spacing: 0 !important;
  caret-color: var(--accent);
}
.verify-digit:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--bg-elev);
}
.verify-hint {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.5;
}
.verify-hint strong {
  color: var(--text);
  font-weight: 600;
}
.verify-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.verify-code-inputs.error .verify-digit {
  border-color: var(--danger);
  animation: fieldShake 480ms var(--ease-spring);
}
@media (max-width: 420px) {
.verify-digit {
font-size: 20px !important;
padding: 12px 2px !important;
}
.verify-code-inputs {
gap: 5px;
}
}
@media (max-width: 360px) {
.verify-code-inputs {
gap: 4px;
}
.verify-digit {
font-size: 18px !important;
padding: 10px 1px !important;
}
}
.btn-loader svg{animation:authSpin 1s linear infinite}
@keyframes authSpin{to{transform:rotate(360deg)}}
/* === КНОПКА ВЫХОДА В НАСТРОЙКАХ === */
.logout-item{
background:var(--danger-soft);border:1px solid rgba(239,68,68,0.2);
}
.logout-item:hover{background:var(--danger);color:#fff}
.logout-item:hover .settings-item-label{color:#fff}
.logout-item:hover .settings-item-value{color:#fff}
/* === КАРТОЧКА АККАУНТА === */
.account-card{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-xl);
padding:var(--sp-5);
margin-bottom:var(--sp-4);
box-shadow:var(--shadow-sm);
position:relative;
overflow:hidden;
}
.account-card::before{
content:"";
position:absolute;
top:0;right:0;
width:200px;height:200px;
background:var(--grad-accent-soft);
border-radius:50%;
transform:translate(40%,-40%);
opacity:0.5;
pointer-events:none;
}
/* === КНОПКА ТРОЕТОЧИЕ МЕНЮ === */
.account-menu-btn{
position:absolute;
top:var(--sp-4);
right:var(--sp-4);
width:36px;
height:36px;
border-radius:var(--r-md);
background:var(--surface-2);
border:1px solid var(--border);
display:grid;
place-items:center;
color:var(--text-2);
cursor:pointer;
transition:all var(--dur) var(--ease-out);
z-index:10;
}
.account-menu-btn:hover{
background:var(--surface-3);
color:var(--text);
border-color:var(--border-strong);
transform:scale(1.05);
}
.account-menu-btn:active{
transform:scale(0.95);
}
.account-menu-btn svg{
width:20px;
height:20px;
stroke:currentColor;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}

/* === ВЫПАДАЮЩЕЕ МЕНЮ АККАУНТА === */
.account-menu{
position:absolute;
top:calc(var(--sp-4) + 44px);
right:var(--sp-4);
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-lg);
min-width:220px;
z-index:20;
display:none;
flex-direction:column;
padding:var(--sp-2);
gap:2px;
}
.account-menu.open{
display:flex;
animation:accountMenuIn 200ms var(--ease-out);
}
@keyframes accountMenuIn{
from{opacity:0;transform:translateY(-8px) scale(0.95);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.account-menu-item{
display:flex;
align-items:center;
gap:var(--sp-3);
width:100%;
padding:12px 14px;
background:transparent;
border:none;
border-radius:var(--r-md);
font-size:14px;
font-weight:500;
cursor:pointer;
font-family:inherit;
transition:all var(--dur) var(--ease-out);
text-align:left;
min-height:44px;
color:var(--text);
}
.account-menu-item:hover{
background:var(--surface-2);
}
.account-menu-item:active{
transform:scale(0.98);
background:var(--surface-3);
}
.account-menu-item svg{
width:18px;
height:18px;
stroke:currentColor;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
flex-shrink:0;
}
.account-menu-item span{
flex:1;
}
.account-menu-item-warning{
color:var(--warning);
}
.account-menu-item-warning:hover{
background:var(--warning-soft);
}
.account-menu-item-danger{
color:var(--danger);
}
.account-menu-item-danger:hover{
background:var(--danger-soft);
}
.account-menu-divider{
height:1px;
background:var(--border);
margin:var(--sp-1) var(--sp-2);
}
.account-menu-item-accent{
color:var(--accent);
}
.account-menu-item-accent:hover{
background:var(--accent-soft);
}
@media(max-width:480px){
.account-menu-btn{
top:var(--sp-3);
right:var(--sp-3);
}
.account-menu{
top:calc(var(--sp-3) + 44px);
right:var(--sp-3);
min-width:min(200px, 85vw);
max-width:calc(100vw - 32px);
}
}
.account-header{
display:flex;
align-items:center;
gap:var(--sp-4);
position:relative;
}
.account-avatar{
width:64px;height:64px;
border-radius:var(--r-xl);
background:var(--grad-accent);
display:grid;place-items:center;
color:#fff;
font-family:var(--font-heading);
font-weight:700;font-size:28px;
box-shadow:var(--shadow-accent);
flex-shrink:0;
position:relative;
overflow:hidden;
}
.account-avatar::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 50%);
pointer-events:none;
}
.account-info{
flex:1;min-width:0;
}
.account-email{
font-size:15px;font-weight:600;
color:var(--text);
white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;
margin-bottom:4px;
}
.account-status{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
color:var(--text-3);
font-weight:500;
}
.account-status-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--success);
box-shadow:0 0 8px var(--success-soft);
}
.account-divider{
height:1px;
background:var(--border);
margin:var(--sp-4) 0;
position:relative;
}
/* === КОМПАКТНЫЕ ДЕЙСТВИЯ АККАУНТА === */
.account-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-3);
}

.account-action-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease-out);
    text-align: left;
    min-height: 44px;
}

.account-action-item:hover {
    background: var(--surface-2);
    transform: translateX(2px);
}

.account-action-item:active {
    transform: scale(0.98);
    background: var(--surface-3);
}

.account-action-icon {
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease-out);
}

.account-action-item:hover .account-action-icon {
    transform: scale(1.1);
}

.account-action-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-action-chevron {
    flex-shrink: 0;
    color: var(--text-3);
    opacity: 0.5;
    transition: all var(--dur) var(--ease-out);
}

.account-action-item:hover .account-action-chevron {
    opacity: 1;
    transform: translateX(3px);
}

/* Вариант: предупреждение (отмена подписки) */
.account-action-warning {
    color: var(--warning);
}

.account-action-warning .account-action-icon {
    color: var(--warning);
}

.account-action-warning:hover {
    background: var(--warning-soft);
}

/* Вариант: опасность (выход) */
.account-action-danger {
    color: var(--danger);
}

.account-action-danger .account-action-icon {
    color: var(--danger);
}

.account-action-danger:hover {
    background: var(--danger-soft);
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .account-action-item {
        padding: 11px 12px;
        font-size: 14px;
    }
    
    .account-action-icon {
        width: 18px;
        height: 18px;
    }
}
@media (max-width:480px){
.account-avatar{
width:56px;height:56px;
font-size:24px;
}
.account-card{
padding:var(--sp-4);
}
}
/* === ПОДСВЕТКА ПОЛЕЙ С ОШИБКОЙ === */
.input.error,
.select.error,
.textarea.error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-soft), var(--focus-ring) !important;
    animation: fieldShake 480ms var(--ease-spring);
}

.input.error::placeholder {
    color: var(--danger);
    opacity: 0.7;
}

@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(7px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    90% { transform: translateX(2px); }
}

/* === КАСТОМНЫЙ ЧЕКБОКС === */
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--border) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all var(--dur) var(--ease-out) !important;
    margin: 0 !important;
    padding: 0 !important;
}

input[type="checkbox"]:checked {
    background: var(--grad-accent) !important;
    border-color: var(--accent) !important;
}

input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 6px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

input[type="checkbox"]:hover {
    border-color: var(--accent) !important;
}

input[type="checkbox"].error {
    border: 2px solid var(--danger) !important;
    box-shadow: 0 0 0 4px var(--danger-soft) !important;
    animation: fieldShake 480ms var(--ease-spring) !important;
}

/* Убираем подсветку при вводе */
.input:focus,
.select:focus,
.textarea:focus {
    animation: none !important;
}
@media print{
.app-header,.tabbar,.fab-wrap,.modal-footer{display:none !important}
body{padding:0;background:#fff;color:#000}
body::before{display:none}
.modal{max-height:none;box-shadow:none;border:0}
}
/* ===== БАННЕР PREMIUM ===== */
.premium-banner {
	background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
	border: 1px solid var(--accent);
    border-radius: var(--r-xl);
    padding: 20px 24px;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-4);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.premium-banner-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.premium-banner-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}

.premium-banner-text {
    flex: 1;
    min-width: 200px;
}

.premium-banner-text h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--accent);
}

.premium-banner-text p {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.5;
}

.premium-banner-compact { margin: 0 0 var(--sp-4); }

/* Тёмная тема */
[data-theme="dark"] .premium-banner {
background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
border: 1px solid var(--accent);
}
[data-theme="dark"] .premium-banner-text h3 { color: var(--text); }

/* Мобильная адаптация */
@media (max-width: 640px) {
    .premium-banner-content {
        flex-direction: column;
        text-align: center;
    }
    
    .premium-banner-text {
        min-width: auto;
    }
    
    .premium-banner .btn {
        width: 100%;
    }
}

/* === ЛОГОТИПЫ МАРОК АВТОМОБИЛЕЙ === */
.car-brand-logo {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: contain;
  flex-shrink: 0;
  transition: filter var(--dur) var(--ease-out);
}

/* В тёмной теме инвертируем чёрный логотип → белый */
[data-theme="dark"] .car-brand-logo {
  filter: invert(1) brightness(1.1);
}

/* Fallback — первая буква марки, если SVG не загрузился */
.car-brand-logo-fallback {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--grad-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

/* === КАРТОЧКА ПОДПИСКИ В НАСТРОЙКАХ === */
.account-user-id {
font-size: 12px;
color: var(--text-3);
font-family: monospace;
margin-top: 4px;
}
.account-expires-wrapper {
display: none;
margin-top: 6px;
font-size: 12px;
color: var(--text-3);
align-items: center;
gap: 4px;
}
.account-expires-wrapper svg {
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.subscription-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4);
margin-bottom: var(--sp-4);
}
.subscription-card-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sp-3);
}
.subscription-card-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
font-weight: 700;
}
.subscription-card-details {
font-size: 14px;
color: var(--text-2);
}
.subscription-progress {
margin-top: var(--sp-3);
}
.subscription-progress-head {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-3);
margin-bottom: 6px;
}
.subscription-progress-bar-wrap {
height: 6px;
background: var(--surface-3);
border-radius: var(--r-full);
overflow: hidden;
}
.subscription-progress-bar {
height: 100%;
width: 0%;
background: var(--grad-accent);
border-radius: var(--r-full);
transition: width 0.6s var(--ease-out);
}
/* === СТАТИСТИКА ИСПОЛЬЗОВАНИЯ === */
.usage-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.usage-stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4);
}
.usage-stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
font-weight: 700;
margin-bottom: var(--sp-2);
}
.usage-stat-value {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
color: var(--text);
}
.usage-stat-limit {
font-size: 12px;
color: var(--text-3);
margin-top: 4px;
}
/* === КНОПКА АДМИН-ПАНЕЛИ === */
.account-admin-btn {
width: 100%;
margin-top: var(--sp-4);
padding: 12px 16px;
background: var(--surface-2);
border: 1.5px solid var(--accent);
border-radius: var(--r-md);
color: var(--accent);
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-body);
transition: all var(--dur) var(--ease-out);
}
.account-admin-btn:hover {
background: var(--accent-soft);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.account-admin-btn:active {
transform: translateY(0);
}
.account-admin-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

.metrics-card-accent { background: linear-gradient(135deg, var(--accent-soft), transparent); border-color: var(--accent); }

.record-chip-xs { font-size: 11px; }

/* === УТИЛИТЫ И КОМПОНЕНТЫ АДМИН-ПАНЕЛИ === */

/* --- Layout & Spacing --- */
.admin-main {
    padding-top: 100px;
    padding-bottom: 60px;
}
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

/* --- Typography & Colors --- */
.admin-header-badge {
    color: var(--text-3);
    font-weight: 500;
    font-size: 14px;
}
.text-base { font-size: 16px; }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.text-gradient-accent {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Flexbox Utilities --- */
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* --- Overflow & Scrolling --- */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Admin Table Styles --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}
.admin-table th {
text-align: left;
padding: var(--sp-3);
color: var(--text-3);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
@media (max-width: 1279px) {
.admin-table th { white-space: normal; }
}
.admin-table td {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.admin-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-table tbody tr:hover td {
    background: var(--surface-2);
}

/* --- Bulk Action Bar --- */
.bulk-action-bar {
    display: none; /* Скрыт по умолчанию */
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.bulk-action-bar.visible {
    display: flex;
}

/* --- Info Box (для подсказок и переменных) --- */
.info-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.info-box code {
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

/* --- Input Modifiers --- */
.input-monospace {
    text-transform: uppercase;
    font-family: monospace;
    font-weight: 600;
}

/* === ВОЗРАСТНОЙ ЗНАЧОК 0+ === */
.age-badge-0 {
position: fixed;
bottom: calc(var(--sab) + 8px);
left: var(--sp-4);
z-index: 5; /* Ниже хедера (50) и таб-бара (60), чтобы никогда не перекрывать их */
font-size: 11px;
font-weight: 600;
color: var(--text-3);
background: var(--surface);
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--border);
pointer-events: none; /* КЛЮЧЕВОЕ: значок "прозрачен" для кликов, он физически не может помешать */
opacity: 0.5; /* Полупрозрачный, чтобы не отвлекать внимание */
transition: opacity var(--dur) var(--ease-out);
user-select: none;
}
/* При наведении (на десктопе) становится чуть ярче, но всё ещё не мешает */
.age-badge-0:hover {
opacity: 0.8;
}

/* === УМНЫЙ ПОИСК МАРОК В МОДАЛКЕ === */
.brand-picker {
  position: relative;
}
.brand-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow: hidden;
  overflow-x: hidden;
  z-index: 30;
  display: none;
  overscroll-behavior: contain;
}
.brand-picker-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 280px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.brand-picker-scroll::-webkit-scrollbar {
  width: 3px;
}
.brand-picker-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.brand-picker-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
.brand-picker-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}
.brand-picker-dropdown.open {
  display: block;
  animation: brandDropdownIn 180ms var(--ease-out);
}
@keyframes brandDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brand-picker-item {
  padding: 11px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.brand-picker-item:last-child {
  border-bottom: 0;
}
.brand-picker-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.brand-picker-item.other {
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  font-size: 13px;
  background: var(--surface-2);
}
.brand-picker-item.other:hover {
  background: var(--accent);
  color: #fff;
}
.brand-picker-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}
@media (max-width: 480px) {
  .brand-picker-dropdown {
    max-height: 240px;
  }
  .brand-picker-item {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* === ЗАЩИТА ИЗОБРАЖЕНИЙ === */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: auto; /* Разрешаем клики, но не контекстное меню */
}

/* Для логотипов брендов — дополнительная защита */
.car-brand-logo,
.hero-watermark img {
pointer-events: none; /* Полностью отключаем взаимодействие */
image-rendering: -webkit-optimize-contrast;
}

/* Отключаем контекстное меню на всём документе */
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Разрешаем выделение текста в полях ввода */
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    pointer-events: auto;
}
/* ===== PULL-TO-REFRESH ===== */
html {
  overscroll-behavior-y: none;
}

.ptr-indicator {
  position: fixed;
  top: calc(var(--sat) + 76px); /* шапка (64px) + зазор 12px — круг НИКОГДА не прячется под шапку */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 64px;
  z-index: 40; /* ниже шапки (50) — индикатор выезжает ИЗ-ПОД неё */
  pointer-events: none;
  opacity: 0;
  transform: translateY(-110px); /* в спрятанном состоянии полностью за шапкой */
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ptr-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.ptr-card {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.ptr-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ptr-ring-track {
  stroke: var(--border-strong);
  opacity: 0.35;
}
.ptr-ring-progress {
  stroke-dasharray: 150.8;
  stroke-dashoffset: 150.8;
  transition: stroke-dashoffset 60ms linear;
}

.ptr-arrow {
  width: 22px;
  height: 22px;
  position: relative;
  z-index: 1;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
}

/* Порог достигнут — стрелка пружинно переворачивается вверх */
.ptr-indicator.ready .ptr-arrow {
  transform: rotate(-180deg);
}

/* Идёт обновление — стрелка растворяется, градиентное кольцо крутится */
.ptr-indicator.refreshing .ptr-arrow {
  opacity: 0;
  transform: scale(0.4);
}
.ptr-indicator.refreshing .ptr-ring {
  animation: ptrRingSpin 1s linear infinite;
}
.ptr-indicator.refreshing .ptr-ring-progress {
  stroke-dashoffset: 113;
  transition: none;
}

@keyframes ptrRingSpin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

/* [FIX-PTR-A11Y-001] Уважение к prefers-reduced-motion:
   отключаем все анимации PTR у пользователей,
   которые выбрали reduced-motion в настройках системы.
   Визуальная индикация сохраняется — статичный ring progress. */
@media (prefers-reduced-motion: reduce) {
  .ptr-indicator {
    transition: none !important;
  }
  .ptr-ring-progress {
    transition: none !important;
  }
  .ptr-indicator.refreshing .ptr-ring {
    animation: none !important;
  }
  .ptr-arrow {
    transition: none !important;
  }
  .ptr-indicator.ready .ptr-arrow {
    transform: rotate(0deg) !important;
  }
}

/* === КНОПКА ПОКАЗА ПАРОЛЯ (ГЛАЗИК) === */
.password-wrap{position:relative}
.password-wrap .input{padding-right:52px}
.password-toggle{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
width:36px;height:36px;border-radius:var(--r-sm);
display:grid;place-items:center;
color:var(--text-3);cursor:pointer;
transition:color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
z-index: 2;
}
.password-toggle:hover{color:var(--accent);background:var(--accent-soft);transform:translateY(-50%)}
.password-toggle:active{transform:translateY(-50%) scale(0.92)}
.password-toggle svg{
width:18px;height:18px;stroke:currentColor;stroke-width:2;
fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.password-toggle .icon-eye-off{display:none}
.password-toggle.visible .icon-eye{display:none}
.password-toggle.visible .icon-eye-off{display:block}
/* ============================================================
   АДМИН-ПАНЕЛЬ: мобильная адаптация (таблицы → карточки)
   ============================================================ */
.filter-tabs{scroll-snap-type:x proximity}
.filter-tab{scroll-snap-align:start}
@media (max-width:767px){
.admin-main{padding-top:84px}
.admin-main .section-head{flex-wrap:wrap;align-items:flex-start}
.admin-main .section-head > div{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2)}
.admin-main .section-head > div .search-wrap{max-width:100% !important;margin-bottom:0}
.admin-main .section-head > div .select{max-width:100% !important;min-width:0 !important;width:100%}
.admin-main .section-head > div .btn{width:100%}
.bulk-action-bar{flex-wrap:wrap}
.overflow-x-auto{overflow-x:visible}
.admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
.admin-table thead{display:none}
.admin-table tbody tr{
position:relative;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-md);
margin-bottom:var(--sp-3);
padding:var(--sp-3) calc(var(--sp-4) + 32px) var(--sp-3) var(--sp-4);
}
.admin-table tbody tr:hover td{background:transparent}
.admin-table td{
display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-3);
padding:5px 0;border-bottom:none;text-align:right;
}
.admin-table td::before{
content:attr(data-label);
font-size:10px;text-transform:uppercase;letter-spacing:.08em;
color:var(--text-3);font-weight:700;text-align:left;flex-shrink:0;margin-right:auto;
}
.admin-table td:not([data-label])::before{display:none}
.admin-table td.cell-check{position:absolute;top:18px;right:var(--sp-3);width:auto;padding:0;z-index:2}
.admin-table td.cell-main{padding-right:0}
.admin-table input[type="checkbox"]:not(:checked){border:2px solid var(--border-strong) !important;background:var(--bg-elev) !important}
.admin-table td.cell-actions{
justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-2);
margin-top:var(--sp-2);padding-top:var(--sp-2);
border-top:1px dashed var(--border-strong);
}
.admin-table td.cell-actions .btn{margin-right:0 !important}
.admin-table td.cell-block{flex-direction:column;align-items:flex-start;gap:2px;text-align:left;justify-content:flex-start}
.admin-main .reminder-card{flex-wrap:wrap}
.admin-main .reminder-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-main .reminder-actions{width:100%;justify-content:space-between;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px dashed var(--border-strong)}
.admin-table td{font-size:14px}
.admin-table td[style*="monospace"]{font-family:var(--font-body) !important}
.admin-table .record-chip{white-space:nowrap}
}
/* === АДМИНКА: финальные мобильные штрихи === */
.mobile-select-all{display:none}
@media (max-width:767px){
.mobile-select-all{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.admin-table tbody tr{padding:var(--sp-3) var(--sp-4)}
#tab-users .admin-table tbody tr{padding-right:calc(var(--sp-4) + 32px)}
#tab-subscriptions .reminder-card{padding:var(--sp-3);gap:var(--sp-3);margin-bottom:var(--sp-2)}
#tab-subscriptions .reminder-ico{width:36px;height:36px;border-radius:var(--r-sm)}
#tab-subscriptions .reminder-ico svg{width:16px;height:16px}
#tab-subscriptions .reminder-title{font-size:13px}
#tab-subscriptions .reminder-sub{font-size:11px}
#tab-subscriptions .reminder-actions .record-chip{font-size:10px;padding:3px 8px}
#tab-subscriptions .reminder-actions .btn-sm{padding:7px 12px;font-size:12px;min-height:32px}
}
/* === АДМИНКА: десктоп-выравнивание таблиц и панели пользователей === */
@media (min-width:768px){
.admin-table th:last-child,
.admin-table td.cell-actions{width:1%;white-space:nowrap}
.admin-table td.cell-actions{text-align:right}
#tab-users .search-wrap{margin-bottom:0}
#tab-users .section-head > div{align-items:center}
#tab-users .section-head .btn-sm{min-height:var(--tap)}
}
.admin-table .record-chip{white-space:nowrap}
@media (max-width:360px){
.admin-table td.cell-actions .btn{font-size:11px;padding:6px 10px;min-height:32px}
}
.admin-email-cell{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.admin-email-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.admin-email-cell .record-chip{flex-shrink:0}
@media (max-width:767px){#tab-users .admin-table tbody tr.tr-more{padding-right:var(--sp-4)}}

/* === АДМИНКА: липкая шапка таблиц (широкие экраны) === */
@media (min-width: 1200px) {
.admin-main .overflow-x-auto { overflow: visible; }
.admin-table thead th {
position: sticky;
top: calc(var(--sat) + 64px);
background: var(--surface);
z-index: 5;
box-shadow: 0 1px 0 var(--border);
}
}
/* ============================================================
   === КОЛОКОЛЬЧИК УВЕДОМЛЕНИЙ ===
   ============================================================ */

/* Обёртка — позиционирует панель */
.notification-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* === FIX-HEADER-04: группа «колокольчик + авто», стиль как у таб-бара === */
.header-right {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
flex: 0 1 auto;
max-width: 75%;
position: relative;
}
.header-right .car-chip { max-width: 100%; }
/* === FEAT-CARMENU-01: капсульный выпадающий список авто === */
.car-menu{
position:absolute;
top:calc(100% + 10px);
right:0;
width:min(320px, calc(100vw - 32px));
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-xl);
box-shadow:var(--shadow-lg);
padding:var(--sp-2);
z-index:calc(var(--z-header) + 1);
display:none;
flex-direction:column;
gap:2px;
max-height:min(420px, calc(100vh - 140px));
overflow-y:auto;
}
.car-menu.open{display:flex;animation:carMenuIn 200ms var(--ease-out)}
@keyframes carMenuIn{from{opacity:0;transform:translateY(-6px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.car-menu-item{
display:flex;align-items:center;gap:var(--sp-3);
padding:10px 12px;border-radius:var(--r-md);
cursor:pointer;min-height:48px;width:100%;text-align:left;
background:transparent;border:1px solid transparent;
transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.car-menu-item:hover{background:var(--surface-2)}
.car-menu-item:active{transform:scale(0.99)}
.car-menu-item.active{background:var(--accent-soft);border-color:var(--accent)}
.car-menu-logo{
width:32px;height:32px;border-radius:var(--r-sm);
background:var(--surface-2);display:grid;place-items:center;
flex-shrink:0;overflow:hidden;
}
.car-menu-logo svg{width:20px;height:20px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.car-menu-logo .car-brand-logo{width:24px !important;height:24px !important;max-width:24px !important;max-height:24px !important}
.car-menu-logo .car-brand-logo-fallback{width:100%;height:100%;font-size:14px;border-radius:var(--r-sm)}
.car-menu-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.car-menu-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-menu-sub{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;letter-spacing:0.08em;font-variant-numeric:tabular-nums}
.car-menu-check{width:18px;height:18px;stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.car-menu-divider{height:1px;background:var(--border);margin:var(--sp-1) var(--sp-2)}
.car-menu-footer{display:flex;gap:var(--sp-2);padding:var(--sp-1)}
.car-menu-footer .btn{flex:1;min-height:40px;padding:9px 12px;font-size:13px}
.car-menu-empty{padding:var(--sp-4);text-align:center;font-size:13px;color:var(--text-3)}
.notification-bell {
position: relative;
width: 44px;
height: 44px;
border-radius: 16px;
background: transparent;
border: none;
display: grid;
place-items: center;
color: var(--text-2);
cursor: pointer;
transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
flex-shrink: 0;
}
.notification-bell.has-unread {
color: var(--text);
}
.notification-bell:hover {
background: var(--surface-2);
color: var(--text);
}
.notification-bell:active {
transform: scale(0.92);
background: var(--surface-2);
color: var(--text);
}
.notification-bell[aria-expanded="true"] {
background: var(--grad-accent);
color: #fff;
box-shadow: var(--shadow-accent);
}

.notification-bell-icon {
width: 22px;
height: 22px;
transition: transform var(--dur) var(--ease-spring);
}

.notification-bell:hover .notification-bell-icon {
  animation: bellShake 600ms var(--ease-spring);
}

@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}

/* Бейдж с числом непрочитанных */
.notification-badge {
position: absolute;
top: 3px;
right: 3px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--r-full);
background: var(--danger);
color: #fff;
font-family: var(--font-heading);
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
animation: badgePop 320ms var(--ease-spring);
pointer-events: none;
}

.notification-badge[data-count="0"] {
  display: none !important;
}

@keyframes badgePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Пульсация бейджа при появлении нового */
.notification-badge.pulse {
  animation: badgePulse 1.4s var(--ease-out) 2;
}

@keyframes badgePulse {
0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35); }
50% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35), 0 0 0 5px rgba(239, 68, 68, 0.22); }
}

/* Заголовок панели */
.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
}

.notification-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  min-height: 30px;
  font-family: var(--font-body);
}

.notification-mark-all:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.notification-mark-all:active {
  transform: scale(0.95);
}

.notification-mark-all:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* === ЭЛЕМЕНТ УВЕДОМЛЕНИЯ === */
.notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  position: relative;
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.notification-item:hover {
  background: var(--surface-2);
  border-color: var(--border);
  transform: translateX(2px);
}

.notification-item:active {
  transform: scale(0.99);
}

.notification-item.unread {
background: var(--accent-soft);
border-color: rgba(99, 102, 241, 0.15);
padding-right: calc(var(--sp-3) + 10px);
}

.notification-item.unread::before {
content: "";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent-glow);
}

/* Иконка-индикатор срочности */
.notification-item-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.notification-item-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}

.notification-item-ico svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}

/* Цвета срочности */
.notification-item[data-urgency="overdue"] .notification-item-ico {
  background: var(--danger-soft);
  color: var(--danger);
}

.notification-item[data-urgency="urgent"] .notification-item-ico {
  background: var(--warning-soft);
  color: var(--warning);
}

.notification-item[data-urgency="soon"] .notification-item-ico {
  background: rgba(59, 130, 246, 0.12);
  color: var(--info);
}

.notification-item[data-urgency="normal"] .notification-item-ico {
  background: rgba(168, 85, 247, 0.14);
  color: #a855f7;
}

/* === ЭТАП A: ЦВЕТА ДЛЯ УВЕДОМЛЕНИЙ О ПОДПИСКЕ === */
.notification-item[data-urgency="expired"] .notification-item-ico {
  background: var(--danger-soft);
  color: var(--danger);
}

.notification-item[data-urgency="expires_soon"] .notification-item-ico {
  background: var(--warning-soft);
  color: var(--warning);
}

.notification-item[data-urgency="expires_week"] .notification-item-ico {
  background: rgba(59, 130, 246, 0.12);
  color: var(--info);
}

.notification-item[data-urgency="cancelled"] .notification-item-ico {
  background: rgba(107, 114, 128, 0.14);
  color: #6b7280;
}

/* Цвет текста "line" для подписки */
.notification-item[data-urgency="expired"] .notification-item-line {
  color: var(--danger);
}

.notification-item[data-urgency="expires_soon"] .notification-item-line {
  color: var(--warning);
}

.notification-item[data-urgency="expires_week"] .notification-item-line {
  color: var(--info);
}

.notification-item[data-urgency="cancelled"] .notification-item-line {
  color: var(--text-2);
}

/* === КНОПКИ ДЕЙСТВИЙ В УВЕДОМЛЕНИЯХ === */
.notification-item-action-wrap {
  margin-top: var(--sp-2);
  display: flex;
  gap: var(--sp-2);
}

.notification-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  min-height: 30px;
  font-family: var(--font-body);
  border: 1px solid transparent;
}

.notification-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.notification-action-btn:active {
  transform: scale(0.96);
}

.notification-action-btn svg {
  flex-shrink: 0;
}

.notification-action-renew {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.notification-action-renew:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}

.notification-action-restore {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.notification-action-restore:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* Тело уведомления */
.notification-item-body {
  flex: 1;
  min-width: 0;
}

.notification-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 3px;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
}

.notification-item-car {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-item-car svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.notification-item-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.5;
  flex-shrink: 0;
}

.notification-item-line{
font-weight:600;
white-space:normal;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
word-break:break-word;
overflow-wrap:break-word;
hyphens:auto;
-webkit-hyphens:auto;
}

/* Цвет текста "line" по срочности */
.notification-item[data-urgency="overdue"] .notification-item-line {
  color: var(--danger);
}

.notification-item[data-urgency="urgent"] .notification-item-line {
  color: var(--warning);
}

.notification-item[data-urgency="soon"] .notification-item-line {
  color: var(--info);
}

/* === ПУСТОЕ СОСТОЯНИЕ === */
.notification-empty {
text-align: center;
padding: var(--sp-6) var(--sp-4);
color: var(--text-3);
}

.notification-empty-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: color var(--dur) var(--ease-out);
}

.notification-empty-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.notification-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}

/* === ЭТАП 4: Кнопка «Повторить» в пустом состоянии === */
.notification-empty .btn {
  display: inline-flex;
  margin-top: var(--sp-3);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  gap: 6px;
}

.notification-empty .btn svg {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}

.notification-empty .btn:hover svg {
  transform: rotate(-45deg);
}

.notification-empty:has(#notifRetryBtn) .notification-empty-ico {
  color: var(--warning);
  animation: notifOfflinePulse 2s var(--ease-out) infinite;
}

@keyframes notifOfflinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.95); }
}

/* Загрузка */
.notification-loading {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notification-footer-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 10px 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
font-size: 13px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: all var(--dur) var(--ease-out);
min-height: 40px;
font-family: var(--font-body);
white-space: nowrap;
}
.notification-footer-btn span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.notification-footer-btn:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
}

.notification-footer-btn:active {
transform: scale(0.98);
}

.notification-footer-btn svg {
flex-shrink: 0;
width: 14px;
height: 14px;
}

/* === ФУТЕР ПАНЕЛИ: ДВЕ КНОПКИ В РЯД === */
.notification-footer-row {
display: flex;
gap: 8px;
}
.notification-footer-row .notification-footer-btn {
flex: 1;
}
.notification-footer-btn-danger {
background: var(--surface-2);
color: var(--danger);
border-color: transparent;
}
.notification-footer-btn-danger:hover {
background: var(--danger-soft);
border-color: var(--danger);
color: var(--danger);
}
.notification-footer-btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

@media (max-width: 520px) {
.notification-bell {
width: 40px;
height: 40px;
border-radius: 14px;
}
.notification-bell-icon {
width: 20px;
height: 20px;
}
.notification-badge {
min-width: 16px;
height: 16px;
font-size: 9px;
line-height: 16px;
padding: 0 4px;
top: 2px;
right: 2px;
}
.notification-footer-btn {
padding: 10px 8px;
font-size: 12px;
gap: 6px;
}
}

/* === SCROLL-FADE-01: динамическое затемнение краёв горизонтальных скроллеров === */
.filter-tabs.fade-right {
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.filter-tabs.fade-left {
mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to left, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.filter-tabs.fade-left.fade-right {
mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* ============================================================
=== ЭТАП 1: ПРОЧИТАННЫЕ УВЕДОМЛЕНИЯ + РАЗДЕЛИТЕЛЬ + ОЧИСТКА ===
============================================================ */

/* Прочитанные уведомления — более бледные, без яркого фона */
.notification-item.is-read {
opacity: 0.85;
background: var(--surface-2);
border-color: var(--border);
}

.notification-item.is-read:hover {
opacity: 1;
background: var(--surface-3);
border-color: var(--border-strong);
}

.notification-item.is-read .notification-item-title {
    font-weight: 500;
    color: var(--text-2);
}

.notification-item.is-read .notification-item-line {
    color: var(--text-3);
}

.notification-item.is-read .notification-item-ico {
    opacity: 0.7;
}

/* Убираем синюю точку у прочитанных (она и так не должна быть, но на всякий случай) */
.notification-item.is-read::before {
    display: none;
}

/* Разделитель «Прочитанные» */
.notification-read-divider {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0 6px;
margin: 4px 0;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
position: relative;
}

.notification-read-divider::before {
content: "";
width: 16px;
height: 1px;
background: var(--border-strong);
border-radius: var(--r-full);
}
.notification-read-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border-strong);
}

.notification-read-divider svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* === ЭТАП 4: СОСТОЯНИЕ «ОТМЕЧАЕМ» === */
/* Элемент в процессе отметки как прочитанного */
.notification-item.marking {
opacity: 0.5;
pointer-events: none;
transform: translateX(4px);
transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.notification-item.marking .notification-item-ico {
animation: markingPulse 800ms var(--ease-out) infinite;
}
@keyframes markingPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}

/* Кнопка «Прочитано» в процессе работы */
.notification-mark-all.is-loading {
pointer-events: none;
opacity: 0.6;
}
.notification-mark-all.is-loading svg {
animation: markingSpin 800ms linear infinite;
}
@keyframes markingSpin {
to { transform: rotate(360deg); }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .notification-item.is-read {
        transition: none;
    }
}

/* === АНИМАЦИЯ ПОЯВЛЕНИЯ ЭЛЕМЕНТОВ === */
.notification-item {
  animation: notifSlideIn 320ms var(--ease-out) both;
}

.notification-item:nth-child(1) { animation-delay: 0ms; }
.notification-item:nth-child(2) { animation-delay: 40ms; }
.notification-item:nth-child(3) { animation-delay: 80ms; }
.notification-item:nth-child(4) { animation-delay: 120ms; }
.notification-item:nth-child(5) { animation-delay: 160ms; }

@keyframes notifSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .notification-bell:hover .notification-bell-icon,
  .notification-badge,
  .notification-item {
    animation: none !important;
  }
}
/* === ЛОГОТИПЫ-ИЗОБРАЖЕНИЯ (замена текстовых блоков «Ж») === */
.brand-logo-img {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: var(--shadow-accent);
}

.auth-logo-img {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-xl);
    object-fit: contain;
    display: block;
    box-shadow: var(--shadow-accent), var(--shadow-lg);
}

.about-logo-img {
    width: 88px;
    height: 88px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--r-xl);
    object-fit: contain;
    display: block;
    box-shadow: var(--shadow-accent), var(--shadow-lg);
}

.install-hero-img {
width: 80px;
height: 80px;
margin: 0 auto var(--sp-3);
border-radius: var(--r-xl);
object-fit: contain;
display: block;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.account-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: var(--r-xl);
    object-fit: contain;
    flex-shrink: 0;
    box-shadow: var(--shadow-accent);
}

@media (max-width: 480px) {
    .account-avatar-img {
        width: 56px;
        height: 56px;
    }
}
/* === ROBOTO FLEX: оси для элементов, где раньше был inline-style === */
.payment-amount,
.to-total-value,
.promo-code-big,
.promo-discount-big {
  font-size: 28px; font-weight: 700; line-height: 1.1;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pricing-price-period {
  font-family: var(--font-body);
  font-variation-settings: normal;
}
.payment-amount { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.to-total-value {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 70, 'slnt' 0, 'wdth' 150, 'wght' 700, 'XOPQ' 96, 'XTRA' 520, 'YOPQ' 79, 'YTAS' 698, 'YTDE' -203, 'YTFI' 686, 'YTLC' 570, 'YTUC' 660;
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.input-plate { 
  font-family: var(--font-body); 
  font-variation-settings: normal; 
  text-transform: uppercase; 
}
.input-vin { 
  font-family: var(--font-body); 
  font-variation-settings: normal; 
  text-transform: uppercase; 
}
.promo-code-big {
  font-family: 'Roboto Flex', sans-serif !important;
  font-variation-settings: 'opsz' 70, 'slnt' 0, 'wdth' 125, 'wght' 800, 'XOPQ' 96, 'XTRA' 520, 'YOPQ' 79, 'YTAS' 698, 'YTDE' -203, 'YTFI' 686, 'YTLC' 570, 'YTUC' 660;
  font-size: 24px; font-weight: 800; letter-spacing: 0.15em; color: var(--accent);
  text-transform: uppercase;
}
.promo-discount-big {
  font-family: 'Roboto Flex', sans-serif !important;
  font-variation-settings: 'opsz' 70, 'slnt' 0, 'wdth' 125, 'wght' 800, 'XOPQ' 96, 'XTRA' 520, 'YOPQ' 79, 'YTAS' 698, 'YTDE' -203, 'YTFI' 686, 'YTLC' 570, 'YTUC' 660;
  font-size: 32px; font-weight: 800; line-height: 1.1;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* === MODAL-NOTIF-03: Стили тела модалки уведомлений === */
.notification-panel-body {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: 0;
flex: 0 0 auto;
overflow: visible;
}
.notification-panel-body .notification-item {
margin-bottom: 0;
}
/* ============================================================
   UI-HOME-01: подписи в нижней навигации на десктопе
   ============================================================ */
@media (min-width: 768px) {
  .tab {
    width: auto;
    height: 50px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tab-label {
    display: inline;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .tabbar {
    padding: 8px 12px;
  }
}

/* ============================================================
   FEAT-DIST-01: кликабельные строки «Распределение»
   ============================================================ */
.cat-breakdown-row {
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.cat-breakdown-row:active { transform: scale(0.99); }
.cat-breakdown-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   FEAT-TOCTA-01: призыв к действию в карточке «Кол-во ТО»
   ============================================================ */
.stat-delta.cta {
background: var(--accent-soft);
color: var(--accent);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-weight: 700;
transition: all var(--dur) var(--ease-out);
}
.stat-delta.cta:hover {
  background: var(--grad-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.stat-delta.cta:active { transform: scale(0.97); }
.stat-delta.cta svg {
width: 12px;
height: 12px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
/* FIX-DELTA-01: общие стили иконок и подписей внутри дельт */
.stat-delta svg{
width:12px;height:12px;
stroke:currentColor;stroke-width:2.5;fill:none;
stroke-linecap:round;stroke-linejoin:round;
display:inline-block;vertical-align:middle;margin-right:3px;
}
.stat-delta.cta svg{margin-right:0}
.stat-delta .delta-sub,
.stat-delta .delta-hint{
color:var(--text-3);
font-weight:500;
}
.stat-delta .delta-sub{margin-left:3px}

/* ============================================================
   FIX-DIST-HOVER-01: дорожка прогресс-бара видна на ховере строки
   ============================================================ */
.cat-breakdown-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
  transition: background var(--dur) var(--ease-out);
}
#page-home .cat-breakdown-row:nth-child(even) .cat-breakdown-track {
background: var(--surface-3);
}
#page-home .cat-breakdown-row:hover .cat-breakdown-track,
#page-home .cat-breakdown-row:focus-visible .cat-breakdown-track {
background: var(--surface-2);
}

/* ============================================================
   FIX-DONUT-GAP-01 + FIX-CHART-ROW-02/03:
   карточки ряда «Категории расходов» одной высоты;
   пончик тянется по высоте, но не растягивает карточку
   ============================================================ */
#page-home .chart-row {
  align-items: stretch;
}
#page-home .chart-row > .chart-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#page-home .chart-row .chart-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 260px;
  position: relative;
}
@media (min-width: 768px) {
  #page-home .chart-row .chart-wrap { min-height: 320px; }
}
#page-home .chart-row .chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 2;
}

/* ============================================================
   DONUT-SIZE-01 + FIX-HEADER-ALIGN-01:
   ограничитель пончика; заголовок прижат к верху карточки,
   пончик с легендой центрируются в пространстве под ним
   ============================================================ */
#page-home .chart-row .chart-wrap {
  max-height: 420px;
  margin-top: auto;
}
#page-home .chart-row .chart-legend {
  margin-bottom: auto;
}

/* ============================================================
   PROD-HOME-01: мини-заголовки карточек секций
   ============================================================ */
.card-head-mini {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.card-head-mini h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.card-head-hint {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .card-head-hint { display: none; }
}

/* ============================================================
   PROD-HOME-02: итог в центре пончика
   ============================================================ */
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
  padding: 0 12px;
  z-index: 1;
}
.donut-center b {
  font-family: var(--font-heading);
  font-variation-settings: 'opsz' 70, 'slnt' 0, 'wdth' 150, 'wght' 700, 'XOPQ' 96, 'XTRA' 520, 'YOPQ' 79, 'YTAS' 698, 'YTDE' -203, 'YTFI' 686, 'YTLC' 570, 'YTUC' 660;
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.donut-center span {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ============================================================
   FIX-DIST-ZEBRA-01: воздушность, зебра и нормальные ховеры
   в «Распределении»
   ============================================================ */
#page-home #catBreakdown {
  display: flex;
  flex-direction: column;
}
#page-home #catBreakdown > :first-child {
  flex: 0 0 auto;
}
#page-home .cat-breakdown-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-3);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-md);
  flex: 1 1 auto;
  min-height: 56px;
}
#page-home .cat-breakdown-row:nth-child(even) { background: var(--surface-2); }
#page-home .cat-breakdown-row:hover { background: var(--surface-3); }

/* ============================================================
   FIX-PCT-02: ровная колонка сумм в «Распределении»
   ============================================================ */
#catBreakdown .text-sm.text-muted {
  font-variant-numeric: tabular-nums;
}

/* === FIX-HEADER-02: метрики хедера, без щелей и наездов === */
:root{--header-h:76px}
body{padding-top:calc(var(--sat) + var(--header-h))}
.header-inner{min-height:var(--header-h)}
#main{padding-top:var(--sp-6)}
.ptr-indicator{top:calc(var(--sat) + var(--header-h) + 12px)}
/* Ничего не наезжает: элементы умеют сжиматься и обрезаться многоточием */
.brand{min-width:0;flex:0 1 auto}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.connection-status{flex-shrink:0}
.notification-bell-wrap{flex-shrink:0}
/* Фолбэк-аватары (буква) — Roboto Flex с осями, как остальные акцентные надписи */
.car-brand-logo-fallback{
font-family:'Roboto Flex',sans-serif !important;
font-variation-settings:'opsz' 70,'slnt' 0,'wdth' 150,'wght' 700,'XOPQ' 96,'XTRA' 520,'YOPQ' 79,'YTAS' 698,'YTDE' -203,'YTFI' 686,'YTLC' 570,'YTUC' 660;
}
/* === FIX-HEADER-03: приоритеты элементов шапки === */
.app-header .brand{flex-shrink:0}
.app-header .brand-name{flex-shrink:0}
@media (max-width:560px){
.header-inner{gap:var(--sp-2)}
.header-right{max-width:68%}
}
/* === FIX-AFFORD-02: декоративный круг под «i» оживает при ховере/фокусе значка === */
.stat-card:has(.stat-info-btn:hover)::before,
.stat-card:has(.stat-info-btn:focus-visible)::before{
opacity:1;
transform:translate(20%,-20%) scale(1.2);
}
/* === FIX-EMPTY-CENTER-01: «Нет данных» в Распределении по центру === */
#page-home #catBreakdown > div.text-muted{
flex:1 1 auto;
display:grid;
place-items:center;
text-align:center;
padding:var(--sp-6) var(--sp-4);
color:var(--text-3);
}
/* === FIX-UNREAD-HOVER-01: ховер непрочитанных уведомлений === */
.notification-item.unread:hover{
background:rgba(99,102,241,0.18);
border-color:rgba(99,102,241,0.35);
}
[data-theme="dark"] .notification-item.unread:hover{
background:rgba(129,140,248,0.24);
border-color:rgba(129,140,248,0.4);
}
/* === FEAT-INFOICON-03: иконка справки — SVG в разметке, без буквы === */
.stat-info-btn{
width:20px;height:20px;
background:transparent;
border:none;
border-radius:50%;
color:var(--text-3);
cursor:help;
display:grid;place-items:center;
-webkit-tap-highlight-color:transparent;
outline:none;
transition:color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.stat-info-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stat-info-btn:hover{background:transparent;color:var(--accent);transform:scale(1.1)}
/* === COOKIE-POS-01: позиция cookie-баннера зависит от нижней навигации === */
.cookie-banner{
position:fixed;
left:0;
right:0;
margin:0 auto;
width:min(560px, calc(100vw - 24px));
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-xl);
padding:var(--sp-4) var(--sp-5);
box-shadow:var(--shadow-lg);
z-index:1000;
bottom:calc(var(--sab) + 16px);
transition:bottom var(--dur) var(--ease-out);
}
body.has-tabbar .cookie-banner{
bottom:calc(var(--sab) + 90px);
}

.reminder-action-btn.success:hover {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
    box-shadow: 0 2px 8px var(--success-soft);
}

.reminder-action-btn.success:active {
    transform: scale(0.92);
    background: var(--success);
    color: #fff;
}

/* Кнопка "Вернуть в активные" */
.btn-restore {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

.btn-restore:hover {
    background: var(--grad-accent);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-accent);
    transform: translateY(-2px);
}

.btn-restore:active {
    transform: scale(0.98) translateY(0);
}

.btn-restore svg {
    stroke: currentColor;
    transition: transform var(--dur) var(--ease-out);
}

.btn-restore:hover svg {
    transform: rotate(-45deg);
}

/* Fade-out анимация для карточки при выполнении */
@keyframes reminderFadeOut {
    0% { opacity: 1; transform: translateX(0) scale(1); }
    50% { opacity: 0.5; transform: translateX(20px) scale(0.98); }
    100% { opacity: 0; transform: translateX(40px) scale(0.95); }
}

.reminder-card.fading-out {
    animation: reminderFadeOut 400ms var(--ease-out) forwards;
    pointer-events: none;
}

/* Кнопка "Добавить расход" в тосте */
.toast-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
    margin-left: 8px;
    border: 1px solid var(--accent);
}

.toast-action-btn:hover {
    background: var(--accent);
    color: #fff;
}

.toast-action-btn:active {
    transform: scale(0.95);
}

.toast-action-btn svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Стиль для просроченных напоминаний в истории (статус missed) */
.record-item.reminder-missed {
    border-left: 3px solid var(--warning);
}

.record-item.reminder-done {
    border-left: 3px solid var(--success);
    opacity: 0.85;
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .reminder-card.fading-out {
        animation: none;
        opacity: 0.3;
    }
}

/* ============================================================
   [TPL-005] БЛОК ШАБЛОНОВ ЗАПИСЕЙ (ТО / Расход)
   Изолированный блок внутри модалки добавления записи.
   Не затрагивает другие компоненты сайта.
   ============================================================ */
.template-section {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.template-header .field-label {
    margin-bottom: 0;
}
.template-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
    white-space: nowrap;
    line-height: 1;
}
.template-save-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.template-save-btn:active {
    transform: scale(0.96);
}
.template-save-btn svg {
    flex-shrink: 0;
}
.template-select-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.template-select-wrap .select {
    flex: 1;
    min-width: 0;
}

.template-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    margin-top: var(--sp-2);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
    .template-header {
        flex-wrap: wrap;
    }
    .template-save-btn {
        order: 2;
        width: 100%;
        justify-content: center;
        padding: 8px 12px;
    }
    .template-header .field-label {
        order: 1;
        flex: 1;
    }
    .template-select-wrap {
        order: 3;
        width: 100%;
    }
    .template-select-wrap .select {
        min-height: 44px;
        padding: 11px 40px 11px 14px;
        font-size: 15px;
    }
    .template-delete-btn {
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   [TPL-008-A] МОДАЛКА СОХРАНЕНИЯ ШАБЛОНА
   Замена нативного prompt() на профессиональный UI.
   ============================================================ */
.tpl-save-preview {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-2);
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.5;
}
.tpl-save-preview-row {
    display: flex;
    gap: var(--sp-2);
    padding: 2px 0;
}
.tpl-save-preview-label {
    flex-shrink: 0;
    color: var(--text-3);
    font-weight: 500;
    min-width: 80px;
}
.tpl-save-preview-value {
    color: var(--text);
    word-break: break-word;
}
.tpl-save-duplicate-warning {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    background: var(--warning-soft, rgba(251, 191, 36, 0.1));
    border: 1px solid var(--warning, #fbbf24);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--warning, #fbbf24);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    line-height: 1.4;
}
.tpl-save-duplicate-warning svg {
    flex-shrink: 0;
    margin-top: 1px;
}
.tpl-save-name-error {
    margin-top: var(--sp-1);
    font-size: 12px;
    color: var(--danger);
    min-height: 16px;
    transition: opacity var(--dur) var(--ease-out);
}
.tpl-save-name-error:empty {
    opacity: 0;
}

/* ============================================================
   [TPL-010-A] УПРАВЛЕНИЕ ШАБЛОНАМИ
   Кнопка-ссылка под счётчиком + модалка со списком.
   ============================================================ */
.template-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-2);
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    cursor: pointer;
    transition: color var(--dur) var(--ease-out);
    line-height: 1;
}
.template-manage-link:hover {
    color: var(--accent);
}
.tpl-manage-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 4px;
}
.tpl-manage-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
    text-align: center;
    white-space: nowrap;
}
.tpl-manage-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
.tpl-manage-tab.active {
    color: var(--accent);
    background: var(--accent-soft);
}
.tpl-manage-tab-count {
    font-weight: 400;
    opacity: 0.6;
    font-size: 11px;
}
.tpl-manage-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 400px;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
}
.tpl-manage-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease-out);
}
.tpl-manage-item:hover {
    border-color: var(--text-3);
}
.tpl-manage-item-info {
    flex: 1;
    min-width: 0;
}
.tpl-manage-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.tpl-manage-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
    line-height: 1.2;
}
.tpl-manage-item-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--r-sm);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    flex-shrink: 0;
}
.tpl-manage-item-badge.to {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}
.tpl-manage-item-badge.expense {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.tpl-manage-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.tpl-manage-item-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
}
.tpl-manage-item-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--text-3);
}
.tpl-manage-item-btn.danger:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
.tpl-manage-empty {
    text-align: center;
    padding: var(--sp-8) var(--sp-3);
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.5;
}
.tpl-manage-rename-input {
    width: 100%;
    padding: 4px 8px;
    border: 1.5px solid var(--accent);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    outline: none;
    font-family: inherit;
}
.tpl-manage-counter {
    text-align: center;
    margin-top: var(--sp-4);
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* === [UI-002] Record Type Selector Action Sheet === */
.record-type-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-2);
}

.record-type-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: var(--text);
}

.record-type-tile:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.record-type-tile:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.record-type-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.record-type-text {
  flex: 1;
  min-width: 0;
}

.record-type-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.record-type-desc {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.4;
}

/* === [UI-010] Bottom Sheet + Дерево позиций ТО === */
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.bottom-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.bottom-sheet-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}
.bottom-sheet-panel.open {
  transform: translateY(0);
}
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
.bottom-sheet-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.bottom-sheet-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-2);
  transition: background var(--dur) var(--ease-out);
}
.bottom-sheet-close:hover {
  background: var(--surface-3);
}
.bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bottom-sheet-footer {
  display: flex;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Плоский список позиций */
.position-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.position-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  position: relative;
}
.position-row:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.position-row:active {
  transform: scale(0.98);
}
.position-row--work {
  margin-left: 28px;
  margin-top: 0;
}
.position-row--work::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--border);
}
.position-row--work::after {
  content: '';
  position: absolute;
  left: -20px;
  top: -4px;
  bottom: 50%;
  width: 1px;
  background: var(--border);
}
.position-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.position-icon--part {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}
.position-icon--work {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}
.position-info {
  flex: 1;
  min-width: 0;
}
.position-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.position-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.position-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.position-remove {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-3);
  transition: all var(--dur) var(--ease-out);
  flex-shrink: 0;
}
.position-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.position-add-group {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.position-add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--dur) var(--ease-out);
}
.position-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}
.position-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-3);
  font-size: 13px;
}

/* [UI-013] Бейдж связи детали с работами */
.position-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.position-link-badge svg {
  width: 11px;
  height: 11px;
  display: block;
  flex-shrink: 0;
}
.position-link-badge--empty {
  color: #9096a1;
  background: var(--surface-2);
  border-color: var(--border);
}
.position-link-badge--current {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* [FEAT-017-CSS] Категория позиции в списке */
.position-category {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 500;
}

/* [UX-018E] Наследование категории и подсказки */
.cat-inherit-hint {
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  line-height: 1.4;
}
.field-hint-inline {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.4;
}

/* [FIX-016-CSS] Кнопка пересчёта суммы и подсказка */
.total-recalc-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.total-recalc-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
}
.total-recalc-btn svg {
  width: 12px;
  height: 12px;
}

/* Спойлер "Ещё" в bottom sheet */
.bs-spoiler {
  margin-top: var(--sp-3);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
}
.bs-spoiler-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
  padding: 4px 0;
  width: 100%;
}
.bs-spoiler-toggle svg {
  transition: transform var(--dur) var(--ease-out);
}
.bs-spoiler-toggle.open svg {
  transform: rotate(180deg);
}
.bs-spoiler-content {
  display: none;
  padding-top: var(--sp-3);
}
.bs-spoiler-content.open {
  display: block;
}
/* [FIX-005] Bottom sheet на десктопе — центрированная модалка, не растянутая полоса */
@media (min-width: 640px) {
  .bottom-sheet-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    max-width: 480px;
    width: calc(100% - 32px);
    max-height: 85vh;
    border-radius: 16px;
    transform: translate(-50%, calc(-50% + 24px)) scale(0.96);
  }
  .bottom-sheet-panel.open {
    transform: translate(-50%, -50%) scale(1);
  }
  .bottom-sheet-handle { display: none; }
}

/* === [VIEW-GROUP-001-CSS] ЭТАП 2: заголовки секций с субтоталами === */
.record-view-section-header{
display:flex;align-items:baseline;justify-content:space-between;
gap:var(--sp-3);
margin-bottom:var(--sp-3);
padding-bottom:var(--sp-2);
border-bottom:1px solid var(--border);
}
.record-view-section-title{
font-family:var(--font-heading);font-size:11px;text-transform:uppercase;
letter-spacing:0.1em;color:var(--text-3);font-weight:700;
display:flex;align-items:center;gap:8px;
margin-bottom:0;
}
.record-view-section-title::before{content:"";width:18px;height:2px;background:var(--grad-accent);border-radius:var(--r-full)}
.record-view-section-subtotal{
font-size:12px;font-weight:600;color:var(--text-2);
font-variant-numeric:tabular-nums;
letter-spacing:-0.01em;
white-space:nowrap;
}

/* === [VIEW-GROUP-001-CSS] Контейнер для работ, привязанных к детали === */
.record-view-item-card-works{
margin-top:var(--sp-3);
padding-top:var(--sp-3);
border-top:1px dashed var(--border);
display:flex;flex-direction:column;gap:var(--sp-2);
}

/* === [VIEW-GROUP-001-CSS] Вложенная работа (дочерний элемент детали) === */
.record-view-item-card--nested{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-md);
padding:var(--sp-3);
}
.record-view-item-card--nested:hover{
border-color:var(--border-strong);
}
.record-view-item-card--nested .record-view-item-card-title-icon{
width:26px;height:26px;
}
.record-view-item-card--nested .record-view-item-card-title-icon svg{
width:13px;height:13px;
}
.record-view-item-card--nested .record-view-item-card-name{
font-size:14px;
}
.record-view-item-card--nested .record-view-item-card-price{
font-size:14px;
}
.record-view-item-card--nested .record-view-item-card-header{
margin-bottom:var(--sp-2);
}
.record-view-item-card--nested .record-view-item-card-category{
margin-top:var(--sp-2);
}

/* === [VIEW-GROUP-001-CSS] Свободная работа (не привязана к детали) === */
.record-view-item-card--work{
/* Наследует базовые стили .record-view-item-card, без дополнительных отличий */
}

/* === [VIEW-GROUP-001-CSS] Мобильная адаптация вложенных работ === */
@media (max-width:480px){
.record-view-item-card--nested{padding:var(--sp-2) var(--sp-3)}
.record-view-item-card-works{gap:var(--sp-2);padding-top:var(--sp-2);margin-top:var(--sp-2)}
.record-view-section-header{flex-direction:column;align-items:flex-start;gap:4px}
.record-view-section-subtotal{font-size:11px}
}
/* === [FEAT-206] ВИРТУАЛЬНЫЙ СКЛАД === */
.garage-segmented-wrap {
    margin: var(--sp-4) 0;
}

.garage-view-segmented .segmented-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.garage-storage-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--sp-4) 0 var(--sp-3);
    gap: var(--sp-3);
}

.garage-storage-head .section-title {
    margin: 0;
}

.garage-storage-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.garage-storage-car-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}

.garage-storage-car-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-soft, var(--border));
}

.garage-storage-car-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

.garage-storage-car-plate {
    font-family: 'Roboto Flex', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-2);
    letter-spacing: 0.04em;
}

.garage-storage-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.storage-item-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    transition: border-color var(--dur) var(--ease-out);
}

.storage-item-card:hover {
    border-color: var(--accent);
}

.storage-item-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.storage-item-info {
    flex: 1;
    min-width: 0;
}

.storage-item-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storage-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--text-3);
}

.storage-item-meta .mono {
    font-family: 'Roboto Flex', system-ui, monospace;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.storage-origin-chip {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.storage-origin-auto {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.storage-origin-manual {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.storage-progress {
    margin-bottom: var(--sp-2);
}

.storage-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13px;
}

.storage-progress-value {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.storage-progress-total {
    color: var(--text-3);
    font-size: 12px;
}

.storage-progress-track {
    height: 8px;
    background: var(--surface-3, rgba(0,0,0,0.04));
    border-radius: 4px;
    overflow: hidden;
}

.storage-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 4px;
    transition: width 0.4s var(--ease-out);
}

.storage-progress-bar.low {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.storage-progress-bar.empty {
    background: var(--danger, #ef4444);
}

.storage-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--sp-2);
    padding: 6px 0;
}

.storage-counter-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.storage-counter-unit {
    font-size: 13px;
    color: var(--text-3);
}

.storage-price-hint {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: var(--sp-2);
}

.storage-item-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border-soft, var(--border));
}

.storage-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
}

.storage-action-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent);
}

.storage-action-btn.danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border-color: var(--danger);
}

.garage-storage-empty {
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-lg);
}

.garage-storage-empty .empty-ico {
    margin: 0 auto var(--sp-3);
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border-radius: 50%;
    color: var(--text-3);
}

.garage-storage-empty .empty-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--sp-2);
    color: var(--text);
}

.garage-storage-empty .empty-sub {
    font-size: 13px;
    color: var(--text-3);
    max-width: 320px;
    margin: 0 auto var(--sp-4);
    line-height: 1.5;
}

/* Toast с кнопкой Undo */
.toast-with-action {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.toast-action-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: var(--sp-2);
    transition: background var(--dur) var(--ease-out);
}

.toast-action-btn:hover {
    background: rgba(255,255,255,0.12);
}

/* === КОНЕЦ [FEAT-206] === */

/* === [FEAT-2B4] Storage Picker (Bottom Sheet выбора со склада) === */
.storage-picker-empty {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
}

.storage-picker-empty-ico {
    margin: 0 auto var(--sp-3);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border-radius: 50%;
    color: var(--text-3);
}

.storage-picker-empty-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--sp-2);
    color: var(--text);
}

.storage-picker-empty-sub {
    font-size: 13px;
    color: var(--text-3);
}

.storage-picker-search {
    margin-bottom: var(--sp-3);
}

.storage-picker-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.storage-picker-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
}

.storage-picker-item:hover {
    border-color: var(--accent);
    background: var(--surface);
}

.storage-picker-item:active {
    transform: scale(0.98);
}

.storage-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: var(--sp-2);
}

.storage-picker-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.storage-picker-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.storage-picker-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 6px;
}

.storage-picker-meta .mono {
    font-family: 'Roboto Flex', system-ui, monospace;
    font-size: 11px;
}

.storage-picker-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.storage-picker-progress-track {
    flex: 1;
    height: 6px;
    background: var(--surface-3, rgba(0,0,0,0.04));
    border-radius: 3px;
    overflow: hidden;
}

.storage-picker-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
}

.storage-picker-progress-bar.low {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.storage-picker-progress-bar.empty {
    background: var(--danger, #ef4444);
}

.storage-picker-progress-text {
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.storage-picker-notfound {
    text-align: center;
    padding: var(--sp-4);
    color: var(--text-3);
    font-size: 13px;
}

/* === [FEAT-2B4] Кнопка «Со склада» в строке детали === */
.part-storage-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--accent);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur) var(--ease-out);
    white-space: nowrap;
    flex-shrink: 0;
}

.part-storage-btn:hover {
    background: rgba(99, 102, 241, 0.16);
    border-color: var(--accent);
}

.part-storage-btn svg {
    flex-shrink: 0;
}

/* === [FEAT-2B4] Маркер «Из гаража» === */
.part-garage-marker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 6px;
}

.part-garage-marker svg {
    flex-shrink: 0;
}

/* === [FEAT-2B-BOTTOM-SHEET-BTN-003] Кнопка «Взять со склада» внутри bottom sheet === */
.storage-pick-inline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent);
  border: 1.5px dashed rgba(99, 102, 241, 0.4);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
  font-family: inherit;
}
.storage-pick-inline-btn:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: var(--accent);
  border-style: solid;
}
.storage-pick-inline-btn:active {
  transform: scale(0.98);
}
.storage-pick-inline-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.storage-pick-inline-btn svg {
  flex-shrink: 0;
}
/* === КОНЕЦ [FEAT-2B4] === */

/* === [FIX-SCROLLBAR-001] Стабильный скролл без прыжков (ТЗ 3.1) === */
html {
    scrollbar-gutter: stable;
}

/* === [FIX-CHIPS-SCROLL-001] Горизонтальный скролл чипов с затуханием (ТЗ 4.7) === */
.record-preview-chips {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, white 85%, transparent);
    mask-image: linear-gradient(to right, white 85%, transparent);
    padding-bottom: 4px;
}
.record-preview-chips::-webkit-scrollbar {
    display: none;
}

/* === [FIX-EXPENSE-HEIGHT-001] Фиксированная высота карточки расхода (ТЗ 4.7) === */
.record-item {
    max-height: none;
}
/* Расходы имеют компактный превью без вертикальных чипов */
/* Высота контролируется автоматически через плоскую мета-строку */
/* === КОНЕЦ [FIX-EXPENSE-HEIGHT-001] === */

/* === [FIX-FUEL-META-001] Плоская мета-строка для расходов вместо чипов (ТЗ 4.7) === */
.record-item[data-type="expense"] .record-preview-group {
    margin-bottom: 0;
}
.record-item[data-type="expense"] .record-preview-chips {
    display: inline;
    white-space: normal;
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
}
.record-item[data-type="expense"] .record-chip {
    display: inline;
    background: none;
    padding: 0;
    margin: 0;
    border: none;
}
.record-item[data-type="expense"] .record-chip .dot,
.record-item[data-type="expense"] .record-chip .chip-sub {
    display: none;
}
.record-item[data-type="expense"] .record-chip:not(:last-child)::after {
    content: ' · ';
    color: var(--text-3);
}
/* === КОНЕЦ [FIX-MAXWIDTH-001] === */