/* ==================================================
   Wrenchmate pre-Alpha V1.0.3 UI Foundation
   shadcn-inspired tokens and component polish for Django templates.
   This layer intentionally sits after app.css and avoids backend changes.
   ================================================== */

:root{
  --wm-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wm-radius-xs:8px;
  --wm-radius-sm:10px;
  --wm-radius-md:14px;
  --wm-radius-lg:18px;
  --wm-radius-xl:24px;
  --wm-ease:cubic-bezier(.2,.7,.2,1);
  --wm-focus-ring:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent);
}

html[data-theme="dark"]{
  --bg:#15171d;
  --sidebar:#1a1c22;
  --panel:#20232b;
  --panel-2:#282c35;
  --panel-3:#343945;
  --text:#f3f4f6;
  --muted:#a7adbb;
  --muted-2:#747b8c;
  --line:rgba(255,255,255,.11);
  --blue:#5f8fe8;
  --blue-2:#83a9ef;
  --yellow:#e0b15a;
  --green:#39d98a;
  --red:#ff6b7f;
  --shadow:0 22px 70px rgba(0,0,0,.34);
  --glow:0 0 0 1px rgba(95,143,232,.12),0 18px 48px rgba(95,143,232,.16);
}

html[data-theme="light"]{
  --bg:#e8dfd1;
  --sidebar:rgba(250,246,238,.86);
  --panel:rgba(255,252,246,.86);
  --panel-2:#efe7da;
  --panel-3:#e1d6c7;
  --text:#171a22;
  --muted:#6c665d;
  --muted-2:#92877a;
  --line:rgba(99,80,54,.16);
  --blue:#5c88c8;
  --blue-2:#7ca1d6;
  --yellow:#b98f45;
  --green:#199965;
  --red:#d84e63;
  --shadow:0 22px 68px rgba(73,58,37,.16);
  --glow:0 0 0 1px rgba(92,136,200,.12),0 18px 42px rgba(92,136,200,.14);
}

body{
  font-family:var(--wm-font);
  font-size:15px;
  line-height:1.55;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body:not(.auth-page){
  background:
    radial-gradient(circle at 22% 10%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 32%),
    radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 34%),
    linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 90%,#000 10%));
}

html[data-theme="light"] body:not(.auth-page){
  background:
    radial-gradient(circle at 20% 14%,rgba(255,255,255,.42),transparent 34%),
    radial-gradient(circle at 86% 20%,rgba(92,136,200,.14),transparent 34%),
    linear-gradient(135deg,#e7ddcf,#f5efe5 58%,#e1d8c9);
}

/* ==================================================
   Layout / navigation
   ================================================== */

.mp-app{
  grid-template-columns:236px minmax(0,1fr);
}

.mp-main{
  max-width:1240px;
  padding:34px 48px 56px;
}

.mp-sidebar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    var(--sidebar);
  border-right:1px solid var(--line);
  box-shadow:16px 0 46px rgba(0,0,0,.15);
}

.mp-brand strong,
.page-title,
.mp-page-head h1,
.v102-page-head h1,
.auth-showcase h1{
  letter-spacing:-.055em;
}

.mp-nav{
  gap:6px;
}

.mp-nav a{
  min-height:42px;
  border-radius:var(--wm-radius-md);
  border:1px solid transparent;
  font-weight:730;
  color:color-mix(in srgb,var(--text) 78%,var(--muted));
  transition:
    background-color .18s var(--wm-ease),
    border-color .18s var(--wm-ease),
    color .18s var(--wm-ease),
    transform .18s var(--wm-ease),
    box-shadow .18s var(--wm-ease);
}

.mp-nav a:hover{
  transform:translateX(2px);
  background:color-mix(in srgb,var(--panel-2) 75%,transparent);
  border-color:var(--line);
  color:var(--text);
}

.mp-nav a.is-active{
  background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue) 76%,#18213a));
  border-color:color-mix(in srgb,var(--blue) 58%,white);
  color:#fff;
  box-shadow:var(--glow);
}

.mp-nav a span{
  width:20px;
  display:inline-grid;
  place-items:center;
}

.mp-sidebar-toggle,
.mp-theme-switch,
.mp-language-switch,
.mp-active-vehicle-card,
.mp-user-card{
  border-radius:var(--wm-radius-lg);
  border-color:var(--line);
}

/* ==================================================
   Component primitives
   ================================================== */

.panel,
.auth-card,
.auth-stat,
.auth-feature,
.auth-mini-card,
.workflow-card,
.workflow-assist-card,
.flow-form-card,
.flow-side-panel,
.workspace-shell,
.enhanced-card,
.enhanced-assist,
.admin-menu-panel,
.invoice-status-card,
.review-form.panel,
.legal-modal-card,
.due-login-card{
  border-radius:var(--wm-radius-xl);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),
    var(--panel);
  box-shadow:var(--shadow);
}

