💼 Investment Engine
Grow your capital with AI-assisted trading or manage it yourself.
Investment Projection
Initial Investment
$100
Estimated Value
$158.69
Projected Profit
+$58.69
/* =================================
TRADING + INVESTMENT LAYOUT
================================= */
.dashboard-trading-row{
display:grid;
grid-template-columns:
minmax(0,3fr)
380px;
gap:25px;
align-items:start;
}
.investment-panel{
width:100%;
}
@media(max-width:1200px){
.dashboard-trading-row{
grid-template-columns:1fr;
}
}
/* INVESTMENT TYPE */
.investment-options label{
display:flex;
align-items:center;
gap:10px;
background:#050807;
border:1px solid #1f302b;
padding:15px;
border-radius:12px;
cursor:pointer;
margin-bottom:10px;
}
.investment-options small{
display:block;
color:#94a3b8;
margin-bottom:15px;
padding-left:10px;
}
/* =================================
ACTIVE INVESTMENTS
================================= */
.active-investments-card{
background:
linear-gradient(
145deg,
#0b1110,
#050807
);
border:1px solid #1f302b;
border-radius:22px;
padding:25px;
}
.active-investments-card h2{
margin-bottom:8px;
}
.investment-list{
margin-top:20px;
}
.active-investment-item{
background:#050807;
border:1px solid #1f302b;
border-radius:16px;
padding:20px;
}
.investment-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}
.status-active{
background:#22c55e;
color:#000;
padding:5px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
}
.investment-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #1f302b;
}
.investment-row:last-child{
border:none;
}
.investment-row span{
color:#94a3b8;
}
.profit{
color:#22c55e;
}
/* ==============================
XMARKETS TERMINAL V2
============================== */
.x-terminal{
background:#050807;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:20px;
box-shadow:
0 0 40px rgba(0,255,120,.08);
}
.terminal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.terminal-title{
font-weight:700;
letter-spacing:1px;
}
.live-dot{
display:inline-block;
width:8px;
height:8px;
background:#22c55e;
border-radius:50%;
margin-right:8px;
animation:pulse 1.5s infinite;
}
@keyframes pulse{
50%{
opacity:.3;
}
}
.online,
.bullish{
color:#22c55e;
}
.asset-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:20px;
}
.asset-box,
.market-stat{
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
padding:18px;
border-radius:14px;
}
.live-price{
font-size:28px;
font-weight:800;
margin-top:8px;
}
.terminal-grid{
display:grid;
grid-template-columns:
220px 1fr 280px;
gap:15px;
}
.terminal-panel{
background:
rgba(255,255,255,.025);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:15px;
}
.panel-title{
font-size:13px;
letter-spacing:1px;
opacity:.7;
margin-bottom:15px;
}
.market-item{
display:flex;
justify-content:space-between;
padding:12px;
border-radius:10px;
margin-bottom:8px;
cursor:pointer;
}
.market-item:hover,
.market-item.active{
background:
rgba(34,197,94,.12);
}
.chart-panel{
min-height:420px;
}
#user-trading-chart{
height:360px;
}
.chart-toolbar button{
background:#0d1512;
border:1px solid rgba(255,255,255,.08);
color:white;
padding:6px 10px;
margin-right:5px;
border-radius:8px;
cursor:pointer;
}
.trade-input{
width:100%;
background:#080c0b;
border:
1px solid rgba(255,255,255,.1);
padding:12px;
color:white;
border-radius:10px;
margin-bottom:12px;
}
.risk-box{
display:flex;
justify-content:space-between;
padding:12px;
background:
rgba(34,197,94,.08);
border-radius:10px;
margin-bottom:15px;
}
.buy-btn,
.sell-btn{
width:100%;
padding:14px;
border:none;
border-radius:10px;
margin-top:10px;
font-weight:700;
cursor:pointer;
}
.buy-btn{
background:#22c55e;
color:#021006;
}
.sell-btn{
background:#ef4444;
color:white;
}
.ai-terminal-panel{
margin-top:20px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
padding:20px;
border-radius:14px;
}
.ai-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
.ai-grid div{
background:#080d0b;
padding:15px;
border-radius:12px;
}
@media(max-width:1000px){
.terminal-grid{
grid-template-columns:1fr;
}
.asset-bar,
.ai-grid{
grid-template-columns:1fr 1fr;
}
}
.price-up{
color:#22c55e!important;
text-shadow:0 0 20px rgba(34,197,94,.8);
transition:.3s;
}
.price-down{
color:#ef4444!important;
text-shadow:0 0 20px rgba(239,68,68,.8);
transition:.3s;
}
.chart-toolbar button.active{
background:#22c55e;
color:#020806;
}.positions-terminal{
margin-top:25px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:20px;
}
.positions-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.live-status{
color:#22c55e;
font-size:13px;
}
.position-card{
background:#080d0b;
border:
1px solid rgba(255,255,255,.08);
border-radius:15px;
padding:18px;
margin-bottom:15px;
transition:.3s;
}
.position-card:hover{
border-color:#22c55e;
}
.position-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.symbol{
font-size:18px;
font-weight:700;
}
.type{
padding:5px 10px;
border-radius:8px;
margin-left:10px;
font-size:12px;
}
.type.buy{
background:rgba(34,197,94,.15);
color:#22c55e;
}
.type.sell{
background:rgba(239,68,68,.15);
color:#ef4444;
}
.profit{
color:#22c55e;
font-size:20px;
font-weight:700;
}
.loss{
color:#ef4444;
font-size:20px;
font-weight:700;
}
.position-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:20px;
}
.position-grid label,
.risk-levels span{
display:block;
font-size:11px;
opacity:.6;
}
.position-grid strong{
display:block;
margin-top:5px;
}
.risk-levels{
display:flex;
gap:40px;
margin-top:20px;
}
.position-actions{
display:flex;
gap:10px;
margin-top:20px;
}
.modify-btn,
.close-btn{
padding:10px 20px;
border-radius:10px;
cursor:pointer;
border:none;
}
.modify-btn{
background:#1f2937;
color:white;
}
.close-btn{
background:#ef4444;
color:white;
}
.empty-position{
text-align:center;
padding:30px;
opacity:.6;
}
@media(max-width:800px){
.position-grid{
grid-template-columns:1fr 1fr;
}
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--bg:#050505;
--panel:#0b1110;
--border:#1f302b;
--green:#22c55e;
--green-light:#4ade80;
--red:#ef4444;
--text:#ffffff;
--muted:#94a3b8;
}
body{
background:var(--bg);
color:white;
font-family:Arial, Helvetica, sans-serif;
}
/* NAVBAR */
.navbar{
height:85px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 50px;
border-bottom:1px solid #1b2421;
background:#050505;
}
.logo{
font-size:30px;
font-weight:bold;
}
.logo span{
color:var(--green);
}
.menu{
display:flex;
gap:28px;
}
.menu a{
color:#aaa;
text-decoration:none;
font-size:16px;
}
.menu .active{
color:var(--green);
border-bottom:2px solid var(--green);
padding-bottom:30px;
}
.nav-buttons{
display:flex;
gap:15px;
}
.nav-buttons button{
padding:12px 25px;
border-radius:10px;
background:none;
color:white;
border:1px solid #444;
}
.signup{
background:var(--green)!important;
color:black!important;
border:none!important;
}
/* HERO */
.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
padding:80px 60px;
}
.badge{
display:inline-block;
padding:10px 18px;
border:1px solid var(--green);
border-radius:30px;
color:var(--green);
font-size:14px;
}
.hero h1{
font-size:65px;
line-height:1.1;
margin-top:30px;
}
.hero h1 span{
color:var(--green);
}
.hero p{
margin-top:25px;
font-size:20px;
color:var(--muted);
max-width:520px;
line-height:1.6;
}
.hero-buttons{
margin-top:40px;
display:flex;
gap:20px;
}
.start-btn{
padding:18px 35px;
border:none;
border-radius:12px;
background:var(--green);
font-weight:bold;
font-size:16px;
}
.feature-btn{
padding:18px 35px;
background:none;
color:white;
border:1px solid #444;
border-radius:12px;
}
/* TERMINAL */
.terminal{
background:var(--panel);
border:1px solid var(--border);
border-radius:25px;
padding:25px;
}
.terminal-top{
display:flex;
justify-content:space-between;
}
.live{
color:var(--green);
}
.price-box{
margin-top:20px;
font-size:18px;
}
.price-box span{
font-size:45px;
color:var(--green);
}
.price-box p{
color:var(--green);
}
.chart{
height:280px;
background:#020202;
margin-top:20px;
border-radius:15px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.candles{
width:80%;
height:100px;
background:
linear-gradient(
90deg,
transparent 5%,
#22c55e 5% 10%,
transparent 10% 20%,
#ef4444 20% 25%,
transparent 25% 35%,
#22c55e 35% 45%,
transparent 45% 55%,
#ef4444 55% 65%,
transparent 65% 75%,
#22c55e 75%
);
}
.trade-buttons{
display:flex;
gap:20px;
margin-top:25px;
}
.trade-buttons button{
flex:1;
padding:20px;
border:none;
border-radius:12px;
font-size:18px;
font-weight:bold;
color:white;
}
.sell{
background:var(--red);
}
.buy{
background:var(--green);
}
/* FEATURES */
.features{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin:20px 60px;
padding:30px;
background:#080d0c;
border:1px solid #1f302b;
border-radius:20px;
}
.features h3{
margin-bottom:10px;
}
.features p{
color:#94a3b8;
line-height:1.5;
}
/* MARKET WATCH */
.market-watch{
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:20px;
color:white;
}
.panel-title{
margin-bottom:20px;
}
.market-header,
.market-row{
display:grid;
grid-template-columns:1.2fr 1fr .7fr;
align-items:center;
padding:14px 10px;
}
.market-header{
color:#94a3b8;
font-size:13px;
}
.market-row{
border-top:1px solid #17221f;
font-size:14px;
}
.market-row.active{
background:#10251b;
border-radius:10px;
}
.green{
color:#22c55e;
}
.red{
color:#ef4444;
}
/* FIXED TRADING LAYOUT */
.trading-wrapper{
display:grid;
grid-template-columns: minmax(500px, 3fr) 320px;
gap:20px;
align-items:start;
}
.side-panels{
display:flex;
flex-direction:column;
gap:20px;
}
.terminal{
width:100%;
}
@media(max-width:1200px){
.trading-wrapper{
grid-template-columns:1fr;
}
}
/* CURRENCY CONVERTER */
.currency-box{
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:20px;
}
.converter-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:15px;
color:#94a3b8;
}
.converter-row select{
background:#050505;
color:white;
border:1px solid #333;
padding:10px;
border-radius:8px;
}
.amount input{
width:100%;
margin-top:15px;
background:#050505;
color:white;
border:1px solid #333;
padding:15px;
border-radius:10px;
font-size:18px;
}
.result{
margin-top:20px;
padding:15px;
background:#050505;
border-radius:10px;
color:#22c55e;
font-size:18px;
}
/* LIVE CHART */
#trading-chart{
height:380px;
width:100%;
border-radius:15px;
margin-top:20px;
}
/* TERMINAL HEADER UPGRADE */
.terminal-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.balance{
font-size:13px;
color:#94a3b8;
}
.balance span{
color:#22c55e;
font-size:20px;
font-weight:bold;
}
.reset{
background:transparent;
border:1px solid #374151;
color:white;
padding:10px 18px;
border-radius:10px;
}
/* TIMEFRAME BUTTONS */
.timeframes{
display:flex;
gap:10px;
margin-top:20px;
}
.timeframes button{
background:transparent;
border:none;
color:#94a3b8;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
}
.timeframes button:hover,
.timeframes .selected{
background:#12301f;
color:#22c55e;
}
/* TRADING CONTROLS */
.trade-controls{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:20px;
padding:20px;
background:#050505;
border:1px solid #1f302b;
border-radius:12px;
}
.control-box label{
display:block;
font-size:13px;
color:#94a3b8;
margin-bottom:8px;
}
.control-box input,
.control-box select{
width:100%;
background:#0b1110;
border:1px solid #333;
color:white;
padding:12px;
border-radius:8px;
font-size:15px;
}
/* ===============================
OPEN POSITIONS
================================ */
.positions-box{
margin-top:20px;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:20px;
}
.position-header,
.position-row{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
gap:10px;
align-items:center;
padding:14px;
}
.position-header{
color:#94a3b8;
font-size:13px;
}
.position-row{
border-top:1px solid #1f302b;
}
.profit-positive{
color:#22c55e;
}
.profit-negative{
color:#ef4444;
}
.position-row button{
background:#ef4444;
color:white;
border:none;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-weight:bold;
}
.position-row button:hover{
opacity:.85;
}
/* ===============================
TRADE HISTORY
================================ */
.history-box{
margin-top:20px;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:20px;
}
.history-header,
.history-row{
display:grid;
grid-template-columns:1.2fr 1fr 1fr 1fr;
gap:10px;
padding:12px;
align-items:center;
}
.history-header{
color:#94a3b8;
font-size:13px;
}
.history-row{
border-top:1px solid #1f302b;
}
.empty-history{
color:#64748b;
padding:20px;
text-align:center;
}
/* ===============================
FINAL BUY / SELL BUTTON FIX
================================ */
.trade-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
width:100%;
margin-top:25px;
}
.trade-buttons button{
height:90px;
border:none;
border-radius:12px;
font-size:18px;
font-weight:bold;
color:white;
cursor:pointer;
}
.trade-buttons .sell{
background:#ef4444;
}
.trade-buttons .buy{
background:#22c55e;
}
/* ===============================
TERMINAL STABILITY
================================ */
.terminal{
width:100%;
overflow:hidden;
}
.trading-wrapper{
display:grid;
gap:20px;
align-items:start;
}
.side-panels{
display:flex;
flex-direction:column;
gap:20px;
}
@media(max-width:1200px){
.trading-wrapper{
grid-template-columns:1fr;
}
.trade-buttons{
grid-template-columns:1fr;
}
}
.hero{
grid-template-columns:1fr;
}
.hero-left{
display:none;
}
.trading-wrapper{
width:100%;
}
/* PROFESSIONAL TERMINAL HERO */
.hero{
padding:40px 40px;
display:block;
}
.trading-wrapper{
width:100%;
max-width:1500px;
margin:auto;
grid-template-columns:
minmax(900px,4fr)
350px;
gap:25px;
}
.terminal{
min-height:850px;
padding:30px;
}
.side-panels{
height:max-content;
}
.terminal-top h2{
font-size:24px;
letter-spacing:.5px;
}
.live{
background:#10251b;
padding:8px 14px;
border-radius:20px;
font-size:13px;
}
.market-watch,
.currency-box{
box-shadow:
0 0 25px rgba(34,197,94,0.05);
}
.market-watch h3,
.currency-box h3{
font-size:18px;
letter-spacing:.5px;
}
.terminal{
background:
linear-gradient(
145deg,
#0b1110,
#050505
);
}
/* ==================================
LANDING PAGE PROPORTIONS
================================== */
.hero{
padding:30px 40px;
}
.trading-wrapper{
width:100%;
max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:
minmax(0, 3fr)
330px;
gap:20px;
align-items:start;
}
.terminal{
padding:22px;
border-radius:18px;
min-height:auto;
}
.side-panels{
display:flex;
flex-direction:column;
gap:15px;
}
.market-watch,
.currency-box{
width:100%;
}
.trade-controls{
padding:15px;
gap:12px;
}
.control-box input,
.control-box select{
height:42px;
padding:8px;
}
.trade-buttons{
margin-top:18px;
}
.trade-buttons button{
height:75px;
font-size:16px;
}
.terminal-top{
padding-bottom:15px;
}
.terminal-top h2{
font-size:20px;
}
/* ==========================================
XMARKETS RESPONSIVE DESIGN
========================================== */
/* LARGE SCREENS 1600px+ */
@media (min-width:1600px){
.trading-wrapper{
max-width:1500px;
}
.terminal{
padding:30px;
}
}
/* LAPTOP SCREENS */
@media (max-width:1400px){
.hero{
padding:25px;
}
.trading-wrapper{
grid-template-columns:
minmax(0, 3fr)
300px;
gap:15px;
}
#trading-chart{
height:350px;
}
.terminal{
padding:18px;
}
.terminal-top h2{
font-size:19px;
}
}
/* SMALL LAPTOPS */
@media (max-width:1200px){
.trading-wrapper{
grid-template-columns:
1fr;
}
.side-panels{
display:grid;
grid-template-columns:
1fr 1fr;
gap:15px;
}
#trading-chart{
height:380px;
}
}
/* TABLETS */
@media (max-width:900px){
.navbar{
flex-wrap:wrap;
}
.menu{
display:none;
}
.hero{
padding:15px;
}
.trading-wrapper{
display:flex;
flex-direction:column;
}
.terminal{
width:100%;
}
.side-panels{
display:flex;
flex-direction:column;
width:100%;
}
.trade-controls{
grid-template-columns:
1fr 1fr;
}
.timeframes{
overflow-x:auto;
}
}
/* MOBILE PHONES */
@media (max-width:600px){
body{
overflow-x:hidden;
}
/* Navbar */
.nav-buttons button{
padding:8px 12px;
font-size:12px;
}
/* Terminal */
.terminal{
padding:15px;
border-radius:12px;
}
.terminal-top{
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
}
.terminal-top h2{
font-size:18px;
}
/* Chart */
#trading-chart{
height:280px;
}
/* Controls */
.trade-controls{
grid-template-columns:
1fr;
}
/* Buy Sell */
.trade-buttons{
grid-template-columns:
1fr;
}
.trade-buttons button{
height:65px;
}
/* Market Watch */
.market-row{
font-size:13px;
padding:10px;
}
/* Account panels */
.account-stats{
grid-template-columns:
1fr;
}
.position-header,
.position-row,
.history-header,
.history-row{
grid-template-columns:
1fr;
gap:8px;
}
}
/* VERY SMALL PHONES */
@media (max-width:380px){
.logo{
font-size:20px;
}
#trading-chart{
height:230px;
}
.start-btn{
width:100%;
}
}
/* =====================================
XMARKETS FINAL PROPORTIONAL GRID
===================================== */
.hero{
width:100%;
padding:20px;
}
.trading-wrapper{
display:grid;
grid-template-columns:
minmax(0, 72%)
minmax(280px, 28%);
gap:20px;
width:100%;
max-width:1600px;
margin:auto;
}
.terminal{
width:100%;
box-sizing:border-box;
padding:20px;
}
.side-panels{
width:100%;
display:flex;
flex-direction:column;
gap:20px;
}
/* CHART SCALE */
#trading-chart{
width:100%;
height:clamp(
280px,
35vw,
430px
);
}
/* TERMINAL HEADER */
.terminal-top{
display:grid;
grid-template-columns:
1fr auto auto;
align-items:center;
gap:15px;
}
/* TIME BUTTONS */
.timeframes{
display:flex;
gap:8px;
flex-wrap:wrap;
}
/* TRADING CONTROLS */
.trade-controls{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:12px;
}
/* BUY SELL */
.trade-buttons{
display:grid;
grid-template-columns:
1fr 1fr;
gap:15px;
}
.trade-buttons button{
height:70px;
}
/* =====================================
LAPTOP
===================================== */
@media(max-width:1400px){
.trading-wrapper{
grid-template-columns:
70%
30%;
}
#trading-chart{
height:330px;
}
}
/* =====================================
TABLET
===================================== */
@media(max-width:1000px){
.trading-wrapper{
grid-template-columns:
1fr;
}
.side-panels{
display:grid;
grid-template-columns:
1fr 1fr;
}
}
/* =====================================
MOBILE
===================================== */
@media(max-width:650px){
.hero{
padding:10px;
}
.trading-wrapper{
display:flex;
flex-direction:column;
}
.side-panels{
display:flex;
}
.trade-controls{
grid-template-columns:
1fr;
}
.trade-buttons{
grid-template-columns:
1fr;
}
.terminal-top{
grid-template-columns:
1fr;
}
#trading-chart{
height:260px;
}
}
/* WORLD CLOCK */
.dashboard-layout{
display:grid;
grid-template-columns:220px 1fr;
gap:20px;
max-width:1600px;
margin:auto;
}
.world-clock{
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:18px;
}
.clock-item{
display:flex;
justify-content:space-between;
padding:15px 0;
border-bottom:1px solid #1f302b;
color:#94a3b8;
}
.clock-item strong{
color:#22c55e;
font-size:18px;
}
@media(max-width:1200px){
.dashboard-layout{
grid-template-columns:1fr;
}
.left-panel{
order:2;
}
}
/* =================================
FINAL DASHBOARD + WORLD CLOCK FIX
================================= */
.hero{
display:block;
padding:20px;
}
.dashboard-layout{
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:20px;
max-width:1600px;
margin:auto;
align-items:start;
}
.left-panel{
display:block;
width:220px;
}
.world-clock{
display:block;
visibility:visible;
opacity:1;
width:100%;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:18px;
}
.trading-wrapper{
display:grid;
grid-template-columns:minmax(600px,1fr) 320px;
gap:20px;
width:100%;
}
.side-panels{
display:flex;
flex-direction:column;
gap:20px;
}
@media(max-width:1200px){
.dashboard-layout{
grid-template-columns:1fr;
}
.left-panel{
width:100%;
}
.trading-wrapper{
grid-template-columns:1fr;
}
}
/* =========================================
XMARKETS FINAL CLEAN DASHBOARD LAYOUT
========================================= */
/* Main hero */
.hero{
display:block;
width:100%;
padding:30px;
}
/* Main three-column dashboard */
.dashboard-layout{
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:20px;
max-width:1600px;
margin:0 auto;
align-items:start;
}
/* LEFT WORLD CLOCK */
.left-panel{
display:block;
width:220px;
}
.world-clock{
display:block !important;
width:100%;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:18px;
color:white;
}
.panel-title h3{
color:white;
font-size:18px;
margin-bottom:15px;
}
.clock-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #1f302b;
}
.clock-item span{
color:#94a3b8;
}
.clock-item strong{
color:#22c55e;
font-size:16px;
}
/* CENTER + RIGHT AREA */
.trading-wrapper{
display:grid;
grid-template-columns:minmax(600px,1fr) 320px;
gap:20px;
width:100%;
}
/* TERMINAL */
.terminal{
width:100%;
min-height:auto;
background:#0b1110;
border:1px solid #1f302b;
border-radius:20px;
padding:22px;
box-sizing:border-box;
}
/* SIDEBAR */
.side-panels{
display:flex;
flex-direction:column;
gap:20px;
width:100%;
}
.market-watch,
.currency-box{
width:100%;
background:#07110f;
border-radius:15px;
}
/* CHART */
#trading-chart{
width:100%;
height:360px;
margin-top:20px;
border-radius:15px;
}
/* BUY SELL */
.trade-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:20px;
}
.trade-buttons button{
height:75px;
}
/* =========================================
LAPTOP
========================================= */
@media(max-width:1300px){
.dashboard-layout{
grid-template-columns:200px minmax(0,1fr);
}
.trading-wrapper{
grid-template-columns:minmax(500px,1fr) 280px;
}
}
/* =========================================
TABLET
========================================= */
@media(max-width:1000px){
.dashboard-layout{
grid-template-columns:1fr;
}
.left-panel{
width:100%;
}
.trading-wrapper{
grid-template-columns:1fr;
}
.side-panels{
display:grid;
grid-template-columns:1fr 1fr;
}
}
/* =========================================
MOBILE
========================================= */
@media(max-width:600px){
.hero{
padding:10px;
}
.side-panels{
display:flex;
}
.trade-controls{
grid-template-columns:1fr;
}
.trade-buttons{
grid-template-columns:1fr;
}
#trading-chart{
height:260px;
}
}
/* =================================
MARKET SESSIONS PANEL
================================= */
.market-sessions{
margin-top:20px;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:18px;
color:white;
}
.session-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
border-bottom:1px solid #1f302b;
font-size:14px;
}
.session-item:last-child{
border-bottom:none;
}
.session-dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
margin-right:8px;
}
.session-dot.open{
background:#22c55e;
}
.session-dot.closed{
background:#ef4444;
}
.open-text{
color:#22c55e;
font-size:13px;
}
.closed-text{
color:#ef4444;
font-size:13px;
}
/* =================================
AI SENTIMENT PANEL
================================= */
.ai-sentiment{
margin-top:20px;
background:#07110f;
border:1px solid #1f302b;
border-radius:15px;
padding:18px;
color:white;
}
.sentiment-symbol{
font-size:18px;
font-weight:bold;
margin-bottom:15px;
}
.sentiment-status{
display:flex;
align-items:center;
gap:10px;
margin-bottom:15px;
}
.sentiment-status strong{
color:#22c55e;
font-size:18px;
}
.sentiment-dot{
height:10px;
width:10px;
border-radius:50%;
background:#22c55e;
}
.confidence{
display:flex;
justify-content:space-between;
color:#94a3b8;
}
.confidence span{
color:#22c55e;
font-size:20px;
font-weight:bold;
}
.sentiment-bar{
height:8px;
background:#17221f;
border-radius:10px;
margin:15px 0;
overflow:hidden;
}
.sentiment-progress{
height:100%;
width:82%;
background:#22c55e;
}
.market-pressure{
display:flex;
justify-content:space-between;
text-align:center;
font-size:13px;
color:#94a3b8;
}
.buy-pressure{
color:#22c55e;
font-size:16px;
font-weight:bold;
}
.sell-pressure{
color:#ef4444;
font-size:16px;
font-weight:bold;
}
/* =================================
XMARKETS FUTURISTIC AUTH PAGE
================================= */
.auth-page{
background:#030605;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
font-family:Arial,Helvetica,sans-serif;
overflow:hidden;
}
.auth-background{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
}
.auth-background:before{
content:"";
position:absolute;
width:500px;
height:500px;
background:#22c55e;
filter:blur(180px);
opacity:.15;
z-index:0;
}
.auth-card{
position:relative;
z-index:1;
width:420px;
background:#07110f;
border:1px solid #1f302b;
border-radius:24px;
padding:40px;
box-shadow:
0 0 40px rgba(34,197,94,.15);
}
.auth-logo{
font-size:34px;
font-weight:bold;
color:white;
margin-bottom:25px;
}
.auth-logo span{
color:#22c55e;
}
.auth-card h1{
color:white;
font-size:32px;
margin-bottom:10px;
}
.auth-card p{
color:#94a3b8;
margin-bottom:30px;
}
.input-group{
margin-bottom:20px;
}
.input-group label{
display:block;
color:#94a3b8;
font-size:14px;
margin-bottom:8px;
}
.input-group input{
width:100%;
padding:15px;
background:#030605;
border:
1px solid #263832;
border-radius:12px;
color:white;
font-size:15px;
outline:none;
}
.input-group input:focus{
border-color:#22c55e;
box-shadow:
0 0 10px rgba(34,197,94,.3);
}
.auth-button{
width:100%;
padding:16px;
border:none;
border-radius:12px;
background:#22c55e;
color:#031007;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}
.auth-button:hover{
transform:translateY(-2px);
box-shadow:
0 10px 30px rgba(34,197,94,.35);
}
.auth-links{
margin-top:25px;
text-align:center;
}
.auth-links a{
color:#22c55e;
text-decoration:none;
}
.auth-features{
display:flex;
gap:20px;
color:#94a3b8;
font-size:14px;
}
@media(max-width:600px){
.auth-card{
width:90%;
padding:30px;
}
.auth-features{
flex-direction:column;
text-align:center;
}
}
/* =====================================
XMARKETS USER DASHBOARD
===================================== */
.dashboard-page{
background:#030605;
min-height:100vh;
color:white;
padding:30px;
}
.dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}
.dashboard-logo{
font-size:28px;
font-weight:bold;
}
.dashboard-logo span{
color:#22c55e;
}
.logout-btn{
background:#ef4444;
color:white;
padding:10px 20px;
border-radius:10px;
text-decoration:none;
}
.summary-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:30px;
}
.summary-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
}
.summary-card h3{
color:#94a3b8;
font-size:14px;
}
.summary-card strong{
font-size:28px;
color:#22c55e;
}
.user-main-grid{
display:grid;
grid-template-columns:1fr 320px;
gap:20px;
}
.user-panel{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
}
.ai-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
}
.ai-card strong{
color:#22c55e;
font-size:24px;
}
@media(max-width:900px){
.summary-cards{
grid-template-columns:1fr;
}
.user-main-grid{
grid-template-columns:1fr;
}
}
.wallet-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
}
.wallet-amount{
font-size:32px;
font-weight:bold;
color:#22c55e;
margin:20px 0;
}
.wallet-actions{
display:flex;
gap:15px;
}
.wallet-actions button{
padding:12px 20px;
border-radius:10px;
border:none;
background:#22c55e;
cursor:pointer;
}
.positions-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
margin-top:25px;
}
.positions-card h3{
color:white;
margin-bottom:20px;
}
.positions-table{
width:100%;
border-collapse:collapse;
color:white;
}
.positions-table th{
text-align:left;
color:#94a3b8;
padding:12px;
}
.positions-table td{
padding:12px;
border-top:1px solid #1f302b;
}
.buy{
color:#22c55e;
}
.sell{
color:#ef4444;
}
.empty-state{
color:#94a3b8;
}
/* TRADE HISTORY */
.history-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
margin-top:25px;
}
.history-card h3{
color:white;
margin-bottom:20px;
}
.history-table{
width:100%;
border-collapse:collapse;
color:white;
}
.history-table th{
text-align:left;
color:#94a3b8;
padding:12px;
}
.history-table td{
padding:12px;
border-top:1px solid #1f302b;
}
/* PORTFOLIO */
.portfolio-card{
background:#07110f;
border:1px solid #1f302b;
border-radius:18px;
padding:25px;
margin-top:25px;
}
.portfolio-table{
width:100%;
border-collapse:collapse;
color:white;
}
.portfolio-table th{
color:#94a3b8;
text-align:left;
padding:12px;
}
.portfolio-table td{
padding:12px;
border-top:1px solid #1f302b;
}
/* =========================================
XMARKETS USER DASHBOARD UI V2
Premium Fintech Layout
========================================= */
/* MAIN PAGE */
.dashboard-page{
background:
radial-gradient(
circle at top right,
rgba(34,197,94,.08),
transparent 35%
),
#030605;
min-height:100vh;
padding:40px;
}
/* HEADER */
.dashboard-header{
background:#07110f;
border:1px solid #1f302b;
border-radius:20px;
padding:20px 30px;
margin-bottom:30px;
box-shadow:
0 0 25px rgba(34,197,94,.05);
}
.dashboard-logo{
font-size:32px;
letter-spacing:.5px;
}
.logout-btn{
background:#ef4444;
transition:.3s;
}
.logout-btn:hover{
transform:translateY(-2px);
opacity:.85;
}
/* SUMMARY CARDS */
.summary-cards{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:25px;
margin-bottom:30px;
}
.summary-card{
position:relative;
overflow:hidden;
background:
linear-gradient(
145deg,
#0b1110,
#07110f
);
border:1px solid #1f302b;
border-radius:22px;
padding:30px;
transition:.3s;
}
.summary-card:hover{
transform:translateY(-5px);
border-color:#22c55e;
box-shadow:
0 10px 35px rgba(34,197,94,.12);
}
.summary-card h3{
font-size:14px;
color:#94a3b8;
text-transform:uppercase;
letter-spacing:1px;
}
.summary-card strong{
display:block;
margin-top:15px;
font-size:32px;
color:#22c55e;
}
/* MAIN DASHBOARD GRID */
.user-main-grid{
display:grid;
grid-template-columns:
minmax(0,3fr)
330px;
gap:25px;
align-items:start;
}
.user-panel,
.ai-card{
background:
linear-gradient(
145deg,
#0b1110,
#050505
);
border:
1px solid #1f302b;
border-radius:22px;
padding:25px;
box-shadow:
0 0 30px rgba(34,197,94,.04);
}
/* AI PANEL */
.ai-card h2{
font-size:20px;
margin-bottom:25px;
}
.ai-card strong{
display:block;
margin-top:10px;
color:#22c55e;
font-size:30px;
}
/* COMPONENT SPACING */
.positions-card,
.history-card,
.portfolio-card,
.performance-card{
margin-top:30px;
box-shadow:
0 0 30px rgba(34,197,94,.05);
}
/* TABLE UPGRADE */
.positions-table,
.history-table,
.portfolio-table{
border-radius:15px;
overflow:hidden;
}
.positions-table tr:hover,
.history-table tr:hover,
.portfolio-table tr:hover{
background:#10251b;
}
/* PERFORMANCE CARD */
.performance-card{
background:
linear-gradient(
145deg,
#0b1110,
#07110f
);
border:1px solid #1f302b;
border-radius:22px;
padding:25px;
}
.performance-grid{
display:grid;
grid-template-columns:
repeat(5,1fr);
gap:15px;
}
.performance-item{
background:#050505;
border:
1px solid #1f302b;
padding:20px;
border-radius:15px;
}
.performance-item span{
display:block;
color:#94a3b8;
font-size:13px;
margin-bottom:10px;
}
.performance-item strong{
font-size:22px;
color:#22c55e;
}
/* MOBILE RESPONSIVE */
@media(max-width:1100px){
.user-main-grid{
grid-template-columns:1fr;
}
.performance-grid{
grid-template-columns:
repeat(2,1fr);
}
}
@media(max-width:700px){
.dashboard-page{
padding:15px;
}
.summary-cards{
grid-template-columns:1fr;
}
.performance-grid{
grid-template-columns:1fr;
}
.dashboard-header{
padding:20px;
}
}
/* =========================================
XMARKETS DASHBOARD ALIGNMENT PATCH
========================================= */
/* Dashboard container */
.dashboard-page{
max-width:1600px;
margin:auto;
}
/* Header alignment */
.dashboard-header{
display:flex;
justify-content:space-between;
align-items:center;
}
/* Summary cards */
.summary-cards{
grid-template-columns:
repeat(3,1fr);
}
.summary-card{
min-height:130px;
}
/* Main dashboard area */
.user-main-grid{
display:grid;
grid-template-columns:
minmax(0,1fr)
320px;
gap:20px;
align-items:start;
}
/* Prevent terminal overflow */
.user-panel{
min-width:0;
overflow:hidden;
}
/* AI panel */
.ai-card{
width:100%;
min-height:250px;
}
/* All lower sections full width */
.positions-card,
.history-card,
.portfolio-card,
.performance-card{
width:100%;
}
/* Tables responsive */
.positions-table,
.history-table,
.portfolio-table{
overflow-x:auto;
display:block;
}
/* Performance alignment */
.performance-grid{
grid-template-columns:
repeat(5,1fr);
}
@media(max-width:1200px){
.user-main-grid{
grid-template-columns:
1fr;
}
.performance-grid{
grid-template-columns:
repeat(2,1fr);
}
}
@media(max-width:700px){
.summary-cards{
grid-template-columns:
1fr;
}
.performance-grid{
grid-template-columns:
1fr;
}
}
/* =================================
TRADING TERMINAL ALIGNMENT FIX
================================= */
.user-terminal{
width:100%;
overflow:hidden;
}
.terminal-chart{
width:100%;
height:420px;
margin-top:20px;
border-radius:16px;
overflow:hidden;
}
#user-trading-chart{
width:100%;
height:100%;
}
.trade-input{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:15px;
margin-top:20px;
}
.trade-input label{
color:#94a3b8;
font-size:13px;
}
.trade-input input{
width:100%;
background:#050807;
border:1px solid #1f302b;
color:white;
padding:12px;
border-radius:10px;
}
.trade-action{
display:flex;
gap:15px;
margin-top:20px;
}
.trade-action form{
flex:1;
}
.trade-action button{
width:100%;
padding:14px;
border-radius:12px;
font-weight:700;
}
@media(max-width:900px){
.trade-input{
grid-template-columns:1fr;
}
}
/* =================================
DASHBOARD STRUCTURE V2
================================= */
.dashboard-trading-row{
display:grid;
grid-template-columns:
minmax(0,1fr)
320px;
gap:25px;
align-items:start;
}
.dashboard-section{
width:100%;
margin-top:30px;
}
@media(max-width:1000px){
.dashboard-trading-row{
grid-template-columns:1fr;
}
}
.terminal-chart{
height:520px;
}
#user-trading-chart{
height:100%;
width:100%;
}
.ai-card{
min-height:520px;
}
/* ===================================
XMARKETS TERMINAL V2
=================================== */
.terminal-v2{
padding:25px;
}
.terminal-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.terminal-top h2{
margin:8px 0;
font-size:24px;
}
.terminal-price{
color:#94a3b8;
}
.terminal-price strong{
color:#22c55e;
font-size:28px;
}
.market-status{
background:#07110f;
border:1px solid #1f302b;
padding:18px;
border-radius:15px;
text-align:center;
}
.market-status span{
display:block;
font-size:12px;
color:#94a3b8;
}
.market-status strong{
color:#22c55e;
font-size:20px;
}
.order-panel{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
margin-top:25px;
}
.input-group label{
display:block;
color:#94a3b8;
font-size:13px;
margin-bottom:8px;
}
.input-group input{
width:100%;
background:#050807;
border:1px solid #1f302b;
padding:12px;
border-radius:10px;
color:white;
}
.trade-action{
display:flex;
gap:20px;
margin-top:25px;
}
.trade-action form{
flex:1;
}
.sell-btn,
.buy-btn{
width:100%;
padding:15px;
border-radius:12px;
font-weight:700;
cursor:pointer;
}
.sell-btn{
background:#ef4444;
color:white;
}
.buy-btn{
background:#22c55e;
color:black;
}
@media(max-width:900px){
.order-panel{
grid-template-columns:1fr;
}
.terminal-top{
flex-direction:column;
align-items:flex-start;
gap:15px;
}
}
/* ORDER PREVIEW */
.order-preview{
margin-top:25px;
background:#050807;
border:1px solid #1f302b;
border-radius:16px;
padding:20px;
}
.order-preview h3{
font-size:15px;
color:#94a3b8;
margin-bottom:15px;
}
.preview-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #1f302b;
}
.preview-row:last-child{
border-bottom:none;
}
.preview-row span{
color:#94a3b8;
}
.preview-row strong{
color:#22c55e;
}
💼 Investment Engine
Grow your capital with AI-assisted trading or manage it yourself.
Investment Projection
Initial Investment
$100
Estimated Value
$158.69
Projected Profit
+$58.69
/* =================================
TRADING + INVESTMENT LAYOUT
================================= */
.dashboard-trading-row{
display:grid;
grid-template-columns:
minmax(0,3fr)
380px;
gap:25px;
align-items:start;
}
.investment-panel{
width:100%;
}
@media(max-width:1200px){
.dashboard-trading-row{
grid-template-columns:1fr;
}
}
/* INVESTMENT TYPE */
.investment-options label{
display:flex;
align-items:center;
gap:10px;
background:#050807;
border:1px solid #1f302b;
padding:15px;
border-radius:12px;
cursor:pointer;
margin-bottom:10px;
}
.investment-options small{
display:block;
color:#94a3b8;
margin-bottom:15px;
padding-left:10px;
}
/* =================================
ACTIVE INVESTMENTS
================================= */
.active-investments-card{
background:
linear-gradient(
145deg,
#0b1110,
#050807
);
border:1px solid #1f302b;
border-radius:22px;
padding:25px;
}
.active-investments-card h2{
margin-bottom:8px;
}
.investment-list{
margin-top:20px;
}
.active-investment-item{
background:#050807;
border:1px solid #1f302b;
border-radius:16px;
padding:20px;
}
.investment-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}
.status-active{
background:#22c55e;
color:#000;
padding:5px 12px;
border-radius:20px;
font-size:12px;
font-weight:700;
}
.investment-row{
display:flex;
justify-content:space-between;
padding:12px 0;
border-bottom:1px solid #1f302b;
}
.investment-row:last-child{
border:none;
}
.investment-row span{
color:#94a3b8;
}
.profit{
color:#22c55e;
}
/* ==============================
XMARKETS TERMINAL V2
============================== */
.x-terminal{
background:#050807;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:20px;
box-shadow:
0 0 40px rgba(0,255,120,.08);
}
.terminal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.terminal-title{
font-weight:700;
letter-spacing:1px;
}
.live-dot{
display:inline-block;
width:8px;
height:8px;
background:#22c55e;
border-radius:50%;
margin-right:8px;
animation:pulse 1.5s infinite;
}
@keyframes pulse{
50%{
opacity:.3;
}
}
.online,
.bullish{
color:#22c55e;
}
.asset-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:20px;
}
.asset-box,
.market-stat{
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
padding:18px;
border-radius:14px;
}
.live-price{
font-size:28px;
font-weight:800;
margin-top:8px;
}
.terminal-grid{
display:grid;
grid-template-columns:
220px 1fr 280px;
gap:15px;
}
.terminal-panel{
background:
rgba(255,255,255,.025);
border:
1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:15px;
}
.panel-title{
font-size:13px;
letter-spacing:1px;
opacity:.7;
margin-bottom:15px;
}
.market-item{
display:flex;
justify-content:space-between;
padding:12px;
border-radius:10px;
margin-bottom:8px;
cursor:pointer;
}
.market-item:hover,
.market-item.active{
background:
rgba(34,197,94,.12);
}
.chart-panel{
min-height:420px;
}
#user-trading-chart{
height:360px;
}
.chart-toolbar button{
background:#0d1512;
border:1px solid rgba(255,255,255,.08);
color:white;
padding:6px 10px;
margin-right:5px;
border-radius:8px;
cursor:pointer;
}
.trade-input{
width:100%;
background:#080c0b;
border:
1px solid rgba(255,255,255,.1);
padding:12px;
color:white;
border-radius:10px;
margin-bottom:12px;
}
.risk-box{
display:flex;
justify-content:space-between;
padding:12px;
background:
rgba(34,197,94,.08);
border-radius:10px;
margin-bottom:15px;
}
.buy-btn,
.sell-btn{
width:100%;
padding:14px;
border:none;
border-radius:10px;
margin-top:10px;
font-weight:700;
cursor:pointer;
}
.buy-btn{
background:#22c55e;
color:#021006;
}
.sell-btn{
background:#ef4444;
color:white;
}
.ai-terminal-panel{
margin-top:20px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
padding:20px;
border-radius:14px;
}
.ai-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
.ai-grid div{
background:#080d0b;
padding:15px;
border-radius:12px;
}
@media(max-width:1000px){
.terminal-grid{
grid-template-columns:1fr;
}
.asset-bar,
.ai-grid{
grid-template-columns:1fr 1fr;
}
}
.price-up{
color:#22c55e!important;
text-shadow:0 0 20px rgba(34,197,94,.8);
transition:.3s;
}
.price-down{
color:#ef4444!important;
text-shadow:0 0 20px rgba(239,68,68,.8);
transition:.3s;
}
.chart-toolbar button.active{
background:#22c55e;
color:#020806;
}.positions-terminal{
margin-top:25px;
background:
rgba(255,255,255,.03);
border:
1px solid rgba(255,255,255,.08);
border-radius:18px;
padding:20px;
}
.positions-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
.live-status{
color:#22c55e;
font-size:13px;
}
.position-card{
background:#080d0b;
border:
1px solid rgba(255,255,255,.08);
border-radius:15px;
padding:18px;
margin-bottom:15px;
transition:.3s;
}
.position-card:hover{
border-color:#22c55e;
}
.position-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.symbol{
font-size:18px;
font-weight:700;
}
.type{
padding:5px 10px;
border-radius:8px;
margin-left:10px;
font-size:12px;
}
.type.buy{
background:rgba(34,197,94,.15);
color:#22c55e;
}
.type.sell{
background:rgba(239,68,68,.15);
color:#ef4444;
}
.profit{
color:#22c55e;
font-size:20px;
font-weight:700;
}
.loss{
color:#ef4444;
font-size:20px;
font-weight:700;
}
.position-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:20px;
}
.position-grid label,
.risk-levels span{
display:block;
font-size:11px;
opacity:.6;
}
.position-grid strong{
display:block;
margin-top:5px;
}
.risk-levels{
display:flex;
gap:40px;
margin-top:20px;
}
.position-actions{
display:flex;
gap:10px;
margin-top:20px;
}
.modify-btn,
.close-btn{
padding:10px 20px;
border-radius:10px;
cursor:pointer;
border:none;
}
.modify-btn{
background:#1f2937;
color:white;
}
.close-btn{
background:#ef4444;
color:white;
}
.empty-position{
text-align:center;
padding:30px;
opacity:.6;
}
@media(max-width:800px){
.position-grid{
grid-template-columns:1fr 1fr;
}
}
/* XMarkets Dashboard Upgrade */
.xmarkets-dashboard { max-width: 1500px; margin:auto; padding:24px; }
.xmarkets-dashboard .dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.dashboard-user { display:flex; gap:18px; align-items:center; }
.summary-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.summary-card { padding:22px; min-height:120px; }
.summary-card h3 { margin:0 0 12px; }
.summary-card strong { display:block; font-size:28px; }
.summary-card small { opacity:.65; }
.status-online { color:#39d98a; }
.dashboard-workspace { display:grid; grid-template-columns:minmax(0,3fr) minmax(300px,1fr); gap:20px; align-items:start; }
.trading-workspace, .investment-workspace { min-width:0; }
.dashboard-section { margin-top:22px; }
@media(max-width:1100px){ .summary-cards{grid-template-columns:repeat(2,1fr);} .dashboard-workspace{grid-template-columns:1fr;} }
@media(max-width:600px){ .summary-cards{grid-template-columns:1fr;} .dashboard-header{flex-direction:column;gap:15px;} }
/* ==========================================
XMARKETS LIVE POSITION CARDS
========================================== */
#xm-open-positions{
display:flex;
flex-direction:column;
gap:12px;
max-height:420px;
overflow-y:auto;
}
.position-item{
background:#07110f;
border:1px solid #1f302b;
border-radius:14px;
padding:16px;
width:100%;
box-sizing:border-box;
}
.position-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}
.position-symbol{
font-size:18px;
font-weight:700;
color:#ffffff;
}
.position-engine{
font-size:12px;
color:#c8a951;
}
.position-side{
display:flex;
justify-content:space-between;
margin-bottom:12px;
color:#b8c4c0;
}
.trade-type{
padding:5px 12px;
border-radius:20px;
background:#0d3327;
color:#39d98a;
font-weight:700;
}
.position-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-bottom:15px;
}
.position-meta div{
background:#0b1714;
padding:10px;
border-radius:10px;
font-size:12px;
color:#8e9995;
}
.position-meta strong{
display:block;
margin-top:5px;
color:white;
font-size:14px;
}
.position-meta .positive{
color:#39d98a;
}
.position-meta .negative{
color:#ff6b6b;
}
.close-position-btn{
width:100%;
border:none;
padding:10px;
border-radius:10px;
cursor:pointer;
background:#241111;
color:#ff7777;
font-weight:700;
}/* ==========================================================
XMARKETS AUTH THEME — LOGIN + SIGNUP
Add this block at the VERY END of assets/css/style.css
It intentionally overrides the older green auth styling.
========================================================== */
.auth-page {
background:
radial-gradient(circle at 50% 15%, rgba(212, 175, 55, 0.10), transparent 32%),
radial-gradient(circle at 15% 80%, rgba(212, 175, 55, 0.045), transparent 28%),
#050505 !important;
color: #f5f1e8;
}
.auth-background {
width: min(100%, 520px);
padding: 24px;
box-sizing: border-box;
}
.auth-background::before {
width: 520px !important;
height: 520px !important;
background: #d4af37 !important;
filter: blur(190px) !important;
opacity: 0.10 !important;
}
.auth-card {
width: min(100%, 420px) !important;
box-sizing: border-box;
background:
linear-gradient(145deg, rgba(255,255,255,.045), rgba(5,5,5,.96)) !important;
border: 1px solid rgba(212,175,55,.22) !important;
border-radius: 22px !important;
padding: 38px !important;
box-shadow:
0 24px 80px rgba(0,0,0,.58),
0 0 34px rgba(212,175,55,.07) !important;
}
.auth-logo {
color: #f7f2e7 !important;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 32px !important;
margin-bottom: 28px !important;
}
.auth-logo span {
color: #d4af37 !important;
}
.auth-card h1 {
color: #ffffff !important;
font-size: 32px !important;
letter-spacing: -.5px;
}
.auth-card p {
color: #9c9c9c !important;
}
.input-group label {
color: #a8a8a8 !important;
}
.input-group input {
width: 100%;
box-sizing: border-box;
background: #090909 !important;
color: #f5f5f5 !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 11px !important;
outline: none;
caret-color: #d4af37;
}
.input-group input::placeholder {
color: #666 !important;
}
.input-group input:focus {
border-color: rgba(212,175,55,.60) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,.08) !important;
}
/* Browser autofill was making the fields appear pale blue. */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
-webkit-text-fill-color: #f5f5f5 !important;
-webkit-box-shadow: 0 0 0 1000px #090909 inset !important;
box-shadow: 0 0 0 1000px #090909 inset !important;
transition: background-color 9999s ease-in-out 0s;
}
.auth-button {
width: 100%;
border: 1px solid rgba(212,175,55,.60) !important;
border-radius: 12px !important;
background: linear-gradient(135deg, #ead19a, #d4af37) !important;
color: #050505 !important;
font-weight: 900 !important;
letter-spacing: .5px;
box-shadow: 0 0 20px rgba(212,175,55,.12) !important;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.auth-button:hover {
transform: translateY(-2px);
filter: brightness(1.04);
box-shadow: 0 0 30px rgba(212,175,55,.25) !important;
}
.auth-links {
color: #777 !important;
}
.auth-links a {
color: #e7d38a !important;
}
.auth-links a:hover {
color: #f4e5ad !important;
}
.auth-features {
color: #8c8c8c !important;
}
@media (max-width: 600px) {
.auth-background {
padding: 16px;
}
.auth-card {
padding: 30px 24px !important;
}
}