/* =========================================================================
   Автомойка №1 — общая дизайн-система
   Направление: современная автомобильная эстетика. Графит, фирменный
   бирюзовый Mark II, красный цвет действий и ананас как знак бренда.
   ========================================================================= */

:root{
  --sumi:#0B1015;
  --indigo:#15202A;
  --washi:#F1F3F4;
  --washi-card:#FFFFFF;
  --washi-2:#E7EBED;
  --line:rgba(11,16,21,0.14);
  --line-soft:rgba(11,16,21,0.07);
  --vermillion:#E73D2B;
  --vermillion-dark:#C92F20;
  --jade:#21BFC4;
  --jade-dark:#087C82;
  --gold:#B89052;
  --ink-soft:#53606B;
  --ink-soft-2:#7E8993;
  --radius:16px;
  --shadow:0 24px 60px -28px rgba(20,15,5,0.35);
  --shadow-soft:0 10px 30px -14px rgba(20,15,5,0.22);
  --ease:cubic-bezier(.16,1,.3,1);   /* премиальный easing — быстрый старт, мягкое затухание */
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;
  background:var(--washi);
  color:var(--sumi);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
/* тонкое зерно бумаги поверх всего сайта — едва заметное, но считывается как "печать", а не CSS-градиент */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:0;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,.display{font-family:'Manrope',sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.18;}
.mono{font-family:'Space Mono',monospace;font-variant-numeric:tabular-nums;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

/* ---------- сейгайха (волна) — тонкая текстура для тёмных секций ---------- */
.seigaiha{
  background-image:
    radial-gradient(circle at 0 100%, transparent 22px, rgba(247,242,231,0.05) 23px, rgba(247,242,231,0.05) 24px, transparent 25px),
    radial-gradient(circle at 40px 100%, transparent 22px, rgba(247,242,231,0.05) 23px, rgba(247,242,231,0.05) 24px, transparent 25px);
  background-size:40px 24px;
  background-position:0 0, 20px 0;
  background-repeat:repeat-x;
}

/* ---------- hanko — печать-акцент (ненавязчивая деталь) ---------- */
.hanko{
  position:absolute;width:56px;height:56px;border-radius:6px;
  border:2px solid var(--vermillion);color:var(--vermillion);
  display:flex;align-items:center;justify-content:center;
  font-family:'Spectral',serif;font-weight:600;font-size:22px;
  transform:rotate(-6deg);opacity:0;background:rgba(255,253,248,0.85);
  box-shadow:0 6px 16px -8px rgba(190,59,59,0.45);
}

/* ---------- типографика секций ---------- */
section{padding:86px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head .kicker{
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--vermillion);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.section-head .kicker::before{content:"";width:18px;height:1.5px;background:var(--vermillion);display:inline-block;}
.section-head h2{font-size:clamp(26px,3vw,36px);color:var(--sumi);}
.section-head p{color:var(--ink-soft);margin-top:12px;font-size:16px;}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:8px;font-weight:700;font-size:14.5px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease-soft);
  letter-spacing:0.2px;position:relative;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover::before{transform:translateX(120%);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--vermillion);color:#fff;box-shadow:0 12px 24px -12px rgba(190,59,59,0.55);}
.btn-primary:hover{background:var(--vermillion-dark);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(190,59,59,0.65);}
.btn-primary:active{transform:translateY(0) scale(0.97);}
.btn-ghost{background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.28);}
.btn-ghost:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.btn-dark{background:var(--sumi);color:#fff;}
.btn-dark:hover{transform:translateY(-2px);background:#22262E;}
.btn-outline{background:transparent;border:1.5px solid var(--sumi);color:var(--sumi);}
.btn-outline:hover{background:var(--sumi);color:#fff;transform:translateY(-2px);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;}

/* ---------- карточки / поля форм ---------- */
.card{background:var(--washi-card);border:1px solid var(--line);border-radius:var(--radius);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}
.field input, .field select{
  width:100%;padding:12px 14px;border-radius:9px;border:1.5px solid var(--line);font-family:inherit;font-size:15px;
  background:var(--washi-2);color:var(--sumi);
}
.field input:focus, .field select:focus{outline:none;border-color:var(--jade);}
.consent-check{
  display:flex;align-items:flex-start;gap:10px;margin:10px 0 14px;
  color:var(--ink-soft);font-size:11.5px;line-height:1.45;text-transform:none;letter-spacing:0;
}
.consent-check input{
  appearance:auto;width:17px;height:17px;min-width:17px;margin-top:1px;accent-color:var(--jade-dark);
}
.consent-check a{color:var(--jade-dark);text-decoration:underline;text-underline-offset:2px;}
.book-widget .consent-check{color:#AEB8C2;}
.book-widget .consent-check a{color:#56D7D8;}
.legal-links{display:flex;gap:14px;flex-wrap:wrap;}
.legal-links a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- reveal-анимация при скролле ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);transition-delay:var(--d,0s);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- галерея ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:14px;}
.gallery-item{position:relative;border-radius:14px;overflow:hidden;grid-column:span 1;}
.gallery-item.span-2{grid-column:span 2;}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 8px;background:linear-gradient(0deg, rgba(0,0,0,0.72), transparent);color:#fff;font-size:12.5px;font-weight:600;transition:transform .4s var(--ease);}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}}
@media (max-width:560px){.gallery-grid{grid-template-columns:1fr;}.gallery-item.span-2{grid-column:span 1;}}

/* ---------- лайтбокс для просмотра фото крупно ---------- */
.lightbox-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(15,12,8,0.92);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease-soft);
}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-overlay img{
  max-width:min(90vw, 1100px);max-height:85vh;border-radius:10px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,0.6);
  transform:scale(0.94);transition:transform .35s var(--ease);
}
.lightbox-overlay.open img{transform:scale(1);}
.lightbox-close{
  position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.1);color:#fff;font-size:22px;display:flex;
  align-items:center;justify-content:center;transition:background .2s;
}
.lightbox-close:hover{background:rgba(255,255,255,0.22);}
.lightbox-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:#E7DFCB;font-size:13.5px;}