html[data-theme="light"] .panel,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-stat,
html[data-theme="light"] .auth-feature,
html[data-theme="light"] .auth-mini-card,
html[data-theme="light"] .workflow-card,
html[data-theme="light"] .workflow-assist-card,
html[data-theme="light"] .flow-form-card,
html[data-theme="light"] .flow-side-panel,
html[data-theme="light"] .workspace-shell,
html[data-theme="light"] .enhanced-card,
html[data-theme="light"] .enhanced-assist,
html[data-theme="light"] .admin-menu-panel,
html[data-theme="light"] .invoice-status-card,
html[data-theme="light"] .review-form.panel,
html[data-theme="light"] .legal-modal-card,
html[data-theme="light"] .due-login-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38)),
    var(--panel);
}

.panel:hover,
.workflow-card:hover,
.v102-focus-card:hover,
.alpha-check:hover,
.invoice-item-option:hover{
  border-color:color-mix(in srgb,var(--blue) 34%,var(--line));
}

.btn,
.button,
button:not(.legal-inline-link):not(.mp-sidebar-toggle){
  min-height:40px;
  border-radius:var(--wm-radius-md);
  border:1px solid var(--line);
  font-weight:800;
  letter-spacing:0;
  transition:
    transform .16s var(--wm-ease),
    border-color .16s var(--wm-ease),
    background-color .16s var(--wm-ease),
    box-shadow .16s var(--wm-ease),
    opacity .16s var(--wm-ease);
}

.btn:hover,
.button:hover,
button:not(.legal-inline-link):not(.mp-sidebar-toggle):hover{
  transform:translateY(-1px);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

.btn.primary,
.button.primary,
button.primary,
.auth-submit{
  color:#fff;
  background:linear-gradient(135deg,var(--blue),color-mix(in srgb,var(--blue) 72%,#14223d));
  border-color:color-mix(in srgb,var(--blue) 62%,white);
  box-shadow:var(--glow);
}

.btn.ghost,
.btn:not(.primary):not(.danger),
.button:not(.primary){
  background:color-mix(in srgb,var(--panel-2) 76%,transparent);
  color:var(--text);
}

.btn.danger,
button.danger{
  color:var(--red);
  border-color:color-mix(in srgb,var(--red) 42%,var(--line));
  background:color-mix(in srgb,var(--red) 10%,var(--panel));
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.flow-field input,
.flow-field select,
.flow-field textarea,
.auth-form input,
.auth-form select,
.auth-form textarea,
.review-row input,
.review-row select,
.review-row textarea{
  min-height:46px;
  border-radius:var(--wm-radius-md);
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-2) 78%,transparent);
  color:var(--text);
  font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .16s var(--wm-ease),box-shadow .16s var(--wm-ease),background-color .16s var(--wm-ease);
}

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:rgba(255,255,255,.56);
}

input:focus,
select:focus,
textarea:focus{
  border-color:color-mix(in srgb,var(--blue) 62%,white);
  box-shadow:var(--wm-focus-ring);
  outline:none;
}

label,
.flow-field label,
.auth-field span,
.review-row label,
.mp-kicker,
.v11-card-kicker{
  font-weight:850;
}

.mp-kicker,
.v11-card-kicker,
.auth-kicker{
  color:var(--blue);
  letter-spacing:.18em;
}

.muted,
.mp-subtitle,
.auth-showcase p,
.auth-card p,
.flow-form-head p{
  color:var(--muted);
}

/* ==================================================
   Dashboard and cards
   ================================================== */

.v102-cockpit{
  max-width:1120px;
}

.v102-page-head{
  margin-bottom:24px;
}

.v102-command-grid,
.v102-focus-grid{
  gap:18px;
}

.v102-vehicle-card,
.v102-attention-card,
.v102-focus-card,
.v102-quality-card{
  overflow:hidden;
}

.v102-vehicle-card{
  border-radius:28px;
}

.v102-vehicle-image{
  border-radius:var(--wm-radius-lg);
  overflow:hidden;
}

.v102-metric-row div,
.v102-attention-stats span,
.summary-tile,
.mini-stat,
.quality-missing span{
  border-radius:var(--wm-radius-md);
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-2) 72%,transparent);
}

.v102-focus-card{
  min-height:188px;
}

.v102-card-icon,
.auth-feature-icon,
.mp-active-vehicle-icon{
  border-radius:var(--wm-radius-md);
  background:color-mix(in srgb,var(--blue) 16%,var(--panel-2));
  color:var(--blue);
}

.v102-focus-card.is-danger,
.v102-attention-card.is-danger{
  border-color:color-mix(in srgb,var(--red) 44%,var(--line));
}

.v102-focus-card.is-warning,
.v102-attention-card.is-warning{
  border-color:color-mix(in srgb,var(--yellow) 48%,var(--line));
}

/* ==================================================
   Forms / workflow pages
   ================================================== */

.workflow-shell,
.flow-form-layout,
.settings-layout,
.cost-grid,
.workspace-grid{
  gap:22px;
}

.flow-form-card,
.workflow-card,
.workflow-assist-card{
  padding:24px;
}

.flow-form-grid,
.form-grid{
  gap:16px;
}

.flow-upload-zone,
.invoice-dropzone,
.auth-workshop-box,
.auth-terms-check{
  border-radius:var(--wm-radius-lg);
  border:1px dashed color-mix(in srgb,var(--blue) 34%,var(--line));
  background:color-mix(in srgb,var(--blue) 7%,var(--panel));
}

.invoice-item-option,
.invoice-item-group,
.review-row,
.status-list a,
.alpha-check{
  border-radius:var(--wm-radius-lg);
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel-2) 64%,transparent);
}

