:root{--scale:1;--left:0px;--top:0px;--cyan:#22dfff;--mint:#26ffc1;--pink:#ff5f86;--gold:#ffd04a;--line:rgba(28,210,255,.62);--glass:rgba(2,19,43,.78);--glass2:rgba(2,15,34,.9)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020713;color:#dff8ff;font-family:"Segoe UI","Malgun Gothic",sans-serif}button,select,input{font:inherit}.hidden{display:none!important}
body{background:radial-gradient(circle at 50% 45%,#062744 0,#020713 68%)}
#viewport{position:fixed;inset:0;overflow:hidden;touch-action:manipulation;background:#020713}
#ariaCanvas{position:absolute;width:1640px;height:920px;left:0;top:0;transform-origin:0 0;transform:translate(var(--left),var(--top)) scale(var(--scale));background:#03101e;overflow:hidden;border:1px solid rgba(0,209,255,.18);box-shadow:0 0 38px rgba(0,207,255,.15)}
#ariaCanvas.rotated{transform-origin:0 0;transform:translate(var(--left),var(--top)) rotate(90deg) scale(var(--scale))}
#ariaCanvas:before{content:"";position:absolute;inset:0;background:url('./assets/ARIA_BG_NEW.png') center/cover no-repeat;opacity:.34;z-index:0;pointer-events:none}
.topbar,.menu,.screen-host{position:relative;z-index:3}
.topbar{position:absolute;left:229px;right:120px;top:16px;height:49px;display:grid;grid-template-columns:180px 175px 175px 130px 135px 105px 95px 145px;gap:0;border:1px solid #0db8ea;background:rgba(2,20,38,.83);box-shadow:0 0 10px rgba(0,210,255,.25);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.topbox,.lang{display:flex;align-items:center;justify-content:center;gap:8px;border-right:1px solid rgba(0,209,255,.22);font-size:12px;color:#a9d5e2}.topbox b{font-size:14px;color:#eaffff}.topbox .mint,.mint{color:var(--mint)!important}.gold{color:var(--gold)!important}.pink,.short{color:var(--pink)!important}.topbtn,.api{margin:7px 7px;height:34px;border:1px solid #17d9ff;border-radius:6px;background:#07304b;color:#eaffff;font-weight:800;cursor:pointer}.api{display:grid;place-items:center;margin-left:14px}.winbtns{position:absolute;left:1420px;top:13px;display:flex;gap:15px;font-weight:900;font-size:19px}.winbtns span{cursor:pointer}
.menu{position:absolute;left:228px;top:74px;width:1180px;height:45px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:6px 8px;border-radius:11px;background:rgba(26,33,57,.74)}.menu button{border:0;border-radius:8px;background:rgba(87,102,138,.32);color:#dfe8ef;font-size:13px;letter-spacing:.4px;cursor:pointer}.menu button.active{background:rgba(50,214,255,.25);color:#58efff;box-shadow:inset 0 0 0 1px rgba(41,220,255,.45)}.menu button[data-screen="demo"]{color:#ff859f}.menu button[data-screen="horse"]{color:#ffe06d}.menu button[data-screen="mining"]{color:#d5adff}.menu button[data-screen="reporter"]{color:#e2eaf2}.menu button[data-screen="history"]{color:#d7b2ff}.menu button[data-screen="partner"]{color:#8bffe1}
.screen-host{position:absolute;left:0;top:126px;width:1640px;height:794px;overflow:hidden}.screen-page{position:absolute;inset:0;display:none;overflow:hidden}.screen-page.active{display:block}.frame{border:1px solid #0dd4ff;background:linear-gradient(180deg,rgba(3,36,66,.78),rgba(2,17,38,.86));box-shadow:0 0 8px rgba(0,205,255,.12),inset 0 0 20px rgba(0,88,150,.12)}
.global-bg,.page-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.media-dim{position:absolute;inset:0;background:rgba(0,7,19,.22);z-index:1;pointer-events:none}
/* trading */
.three-col{position:absolute;inset:0;display:grid;grid-template-columns:320px 1fr 355px;gap:14px;padding:8px 16px 14px;z-index:2}.leftcol,.centercol,.rightcol{min-width:0;display:flex;flex-direction:column;gap:10px}.portrait{height:170px;overflow:hidden;background:rgba(1,17,36,.85)}.portrait img{width:100%;height:100%;object-fit:cover}.trend{flex:1;padding:16px}.trend-title{font-size:20px;font-weight:900;color:#55ecff}.market{display:flex;gap:8px;align-items:center;margin:8px 0 15px;font-size:11px}.dot{width:10px;height:10px;background:#19e9ff;border-radius:50%;box-shadow:0 0 9px #19e9ff}.donuts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 18px}.donut{height:84px;border-radius:50%;display:grid;place-items:center;border:8px solid currentColor;background:rgba(0,10,23,.68);box-shadow:inset 0 0 0 7px rgba(0,0,0,.26)}.donut.green{color:#24ffc0}.donut.red{color:#ff587d}.donut b{font-size:18px;color:#fff}.core-row{display:grid;grid-template-columns:1fr 1fr 1fr;margin:8px 0;font-size:13px}.meter{display:grid;grid-template-columns:70px 1fr 70px;gap:8px;align-items:center;margin:11px 0;font-size:10px}.meter i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#ff5a77 0 var(--p),rgba(64,90,110,.45) var(--p) 100%)}.trend h3{margin:18px 0 8px;color:#ffd44d;font-size:16px}.deriv{display:flex;justify-content:space-between;margin:9px 0;font-size:11px}.voice{width:100%;height:27px;border:1px solid #05c6f7;background:#06253d;color:#d9fbff}
.chart{height:525px;position:relative;overflow:hidden}.chart:before{content:"";position:absolute;inset:0;background:url('./assets/ARIA_BG_NEW.png') center/cover no-repeat;opacity:.12;z-index:0}.charthead{height:46px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;border-bottom:1px solid #0bb9e7;background:#031223;position:relative;z-index:3}.charthead div{display:flex;gap:15px;align-items:center;font-size:11px}.charthead b{font-size:18px}.tf{border-bottom:2px solid #15dfff;padding-bottom:8px}.live{color:#29ffc2;font-weight:900}iframe{position:relative;z-index:2;width:100%;height:calc(100% - 46px);border:0;background:#020817}.webhook{position:absolute;right:10px;bottom:10px;z-index:5;display:flex;gap:6px}.webhook button{height:30px;border:1px solid #05c7f5;background:#07283e;color:#eaffff}.webhook .webhookon{color:#51ffbc}.positions{height:235px;overflow:hidden}.poshead{height:46px;display:grid;grid-template-columns:240px 1fr 300px;align-items:center;padding:0 14px;color:#3eeeff}.poshead b{font-size:16px}.lsbar{display:flex;height:10px;margin:0 30px}.lsbar i:first-child{flex:1;background:#12ef9c}.lsbar i:last-child{flex:1;background:#e84d67}.poshead div:last-child{display:flex;gap:6px;justify-content:flex-end}.poshead button{height:28px;border:1px solid #0dd1ff;background:#07304a;color:#dffaff}.tablewrap{height:calc(100% - 46px);overflow:auto}.tablewrap table{width:100%;border-collapse:collapse;font-size:10px}.tablewrap th{height:36px;background:#043251;color:#c4f4ff;border-right:1px solid #12688b}.tablewrap td{text-align:center;padding:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.control{height:520px;padding:14px}.control h2,.account h2{margin:0 0 12px;text-align:center;color:#4cf0ff;font-size:17px}.switch{display:grid;grid-template-columns:1fr 1fr;margin-bottom:15px}.switch button{height:44px;border:1px solid #16dff8;background:#096f5d;color:#eaffff}.switch .manual{background:#bd7704}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.three label{font-size:10px;text-align:center}.three select{width:100%;height:33px;margin-top:6px;background:#06283f;color:white;border:1px solid #0ab9e4}.order{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.order button{height:32px;background:#0a263c;color:#9cb8c8;border:1px solid #14597a}.order .selected{color:#ffc53d;border-color:#e89416}.value{font-size:11px}.value input{width:100%;height:42px;background:#061c30;color:#b1cbd7;border:1px solid #0ab9e4;text-align:center}.ratio{margin:14px 0 4px;font-size:11px}.control input[type=range]{width:100%}.qty{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px;margin:15px 0;font-size:11px}.longshort{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.longshort button{height:44px;background:#031d23;color:white;border:1px solid #1affb0}.longshort button:last-child{border-color:#ff5b7f}.account{height:205px;padding:14px}.account>div{display:flex;justify-content:space-between;margin:11px 0;font-size:11px}.account #refreshBtn{width:100%;height:28px;border:1px solid #0ac9f5;background:#062741;color:white}.exit{height:40px;background:#02101d;color:white;border:1px solid #0ad4ff}
/* common page chrome */
.page-chrome{position:absolute;inset:0;z-index:2;pointer-events:none}.page-panel{position:absolute;pointer-events:auto}.page-left{left:16px;top:180px;width:280px;height:505px}.page-right{right:16px;top:180px;width:300px;height:430px}.page-bottom{left:310px;right:330px;bottom:20px;height:190px}.page-titlebar{position:absolute;left:310px;right:330px;top:15px;height:52px}.page-panel h2{margin:12px 14px;color:#4cecff;font-size:16px}.page-panel .rows{padding:8px 14px}.page-panel .rows div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px}.page-panel .micro{font-size:10px;color:#8bb1c5;padding:8px 14px}.page-logo{position:absolute;left:18px;top:10px;width:260px;height:160px;object-fit:cover;pointer-events:none}
/* home */
.home-page{background:#03111f}.home-page .page-bg{opacity:.96}.home-core{position:absolute;z-index:3;left:380px;right:380px;top:145px;height:300px;display:grid;place-items:center;text-align:center;background:rgba(2,18,42,.64)}.home-core h1{font-size:40px;margin:0}.home-core p{color:#63eaff}.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:85%}.home-cards div{padding:22px;border:1px solid #0bd8ff;background:rgba(2,24,49,.75)}
/* media pages */
.media-page{background:#020817}.center-media{position:absolute;z-index:2;left:330px;right:350px;top:80px;width:960px;height:510px;object-fit:cover;border:1px solid #0bd9ff;background:#020817}.media-caption{position:absolute;z-index:4;left:630px;bottom:205px;width:380px;text-align:center;text-shadow:0 0 12px #00eaff}.media-caption h1{margin:0;color:#25f0ff}.media-page .page-left,.media-page .page-right,.media-page .page-bottom{background:rgba(2,22,47,.72)}
/* reporter/history */
.reporter-layout{position:absolute;z-index:3;left:310px;right:330px;top:72px;bottom:225px;display:grid;grid-template-columns:.95fr 1.05fr;gap:14px}.reporter-layout .frame{padding:20px}.reporter-layout h2{color:#56efff}.bigdonuts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}.bigdonuts .donut{height:140px}.history-main{position:absolute;z-index:3;left:310px;right:330px;top:80px;bottom:225px;padding:24px}.history-row{display:grid;grid-template-columns:90px 160px 1fr;padding:18px 8px;border-bottom:1px solid rgba(255,255,255,.09)}
/* partner */
.partner-board{position:absolute;z-index:3;left:170px;right:170px;top:110px;bottom:120px;padding:24px}.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.partner-card{height:190px;padding:18px}
/* login */
.login-overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#062a47,#020713 70%);z-index:1000}.login-card{width:480px;padding:28px;border:1px solid #0bd9ff;background:rgba(2,16,35,.96);box-shadow:0 0 34px rgba(0,218,255,.2)}.login-logo{width:76px;height:76px;display:block;margin:auto;border-radius:50%}.login-card h1{text-align:center}.login-sub{text-align:center;color:#6beeff;margin-bottom:20px}.login-card label{display:block;margin:10px 0 5px;color:#87d9eb}.login-card input{width:100%;height:42px;background:#061a2e;color:white;border:1px solid #0ab9e4;padding:0 10px}.login-card button{width:100%;height:44px;margin-top:18px;background:#064461;color:white;border:1px solid #15dfff}
/* click modal */
#actionToast{position:absolute;z-index:30;right:30px;top:130px;min-width:300px;max-width:520px;padding:16px 18px;border:1px solid #11dcff;background:rgba(2,15,34,.96);display:none;box-shadow:0 0 20px rgba(0,210,255,.25)}#actionToast.show{display:block}#actionToast b{color:#5ff1ff}#actionToast p{margin:8px 0 0;font-size:12px;color:#b8d9e6}