/* ---------- пуш-карта с ананасами ---------- */
.punch-card{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.punch-slot{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;background:var(--washi-2);}
.punch-slot .num{position:absolute;top:-8px;right:-4px;font-size:10px;font-weight:700;color:var(--ink-soft-2);background:var(--washi-card);border:1px solid var(--line);padding:1px 5px;border-radius:100px;}
.punch-slot.reward-50{border-color:var(--vermillion);}
.punch-slot.reward-100{border-color:var(--gold);}
.punch-slot .reward-label{font-size:11px;font-weight:800;color:var(--sumi);}
.punch-slot.filled{background:rgba(30,138,114,0.12);border-color:var(--jade);animation:pineapplePop .5s var(--ease) backwards;animation-delay:var(--d,0s);}
@keyframes pineapplePop{0%{transform:scale(0.4);opacity:0;}60%{transform:scale(1.15);opacity:1;}100%{transform:scale(1);}}
.punch-slot svg{width:54%;height:54%;color:var(--jade-dark);}
.punch-card.on-dark .punch-slot{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.22);}
.punch-card.on-dark .punch-slot .num{background:var(--sumi);color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.2);}
.punch-card.on-dark .punch-slot .reward-label{color:#fff;}
@media (max-width:700px){.punch-card{grid-template-columns:repeat(4,1fr);}}

/* ---------- бейджи/статусы ---------- */
.badge{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:100px;background:var(--washi-2);color:var(--jade-dark);}
.badge.status-pending{color:var(--gold);}
.badge.status-done{color:var(--jade-dark);}
.badge.status-cancelled{color:var(--vermillion);}

/* ---------- стаггер: карточки внутри reveal-секции проявляются по очереди ---------- */
.reveal .service-card, .reveal .gallery-item, .reveal .tier-card{
  opacity:0;transform:translateY(18px) scale(0.98);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in .service-card, .reveal.in .gallery-item, .reveal.in .tier-card{opacity:1;transform:translateY(0) scale(1);}
.reveal.in .service-card:nth-child(1), .reveal.in .gallery-item:nth-child(1){transition-delay:.05s;}
.reveal.in .service-card:nth-child(2), .reveal.in .gallery-item:nth-child(2){transition-delay:.11s;}
.reveal.in .service-card:nth-child(3), .reveal.in .gallery-item:nth-child(3){transition-delay:.17s;}
.reveal.in .service-card:nth-child(4), .reveal.in .gallery-item:nth-child(4){transition-delay:.23s;}
.reveal.in .gallery-item:nth-child(5){transition-delay:.29s;}
.reveal.in .gallery-item:nth-child(6){transition-delay:.35s;}
.reveal.in .gallery-item:nth-child(7){transition-delay:.41s;}
.reveal.in .gallery-item:nth-child(n+8){transition-delay:.46s;}

/* ---------- утилиты ---------- */
.text-muted{color:var(--ink-soft);}
.divider{height:1px;background:var(--line);margin:24px 0;border:none;}
.divider-gold{height:1px;background:linear-gradient(90deg, var(--gold), transparent);margin:24px 0;border:none;}

/* ---------- курсор-подсветка в hero (следует за мышью, ненавязчиво) ---------- */
.cursor-glow{
  position:absolute;width:480px;height:480px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(190,59,59,0.16), transparent 70%);
  transform:translate(-50%,-50%);left:var(--x,50%);top:var(--y,30%);
  transition:left .5s var(--ease-soft), top .5s var(--ease-soft);
  z-index:0;
}

/* ---------- навигация: подчёркивание активного пункта ---------- */
.navlinks a{position:relative;}
.navlinks a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;
  background:currentColor;transition:width .3s var(--ease);
}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}