.tabs,
.detail-tabs,
.workspace-tabs{
  padding:5px;
  border-radius:var(--wm-radius-lg);
  background:color-mix(in srgb,var(--panel-2) 74%,transparent);
  border:1px solid var(--line);
}

.tabs a,
.tabs button,
.detail-tabs a,
.workspace-tabs a,
.workspace-tabs button{
  border-radius:var(--wm-radius-md);
}

/* ==================================================
   Auth pages
   ================================================== */

.auth-shell{
  max-width:1480px;
}

.auth-layout{
  gap:48px;
}

.auth-card{
  border-radius:28px;
  padding:28px;
}

.auth-submit{
  min-height:54px;
  border-radius:var(--wm-radius-lg);
}

.auth-stat,
.auth-feature,
.auth-mini-card{
  box-shadow:none;
}

.legal-modal-card{
  max-width:min(720px,calc(100vw - 36px));
}

/* ==================================================
   Tables, feedback and admin surfaces
   ================================================== */

table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
}

th{
  color:var(--muted);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}

td,
th{
  border-bottom:1px solid var(--line);
}

.mp-message,
.auth-errors,
.field-errors,
.warning-card{
  border-radius:var(--wm-radius-md);
}

/* ==================================================
   Motion and responsive guardrails
   ================================================== */

@media (prefers-reduced-motion:no-preference){
  .mp-main > *{
    animation:wm-page-in .22s var(--wm-ease) both;
  }
}

@keyframes wm-page-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:900px){
  .mp-main{
    padding:24px 18px 42px;
  }
  .panel,
  .auth-card,
  .flow-form-card,
  .flow-side-panel{
    border-radius:var(--wm-radius-lg);
  }
}

/* ==================================================
   pre-Alpha V1.0.4 - Login polish
   First page-specific build on top of the UI Foundation.
   ================================================== */

.auth-v104-login{
  overflow:auto;
}

.auth-v104-login .auth-background{
  background:
    radial-gradient(circle at 18% 22%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 31%),
    radial-gradient(circle at 74% 16%,color-mix(in srgb,var(--yellow) 13%,transparent),transparent 27%),
    linear-gradient(135deg,color-mix(in srgb,var(--bg) 92%,#000 8%),var(--bg));
}

html[data-theme="light"] .auth-v104-login .auth-background{
  background:
    radial-gradient(circle at 18% 20%,rgba(92,136,200,.18),transparent 32%),
    radial-gradient(circle at 78% 18%,rgba(185,143,69,.14),transparent 29%),
    linear-gradient(135deg,#e7dfd2,#f6f1e8 58%,#e5dccf);
}

.auth-v104-login .auth-grid{
  opacity:.38;
}

.auth-v104-login .auth-shell{
  width:100%;
  max-width:1540px;
  margin:0 auto;
  padding:26px clamp(22px,3vw,52px);
}

.auth-v104-login .auth-topbar{
  align-items:center;
  margin-bottom:22px;
}

.auth-v104-login .auth-layout{
  min-height:calc(100vh - 110px);
  grid-template-columns:minmax(520px,1.03fr) minmax(390px,470px);
  align-items:center;
  gap:clamp(38px,6vw,92px);
}

.auth-v104-login .auth-showcase{
  min-height:660px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(34px,5vw,68px);
  border:1px solid color-mix(in srgb,var(--line) 84%,transparent);
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(circle at 34% 36%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 27%),
    radial-gradient(circle at 76% 74%,color-mix(in srgb,var(--yellow) 12%,transparent),transparent 30%),
    linear-gradient(145deg,color-mix(in srgb,var(--panel) 72%,transparent),color-mix(in srgb,var(--panel-2) 54%,transparent));
  box-shadow:var(--shadow);
}

.auth-v104-login .auth-showcase:before{
  content:"";
  position:absolute;
  inset:auto -12% -24% 30%;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--blue) 20%,transparent),transparent 68%);
  filter:blur(20px);
}

.auth-v104-login .auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  padding:7px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--blue) 20%,var(--line));
}

.auth-v104-login .auth-kicker:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 16px var(--blue);
}

.auth-v104-login .auth-showcase h1{
  max-width:12ch;
  margin-top:22px;
  font-size:clamp(3.3rem,6vw,6.5rem);
  line-height:.86;
  letter-spacing:-.078em;
}

.auth-v104-login .auth-showcase p{
  max-width:58ch;
  font-size:1.03rem;
}

.auth-vehicle-preview{
  position:relative;
  width:min(560px,100%);
  margin:34px 0 28px;
  padding:18px;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),
    color-mix(in srgb,var(--panel-2) 70%,transparent);
  box-shadow:0 24px 68px rgba(0,0,0,.22);
}

html[data-theme="light"] .auth-vehicle-preview{
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.34)),
    color-mix(in srgb,var(--panel) 70%,transparent);
}

.auth-preview-topline,
.auth-preview-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.auth-preview-topline span,
.auth-preview-main small,
.auth-preview-main em{
  color:var(--muted);
  font-size:.78rem;
  font-weight:780;
}

