/* DraBornGarage Premium Garage UI v3 */
:root{
  --p-bg:#05070b;
  --p-bg-2:#090d14;
  --p-surface:rgba(16,22,31,.82);
  --p-surface-strong:#111823;
  --p-surface-soft:rgba(255,255,255,.045);
  --p-line:rgba(255,255,255,.105);
  --p-line-hot:rgba(255,94,0,.46);
  --p-text:#f7f9fc;
  --p-muted:#8e9aaa;
  --p-orange:#ff5b00;
  --p-orange-2:#ff2d00;
  --p-amber:#ffb800;
  --p-cyan:#00d4ff;
  --p-blue:#3678ff;
  --p-violet:#8b5cff;
  --p-green:#32e38b;
  --p-red:#ff4969;
  --p-radius-xl:34px;
  --p-radius-lg:25px;
  --p-radius-md:18px;
  --p-shadow:0 28px 90px rgba(0,0,0,.52);
  --p-ease:cubic-bezier(.18,.8,.2,1);
}

html{background:var(--p-bg)!important;scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--p-text)!important;
  background:
    radial-gradient(circle at 4% -4%,rgba(255,73,0,.25),transparent 28%),
    radial-gradient(circle at 96% 3%,rgba(0,180,255,.15),transparent 28%),
    radial-gradient(circle at 70% 75%,rgba(132,70,255,.08),transparent 34%),
    linear-gradient(150deg,#05070a 0%,#0a0e15 45%,#05070b 100%)!important;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:.33;
  background-image:
    linear-gradient(30deg,rgba(255,255,255,.018) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.018) 87.5%),
    linear-gradient(150deg,rgba(255,255,255,.018) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.018) 87.5%),
    linear-gradient(30deg,rgba(255,255,255,.018) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.018) 87.5%),
    linear-gradient(150deg,rgba(255,255,255,.018) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.018) 87.5%);
  background-size:44px 76px;background-position:0 0,0 0,22px 38px,22px 38px;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:repeating-linear-gradient(112deg,transparent 0 64px,rgba(255,255,255,.012) 64px 65px);
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}
::selection{background:rgba(255,92,0,.4);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#394452 #080b10}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:#080b10}
*::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(var(--p-orange),#54220f)}

.dkd-premium-ambient{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.dkd-premium-ambient i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.22;will-change:transform}
.dkd-premium-ambient i:nth-child(1){width:360px;height:360px;left:-140px;top:12%;background:var(--p-orange)}
.dkd-premium-ambient i:nth-child(2){width:330px;height:330px;right:-130px;top:32%;background:var(--p-cyan)}
.dkd-premium-ambient i:nth-child(3){width:300px;height:300px;left:46%;bottom:-180px;background:var(--p-violet)}

.dkd-shell,.dkd-main,.dkd-content{position:relative}
.dkd-main{background:transparent!important}
.dkd-content{padding:34px!important;max-width:1540px!important}
.dkd-content::before{
  content:"";position:absolute;inset:0 0 auto;height:350px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(255,80,0,.13),transparent 38%),
    linear-gradient(255deg,rgba(0,180,255,.07),transparent 42%),
    repeating-linear-gradient(115deg,transparent 0 34px,rgba(255,255,255,.014) 34px 35px);
  mask-image:linear-gradient(#000,transparent);
}
.dkd-topbar{
  height:88px!important;padding:0 30px!important;
  background:linear-gradient(180deg,rgba(10,14,20,.94),rgba(6,9,14,.83))!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.27)!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
}
.dkd-topbar::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--p-orange),var(--p-amber),var(--p-cyan),transparent);opacity:.7}
.dkd-top-title strong{font-size:20px!important;letter-spacing:-.45px}
.dkd-top-title span{font-size:12px!important;color:#7f8a98!important;margin-top:5px!important}
.dkd-top-actions{gap:11px!important}
.dkd-sidebar{
  background:
    radial-gradient(circle at 10% 2%,rgba(255,82,0,.16),transparent 24%),
    linear-gradient(180deg,rgba(15,20,28,.985),rgba(6,9,13,.995))!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:22px 0 70px rgba(0,0,0,.32)!important;
  padding:22px 15px!important;
}
.dkd-side-brand{position:relative;padding-bottom:27px!important}
.dkd-side-brand::after{content:"PREMIUM GARAGE OS";display:block;margin:12px 8px 0;color:#667281;font-size:8px;font-weight:950;letter-spacing:2.5px}
.dkd-workshop-switch{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;border-color:rgba(255,255,255,.09)!important;border-radius:19px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dkd-side-nav{gap:7px!important}
.dkd-nav-item{
  position:relative;overflow:hidden;min-height:50px;border-radius:16px!important;
  transition:transform .22s var(--p-ease),color .22s,background .22s,border-color .22s!important;
}
.dkd-nav-item::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 6px 6px 0;background:linear-gradient(var(--p-amber),var(--p-orange));transform:scaleY(0);transition:.22s var(--p-ease);box-shadow:0 0 18px rgba(255,91,0,.7)}
.dkd-nav-item:hover{transform:translateX(4px);color:#fff!important;background:rgba(255,255,255,.045)!important}
.dkd-nav-item.active{color:#fff!important;border-color:rgba(255,91,0,.28)!important;background:linear-gradient(90deg,rgba(255,91,0,.2),rgba(255,91,0,.035))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px rgba(0,0,0,.15)}
.dkd-nav-item.active::before{transform:scaleY(1)}
.dkd-nav-item .ico{border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.055)!important}
.dkd-side-user{border-top-color:rgba(255,255,255,.08)!important}
.dkd-avatar{border-radius:16px!important;background:linear-gradient(145deg,var(--p-orange),var(--p-orange-2))!important;box-shadow:0 12px 32px rgba(255,68,0,.3),inset 0 1px 0 rgba(255,255,255,.25)}

.dkd-page-head{position:relative;margin-bottom:28px!important;align-items:center!important}
.dkd-page-head::before{content:"LIVE GARAGE";position:absolute;top:-21px;left:0;font-size:9px;letter-spacing:2.6px;font-weight:950;color:var(--p-orange)}
.dkd-page-head h1{font-size:clamp(34px,4vw,52px)!important;letter-spacing:-2.2px!important;line-height:1!important;text-shadow:0 10px 38px rgba(0,0,0,.3)}
.dkd-page-head p{color:#8b96a4!important;font-size:15px!important}
.dkd-page-actions{gap:11px!important}
.dkd-panel-switch{padding:6px!important;border-radius:18px!important;border-color:rgba(255,255,255,.095)!important;background:rgba(5,8,12,.78)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 35px rgba(0,0,0,.16)}
.dkd-panel-switch button{min-height:44px;border-radius:13px!important;padding:10px 18px!important;transition:.22s var(--p-ease)!important}
.dkd-panel-switch button.active{background:linear-gradient(135deg,#202a36,#151c25)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.24)!important}

.dkd-btn{
  position:relative;isolation:isolate;overflow:hidden;min-height:48px;border-radius:16px!important;
  padding:13px 20px!important;letter-spacing:-.15px;
  background:linear-gradient(135deg,#ff7800 0%,#ff4a00 45%,#ef2400 100%)!important;
  border:1px solid rgba(255,187,113,.25)!important;
  box-shadow:0 14px 36px rgba(255,65,0,.24),inset 0 1px 0 rgba(255,255,255,.28)!important;
  transition:transform .2s var(--p-ease),box-shadow .2s,border-color .2s,filter .2s!important;
}
.dkd-btn::before{content:"";position:absolute;z-index:-1;top:-70%;bottom:-70%;left:-45%;width:32%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transition:left .55s var(--p-ease)}
.dkd-btn:hover{transform:translateY(-3px) scale(1.015)!important;filter:saturate(1.08);box-shadow:0 20px 48px rgba(255,65,0,.34),inset 0 1px 0 rgba(255,255,255,.32)!important}
.dkd-btn:hover::before{left:125%}
.dkd-btn:active{transform:translateY(0) scale(.985)!important}
.dkd-btn.ghost{color:#dbe1e8!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;border-color:rgba(255,255,255,.115)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.18)!important}
.dkd-btn.ghost:hover{border-color:rgba(255,104,0,.32)!important;box-shadow:0 16px 38px rgba(0,0,0,.28),0 0 0 4px rgba(255,81,0,.055)!important}
.dkd-btn.cyan{background:linear-gradient(135deg,#00d9ff,#168dff 58%,#5757ff)!important;border-color:rgba(115,226,255,.3)!important;box-shadow:0 14px 38px rgba(0,153,255,.24)!important}
.dkd-btn.green{background:linear-gradient(135deg,#32e38b,#11b86c)!important;border-color:rgba(146,255,202,.3)!important;box-shadow:0 14px 38px rgba(17,190,111,.22)!important}
.dkd-btn.red{background:linear-gradient(135deg,#ff5b7a,#e92950)!important;border-color:rgba(255,160,178,.28)!important;box-shadow:0 14px 38px rgba(239,42,78,.22)!important}
.dkd-btn.icon,.dkd-mobile-menu{border-radius:16px!important}
.dkd-ripple{position:absolute;z-index:5;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.28);transform:translate(-50%,-50%) scale(0);animation:pRipple .62s ease-out forwards}

.dkd-grid{gap:17px!important}
.dkd-card,.dkd-panel,.dkd-stat-card,.dkd-quick-card,.dkd-list-card,.dkd-detail-item,.dkd-service-card,.dkd-mechanic-card{
  --card-accent:var(--p-orange);position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--p-line)!important;border-radius:var(--p-radius-lg)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 45%,rgba(0,0,0,.035)),
    rgba(13,18,26,.88)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(18px) saturate(1.15);
  transition:transform .3s var(--p-ease),border-color .3s,box-shadow .3s!important;
}
.dkd-premium-card::before{content:"";position:absolute;z-index:-1;width:190px;height:190px;right:-100px;top:-110px;border-radius:50%;background:var(--card-accent);opacity:.13;filter:blur(24px);transition:.35s var(--p-ease)}
.dkd-premium-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--card-accent),transparent);opacity:.65}
.dkd-premium-card:hover{transform:translateY(-6px)!important;border-color:color-mix(in srgb,var(--card-accent) 38%,transparent)!important;box-shadow:0 28px 75px rgba(0,0,0,.38),0 0 42px color-mix(in srgb,var(--card-accent) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important}
.dkd-premium-card:hover::before{transform:scale(1.3);opacity:.18}
.dkd-card{padding:24px!important}
.dkd-stat-card{min-height:190px!important;padding:25px!important}
.dkd-stat-card label,.dkd-card label{color:#8c98a7!important;text-transform:uppercase;letter-spacing:1.35px;font-size:10px!important;font-weight:900!important}
.dkd-stat-card strong{font-size:clamp(38px,5vw,56px)!important;letter-spacing:-2.4px}
.dkd-stat-card .ico,.dkd-quick-card .ico{border:1px solid color-mix(in srgb,var(--card-accent) 28%,transparent)!important;background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 19%,transparent),rgba(255,255,255,.025))!important;box-shadow:0 14px 38px color-mix(in srgb,var(--card-accent) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.08)!important}
.dkd-list-card{padding:18px!important}

.dkd-hero-card{
  position:relative;isolation:isolate;overflow:hidden;min-height:285px!important;padding:34px!important;
  border:1px solid rgba(255,204,145,.35)!important;border-radius:38px!important;
  background:
    radial-gradient(circle at 83% 118%,rgba(75,8,0,.52) 0 27%,transparent 28%),
    radial-gradient(circle at 84% 119%,transparent 0 42%,rgba(255,255,255,.11) 43% 43.6%,transparent 44%),
    linear-gradient(120deg,#ff8500 0%,#ff5a00 38%,#f42a00 75%,#c91400 100%)!important;
  box-shadow:0 32px 85px rgba(255,54,0,.32),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
.dkd-hero-card::before{content:"";position:absolute;z-index:-1;top:-45%;bottom:-45%;left:-48%;width:30%;transform:skewX(-19deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);animation:pHeroSweep 5.5s var(--p-ease) infinite}
.dkd-hero-card::after{content:"";position:absolute;right:-80px;bottom:-92px;width:300px;height:300px;border-radius:50%;border:42px solid rgba(74,7,0,.18);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 0 76px rgba(255,255,255,.035),0 0 0 120px rgba(255,255,255,.018)}
.dkd-hero-card label,.dkd-hero-card span{position:relative;z-index:2}
.dkd-hero-card strong{position:relative;z-index:2;font-size:clamp(54px,9vw,82px)!important;letter-spacing:-4px!important;text-shadow:0 12px 32px rgba(87,8,0,.3)}

.dkd-form{gap:20px!important}
.dkd-field{gap:9px!important}
.dkd-field label{font-size:10px!important;letter-spacing:1.45px!important;text-transform:uppercase;color:#9ca7b4!important;font-weight:950!important}
.dkd-input,.dkd-select,.dkd-textarea{
  width:100%;min-height:58px;border:1px solid rgba(255,255,255,.105)!important;border-radius:18px!important;
  color:#f8fafc!important;background:linear-gradient(145deg,rgba(5,8,12,.98),rgba(12,17,24,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -18px 36px rgba(0,0,0,.08)!important;
  transition:transform .2s,border-color .2s,box-shadow .2s!important;
}
.dkd-input:hover,.dkd-select:hover,.dkd-textarea:hover{border-color:rgba(255,255,255,.17)!important}
.dkd-input:focus,.dkd-select:focus,.dkd-textarea:focus{transform:translateY(-2px);border-color:rgba(255,91,0,.88)!important;box-shadow:0 0 0 4px rgba(255,77,0,.1),0 18px 45px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.04)!important}
.dkd-textarea{min-height:135px!important;line-height:1.6!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--p-orange);width:21px;height:21px}
.dkd-help{color:#768292!important}

.dkd-modal-backdrop{background:rgba(1,3,6,.8)!important;backdrop-filter:blur(16px) saturate(.8)!important;animation:pBackdrop .25s ease both}
.dkd-modal,.dkd-modal.wide{
  position:relative;overflow-x:hidden!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:32px!important;
  background:
    radial-gradient(circle at 0 0,rgba(255,83,0,.12),transparent 28%),
    linear-gradient(155deg,rgba(20,27,37,.995),rgba(6,10,15,.998))!important;
  box-shadow:0 40px 130px rgba(0,0,0,.78),0 0 0 1px rgba(255,83,0,.04)!important;
  animation:pModal .42s var(--p-ease) both;
}
.dkd-modal::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:5;background:linear-gradient(90deg,var(--p-orange-2),var(--p-amber),var(--p-cyan),var(--p-orange-2));background-size:220% 100%;animation:pGradient 5s linear infinite;box-shadow:0 0 25px rgba(255,72,0,.5)}
.dkd-modal-head{min-height:82px;padding:22px 28px!important;border-bottom-color:rgba(255,255,255,.08)!important;background:rgba(11,16,22,.91)!important;backdrop-filter:blur(20px)!important}
.dkd-modal-head h2{font-size:26px!important;letter-spacing:-1px!important}
.dkd-modal-close{width:48px!important;height:48px!important;border-radius:16px!important;border-color:rgba(255,255,255,.11)!important;background:linear-gradient(145deg,#202a35,#111820)!important;transition:.24s var(--p-ease)!important}
.dkd-modal-close:hover{transform:rotate(90deg) scale(1.05);color:var(--p-orange);border-color:rgba(255,91,0,.35)!important}
.dkd-modal-body{padding:30px!important}
.dkd-modal-foot{padding:18px 28px!important;border-top-color:rgba(255,255,255,.08)!important;background:rgba(11,16,22,.94)!important;box-shadow:0 -18px 45px rgba(0,0,0,.24)}

.dkd-table-wrap{border-radius:25px!important;border-color:rgba(255,255,255,.09)!important;background:rgba(10,14,20,.72)!important;box-shadow:0 22px 60px rgba(0,0,0,.24)!important;overflow:hidden}
.dkd-table th{background:rgba(255,255,255,.035)!important;color:#8995a4!important;font-size:10px!important;text-transform:uppercase;letter-spacing:1.35px}
.dkd-table tbody tr{transition:background .2s,transform .2s}
.dkd-table tbody tr:hover{background:rgba(255,91,0,.05)!important}
.dkd-chip{border-color:rgba(255,255,255,.1)!important;background:rgba(255,255,255,.05)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dkd-toast{border-radius:20px!important;background:rgba(15,21,29,.97)!important;backdrop-filter:blur(18px)!important;box-shadow:0 26px 75px rgba(0,0,0,.5)!important}