/* VirtaCoin Exchange — Trading Terminal Luxury Patch
   Visual-only layer. Existing PHP/DB/order endpoints remain untouched. */

:root{
 --vt-bg:#050a12;--vt-bg2:#071321;--vt-panel:#081625;
 --vt-line:#17304a;--vt-line2:#214564;--vt-text:#edf5ff;--vt-muted:#7f96b3;
 --vt-cyan:#22d9ff;--vt-blue:#5b7cff;--vt-green:#00e7a0;--vt-red:#ff4564;
}
*{box-sizing:border-box}
html,body{background:var(--vt-bg)!important;color:var(--vt-text)!important}
body{
 background:
 radial-gradient(900px 500px at 50% -12%,rgba(35,217,255,.10),transparent 65%),
 linear-gradient(180deg,#030812 0,#06111e 42%,#050a12 100%)!important;
 font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.34;
 background-image:linear-gradient(rgba(70,130,190,.045) 1px,transparent 1px),
 linear-gradient(90deg,rgba(70,130,190,.045) 1px,transparent 1px);
 background-size:32px 32px;
}
a{color:inherit;text-decoration:none}
header,.top{
 background:rgba(3,9,18,.88)!important;
 border-bottom:1px solid rgba(45,116,163,.28)!important;
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.wrap,.container,.page{max-width:1500px!important}
.brand{font-weight:900!important;letter-spacing:-.7px}
.brand b{color:var(--vt-cyan)!important}
.top a:hover{color:#fff!important}

/* Market header */
.market-header,.pair-header,.market-hero{
 background:linear-gradient(105deg,rgba(8,22,38,.96),rgba(4,15,28,.86))!important;
 border:1px solid rgba(39,100,145,.28)!important;
 border-radius:0 0 18px 18px!important;
 box-shadow:0 15px 45px rgba(0,0,0,.22);
}
.market-header h1,.pair-header h1,.market-hero h1{
 font-size:clamp(30px,4vw,48px)!important;font-weight:950!important;
}
.last-price,.market-price,.price-big{
 color:var(--vt-green)!important;text-shadow:0 0 26px rgba(0,231,160,.22);
 font-variant-numeric:tabular-nums;
}

/* Universal card styling */
.card,.panel,.box,.market-card,.orderbook,.trades,.chart,.trade-panel,.order-panel{
 background:linear-gradient(145deg,rgba(10,27,45,.94),rgba(5,16,29,.96))!important;
 border:1px solid rgba(45,96,135,.34)!important;
 border-radius:16px!important;
 box-shadow:0 20px 60px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.025)!important;
}
.card:before,.panel:before,.market-card:before,.orderbook:before,.chart:before{
 content:"";display:block;height:1px;margin:0 8px;
 background:linear-gradient(90deg,transparent,rgba(34,217,255,.65),transparent);
}

/* Trading grid */
.trading-grid,.market-grid,.trade-grid{
 gap:10px!important;
}
.orderbook,.trades,.chart,.trade-panel,.order-panel{overflow:hidden}

/* Tables/order book */
table{border-collapse:collapse!important;width:100%}
th{
 color:#718ba8!important;text-transform:uppercase!important;
 font-size:10px!important;letter-spacing:.08em!important;
 border-bottom:1px solid rgba(60,105,140,.25)!important;
}
td{border-bottom:1px solid rgba(48,91,126,.16)!important;font-variant-numeric:tabular-nums}
tr:hover td{background:rgba(34,217,255,.035)!important}
.sell,.ask,.red{color:var(--vt-red)!important}
.buy,.bid,.green{color:var(--vt-green)!important}

/* Forms */
input,select,textarea{
 background:#061321!important;color:#eaf4ff!important;
 border:1px solid #1b3c59!important;border-radius:10px!important;
}
input:focus,select:focus,textarea:focus{
 border-color:var(--vt-cyan)!important;
 box-shadow:0 0 0 3px rgba(34,217,255,.08),0 0 22px rgba(34,217,255,.08)!important;
}
button,.btn,.primary{
 border:0!important;border-radius:10px!important;
 font-weight:850!important;color:#fff!important;
 background:linear-gradient(135deg,#00cfa0,#08aef0)!important;
 box-shadow:0 9px 25px rgba(0,205,174,.22)!important;
}
button:hover,.btn:hover,.primary:hover{transform:translateY(-1px);filter:brightness(1.07)}
button[type=submit].sell,.btn.sell,.sell-btn{
 background:linear-gradient(135deg,#ff3f61,#e92e56)!important;
 box-shadow:0 9px 25px rgba(255,63,97,.20)!important;
}

/* Chart area: give an existing chart container a terminal feel */
.chart,.chart-area,.chart-container{
 min-height:360px;
 background:
 linear-gradient(rgba(47,95,130,.09) 1px,transparent 1px),
 linear-gradient(90deg,rgba(47,95,130,.09) 1px,transparent 1px),
 linear-gradient(145deg,#061522,#04101b)!important;
 background-size:48px 48px,48px 48px,auto!important;
}

/* Tabs */
.tabs,.tabbar,.market-tabs{
 background:rgba(4,13,24,.62)!important;
 border-bottom:1px solid rgba(55,102,139,.22)!important;
}
.tabs a,.tabs button,.tabbar a,.tabbar button{
 color:#8ea6c1!important;border-radius:8px!important;
}
.tabs a.active,.tabs button.active,.tabbar a.active,.tabbar button.active{
 color:#fff!important;background:rgba(34,217,255,.10)!important;
 box-shadow:inset 0 -2px var(--vt-cyan)!important;
}

/* Live badge */
.live,.status-live,.online{
 color:var(--vt-green)!important;
}
.live:before,.status-live:before,.online:before{
 content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
 background:var(--vt-green);margin-right:7px;box-shadow:0 0 10px var(--vt-green);
}

/* Market cards/sidebar */
.market-card{transition:.22s ease}
.market-card:hover{transform:translateY(-2px);border-color:rgba(34,217,255,.45)!important}
.market-card .symbol,.pair{font-weight:850!important}
.market-card .change.up,.change.up{color:var(--vt-green)!important}
.market-card .change.down,.change.down{color:var(--vt-red)!important}

/* Footer ticker */
.ticker,.bottom-ticker,.statusbar{
 background:rgba(2,9,17,.94)!important;
 border-top:1px solid rgba(49,105,144,.24)!important;
 color:#91a7bf!important;
 backdrop-filter:blur(12px);
}
.ticker .positive,.bottom-ticker .positive{color:var(--vt-green)!important}
.ticker .negative,.bottom-ticker .negative{color:var(--vt-red)!important}

@media(max-width:1050px){
 .trading-grid,.market-grid,.trade-grid{grid-template-columns:1fr!important}
 .orderbook,.trades{max-height:none}
}
@media(max-width:700px){
 .wrap,.container,.page{padding-left:10px!important;padding-right:10px!important}
 .market-header,.pair-header,.market-hero{border-radius:12px!important}
 .card,.panel,.box,.market-card{border-radius:13px!important}
 .chart,.chart-area,.chart-container{min-height:290px}
}