:root{
  --bg:#f5f6f8;--panel:#fff;--ink:#101828;--muted:#667085;--line:#e4e7ec;
  --soft:#f8fafc;--nav:#0f172a;--nav2:#1e293b;--accent:#175cd3;--accent-soft:#eff4ff;
  --green:#067647;--warn:#b54708;--red:#b42318;--shadow:0 8px 28px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Google Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
svg{width:20px;height:20px;display:block}
.app-shell{min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;background:var(--nav);color:#fff;padding:18px 12px;display:flex;flex-direction:column}
.brand{height:54px;display:flex;align-items:center;gap:11px;padding:0 8px 15px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#fff;color:var(--nav);font-weight:800;font-size:13px;letter-spacing:-.03em}
.brand strong{display:block;font-size:15px;letter-spacing:-.01em}
.brand span{display:block;color:#98a2b3;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.nav-list{display:flex;flex-direction:column;gap:3px;padding-top:16px}
.nav-item{height:42px;border:0;border-radius:8px;background:transparent;color:#cbd5e1;display:flex;align-items:center;gap:11px;padding:0 11px;text-align:left}
.nav-item svg{width:18px;height:18px}
.nav-item b{font-size:13px;font-weight:550}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--nav2);color:#fff}
.sidebar-foot{margin-top:auto;padding:10px 2px}
.branch-card{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);border-radius:9px;padding:10px;display:flex;gap:9px;align-items:center}
.branch-card svg{color:#98a2b3;width:18px}
.branch-card small{display:block;color:#98a2b3;font-size:10px}.branch-card strong{font-size:12px}
.main{min-width:0}
.topbar{height:64px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.top-context{display:flex;flex-direction:column;gap:1px}.top-context strong{font-size:13px}
.eyebrow{margin:0;color:#98a2b3;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.top-actions{display:flex;align-items:center;gap:9px}
.online{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;margin-right:4px}.online i{width:7px;height:7px;background:#12b76a;border-radius:50%}
.icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#475467}
.avatar{width:36px;height:36px;border:0;border-radius:9px;background:var(--nav);color:#fff;font-size:11px;font-weight:700}
.mobile-brand{display:none}
.content{max-width:1480px;margin:0 auto;padding:28px 28px 48px}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.hero-row h1{font-size:28px;line-height:1.15;letter-spacing:-.035em;margin:6px 0 8px}
.muted{color:var(--muted);font-size:13px;margin:0;max-width:720px;line-height:1.55}
.hero-actions{display:flex;gap:8px;flex:none}
.btn{height:40px;border-radius:8px;padding:0 14px;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--nav);color:#fff}
.btn.primary:hover{background:#1d2939}
.btn.secondary{background:#fff;border-color:var(--line);color:#344054}
.quick-section{margin-bottom:18px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}
.section-head h2,.panel-head h2{margin:0;font-size:14px;letter-spacing:-.015em}.section-head p,.panel-head p{margin:3px 0 0;color:var(--muted);font-size:11px}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.quick-card{min-height:74px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;grid-template-columns:38px 1fr 18px;gap:10px;align-items:center;text-align:left;color:var(--ink)}
.quick-card:hover{border-color:#b2ccff;box-shadow:0 3px 10px rgba(16,24,40,.05)}
.quick-icon{width:38px;height:38px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:#344054}
.quick-icon svg{width:19px;height:19px}.quick-card b{display:block;font-size:12px;margin-bottom:3px}.quick-card small{display:block;color:var(--muted);font-size:10px}.quick-card .chev{color:#98a2b3}.quick-card .chev svg{width:16px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:18px}
.metric-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 15px}
.metric-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}
.metric-icon{width:30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;color:#475467}.metric-icon svg{width:16px}
.metric-card>strong{display:block;font-size:23px;letter-spacing:-.035em;margin:9px 0 3px}.metric-card strong em{font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.metric-card>small{color:var(--muted);font-size:10px}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:10px}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.panel-head{min-height:62px;padding:13px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-tools{display:flex;align-items:center;gap:7px}
.searchbox{height:34px;width:250px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:7px;padding:0 9px;background:#fff}
.searchbox svg{width:15px;color:#98a2b3}.searchbox input{min-width:0;width:100%;border:0;outline:0;font-size:11px;color:var(--ink)}
.text-btn{height:34px;border:0;background:transparent;color:var(--accent);font-size:11px;font-weight:650;padding:0 8px}
.vehicle-list{min-height:260px}
.vehicle-row{display:grid;grid-template-columns:minmax(260px,1.35fr) .7fr .8fr .8fr 30px;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid #f0f1f3;cursor:pointer}
.vehicle-row:last-child{border-bottom:0}.vehicle-row:hover{background:#fbfcfd}
.vehicle-main{display:flex;align-items:center;gap:10px;min-width:0}
.vehicle-thumb{width:44px;height:44px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:#667085;flex:none}.vehicle-thumb svg{width:22px}
.vehicle-main b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle-main small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.vehicle-cell small{display:block;color:#98a2b3;font-size:9px;margin-bottom:3px}.vehicle-cell b{font-size:11px}
.vehicle-cell .danger{color:var(--red)}.vehicle-cell .warn{color:var(--warn)}
.vehicle-row>.chev{color:#98a2b3}.vehicle-row>.chev svg{width:16px}
.loading-card,.empty-card{padding:34px 18px;color:var(--muted);font-size:12px;text-align:center}
.attention-list{padding:3px 0}
.attention-item{display:grid;grid-template-columns:10px 1fr 16px;gap:9px;align-items:center;padding:13px 14px;border-bottom:1px solid #f0f1f3}
.attention-item:last-child{border-bottom:0}.attention-item b{display:block;font-size:11px}.attention-item small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.attention-item svg{width:15px;color:#98a2b3}
.status-dot{width:8px;height:8px;border-radius:50%;background:#84caff}.status-dot.warn{background:#fdb022}
.scrim{position:fixed;inset:0;background:rgba(16,24,40,.34);opacity:0;pointer-events:none;transition:.18s;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;right:0;top:0;bottom:0;width:min(480px,100vw);background:#fff;z-index:90;transform:translateX(100%);transition:transform .22s ease;box-shadow:-12px 0 34px rgba(16,24,40,.12);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{height:74px;border-bottom:1px solid var(--line);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex:none}
.drawer-head h2{font-size:17px;margin:4px 0 0;letter-spacing:-.02em}
.drawer-body{padding:17px;overflow:auto;flex:1}
.drawer-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:#fff;flex:none}
.drawer-foot .btn{min-width:100px;justify-content:center}
.form-stack{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:11px;font-weight:650;color:#344054}.field label span{color:var(--red)}
.field input,.field select,.field textarea{width:100%;border:1px solid #d0d5dd;border-radius:8px;background:#fff;padding:9px 10px;outline:0;color:var(--ink);font-size:12px}
.field input,.field select{height:40px}.field textarea{resize:vertical;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#84adff;box-shadow:0 0 0 3px #eff4ff}
.field-help{color:#98a2b3;font-size:9px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.money-input{position:relative}.money-input>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#667085;font-size:12px}.money-input input{padding-left:25px}
.action-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.action-choice{min-height:54px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px;display:flex;align-items:center;gap:6px;text-align:left;font-size:10px;color:#344054}
.action-choice svg{width:15px;height:15px;flex:none}.action-choice.active{border-color:#84adff;background:var(--accent-soft);color:#1849a9}
.upload-box{border:1px dashed #b9c0ca!important;border-radius:9px;padding:12px!important;display:flex;align-items:center;gap:10px;cursor:pointer;background:#fbfcfd}
.upload-box:hover{border-color:#84adff!important;background:#f8faff}.upload-box>svg{width:20px;color:#667085}.upload-box b{display:block;font-size:11px}.upload-box small{display:block;color:#98a2b3;font-size:9px;margin-top:2px}.upload-box input{display:none}
.detail-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.summary-card{background:var(--soft);border:1px solid #eef0f3;border-radius:8px;padding:10px}.summary-card small{display:block;color:var(--muted);font-size:9px}.summary-card b{display:block;margin-top:4px;font-size:12px}
.detail-vehicle{display:flex;gap:11px;align-items:center;margin-bottom:14px}.detail-vehicle .vehicle-thumb{width:48px;height:48px}.detail-vehicle h3{margin:0;font-size:15px}.detail-vehicle p{margin:4px 0 0;color:var(--muted);font-size:10px}
.inline-action{width:100%;height:40px;border:1px solid #b2ccff;background:var(--accent-soft);color:#1849a9;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:650;margin:5px 0 16px}
.timeline-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px}.timeline-head h3{font-size:12px;margin:0}.timeline-head small{color:var(--muted);font-size:9px}
.timeline{display:flex;flex-direction:column}
.timeline-item{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:start;padding:10px 0;border-bottom:1px solid #f0f1f3}.timeline-item:last-child{border-bottom:0}
.timeline-icon{width:26px;height:26px;background:var(--soft);border-radius:7px;display:grid;place-items:center;color:#667085}.timeline-icon svg{width:13px}
.timeline-item b{display:block;font-size:10px}.timeline-item p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.4}.timeline-item .amount{font-size:10px;font-weight:700;white-space:nowrap}.receipt-link{color:var(--accent);text-decoration:none;font-size:9px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#101828;color:#fff;padding:10px 13px;border-radius:8px;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:120;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-nav{display:none}
@media(max-width:1100px){
  .workspace-grid{grid-template-columns:1fr}.attention-panel{display:none}
  .quick-grid{grid-template-columns:1fr 1fr}.metric-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{padding-bottom:68px}
  .app-shell{display:block}.sidebar{display:none}
  .topbar{height:56px;padding:0 14px}.top-context{display:none}.mobile-brand{display:flex;align-items:center;gap:8px}.mobile-brand .brand-mark{width:30px;height:30px;border:1px solid var(--line)}.mobile-brand strong{font-size:13px}
  .top-actions .online,.top-actions .icon-btn{display:none}.avatar{width:32px;height:32px}
  .content{padding:18px 12px 26px}
  .hero-row{align-items:flex-start;margin-bottom:18px}.hero-row h1{font-size:23px}.hero-row .muted{font-size:12px}
  .hero-actions{display:none}
  .quick-section{margin-bottom:12px}.section-head{margin-bottom:8px}
  .quick-grid{grid-template-columns:1fr 1fr;gap:7px}.quick-card{min-height:68px;grid-template-columns:34px 1fr;padding:9px}.quick-icon{width:34px;height:34px}.quick-card .chev{display:none}.quick-card small{font-size:9px}
  .metric-grid{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.metric-card{padding:12px}.metric-card>strong{font-size:20px}.metric-icon{width:27px;height:27px}
  .panel{border-radius:9px}.panel-head{padding:11px 12px}.panel-tools{display:none}
  .vehicle-row{grid-template-columns:1fr auto;gap:8px;padding:11px 12px}.vehicle-cell{display:none}.vehicle-row>.chev{display:block}.vehicle-thumb{width:40px;height:40px}
  .mobile-nav{position:fixed;z-index:60;bottom:0;left:0;right:0;height:62px;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;align-items:center}
  .mobile-nav button{height:58px;border:0;background:transparent;color:#667085;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.mobile-nav button svg{width:18px}.mobile-nav small{font-size:9px}.mobile-nav .active{color:#101828}
  .mobile-nav .mobile-add{width:44px;height:44px;border-radius:12px;background:var(--nav);color:#fff;justify-self:center;align-self:center}.mobile-nav .mobile-add svg{width:20px}
  .drawer{top:auto;height:min(92vh,760px);width:100%;border-radius:14px 14px 0 0;transform:translateY(100%)}.drawer.open{transform:translateY(0)}
  .drawer-head{height:67px}.drawer-body{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}.drawer-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .two-col{grid-template-columns:1fr}.action-selector{grid-template-columns:1fr 1fr 1fr}
  .detail-summary{grid-template-columns:1fr 1fr 1fr}
  .toast{bottom:78px}
}
@media(max-width:390px){
  .quick-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-card>strong{font-size:18px}
  .action-selector{grid-template-columns:1fr 1fr}
}

/* BusinessOne Spatial UI v2 — typography + virtual 3D */
:root{
  --font-ui:"Google Sans Flex","Google Sans","Noto Sans Thai",Arial,sans-serif;
  --fs-2xs:.6875rem;
  --fs-xs:.75rem;
  --fs-sm:.8125rem;
  --fs-base:.875rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.5rem;
  --fs-2xl:2rem;
  --lh-tight:1.2;
  --lh-ui:1.45;
  --lh-copy:1.6;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(15,23,42,.05),0 8px 22px rgba(15,23,42,.05);
  --shadow-2:0 14px 38px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.06);
  --shadow-3:0 24px 70px rgba(2,6,23,.22);
}

html{font-size:16px}
body{
  font-family:var(--font-ui);
  font-size:var(--fs-base);
  line-height:var(--lh-ui);
  letter-spacing:-.006em;
  background:#eef1f5;
  min-height:100vh;
}
button,input,select,textarea{font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-ui)}
button{letter-spacing:-.006em}
.eyebrow{font-size:var(--fs-2xs);line-height:1.25;font-weight:700;letter-spacing:.095em}
.brand strong{font-size:var(--fs-md);line-height:1.2;font-weight:650}
.brand span{font-size:var(--fs-2xs);line-height:1.25}
.brand-mark{font-size:var(--fs-sm)}
.nav-item b{font-size:var(--fs-sm);font-weight:560}
.branch-card small,.vehicle-cell small,.summary-card small,.timeline-head small,.receipt-link,.field-help{font-size:var(--fs-2xs)}
.branch-card strong,.online,.section-head p,.panel-head p,.quick-card small,.metric-top,.metric-card>small,.vehicle-main small,.vehicle-cell b,.attention-item b,.attention-item small,.searchbox input,.text-btn,.field label,.upload-box b,.upload-box small,.inline-action,.timeline-head h3,.timeline-item b,.timeline-item p,.timeline-item .amount{font-size:var(--fs-xs)}
.top-context strong,.quick-card b{font-size:var(--fs-sm)}
.btn,.field input,.field select,.field textarea,.action-choice{font-size:var(--fs-sm)}
.section-head h2,.panel-head h2{font-size:var(--fs-md);font-weight:650}
.drawer-head h2,.detail-vehicle h3{font-size:var(--fs-lg)}
.muted{font-size:var(--fs-base);line-height:var(--lh-copy)}
.metric-card>strong{font-size:1.75rem;line-height:1.08}
.metric-card strong em{font-size:var(--fs-xs)}
.vehicle-main b{font-size:var(--fs-sm)}
.detail-vehicle p{font-size:var(--fs-xs)}
.summary-card b{font-size:var(--fs-sm)}
.toast{font-size:var(--fs-sm)}
.mobile-nav small{font-size:var(--fs-2xs)}

.app-shell{
  grid-template-columns:248px minmax(0,1fr);
  perspective:1800px;
  background:
    linear-gradient(rgba(148,163,184,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px),
    #eef1f5;
  background-size:44px 44px;
  background-position:248px 0;
}
.sidebar{
  background:#101826;
  box-shadow:12px 0 34px rgba(15,23,42,.08);
  transform:translateZ(24px);
  z-index:30;
}
.brand-mark{
  border-radius:11px;
  box-shadow:0 9px 24px rgba(0,0,0,.2);
}
.nav-item{height:44px;border-radius:10px}
.nav-item.active{
  background:#202c40;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 20px rgba(0,0,0,.14);
}
.branch-card{border-radius:12px;background:rgba(255,255,255,.055)}
.topbar{
  height:68px;
  background:rgba(248,250,252,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.82);
}
.content{max-width:1540px;padding:30px 30px 54px}

.hero-stage{
  --rx:0deg;
  --ry:0deg;
  position:relative;
  min-height:330px;
  margin-bottom:22px;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(440px,1.12fr);
  align-items:center;
  background:
    radial-gradient(circle at 78% 20%,rgba(96,165,250,.22),transparent 32%),
    radial-gradient(circle at 92% 80%,rgba(56,189,248,.10),transparent 30%),
    linear-gradient(135deg,#0b1220 0%,#111c2f 56%,#17233a 100%);
  color:#fff;
  box-shadow:var(--shadow-3);
  transform-style:preserve-3d;
  isolation:isolate;
}
.hero-stage::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right,#000,transparent 72%);
  pointer-events:none;
}
.hero-stage::after{
  content:"";
  position:absolute;left:52%;right:-15%;bottom:-42%;height:70%;
  border:1px solid rgba(148,163,184,.16);
  border-radius:50%;
  transform:rotateX(70deg);
  box-shadow:0 0 0 42px rgba(148,163,184,.025),0 0 0 86px rgba(148,163,184,.018);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:4;
  padding:42px 0 42px 42px;
  max-width:650px;
  transform:translateZ(44px);
}
.hero-copy .eyebrow{color:#9fb8dd}
.hero-copy h1{
  margin:8px 0 14px;
  font-size:clamp(2rem,3.4vw,3.15rem);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:650;
}
.hero-copy h1 span{color:#c8dcfa;font-weight:520}
.hero-copy .muted{color:#aebbd0;max-width:600px}
.hero-copy .hero-actions{display:flex;margin-top:24px}
.hero-stage .btn.secondary{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px)}
.hero-stage .btn.secondary:hover{background:rgba(255,255,255,.14)}
.hero-stage .btn.primary{background:#fff;color:#111827;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.hero-stage .btn.primary:hover{background:#eff4ff}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;color:#8fa2bf;font-size:var(--fs-2xs)}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-meta i{width:6px;height:6px;border-radius:50%;background:#64d6a2;box-shadow:0 0 0 4px rgba(100,214,162,.08)}

.virtual-scene{
  position:relative;
  align-self:stretch;
  min-height:330px;
  transform-style:preserve-3d;
  perspective:1000px;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(26px);
  transition:transform .16s ease-out;
}
.scene-grid{
  position:absolute;
  left:8%;right:-8%;bottom:-8%;height:75%;
  background:
    linear-gradient(rgba(125,164,218,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(125,164,218,.14) 1px,transparent 1px);
  background-size:34px 34px;
  transform:perspective(440px) rotateX(65deg) translateY(42px);
  transform-origin:center bottom;
  mask-image:radial-gradient(ellipse at center,#000 16%,transparent 72%);
}
.scene-orbit{position:absolute;border:1px solid rgba(131,174,235,.22);border-radius:50%;transform-style:preserve-3d}
.orbit-a{width:330px;height:160px;right:8%;top:24%;transform:rotateX(67deg) rotateZ(-8deg)}
.orbit-b{width:250px;height:250px;right:16%;top:10%;transform:rotateY(67deg) rotateZ(18deg)}

.scene-platform{
  position:absolute;
  width:390px;height:205px;
  right:5%;top:20%;
  transform-style:preserve-3d;
  transform:rotateX(64deg) rotateZ(-8deg) translateZ(18px);
}
.platform-ring{
  position:absolute;inset:28px 12px 0;
  border-radius:50%;
  background:rgba(13,29,51,.78);
  border:1px solid rgba(149,190,244,.28);
  box-shadow:inset 0 0 42px rgba(58,130,246,.12),0 34px 50px rgba(0,0,0,.24);
}
.car-model{
  position:absolute;
  width:290px;height:128px;
  left:46px;top:12px;
  transform-style:preserve-3d;
  transform:rotateX(-64deg) rotateZ(8deg) translateZ(44px);
}
.car-shadow{position:absolute;left:18px;right:18px;bottom:5px;height:30px;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(12px)}
.car-body-3d{
  position:absolute;left:18px;right:18px;bottom:25px;height:58px;
  border-radius:55px 78px 20px 24px;
  background:linear-gradient(165deg,#d9e8ff 0%,#7ea6dd 36%,#34557f 72%,#19304e 100%);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.55),inset 0 -14px 26px rgba(10,26,46,.45),0 18px 28px rgba(0,0,0,.3);
}
.car-roof{
  position:absolute;width:142px;height:56px;left:72px;bottom:70px;
  border-radius:70px 80px 12px 12px;
  transform:skewX(-10deg);
  background:linear-gradient(165deg,#c9dcfa,#5f83b4 58%,#2b476c);
  border:1px solid rgba(255,255,255,.28);
}
.car-glass{
  position:absolute;width:104px;height:38px;left:91px;bottom:81px;
  border-radius:48px 54px 7px 7px;
  transform:skewX(-10deg);
  background:linear-gradient(145deg,rgba(184,221,255,.72),rgba(22,50,79,.88));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65);
}
.wheel{
  position:absolute;width:47px;height:47px;border-radius:50%;bottom:8px;
  background:radial-gradient(circle,#8da0b8 0 15%,#28394d 16% 39%,#090e16 40% 72%,#17202d 73%);
  border:2px solid #1a2738;
  box-shadow:0 8px 12px rgba(0,0,0,.3);
}
.wheel::after{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid rgba(214,230,250,.42)}
.wheel-left{left:43px}.wheel-right{right:43px}
.headlamp{position:absolute;bottom:55px;width:25px;height:8px;border-radius:10px;background:#dceeff;box-shadow:0 0 18px rgba(166,214,255,.9)}
.headlamp-left{right:16px}.headlamp-right{right:48px}

.scene-chip{
  position:absolute;
  min-width:150px;
  padding:11px 12px;
  border:1px solid rgba(178,204,255,.18);
  border-radius:13px;
  background:rgba(14,27,46,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  transform-style:preserve-3d;
}
.scene-chip small{display:block;color:#7f95b5;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.07em}
.scene-chip b{display:block;margin-top:2px;font-size:var(--fs-md);font-weight:620;color:#edf5ff}
.scene-chip span{display:block;margin-top:2px;color:#8fa2bf;font-size:var(--fs-2xs)}
.chip-cost{right:4%;top:10%;transform:translateZ(82px) rotateY(-5deg)}
.chip-aging{left:2%;bottom:13%;transform:translateZ(68px) rotateY(7deg)}
.chip-workshop{right:15%;bottom:7%;transform:translateZ(92px) rotateY(-7deg)}

.quick-card,.metric-card,.panel,.branch-card{
  border-color:#dce2ea;
  box-shadow:var(--shadow-1);
}
.quick-card,.metric-card{
  transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;
}
.quick-card:hover{
  transform:translateY(-4px) rotateX(1.2deg);
  box-shadow:var(--shadow-2);
  border-color:#a9c6ee;
}
.metric-card:hover{
  transform:translateY(-3px) translateZ(10px);
  box-shadow:var(--shadow-2);
}
.quick-icon,.metric-icon{box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(15,23,42,.05)}
.panel{border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.panel-head{min-height:68px}
.searchbox,.icon-btn,.btn,.field input,.field select,.field textarea,.action-choice{border-radius:10px}
.btn{height:42px;padding:0 15px}
.field input,.field select{height:44px}
.drawer{box-shadow:-26px 0 70px rgba(15,23,42,.18)}
.drawer-head{height:78px}
.action-choice{min-height:60px}
.vehicle-row{min-height:72px}
.vehicle-thumb{border-radius:12px}

@media(max-width:1100px){
  .hero-stage{grid-template-columns:1fr .82fr;min-height:310px}
  .hero-copy{padding:34px 0 34px 34px}
  .scene-platform{right:-8%;transform:scale(.88) rotateX(64deg) rotateZ(-8deg) translateZ(18px)}
  .scene-chip{transform:scale(.9)}
}
@media(max-width:820px){
  body{font-size:var(--fs-base)}
  .app-shell{background-position:0 0}
  .content{padding:18px 12px 28px}
  .hero-stage{display:block;min-height:300px;border-radius:18px}
  .hero-copy{padding:26px 22px 0;max-width:none}
  .hero-copy h1{font-size:clamp(1.8rem,8vw,2.5rem)}
  .hero-copy .muted{font-size:var(--fs-sm)}
  .hero-copy .hero-actions{display:none}
  .hero-meta{gap:10px;margin-top:16px}
  .virtual-scene{position:absolute;inset:42% -18% -20% 15%;opacity:.72;pointer-events:none}
  .scene-chip{display:none}
  .scene-platform{right:8%;top:12%;transform:scale(.68) rotateX(64deg) rotateZ(-8deg) translateZ(18px)}
  .quick-grid{gap:9px}
  .quick-card{min-height:78px}
  .metric-card{min-height:112px}
  .metric-card>strong{font-size:1.55rem}
}
@media(max-width:480px){
  .hero-stage{min-height:310px}
  .hero-copy{padding:24px 18px 0}
  .hero-copy h1{font-size:1.85rem}
  .hero-meta span:nth-child(3){display:none}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick-card{grid-template-columns:36px 1fr;min-height:78px}
  .quick-card small{font-size:var(--fs-2xs)}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-card{padding:13px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .virtual-scene{transform:none!important}
  .quick-card:hover,.metric-card:hover{transform:none}
}