/* ---------- единый цветокор фотографий ---------- */
/* приводит разнобойные по свету/балансу фото к одному строю — тёплые тени, приглушённые света */
.photo-grade{filter:saturate(1.06) contrast(1.04) brightness(0.98);}

/* ---------- "+" при наведении на фото — сигнал "можно посмотреть крупнее" ---------- */
.gallery-item{cursor:zoom-in;}
.gallery-item::after{
  content:"";position:absolute;top:14px;left:14px;width:30px;height:30px;border-radius:50%;
  background:rgba(20,23,28,0.55);opacity:0;transform:scale(0.7);
  transition:opacity .2s ease, transform .2s ease;
  background-image:linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
  background-size:12px 1.5px, 1.5px 12px;background-position:center;background-repeat:no-repeat;
}
.gallery-item:hover::after{opacity:1;transform:scale(1);}

/* ---------- скелетон-загрузка ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--washi-2);border-radius:10px;}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:translateX(-100%);animation:skeletonShine 1.6s ease-in-out infinite;
}
@keyframes skeletonShine{100%{transform:translateX(100%);}}
.skeleton-card{height:230px;}
.skeleton-line{height:14px;margin-bottom:8px;}

/* ---------- степпер (шаги формы записи) ---------- */
.stepper{display:flex;align-items:center;gap:8px;margin-bottom:20px;}
.stepper .step{display:flex;align-items:center;gap:8px;}
.stepper .dot{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;background:var(--washi-2);color:var(--ink-soft-2);
  border:1.5px solid var(--line);transition:.25s;
}
.stepper .step.active .dot{background:var(--vermillion);border-color:var(--vermillion);color:#fff;}
.stepper .step.done .dot{background:var(--jade);border-color:var(--jade);color:#fff;}
.stepper .label{font-size:11.5px;font-weight:700;color:var(--ink-soft-2);}
.stepper .step.active .label{color:var(--sumi);}
.stepper .line{flex:1;height:1.5px;background:var(--line);}
.stepper .line.done{background:var(--jade);}

/* ---------- анимированные числа (счётчик) ---------- */
.count-up{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   Премиальные фичи: курсор, магнитные кнопки, живая витрина, геймификация
   ========================================================================== */

/* ---------- кастомный курсор-капля (только десктоп, с тонким наведением) ---------- */
@media (hover:hover) and (pointer:fine){
  body.custom-cursor-on{cursor:none;}
  .custom-cursor{
    --cursor-progress:8%;position:fixed;top:0;left:0;width:24px;height:28px;pointer-events:none;z-index:9998;
    transform:translate(-50%,-50%);transition:transform .18s var(--ease-soft),opacity .2s ease;
    opacity:0;filter:drop-shadow(0 3px 7px rgba(0,0,0,.3));
  }
  .custom-cursor.visible{opacity:1;}
  .cursor-drop-shape{--drop-angle:0deg;--drop-stretch:1;--drop-squash:1;position:absolute;inset:0;transform:rotate(var(--drop-angle)) scaleX(var(--drop-squash)) scaleY(var(--drop-stretch));transform-origin:50% 62%;will-change:transform}
  .custom-cursor svg{position:absolute;inset:0;width:100%;height:100%;fill:rgba(7,15,18,.72);stroke:#67e1dc;stroke-width:1.35;}
  .cursor-drop-fill{position:absolute;z-index:1;inset:2px;background:linear-gradient(to top,#168d91 0,#67e1dc var(--cursor-progress),transparent var(--cursor-progress));clip-path:polygon(50% 0,72% 27%,91% 54%,100% 70%,94% 86%,78% 97%,50% 100%,22% 97%,6% 86%,0 70%,9% 54%,28% 27%);}
  .custom-cursor.hover-target{transform:translate(-50%,-50%) scale(1.35);}
  .custom-cursor.hover-target:after{content:"";position:absolute;inset:-7px;border:1px solid rgba(103,225,220,.55);border-radius:50%;animation:cursorWaterRing 1.15s ease-out infinite}
  .custom-cursor.pressed{transform:translate(-50%,-50%) scale(.78)}
}

@keyframes cursorWaterRing{0%{transform:scale(.65);opacity:0}30%{opacity:1}100%{transform:scale(1.35);opacity:0}}
.water-click-ripple{position:fixed;z-index:9997;width:12px;height:12px;border:1px solid rgba(103,225,220,.8);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:waterClickRipple .62s ease-out forwards}
@keyframes waterClickRipple{0%{opacity:.9;box-shadow:0 0 0 0 rgba(103,225,220,.25)}100%{opacity:0;transform:translate(-50%,-50%) scale(5);box-shadow:0 0 0 7px rgba(103,225,220,0)}}
.water-click-spark{position:fixed;z-index:9997;width:5px;height:7px;border-radius:50% 50% 58% 42%;background:#67e1dc;pointer-events:none;transform:translate(-50%,-50%);animation:waterClickSpark .5s cubic-bezier(.2,.7,.25,1) forwards}
@keyframes waterClickSpark{0%{opacity:.9;transform:translate(-50%,-50%) scale(.8)}60%{opacity:.75;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y) + 12px)) scale(.45)}}
@keyframes bubbleFloat{
  0%{transform:translate(-50%,-50%) scale(0.4);opacity:.8;}
  100%{transform:translate(-50%,-50%) translateY(-46px) scale(1);opacity:0;}
}

/* ---------- магнитные кнопки ---------- */
.btn-magnetic{transition:transform .25s var(--ease-soft);will-change:transform;}

/* ---------- скролл-эффект "смыв грязи" ---------- */
.dirt-wash-section{position:relative;overflow:hidden;}
.dirt-wash-layer{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(180deg, rgba(60,50,35,0.55), rgba(60,50,35,0.15));
  mix-blend-mode:multiply;
  clip-path:inset(0 0 0 0);
  transition:clip-path .1s linear;
}

/* ---------- индикатор текущей загруженности (дышащая точка) ---------- */
.load-pulse{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;}
.load-dot{width:9px;height:9px;border-radius:50%;position:relative;flex-shrink:0;}
.load-dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;
  animation:loadPulse 1.8s ease-out infinite;opacity:0.6;
}
@keyframes loadPulse{0%{transform:scale(0.6);opacity:.7;}100%{transform:scale(1.8);opacity:0;}}
.load-dot.low{background:var(--jade);color:var(--jade);}
.load-dot.medium{background:var(--gold);color:var(--gold);}
.load-dot.high{background:var(--vermillion);color:var(--vermillion);}

/* ---------- тепловая полоска загруженности по часам ---------- */
.busy-hours-bar{display:flex;align-items:flex-end;gap:4px;height:46px;}
.busy-hour-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.busy-hour-fill{width:100%;border-radius:4px 4px 0 0;background:var(--jade);opacity:0.35;transition:height .6s var(--ease), opacity .3s;min-height:3px;}
.busy-hour-col.peak .busy-hour-fill{background:var(--vermillion);opacity:0.85;}
.busy-hour-label{font-size:9px;color:var(--ink-soft-2);}

/* ---------- тост "недавняя активность" ---------- */
.activity-toast{
  position:fixed;left:20px;bottom:20px;z-index:1500;max-width:290px;
  background:var(--washi-card);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow);
  display:flex;gap:12px;align-items:center;
  transform:translateY(20px);opacity:0;transition:transform .5s var(--ease), opacity .5s ease;
  pointer-events:none;
}
.activity-toast.show{transform:translateY(0);opacity:1;}
.activity-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--jade);flex-shrink:0;box-shadow:0 0 0 4px rgba(30,138,114,0.18);}
.activity-toast .txt b{display:block;font-size:13px;}
.activity-toast .txt span{font-size:11.5px;color:var(--ink-soft-2);}
@media (max-width:640px){.activity-toast{left:12px;right:12px;max-width:none;bottom:12px;}}