.auth-preview-topline strong{
  padding:6px 10px;
  border-radius:999px;
  color:var(--green);
  background:color-mix(in srgb,var(--green) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--green) 26%,var(--line));
  font-size:.78rem;
}

.auth-preview-main{
  margin-top:22px;
}

.auth-preview-main div{
  display:grid;
  gap:5px;
}

.auth-preview-main strong{
  font-size:1.12rem;
}

.auth-preview-main em{
  font-style:normal;
}

.auth-preview-ring{
  width:70px;
  height:70px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:900;
  color:var(--text);
  background:
    radial-gradient(circle,var(--panel) 0 54%,transparent 55%),
    conic-gradient(var(--green) 0 92%,color-mix(in srgb,var(--panel-3) 70%,transparent) 0);
  border:1px solid var(--line);
}

.auth-preview-bar{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr .7fr;
  gap:8px;
  margin-top:18px;
}

.auth-preview-bar i{
  height:7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--blue) 28%,var(--panel-3));
}

.auth-preview-bar i:nth-child(2){
  background:color-mix(in srgb,var(--green) 30%,var(--panel-3));
}

.auth-preview-bar i:nth-child(4){
  background:color-mix(in srgb,var(--yellow) 34%,var(--panel-3));
}

.auth-v104-login .auth-stats{
  margin-top:0;
}

.auth-v104-login .auth-features{
  margin-top:16px;
}

.auth-v104-login .auth-card{
  padding:30px;
  border-radius:30px;
}

.auth-v104-login .auth-card-head{
  align-items:center;
}

.auth-v104-login .auth-card-brand .brand-mark{
  border-radius:18px;
}

.auth-v104-login .auth-card-brand h2{
  font-size:2rem;
}

.auth-v104-login .auth-panel-note{
  color:var(--green);
  background:color-mix(in srgb,var(--green) 10%,transparent);
  border-color:color-mix(in srgb,var(--green) 22%,var(--line));
}

.auth-v104-login .auth-form{
  gap:18px;
  margin-top:22px;
}

.auth-v104-login .auth-form input:not([type="checkbox"]){
  min-height:56px;
  border-radius:18px;
  padding:0 18px;
}

.auth-v104-login .auth-options{
  padding:12px 14px;
  border-radius:16px;
  background:color-mix(in srgb,var(--panel-2) 56%,transparent);
  border:1px solid var(--line);
}

.auth-v104-login .auth-submit{
  min-height:58px;
  border-radius:18px;
  font-size:1rem;
}

.auth-v104-login .auth-mini-card{
  border-radius:18px;
}

@media(max-width:1120px){
  .auth-v104-login .auth-layout{
    grid-template-columns:1fr;
    max-width:820px;
  }
  .auth-v104-login .auth-showcase{
    min-height:auto;
  }
  .auth-v104-login .auth-showcase h1{
    max-width:13ch;
  }
}

@media(max-width:720px){
  .auth-v104-login .auth-shell{
    padding:18px;
  }
  .auth-v104-login .auth-layout{
    min-height:auto;
  }
  .auth-v104-login .auth-showcase{
    padding:24px;
    border-radius:24px;
  }
  .auth-v104-login .auth-showcase h1{
    font-size:clamp(2.6rem,13vw,4rem);
  }
  .auth-preview-main{
    align-items:flex-start;
  }
}

/* ==================================================
   pre-Alpha V1.0.5 - Premium login with showroom background
   Uses Background_Wrenchmate.png as the visual direction.
   ================================================== */

.auth-v105-login{
  min-height:100vh;
  overflow:auto;
  background:#05080d;
}

.auth-v105-login .auth-background{
  background:
    linear-gradient(90deg,rgba(4,7,12,.82) 0%,rgba(4,7,12,.62) 37%,rgba(4,7,12,.24) 64%,rgba(4,7,12,.7) 100%),
    radial-gradient(circle at 24% 72%,rgba(70,158,255,.22),transparent 28%),
    url("background_wrenchmate.png") center center / cover no-repeat;
}

.auth-v105-login .auth-background:before,
.auth-v105-login .auth-background:after{
  display:none;
}

.auth-v105-login .auth-grid{
  opacity:.18;
  mix-blend-mode:screen;
}

.auth-v105-login .auth-cog,
.auth-v105-login .auth-cog-small{
  opacity:.03;
}

.auth-v105-login .auth-shell{
  width:100%;
  max-width:1540px;
  margin:0 auto;
  padding:26px clamp(22px,3vw,52px);
}

.auth-v105-login .auth-topbar{
  align-items:center;
  margin-bottom:22px;
}

.auth-v105-login .auth-topbar .mp-brand{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  background:rgba(5,8,13,.36);
  backdrop-filter:blur(18px);
}

.auth-v105-login .auth-layout{
  min-height:calc(100vh - 112px);
  grid-template-columns:minmax(560px,1fr) minmax(410px,480px);
  align-items:center;
  gap:clamp(42px,7vw,112px);
}

.auth-v105-login .auth-showcase{
  min-height:660px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(26px,5vw,64px);
  background:transparent;
  border:0;
  box-shadow:none;
}

.auth-v105-login .auth-showcase:before{
  content:"";
  position:absolute;
  inset:7% auto 10% -8%;
  width:min(640px,70vw);
  border-radius:40px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
    rgba(5,10,17,.18);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  pointer-events:none;
}

