* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
}
body {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
background:
#080c13;
color:
#e8edf5;
}
a {
color: inherit;
text-decoration: none;
}
/* LOGIN */
.login-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle at 50% 0%,
#16243a,
#080c13 48%
);
}
.login-shell {
width: 100%;
max-width: 430px;
padding: 24px;
}
.brand-mark {
width: 68px;
height: 68px;
margin:
0 auto
-27px;
position: relative;
z-index: 2;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 900;
color: #07101d;
background:
linear-gradient(
135deg,
#75ddff,
#9dfcb7
);
box-shadow:
0 15px 40px
rgba(90,220,255,.25);
}
.login-card {
background:
rgba(
17,
23,
34,
.96
);
border:
1px solid #202c40;
border-radius:
22px;
padding:
55px
32px
32px;
box-shadow:
0 40px 100px
rgba(0,0,0,.42);
}
.brand-title {
text-align: center;
font-size:
29px;
font-weight:
900;
letter-spacing:
3px;
}
.brand-title span {
color:
#77dcff;
}
.brand-subtitle {
text-align:
center;
color:
#74839a;
font-size:
13px;
margin:
8px 0
30px;
}
label {
display:
block;
color:
#9aa8ba;
font-size:
12px;
font-weight:
700;
margin:
18px 0
8px;
}
.input {
width:
100%;
padding:
14px 15px;
color:
white;
background:
#0d131e;
border:
1px solid
#263247;
border-radius:
10px;
outline:
none;
}
.input:focus {
border-color:
#6dd8ff;
box-shadow:
0 0 0
3px
rgba(109,216,255,.08);
}
.login-button {
width:
100%;
margin-top:
24px;
padding:
14px;
border:
0;
border-radius:
10px;
cursor:
pointer;
font-weight:
900;
letter-spacing:
1px;
color:
#07101d;
background:
linear-gradient(
90deg,
#73dcff,
#92f0bd
);
}
.secure-note {
text-align:
center;
color:
#55657b;
font-size:
11px;
margin-top:
24px;
}
.alert {
background:
rgba(
255,
81,
110,
.12
);
border:
1px solid
rgba(
255,
81,
110,
.4
);
color:
#ff899c;
border-radius:
9px;
padding:
11px;
font-size:
12px;
}
/* APP */
.topbar {
height:
68px;
position:
fixed;
top:
0;
left:
0;
right:
0;
z-index:
20;
display:
flex;
align-items:
center;
justify-content:
space-between;
padding:
0 25px;
background:
rgba(
10,
15,
24,
.97
);
border-bottom:
1px solid
#1b2738;
}
.top-brand {
font-weight:
900;
letter-spacing:
2px;
font-size:
19px;
}
.top-brand span {
color:
#74dfff;
}
.user-box {
display:
flex;
align-items:
center;
gap:
12px;
font-size:
13px;
}
.role {
color:
#75dfff;
font-size:
10px;
border:
1px solid
#285269;
border-radius:
20px;
padding:
4px 7px;
}
.logout {
color:
#8998ab;
}
.layout {
display:
flex;
padding-top:
68px;
min-height:
100vh;
}
.sidebar {
width:
220px;
position:
fixed;
left:
0;
top:
68px;
bottom:
0;
padding:
22px 12px;
background:
#0b111b;
border-right:
1px solid
#182337;
}
.nav {
display:
block;
padding:
11px 14px;
margin:
3px 0;
border-radius:
8px;
color:
#8999ae;
font-size:
13px;
}
.nav:hover,
.nav.active {
background:
#152132;
color:
#88e3ff;
}
.main {
width:
calc(
100% - 220px
);
margin-left:
220px;
padding:
30px;
max-width:
1500px;
}
.page-heading {
display:
flex;
justify-content:
space-between;
align-items:
center;
margin-bottom:
26px;
}
.page-heading h1 {
margin:
0;
font-size:
27px;
}
.page-heading p {
color:
#718198;
margin:
6px 0 0;
font-size:
13px;
}
.mode-pill {
padding:
8px 14px;
border-radius:
20px;
background:
#352b15;
color:
#ffd66d;
font-weight:
800;
font-size:
11px;
}
.cards {
display:
grid;
grid-template-columns:
repeat(
4,
minmax(
0,
1fr
)
);
gap:
14px;
margin-bottom:
14px;
}
.card,
.panel {
background:
#101722;
border:
1px solid
#1d2a3d;
border-radius:
13px;
}
.card {
padding:
20px;
}
.card span {
display:
block;
color:
#75859a;
font-size:
11px;
text-transform:
uppercase;
letter-spacing:
.7px;
}
.card strong {
display:
block;
font-size:
21px;
margin:
9px 0
4px;
}
.card small {
color:
#718198;
}
.warning {
color:
#f1c860 !important;
}
.danger {
color:
#ff7189 !important;
}
.grid-two {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
14px;
margin-bottom:
14px;
}
.panel {
padding:
20px;
}
.panel-title {
font-weight:
800;
margin-bottom:
18px;
}
.agent-status {
display:
flex;
gap:
15px;
align-items:
center;
color:
#7d8da2;
}
.big-number {
font-size:
31px;
color:
white;
font-weight:
900;
}
.status-row {
display:
flex;
justify-content:
space-between;
padding:
9px 0;
border-bottom:
1px solid
#192536;
color:
#8a9aaf;
font-size:
12px;
}
.green {
color:
#72e6ac;
}
.red {
color:
#ff738b;
}
.empty {
padding:
20px;
border:
1px dashed
#26364c;
border-radius:
9px;
color:
#73849b;
font-size:
13px;
}
.empty a {
color:
#77ddff;
display:
block;
margin-top:
8px;
}
.signals-panel {
margin-bottom:
40px;
}
.table-wrap {
overflow-x:
auto;
}
table {
width:
100%;
border-collapse:
collapse;
font-size:
13px;
}
th {
text-align:
left;
color:
#65758c;
font-size:
10px;
text-transform:
uppercase;
letter-spacing:
.8px;
padding:
10px;
}
td {
padding:
13px 10px;
border-top:
1px solid
#1b283a;
}
/* MOBILE */
@media (
max-width: 900px
) {
.sidebar {
display:
none;
}
.main {
width:
100%;
margin-left:
0;
padding:
20px;
}
.cards {
grid-template-columns:
1fr 1fr;
}
.grid-two {
grid-template-columns:
1fr;
}
}
@media (
max-width: 560px
) {
.cards {
grid-template-columns:
1fr;
}
.topbar {
padding:
0 14px;
}
.role {
display:
none;
}
}
/* ==========================================================
WOLVER EXECUTION AGENTS
========================================================== */
.action-button {
display:
inline-block;
margin-top:
16px;
padding:
12px 18px;
border:
0;
border-radius:
9px;
cursor:
pointer;
font-weight:
900;
letter-spacing:
.5px;
background:
linear-gradient(
90deg,
#72dcff,
#91efbc
);
color:
#07101d;
}
.pair-code {
margin-top:
22px;
padding:
22px;
text-align:
center;
font-family:
Consolas,
monospace;
font-size:
27px;
font-weight:
900;
letter-spacing:
3px;
color:
#8de8ff;
background:
#0a111c;
border:
1px solid
#29435d;
border-radius:
11px;
}
.pair-expiry {
text-align:
center;
margin-top:
9px;
color:
#f0ca6c;
font-size:
10px;
font-weight:
800;
letter-spacing:
1px;
}