/* VeltrixMTA UCP — complete visual system */
:root{
  --bg:#06080d;
  --surface:#0d1119;
  --surface-2:#111722;
  --surface-3:#151d2a;
  --line:rgba(151,164,190,.13);
  --line-strong:rgba(151,164,190,.22);
  --text:#f5f7fb;
  --muted:#7f8a9e;
  --muted-2:#535f73;
  --purple:#8b78ff;
  --purple-2:#6553e4;
  --cyan:#49d6f5;
  --green:#3cdda0;
  --orange:#ffb664;
  --danger:#ff687c;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 24px 70px rgba(0,0,0,.24);
}
*{scrollbar-width:thin;scrollbar-color:#283145 #090c12}
html{background:var(--bg)}
body{background:
  radial-gradient(circle at 74% -10%,rgba(102,83,228,.14),transparent 29%),
  radial-gradient(circle at 105% 75%,rgba(42,150,182,.07),transparent 25%),
  var(--bg);font-feature-settings:"ss01","ss02";letter-spacing:-.01em}
body:before{opacity:.16;background-size:64px 64px}
button,a,input,select,textarea{transition:border-color .2s,background .2s,color .2s,box-shadow .2s,transform .2s}
.v-icon{display:block;width:1em;height:1em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar nav .v-icon{width:15px;height:15px}.stat-icon .v-icon{width:20px;height:20px;stroke-width:1.6}

/* Authentication */
.login-shell{grid-template-columns:minmax(0,1.25fr) minmax(430px,.75fr)}
.hero-panel{padding:48px clamp(48px,6vw,112px);border-right:1px solid var(--line);background:
  linear-gradient(115deg,rgba(6,8,13,.7),rgba(9,12,20,.94)),
  radial-gradient(circle at 57% 48%,rgba(111,86,244,.28),transparent 28%)}
.hero-panel:after{width:520px;height:520px;border-color:rgba(139,120,255,.1);box-shadow:0 0 0 100px rgba(139,120,255,.018),0 0 0 200px rgba(139,120,255,.01)}
.brand-logo{border-radius:13px}.brand{font-size:15px}.hero-copy{max-width:760px}
.hero-copy h1{font-size:clamp(54px,6vw,96px);line-height:.94;letter-spacing:-5.5px}
.hero-copy p{max-width:580px;color:#909bae;font-size:15px}
.server-chart{width:min(410px,100%);padding:18px 20px;border-color:var(--line-strong);border-radius:17px;background:rgba(12,17,26,.72)}
.server-showcase{position:relative;z-index:2;align-self:center;width:min(540px,100%);overflow:hidden;border:1px solid rgba(139,120,255,.16);border-radius:17px;background:rgba(12,17,26,.86);box-shadow:0 24px 70px rgba(0,0,0,.24)}
.showcase-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}.showcase-head img{width:36px;height:36px;border-radius:10px}.showcase-head>div{display:grid}.showcase-head h2{margin:0;color:#fff;font-size:13px;letter-spacing:-.3px}.showcase-head h2 span{color:#9385ff}.showcase-head strong{margin-top:3px;color:var(--green);font-size:7px;font-weight:700}.showcase-head strong.offline{color:var(--danger)}.showcase-status-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.showcase-head:has(strong.offline) .showcase-status-dot{background:var(--danger);box-shadow:0 0 10px var(--danger)}
.showcase-chart{position:relative;height:135px;margin:0 15px}.showcase-chart svg{position:absolute;inset:auto 0 0;width:100%;height:90px;overflow:visible}.showcase-player-count{position:absolute;z-index:2;inset:27px 0 auto;display:grid;justify-items:center;text-shadow:0 2px 10px #080b12}.showcase-player-count strong{font-size:28px;line-height:1}.showcase-player-count span{margin-top:5px;color:#d6dbe5;font-size:8px;font-weight:800;letter-spacing:1px}.showcase-player-count small{margin-top:3px;color:#657084;font-size:7px}
.showcase-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.showcase-links a{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 8px;border-right:1px solid var(--line);color:#7e899c}.showcase-links a:last-child{border-right:0}.showcase-links a:hover{background:rgba(139,120,255,.045);color:#fff}.showcase-links a>span{display:grid;place-items:center;color:#9185e4}.showcase-links .v-icon{width:12px;height:12px}.showcase-links b{font-size:8px}
.login-panel{padding:clamp(28px,5vw,68px);background:rgba(6,9,14,.72)}
.login-card{padding:40px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(18,24,35,.88),rgba(9,13,20,.82));box-shadow:0 35px 100px rgba(0,0,0,.32)}
.login-card h2{font-size:40px;letter-spacing:-2px}.login-card label{color:#aeb7c7}

/* App frame */
.sidebar{width:276px;padding:25px 17px 18px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(10,14,21,.99),rgba(6,9,14,.995));box-shadow:18px 0 60px rgba(0,0,0,.13)}
.nav-brand{margin:0 4px;padding:0 10px 25px;border-bottom:1px solid var(--line)}
.nav-brand:after{border-color:rgba(139,120,255,.25);background:rgba(139,120,255,.08);color:#9d91e8}
.sidebar nav{padding-top:7px}.sidebar nav small{margin:20px 12px 7px;color:#414c60;font-size:7px}
.sidebar nav a{min-height:44px;padding:10px 12px;border-radius:11px;color:#7e899d;font-size:11px;font-weight:700}
.sidebar nav a>span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.025);font-size:13px}
.sidebar nav a>b{background:#171e2a;border-color:#222b3b}
.sidebar nav a:hover{background:rgba(255,255,255,.035);border-color:var(--line);transform:translateX(2px)}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(139,120,255,.14),rgba(21,28,41,.8));border-color:rgba(139,120,255,.19);box-shadow:inset 2px 0 var(--purple)}
.sidebar nav a.active>span{background:rgba(139,120,255,.12);color:#aa9fff}
.sidebar nav .info-nav{width:100%;min-height:42px;gap:11px;padding:9px 11px}
.sidebar nav .info-nav>span{flex:0 0 24px;width:24px;height:24px}
.sidebar nav .info-nav .v-icon{width:14px;height:14px;stroke-width:1.7}
.info-page-title,.info-section{width:min(100%,950px)!important;margin-left:auto!important;margin-right:auto!important}
.info-page-title{min-height:62px}.info-section{margin-top:0!important}
.info-section.panel{border-radius:16px}.info-log-section{padding:8px 14px 14px}
.info-empty{display:grid;place-items:center;align-content:center;min-height:150px;padding:30px 20px;text-align:center;color:#59657a}
.info-empty>span{display:grid;place-items:center;width:35px;height:35px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;background:rgba(139,120,255,.06);color:#7669ca}
.info-empty .v-icon{width:16px;height:16px}.info-empty strong{color:#7d889b;font-size:10px}.info-empty p{margin:5px 0 0;color:#4d586b;font-size:8px}
.card-grid.info-section>.info-empty:only-child{grid-column:1/-1;width:min(100%,700px);justify-self:center}
.primary:disabled{cursor:not-allowed;opacity:.48;filter:saturate(.45);box-shadow:none;transform:none}
.property-report-overview{display:grid;gap:7px;margin-bottom:12px!important}.property-report-overview article{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,rgba(17,23,34,.96),rgba(10,15,23,.96))}.property-report-overview article>div{display:grid;min-width:0}.property-report-overview strong{font-size:9px}.property-report-overview small{margin-top:3px;color:#59657a;font-size:7px}.property-report-icon{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:8px;font-size:10px;font-weight:900}.property-report-state{margin-left:auto;padding:5px 8px;border:1px solid transparent;border-radius:20px;font-size:7px;font-weight:800;white-space:nowrap}.property-report-icon.reported,.property-report-state.reported{border-color:rgba(60,221,160,.2);background:rgba(60,221,160,.08);color:var(--green)}.property-report-icon.unreported,.property-report-state.unreported{border-color:rgba(255,104,124,.2);background:rgba(255,104,124,.08);color:var(--danger)}
@media(max-width:520px){.property-report-overview article{align-items:flex-start}.property-report-state{margin-left:0}.property-report-overview article{flex-wrap:wrap}.property-report-overview article>div{flex:1}}
.side-bottom{padding-top:15px;border-top:1px solid var(--line)}.connect{border-color:var(--line);background:#0e141e}
.app-shell{margin-left:276px}
.app-shell header{height:72px;padding:0 clamp(25px,3.4vw,58px);border-bottom:1px solid var(--line);background:rgba(7,10,15,.76);box-shadow:none}
.header-user strong{font-size:12px}.header-user small{font-size:7px;letter-spacing:1.35px}
.header-actions{gap:10px}.points{padding:8px 11px;border-color:rgba(139,120,255,.24);background:rgba(139,120,255,.08)}
.header-live.online{color:#7f8a9e}.header-live.online i{background:var(--green);box-shadow:0 0 12px var(--green)}.header-live.offline{color:#8d6870}.header-live.offline i{background:var(--danger);box-shadow:0 0 12px rgba(255,104,124,.7)}.header-live.checking i{background:var(--orange);box-shadow:0 0 10px rgba(255,182,100,.6);animation:onlinePulse 1.2s infinite}
.avatar{width:36px;height:36px;border-radius:10px;font-size:11px}.header-logout{height:36px;background:#0f151f}
.content{padding:42px clamp(25px,4vw,66px) 62px}.content>:not(dialog){width:min(100%,1280px)}
footer{padding:0 20px 25px;color:#384256;font-size:8px;letter-spacing:.4px}

/* Type, inputs, buttons */
.eyebrow{color:#9486ee;font-size:8px;font-weight:800;letter-spacing:2.1px}
.page-title{min-height:68px;margin-bottom:27px}.page-title h1{margin:6px 0 4px;font-size:33px;line-height:1.1;letter-spacing:-1.6px}.page-title p{font-size:11px}
input,select,textarea{min-height:45px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:#090e16;color:var(--text)}
input::placeholder,textarea::placeholder{color:#465165}input:hover,select:hover,textarea:hover{border-color:#344055}
input:focus,select:focus,textarea:focus{border-color:#7867e8;background:#0b111a;box-shadow:0 0 0 3px rgba(120,103,232,.1)}
.primary{min-height:42px;padding:11px 17px;border-radius:10px;background:linear-gradient(135deg,#8b78ff,#6553e4);box-shadow:0 10px 28px rgba(101,83,228,.21);font-size:10px}
.primary:hover{filter:brightness(1.08);box-shadow:0 14px 35px rgba(101,83,228,.3)}
.secondary-action{border-color:var(--line-strong);background:rgba(255,255,255,.018)}
.approve-button,.reject-button,.mini-button,.maintenance-button{min-height:34px;border-radius:8px;padding:8px 11px}
.approve-button:hover,.mini-button:hover{filter:brightness(1.2)}.reject-button:hover,.maintenance-button:hover{filter:brightness(1.15)}

/* Shared surfaces */
.panel,.entity-card,.pp-package{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(17,23,34,.98),rgba(11,16,24,.98));box-shadow:0 15px 42px rgba(0,0,0,.1)}
.panel{padding:22px}.panel-head{min-height:47px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:0}
.panel-head h2,.form-panel h2{font-size:15px}.entity-card:hover,.news-admin-card:hover,.pp-package:hover{border-color:rgba(139,120,255,.3);box-shadow:0 20px 58px rgba(0,0,0,.18)}
.status,.request-status,.ticket-status{border:1px solid rgba(128,141,166,.12);border-radius:20px;padding:5px 9px}
.status.on,.request-status.approved,.ticket-status.answered{border-color:rgba(60,221,160,.16)}
.request-status.pending,.ticket-status.open{border-color:rgba(255,182,100,.16)}
.request-status.rejected{border-color:rgba(255,104,124,.16)}
.empty{min-height:125px;border:1px dashed rgba(125,139,166,.15);background:rgba(5,8,13,.18);color:#59657a}

/* Dashboard */
.dashboard-hero{min-height:250px;margin-bottom:16px;padding:41px 44px;border-color:rgba(139,120,255,.22);background:
  radial-gradient(circle at 89% 20%,rgba(116,91,238,.2),transparent 27%),
  linear-gradient(120deg,#171e2c,#0e141e 68%,#15152c)}
.dashboard-hero h1{font-size:clamp(34px,3.6vw,52px);letter-spacing:-2.7px}.dashboard-hero p{font-size:12px}
.account-level{border-color:rgba(139,120,255,.18);background:rgba(7,10,16,.55)}
.stats-grid{gap:12px;margin-bottom:16px}.stats-grid article{min-height:105px;padding:18px;border-color:var(--line);border-radius:15px;background:linear-gradient(145deg,#111823,#0c1119)}
.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat-icon{width:42px;height:42px;border-radius:12px}.stats-grid strong{font-size:17px}.stat-note{font-size:7px}
.dashboard-grid{gap:16px}.dynamic-news{padding:22px 2px}.dynamic-news h3{font-size:17px}.dynamic-news p{font-size:11px;color:#7f899c}

/* Characters, vehicles, properties */
.character-list{gap:16px}.character-detail{border-radius:20px}.character-main{grid-template-columns:210px 1fr;min-height:280px}
.skin-showcase{border-right:1px solid var(--line);background:radial-gradient(circle at 50% 35%,#303c54,#101620 68%)}
.character-info{padding:29px}.character-info h2{font-size:25px}.character-info .entity-stats{margin-top:24px}
.character-identifiers{display:flex;align-items:center;gap:8px;margin:7px 0 0!important}.character-identifiers>span:not(.portrait-character-id){padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:rgba(7,10,16,.3);color:#68748a;font-size:8px}.character-identifiers b{color:#a3adbf}.portrait-character-id{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.entity-stats{border-color:var(--line)}.entity-stats span{padding:14px 6px}.entity-stats small{font-size:7px}.entity-stats b{font-size:10px}
.inventory{padding:17px 20px;background:rgba(7,10,16,.25)}.item-slot{border-color:var(--line);background:#0a0f17}
.card-grid{gap:14px}.entity-card{padding:18px}.vehicle-visual,.property-visual{height:152px;border:1px solid var(--line);border-radius:13px;background:radial-gradient(circle at 50% 38%,#29354b,#0e141e 68%)}
.vehicle-card h2,.property-card h2{font-size:17px}.progress{height:4px;background:#202838}

/* Store */
.store-balance{border-color:rgba(139,120,255,.22);background:rgba(139,120,255,.07)}
.maintenance-stage{min-height:530px;border-color:rgba(139,120,255,.2);background:radial-gradient(circle at 84% 23%,rgba(110,86,231,.18),transparent 27%),linear-gradient(135deg,#151c29,#0c1119 62%,#121225)}
.maintenance-copy h2{font-size:clamp(38px,4.4vw,62px)}.maintenance-meta article{border-color:var(--line);background:rgba(6,9,14,.43)}
.package-grid{gap:14px}.pp-package{padding:30px 22px}.pp-package.featured{border-color:rgba(139,120,255,.42);background:radial-gradient(circle at 50% 0,rgba(89,72,180,.44),#101620 48%)}
.payment-history{margin-top:16px}.payment-row{border-color:var(--line);padding:14px 2px}

/* Requests, tickets, admin */
.support-grid{gap:16px}.request-row,.ticket-row{border-color:var(--line)}.request-row{padding:17px 2px}
.player-ticket{padding:2px 0 18px}.ticket-chat-message{border-color:var(--line);border-radius:11px}
.admin-table-wrap{padding:8px 14px 14px;border-radius:18px}.admin-table th{height:43px;background:rgba(5,8,13,.25);color:#59657a}
.admin-table td{padding:14px 10px;border-color:var(--line)}.admin-table tbody tr:hover{background:rgba(139,120,255,.025)}
.news-admin-grid,.request-admin-grid{gap:14px}.admin-request dl div{border-color:var(--line);background:#0a0f17}
.request-admin-grid>.empty-log:only-child{grid-column:1/-1;justify-self:center;width:min(100%,700px);min-height:130px;display:grid;place-items:center;align-content:center;text-align:center}.request-admin-grid>.empty-log:only-child span{margin:0 0 8px}.request-admin-grid>.empty-log:only-child strong{margin:0}
.store-admin-control{border-color:rgba(139,120,255,.2)}dialog{border-color:var(--line-strong);border-radius:20px;background:#0e141e}
.admin-topline{display:grid;grid-template-columns:1fr;align-items:start;gap:12px;width:min(100%,1000px)!important;margin:0 auto 18px}.admin-topline .admin-content-head{width:100%;margin:0}.admin-topline .store-admin-control{display:grid;justify-self:start;width:330px!important;margin:0!important;padding:14px 15px}.admin-topline .store-control-copy{gap:10px}.admin-topline .control-icon{width:35px;height:35px;border-radius:9px;font-size:13px}.admin-topline .store-control-copy h2{font-size:12px}.admin-topline .store-control-copy p{display:none}.admin-topline .store-control-state{justify-content:space-between;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}.admin-topline .store-control-state button{min-height:30px;padding:6px 9px;font-size:8px}
.settings-panel{padding:26px}.profile{border-color:var(--line);padding-bottom:23px}.readonly-grid{margin-top:8px}

/* Motion and responsive */
@media(prefers-reduced-motion:no-preference){
  .maintenance-orbit{animation:veltrixOrbit 8s ease-in-out infinite alternate}
  @keyframes veltrixOrbit{to{transform:translateY(10px) rotate(3deg)}}
}
@media(max-width:1100px){
  .sidebar{width:246px}.app-shell{margin-left:246px}.content{padding-inline:28px}
  .character-main{grid-template-columns:175px 1fr}
}
@media(max-width:760px){
  .login-panel{padding:24px 18px}.login-card{padding:27px 23px}.login-card h2{font-size:34px}
  .sidebar{width:min(290px,87vw)}.app-shell{margin-left:0}.app-shell header{height:66px;padding:0 16px}
  .content{padding:28px 16px 45px}.page-title{margin-bottom:22px}.page-title h1{font-size:28px}
  .dashboard-hero{min-height:0;padding:29px 24px}.dashboard-hero h1{font-size:31px}
  .character-main{display:block}.skin-showcase{height:240px;border-right:0;border-bottom:1px solid var(--line)}.character-info{padding:22px}
  .panel{padding:18px}.maintenance-stage{padding:33px 22px 22px}
}
@media(max-width:900px){.admin-topline{grid-template-columns:1fr}.admin-topline .store-admin-control{width:100%!important}.admin-topline .admin-content-head{margin-bottom:0}}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}.stats-grid article{min-height:84px}
  .page-title{display:grid}.store-balance{width:100%}.header-actions{gap:6px}
  .card-grid,.package-grid{grid-template-columns:1fr}.maintenance-copy h2{font-size:34px}
}

/* Compact density */
@media(min-width:761px){
  .sidebar{width:244px;padding:20px 14px 15px}
  .app-shell{margin-left:244px}
  .nav-brand{padding-bottom:19px}.nav-brand .brand-logo{width:35px;height:35px}
  .sidebar nav{gap:3px}.sidebar nav small{margin-top:15px}
  .sidebar nav a{min-height:38px;padding:8px 10px;font-size:10px}
  .sidebar nav .info-nav{min-height:38px;padding:8px 10px}
  .sidebar nav a>span{width:22px;height:22px}.sidebar nav .v-icon{width:13px;height:13px}
  .app-shell header{height:62px;padding-inline:clamp(22px,3vw,48px)}
  .avatar{width:32px;height:32px}.header-logout{height:32px}.points{padding:7px 10px}
  .content{padding:32px clamp(22px,3.2vw,52px) 48px}
  .content>:not(dialog){width:min(100%,1180px)}
  .page-title{min-height:56px;margin-bottom:20px}.page-title h1{font-size:28px}.page-title p{font-size:10px}
  .stats-grid{gap:10px;margin-bottom:13px}.stats-grid article{min-height:86px;padding:14px}
  .stat-icon{width:37px;height:37px}.stat-icon .v-icon{width:17px;height:17px}.stats-grid strong{font-size:15px}
  .panel,.entity-card{border-radius:15px}.panel{padding:18px}.panel-head{min-height:41px;padding-bottom:11px}
  .card-grid,.character-list,.dashboard-grid,.support-grid,.news-admin-grid,.request-admin-grid{gap:12px}
  .entity-card{padding:15px}.vehicle-visual,.property-visual{height:130px}
  .character-main{grid-template-columns:180px 1fr;min-height:240px}.character-info{padding:23px}.character-info h2{font-size:21px}
  .inventory{padding:13px 16px}.item-slot{min-height:39px}
  input,select,textarea{min-height:40px;padding:10px 12px}.primary{min-height:37px;padding:9px 14px}
  .maintenance-stage{min-height:455px;padding:44px 46px 28px}.maintenance-copy h2{font-size:46px}.maintenance-meta{margin-top:42px}
  .package-grid{gap:12px}.pp-package{padding:24px 18px}.pp-package>strong{font-size:27px}
  .admin-table td{padding:11px 9px}.store-admin-control{padding:16px 18px}
}

/* Premium Shop admin control motion */
@media(prefers-reduced-motion:no-preference){
  .store-admin-control{animation:storeControlIn .5s cubic-bezier(.2,.8,.2,1) both}
  .store-admin-control .control-icon{animation:storeControlFloat 3s ease-in-out infinite}
  .store-control-state>.request-status i{animation:storeStatusPulse 1.8s ease-out infinite}
  .store-control-state button{position:relative;overflow:hidden;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
  .store-control-state button::after{content:"";position:absolute;inset:-60% auto -60% -45%;width:28%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:storeButtonShine 3.4s ease-in-out infinite}
  .store-control-state button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(49,223,145,.14)}
  .store-control-state button:active{transform:translateY(0) scale(.97)}
  @keyframes storeControlIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes storeControlFloat{50%{transform:translateY(-3px);box-shadow:0 8px 20px rgba(128,108,255,.16)}}
  @keyframes storeStatusPulse{0%{box-shadow:0 0 0 0 currentColor}70%,100%{box-shadow:0 0 0 7px transparent}}
  @keyframes storeButtonShine{0%,55%{left:-45%}85%,100%{left:125%}}
}