.auth-v105-login .auth-kicker{
  position:relative;
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:999px;
  color:#9bc6ff;
  background:rgba(84,158,255,.12);
  border:1px solid rgba(128,184,255,.22);
  box-shadow:0 0 28px rgba(73,153,255,.12);
}

.auth-v105-login .auth-kicker:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#78b8ff;
  box-shadow:0 0 16px #78b8ff;
}

.auth-v105-login .auth-showcase h1{
  position:relative;
  max-width:12ch;
  margin-top:24px;
  color:#f5f8ff;
  font-size:clamp(3.6rem,6.4vw,7rem);
  line-height:.84;
  letter-spacing:-.08em;
  text-shadow:0 18px 54px rgba(0,0,0,.55);
}

.auth-v105-login .auth-showcase p{
  position:relative;
  max-width:58ch;
  color:rgba(224,234,248,.78);
  font-size:1.04rem;
}

.auth-premium-console{
  position:relative;
  width:min(600px,100%);
  display:grid;
  gap:10px;
  margin:34px 0 26px;
}

.auth-console-item{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),
    rgba(8,15,24,.58);
  backdrop-filter:blur(24px) saturate(1.1);
  box-shadow:0 18px 56px rgba(0,0,0,.24);
  overflow:hidden;
  transition:border-color .18s var(--wm-ease),background-color .18s var(--wm-ease),transform .18s var(--wm-ease);
}

.auth-console-item:hover,
.auth-console-item[open]{
  border-color:rgba(128,184,255,.34);
  transform:translateY(-1px);
}

.auth-console-item summary{
  min-height:58px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:0 14px;
  color:#f7fbff;
  cursor:pointer;
  list-style:none;
}

.auth-console-item summary::-webkit-details-marker{
  display:none;
}

.auth-console-item summary:after{
  content:"⌄";
  grid-column:3;
  justify-self:end;
  margin-left:10px;
  color:rgba(231,241,255,.58);
  transform:rotate(0deg);
  transition:transform .18s var(--wm-ease);
}

.auth-console-item[open] summary:after{
  transform:rotate(180deg);
}

.auth-console-item summary span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#8fc2ff;
  background:rgba(91,155,232,.14);
  border:1px solid rgba(128,184,255,.2);
  font-size:.78rem;
  font-weight:900;
}

.auth-console-item summary strong{
  font-size:.98rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.auth-console-item summary em{
  justify-self:end;
  margin-right:24px;
  padding:5px 8px;
  border-radius:999px;
  color:#9ee8bd;
  background:rgba(57,217,138,.1);
  border:1px solid rgba(57,217,138,.19);
  font-style:normal;
  font-size:.72rem;
  font-weight:850;
}

.auth-console-body{
  display:grid;
  gap:12px;
  padding:0 16px 16px 68px;
}

.auth-console-body p{
  margin:0;
  color:rgba(224,234,248,.72);
  font-size:.93rem;
  line-height:1.55;
}

.auth-console-meter{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.auth-console-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#5f8fe8,#78d8ff);
  box-shadow:0 0 18px rgba(120,216,255,.35);
}

.auth-console-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.auth-console-tags b{
  padding:6px 9px;
  border-radius:999px;
  color:rgba(245,249,255,.82);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11);
  font-size:.72rem;
}

.auth-v105-login .auth-stats{
  position:relative;
  margin-top:0;
}

.auth-v105-login .auth-stat,
.auth-v105-login .auth-feature{
  background:rgba(8,15,24,.42);
  border-color:rgba(255,255,255,.1);
  backdrop-filter:blur(20px);
}

.auth-v105-login .auth-stat strong,
.auth-v105-login .auth-feature strong{
  color:#f7fbff;
}

.auth-v105-login .auth-stat small,
.auth-v105-login .auth-feature p{
  color:rgba(224,234,248,.66);
}

.auth-v105-login .auth-card{
  padding:32px;
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055)),
    rgba(8,13,20,.58);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 34px 110px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter:blur(28px) saturate(1.14);
}

html[data-theme="light"] .auth-v105-login .auth-card{
  color:#f5f8ff;
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055)),
    rgba(7,12,19,.58);
  border-color:rgba(255,255,255,.18);
}

.auth-v105-login .auth-card:before{
  background:linear-gradient(135deg,rgba(142,198,255,.72),rgba(255,255,255,.06),rgba(118,184,255,.18));
}

.auth-v105-login .auth-card-brand h2{
  color:#f8fbff;
  font-size:2rem;
}

.auth-v105-login .auth-card-brand p,
.auth-v105-login .auth-field span,
.auth-v105-login .auth-options span,
.auth-v105-login .auth-link{
  color:rgba(224,234,248,.7);
}

.auth-v105-login .auth-panel-note{
  color:#9ee8bd;
  background:rgba(57,217,138,.1);
  border-color:rgba(57,217,138,.2);
}

.auth-v105-login .auth-form{
  gap:18px;
  margin-top:22px;
}