/* ---------- единый mobile-first слой для сайта и кабинетов ---------- */
@media (max-width:640px){
  input,select,textarea{font-size:16px!important;}
  .btn,.tab-btn,button[type="submit"]{min-height:44px;}
  .topbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);}
  .topbar .wrap{min-height:60px;}
  .auth-card,.card-section,.progress-section{border-radius:16px;}
  .content .card,.page .card{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
  .sidebar{scrollbar-width:none;scroll-snap-type:x proximity;}
  .sidebar::-webkit-scrollbar{display:none;}
  .sidebar .tab-btn{scroll-snap-align:start;min-height:42px;}
  .activity-toast{bottom:76px;}
  html body table.mobile-card-table{display:block!important;min-width:0!important;width:100%!important;background:transparent!important;border-collapse:separate!important;}
  html body table.mobile-card-table thead{display:none!important;}
  html body table.mobile-card-table tbody{display:grid!important;gap:12px!important;}
  html body table.mobile-card-table tr{display:block!important;background:var(--washi-card)!important;border:1px solid var(--line)!important;border-radius:13px!important;padding:7px 12px!important;box-shadow:0 8px 20px rgba(20,15,5,.04)!important;}
  html body table.mobile-card-table td{display:grid!important;grid-template-columns:minmax(92px,36%) minmax(0,1fr)!important;gap:10px!important;align-items:start!important;width:100%!important;min-height:34px!important;padding:8px 0!important;border:0!important;border-bottom:1px solid var(--line-soft)!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  html body table.mobile-card-table td:last-child{border-bottom:0!important;}
  html body table.mobile-card-table td::before{content:attr(data-label);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft-2);text-align:left;}
  html body table.mobile-card-table td[colspan]{display:block!important;text-align:center!important;padding:16px 0!important;}
  html body table.mobile-card-table td[colspan]::before{display:none!important;}
  html body table.mobile-card-table select,html body table.mobile-card-table input{max-width:100%!important;}
  html body table.mobile-card-table .ledger-actions{display:flex!important;justify-content:flex-end!important;flex-wrap:wrap!important;gap:5px!important;}
}

/* ---------- "твоя машина скучает" баннер ---------- */
.miss-you-banner{
  background:linear-gradient(90deg, var(--sumi), var(--indigo));color:#fff;
  padding:12px 0;text-align:center;font-size:13.5px;
}
.miss-you-banner a{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.miss-you-banner .close-x{margin-left:14px;opacity:.6;cursor:pointer;}

/* ---------- сезонный совет ---------- */
.seasonal-tip{
  display:flex;gap:12px;align-items:flex-start;background:var(--washi-2);border:1px dashed var(--line);
  border-radius:14px;padding:16px 18px;margin-top:20px;
}
.seasonal-tip svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:2px;}

/* ---------- XP-полоска для бонусной карты ---------- */
.xp-bar-track{height:16px;border-radius:100px;background:var(--washi-2);overflow:hidden;position:relative;margin-bottom:18px;}
.xp-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--jade),var(--gold));transition:width 1.1s var(--ease);position:relative;}
.xp-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);animation:xpShine 2.4s ease-in-out infinite;}
@keyframes xpShine{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.xp-bar-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:var(--sumi);mix-blend-mode:difference;}

/* ---------- значки-ачивки ---------- */
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(100px,1fr));gap:12px;}
.achievement{
  text-align:center;padding:14px 8px;border-radius:14px;background:var(--washi-2);
  border:1px solid var(--line);opacity:0.35;filter:grayscale(1);transition:opacity .3s, filter .3s, transform .3s var(--ease);
}
.achievement.unlocked{opacity:1;filter:grayscale(0);border-color:var(--gold);}
.achievement.unlocked:hover{transform:translateY(-3px);}
.achievement .ach-icon{font-size:26px;margin-bottom:6px;}
.achievement .ach-label{font-size:10.5px;font-weight:700;color:var(--ink-soft);}

/* ---------- микро-анимация иконки услуги при наведении ---------- */
.service-card:hover .service-icon svg{animation:iconWiggle .6s var(--ease);}
@keyframes iconWiggle{0%,100%{transform:rotate(0);}30%{transform:rotate(-8deg) scale(1.08);}60%{transform:rotate(6deg) scale(1.08);}}