.auth-v105-login .auth-form input:not([type="checkbox"]){
  min-height:56px;
  border-radius:18px;
  color:#f7fbff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}

.auth-v105-login .auth-form input::placeholder{
  color:rgba(224,234,248,.45);
}

.auth-v105-login .auth-options,
.auth-v105-login .auth-mini-card{
  border-radius:18px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
}

.auth-v105-login .auth-submit{
  min-height:58px;
  border-radius:18px;
  background:linear-gradient(135deg,#79b8ff,#4c83df 58%,#386cc4);
  box-shadow:0 0 34px rgba(90,160,255,.34),0 18px 46px rgba(0,0,0,.28);
}

.auth-v105-login .auth-mini-card strong,
.auth-v105-login .auth-link strong{
  color:#f7fbff;
}

.auth-v105-login .auth-links{
  border-color:rgba(255,255,255,.14);
}

@media(max-width:1160px){
  .auth-v105-login .auth-layout{
    grid-template-columns:1fr;
    max-width:880px;
  }
  .auth-v105-login .auth-showcase{
    min-height:auto;
  }
  .auth-v105-login .auth-showcase h1{
    max-width:13ch;
  }
}

@media(max-width:720px){
  .auth-v105-login .auth-shell{
    padding:18px;
  }
  .auth-v105-login .auth-layout{
    min-height:auto;
  }
  .auth-v105-login .auth-showcase{
    padding:24px 0;
  }
  .auth-v105-login .auth-showcase:before{
    display:none;
  }
  .auth-v105-login .auth-showcase h1{
    font-size:clamp(2.7rem,13vw,4.2rem);
  }
  .auth-console-item summary{
    grid-template-columns:36px minmax(0,1fr) auto;
  }
  .auth-console-body{
    padding-left:62px;
  }
}

/* ==================================================
   pre-Alpha V1.0.6 - Route-aware premium page backgrounds
   Each app section gets its own generated atmosphere image via body classes.
   ================================================== */

body:not(.auth-page){
  --page-bg-image:url("page-backgrounds/universal.png");
  --page-bg-overlay:
    radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--blue) 18%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 78%,transparent));
  isolation:isolate;
  overflow-x:hidden;
}

body.page-garage{--page-bg-image:url("page-backgrounds/garage.png")}
body.page-service{--page-bg-image:url("page-backgrounds/service.png")}
body.page-invoice{--page-bg-image:url("page-backgrounds/rechnung.png")}
body.page-costs{--page-bg-image:url("page-backgrounds/kosten.png")}
body.page-admin{--page-bg-image:url("page-backgrounds/admin.png")}
body.page-universal{--page-bg-image:url("page-backgrounds/universal.png")}

.app-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.app-bg::before{
  content:"";
  position:absolute;
  inset:-1px;
  background-image:var(--page-bg-image);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.45;
  filter:brightness(.45) saturate(.9) contrast(1.1);
  transform:scale(1.01);
}

.app-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 88%,transparent),transparent 28%,transparent 72%,color-mix(in srgb,var(--bg) 72%,transparent)),
    radial-gradient(circle at 26% 18%,rgba(91,145,232,.14),transparent 34%),
    radial-gradient(circle at 80% 18%,rgba(224,177,90,.12),transparent 32%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 60%,transparent),color-mix(in srgb,var(--bg) 92%,transparent));
}

html[data-theme="light"] .app-bg::before{
  opacity:.75;
  filter:brightness(1.02) saturate(.95);
}

html[data-theme="light"] .app-bg::after{
  background:
    linear-gradient(90deg,rgba(232,223,209,.72),rgba(255,250,241,.2) 32%,rgba(255,250,241,.26) 68%,rgba(232,223,209,.72)),
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.42),transparent 34%),
    radial-gradient(circle at 78% 20%,rgba(92,136,200,.16),transparent 32%),
    linear-gradient(180deg,rgba(245,239,229,.18),rgba(232,223,209,.72));
}

body:not(.auth-page) .mp-app,
body:not(.auth-page) .mp-main,
body:not(.auth-page) .mp-sidebar{
  position:relative;
  z-index:1;
}

body:not(.auth-page) .mp-sidebar{
  backdrop-filter:blur(22px) saturate(1.08);
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014)),
    color-mix(in srgb,var(--sidebar) 88%,transparent);
}

body:not(.auth-page) .panel,
body:not(.auth-page) .workflow-card,
body:not(.auth-page) .workflow-assist-card,
body:not(.auth-page) .flow-form-card,
body:not(.auth-page) .flow-side-panel,
body:not(.auth-page) .workspace-shell,
body:not(.auth-page) .enhanced-card,
body:not(.auth-page) .enhanced-assist,
body:not(.auth-page) .garage-card,
body:not(.auth-page) .cockpit-card,
body:not(.auth-page) .admin-menu-panel,
body:not(.auth-page) .invoice-status-card,
body:not(.auth-page) .legal-modal-card,
body:not(.auth-page) .due-login-card{
  backdrop-filter:blur(18px) saturate(1.08);
}

html[data-theme="light"] body:not(.auth-page) .panel,
html[data-theme="light"] body:not(.auth-page) .workflow-card,
html[data-theme="light"] body:not(.auth-page) .workflow-assist-card,
html[data-theme="light"] body:not(.auth-page) .flow-form-card,
html[data-theme="light"] body:not(.auth-page) .flow-side-panel,
html[data-theme="light"] body:not(.auth-page) .workspace-shell,
html[data-theme="light"] body:not(.auth-page) .enhanced-card,
html[data-theme="light"] body:not(.auth-page) .enhanced-assist,
html[data-theme="light"] body:not(.auth-page) .garage-card,
html[data-theme="light"] body:not(.auth-page) .cockpit-card,
html[data-theme="light"] body:not(.auth-page) .admin-menu-panel,
html[data-theme="light"] body:not(.auth-page) .invoice-status-card,
html[data-theme="light"] body:not(.auth-page) .legal-modal-card,
html[data-theme="light"] body:not(.auth-page) .due-login-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.5)),
    color-mix(in srgb,var(--panel) 86%,transparent);
  border-color:rgba(121,101,75,.22);
  box-shadow:0 22px 64px rgba(83,68,48,.16);
}

html[data-theme="dark"] body:not(.auth-page) .panel,
html[data-theme="dark"] body:not(.auth-page) .workflow-card,
html[data-theme="dark"] body:not(.auth-page) .workflow-assist-card,
html[data-theme="dark"] body:not(.auth-page) .flow-form-card,
html[data-theme="dark"] body:not(.auth-page) .flow-side-panel,
html[data-theme="dark"] body:not(.auth-page) .workspace-shell,
html[data-theme="dark"] body:not(.auth-page) .enhanced-card,
html[data-theme="dark"] body:not(.auth-page) .enhanced-assist,
html[data-theme="dark"] body:not(.auth-page) .garage-card,
html[data-theme="dark"] body:not(.auth-page) .cockpit-card,
html[data-theme="dark"] body:not(.auth-page) .admin-menu-panel,
html[data-theme="dark"] body:not(.auth-page) .invoice-status-card,
html[data-theme="dark"] body:not(.auth-page) .legal-modal-card,
html[data-theme="dark"] body:not(.auth-page) .due-login-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    color-mix(in srgb,var(--panel) 82%,transparent);
}

html[data-theme="light"] .auth-v105-login .auth-stat,
html[data-theme="light"] .auth-v105-login .auth-feature,
html[data-theme="light"] .auth-v105-login .auth-mini-card,
html[data-theme="light"] .auth-v105-login .auth-options{
  color:#f7fbff;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),
    rgba(7,13,22,.66);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 54px rgba(0,0,0,.24);
}

html[data-theme="light"] .auth-v105-login .auth-stat small,
html[data-theme="light"] .auth-v105-login .auth-feature p,
html[data-theme="light"] .auth-v105-login .auth-mini-card span,
html[data-theme="light"] .auth-v105-login .auth-options span{
  color:rgba(229,237,248,.72);
}

/* ==================================================
   pre-Alpha V1.0.7 - Luxury mechanics background pack
   The new generated backgrounds are stronger, so surfaces become calmer,
   glassier and more premium while keeping forms readable.
   ================================================== */

:root{
  --wm-blue:#2563ff;
  --wm-blue-soft:#dbe8ff;
  --wm-amber:#d6a85c;
  --wm-amber-soft:#f3e3c5;
  --wm-green:#22c987;
  --wm-red:#ef4d5d;
  --wm-surface-light:rgba(255,252,244,.78);
  --wm-surface-dark:rgba(18,20,24,.72);
}

body.page-universal{--page-bg-image:url("page-backgrounds/v1/00_universal_light_dark/01_wrenchmate_universal_luxury_mechanics.png")}
body.page-dashboard{--page-bg-image:url("page-backgrounds/v1/01_dashboard_cockpit/01_dashboard_luxury_mechanics.png")}
body.page-garage{--page-bg-image:url("page-backgrounds/v1/02_garage/01_garage_obsidian_showroom.png")}
body.page-service{--page-bg-image:url("page-backgrounds/v1/03_service/01_service_workshop_mechanics.png")}
body.page-invoice{--page-bg-image:url("page-backgrounds/v1/04_rechnung_archive/01_rechnung_frosted_archive.png")}
body.page-database,
body.page-admin{--page-bg-image:url("page-backgrounds/v1/05_datenbank/01_datenbank_engineering_blueprint.png")}
body.page-costs{--page-bg-image:url("page-backgrounds/v1/06_kosten/01_kosten_automotive_analytics.png")}

.app-bg::before{
  opacity:.72;
  filter:brightness(1.02) contrast(1.04) saturate(.95);
}

.app-bg::after{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,248,235,.62),transparent 42%),
    linear-gradient(90deg,rgba(245,238,224,.72),rgba(245,238,224,.35));
}

html[data-theme="dark"] .app-bg::before{
  opacity:.58;
  filter:brightness(.48) contrast(1.18) saturate(1.05);
}

html[data-theme="dark"] .app-bg::after{
  background:
    radial-gradient(circle at 50% 10%,rgba(37,99,235,.12),transparent 38%),
    linear-gradient(90deg,rgba(5,8,14,.86),rgba(5,8,14,.64));
}

body.page-dashboard .app-bg::after{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,248,235,.58),transparent 40%),
    linear-gradient(90deg,rgba(247,240,226,.82),rgba(247,240,226,.52));
}

html[data-theme="dark"] body.page-dashboard .app-bg::after{
  background:
    radial-gradient(circle at 50% 10%,rgba(37,99,235,.12),transparent 38%),
    linear-gradient(90deg,rgba(5,7,11,.88),rgba(5,7,11,.62));
}

body:not(.auth-page) .mp-sidebar{
  background:rgba(246,239,225,.72);
  border-right:1px solid rgba(120,105,82,.16);
  backdrop-filter:blur(24px) saturate(1.08);
}

html[data-theme="dark"] body:not(.auth-page) .mp-sidebar{
  background:rgba(9,11,15,.74);
  border-right:1px solid rgba(255,255,255,.08);
}

.mp-nav a.is-active{
  background:linear-gradient(135deg,var(--wm-blue),#4f8cff);
  box-shadow:0 12px 28px rgba(37,99,255,.28);
}

html[data-theme="dark"] .mp-nav a.is-active{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 14px 34px rgba(37,99,255,.34);
}

html[data-theme="light"] body:not(.auth-page) .card,
html[data-theme="light"] body:not(.auth-page) .panel,
html[data-theme="light"] body:not(.auth-page) .workflow-card,
html[data-theme="light"] body:not(.auth-page) .workflow-assist-card,
html[data-theme="light"] body:not(.auth-page) .flow-form-card,
html[data-theme="light"] body:not(.auth-page) .flow-side-panel,
html[data-theme="light"] body:not(.auth-page) .workspace-shell,
html[data-theme="light"] body:not(.auth-page) .enhanced-card,
html[data-theme="light"] body:not(.auth-page) .enhanced-assist,
html[data-theme="light"] body:not(.auth-page) .garage-card,
html[data-theme="light"] body:not(.auth-page) .cockpit-card,
html[data-theme="light"] body:not(.auth-page) .admin-menu-panel,
html[data-theme="light"] body:not(.auth-page) .invoice-status-card,
html[data-theme="light"] body:not(.auth-page) .legal-modal-card,
html[data-theme="light"] body:not(.auth-page) .due-login-card,
html[data-theme="light"] body:not(.auth-page) .v11-hero,
html[data-theme="light"] body:not(.auth-page) .v11-card,
html[data-theme="light"] body:not(.auth-page) .v11-vehicle-slide{
  background:var(--wm-surface-light);
  border:1px solid rgba(120,105,82,.18);
  box-shadow:
    0 18px 60px rgba(36,28,18,.12),
    inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(1.05);
}

html[data-theme="dark"] body:not(.auth-page) .card,
html[data-theme="dark"] body:not(.auth-page) .panel,
html[data-theme="dark"] body:not(.auth-page) .workflow-card,
html[data-theme="dark"] body:not(.auth-page) .workflow-assist-card,
html[data-theme="dark"] body:not(.auth-page) .flow-form-card,
html[data-theme="dark"] body:not(.auth-page) .flow-side-panel,
html[data-theme="dark"] body:not(.auth-page) .workspace-shell,
html[data-theme="dark"] body:not(.auth-page) .enhanced-card,
html[data-theme="dark"] body:not(.auth-page) .enhanced-assist,
html[data-theme="dark"] body:not(.auth-page) .garage-card,
html[data-theme="dark"] body:not(.auth-page) .cockpit-card,
html[data-theme="dark"] body:not(.auth-page) .admin-menu-panel,
html[data-theme="dark"] body:not(.auth-page) .invoice-status-card,
html[data-theme="dark"] body:not(.auth-page) .legal-modal-card,
html[data-theme="dark"] body:not(.auth-page) .due-login-card,
html[data-theme="dark"] body:not(.auth-page) .v11-hero,
html[data-theme="dark"] body:not(.auth-page) .v11-card,
html[data-theme="dark"] body:not(.auth-page) .v11-vehicle-slide{
  background:var(--wm-surface-dark);
  border:1px solid rgba(255,198,110,.16);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(20px) saturate(1.06);
}

body.page-garage .v11-vehicle-slide.is-active,
body.page-garage .v11-vehicle-slide.is-active-vehicle,
body.page-garage .v11-vehicle-slide:not(.is-side):hover,
body.page-garage .garage-card.is-active-vehicle,
body.page-garage .garage-card:not(.is-side):hover{
  border:1px solid rgba(214,168,92,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 28px 80px rgba(0,0,0,.38),
    0 0 44px rgba(214,168,92,.18);
}

body.page-garage .v11-slide-badge,
body.page-garage .garage-badge{
  color:#fff6df;
  background:rgba(214,168,92,.18);
  border:1px solid rgba(214,168,92,.34);
  box-shadow:0 10px 30px rgba(214,168,92,.14);
}

body.page-garage .v11-slide-status,
body.page-garage .status-pill{
  border-color:rgba(34,201,135,.28);
  box-shadow:0 0 22px rgba(34,201,135,.12);
}

.mp-kicker,
.card-top,
.review-pill,
.flow-side-panel>span,
.settings-title .mp-kicker{
  color:var(--wm-blue);
}

body.page-garage .mp-kicker,
body.page-garage .v11-slide-kicker,
.premium-accent{
  color:var(--wm-amber);
}

.btn.primary,
.button.primary,
button.primary,
.auth-submit{
  background:linear-gradient(135deg,var(--wm-blue),#4f8cff);
  border-color:color-mix(in srgb,var(--wm-blue) 80%,white);
}