* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
background: #0b0e14;
color: #e8ecf2;
}
body {
min-height: 100vh;
}
.layout {
display: flex;
min-height: 100vh;
}
/* SIDEBAR */
.sidebar {
position: fixed;
width: 230px;
height: 100vh;
padding: 26px 18px;
background: #10141d;
border-right:
1px solid #242a36;
display: flex;
flex-direction: column;
}
/* UNIFIED_SIDEBAR_SCROLL_20261012 */
.sidebar {
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar > nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}
.sidebar > .logo,
.sidebar > .sidebar-bottom {
flex-shrink: 0;
}
.logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 26px;
padding: 0;
}
.sidebar-logo {
display: block;
width: 184px;
max-width: 100%;
height: auto;
border-radius: 10px;
object-fit: contain;
}
.logo-main {
font-size: 22px;
font-weight: 800;
letter-spacing: 3px;
}
.logo-sub {
margin-top: 3px;
font-size: 11px;
letter-spacing: 5px;
color: #6f7d91;
}
nav {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav-item {
display: block;
padding: 12px 14px;
border-radius: 8px;
color: #8f9bae;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.nav-item.active {
background: #1a2230;
color: #ffffff;
}
.nav-item.disabled {
opacity: 0.45;
}
.sidebar-bottom {
margin-top: auto;
padding: 15px;
border-top:
1px solid #242a36;
font-size: 14px;
}
.admin-label {
display: inline-block;
margin-right: 8px;
padding: 3px 7px;
border-radius: 5px;
background: #262f3d;
color: #aab5c4;
font-size: 9px;
letter-spacing: 1px;
}
/* MAIN */
.main {
margin-left: 230px;
width:
calc(100% - 230px);
padding: 34px;
}
.topbar {
display: flex;
justify-content:
space-between;
align-items: center;
margin-bottom: 28px;
}
h1 {
margin: 0;
font-size: 28px;
font-weight: 700;
}
.topbar p {
margin:
7px 0 0 0;
color: #78869a;
font-size: 14px;
}
.system-status {
display: flex;
align-items: center;
gap: 9px;
padding:
10px 14px;
background: #111822;
border:
1px solid #263040;
border-radius: 8px;
color: #aab6c7;
font-size: 13px;
}
.status-dot {
width: 8px;
height: 8px;
background: #42c985;
border-radius: 50%;
box-shadow:
0 0 10px #42c985;
}
/* SUMMARY */
.summary {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap: 16px;
margin-bottom: 22px;
}
.summary-card {
padding: 18px 20px;
background: #111620;
border:
1px solid #252c38;
border-radius: 10px;
}
.summary-title {
margin-bottom: 8px;
color: #738196;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
.summary-value {
font-size: 25px;
font-weight: 700;
}
.summary-value.small {
font-size: 18px;
}
/* STRATEGIES */
.strategy-grid {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 18px;
}
.strategy-card {
padding: 21px;
background: #111620;
border:
1px solid #252c38;
border-radius: 12px;
}
.strategy-header {
display: flex;
justify-content:
space-between;
align-items:
flex-start;
}
.coin-name {
font-size: 24px;
font-weight: 800;
}
.coin-symbol {
margin-top: 5px;
color: #707f93;
font-size: 12px;
}
.engine-badge {
display: flex;
align-items: center;
gap: 7px;
padding:
6px 9px;
border-radius: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.7px;
}
.engine-badge span {
width: 6px;
height: 6px;
border-radius: 50%;
}
.engine-badge.running {
background:
rgba(66, 201, 133, 0.10);
color: #55d994;
}
.engine-badge.running span {
background: #55d994;
}
.engine-badge.stopped {
background:
rgba(237, 92, 92, 0.10);
color: #ed6b6b;
}
.engine-badge.stopped span {
background: #ed6b6b;
}
/* POSITION */
.position-area {
display: flex;
justify-content:
space-between;
margin-top: 25px;
margin-bottom: 21px;
}
.label {
margin-bottom: 5px;
color: #687589;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
}
.position {
font-size: 22px;
font-weight: 800;
}
.position-flat {
color: #8793a4;
}
.position-long {
color: #47d491;
}
.position-short {
color: #f06f73;
}
.right {
text-align: right;
}
.value {
font-size: 14px;
font-weight: 700;
}
/* DATA */
.data-grid {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 11px;
}
.data-grid div {
padding: 11px 12px;
background: #0c1119;
border-radius: 7px;
}
.data-grid span,
.settings-grid span {
display: block;
margin-bottom: 5px;
color: #66758a;
font-size: 10px;
}
.data-grid strong {
font-size: 13px;
font-weight: 600;
}
.separator {
height: 1px;
margin:
21px 0 17px 0;
background: #252c38;
}
/* SETTINGS */
.settings-title {
margin-bottom: 12px;
color: #66758a;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
}
.settings-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 8px;
}
.settings-grid div {
padding: 9px;
background: #0d121a;
border-radius: 6px;
}
.settings-grid strong {
font-size: 12px;
}
/* FOOTER */
.card-footer {
display: flex;
justify-content:
space-between;
margin-top: 18px;
padding-top: 13px;
border-top:
1px solid #222a35;
color: #67758a;
font-size: 10px;
}
.card-footer strong {
color: #8390a3;
font-weight: 600;
}
/* RESPONSIVE */
@media (
max-width: 1050px
) {
.strategy-grid {
grid-template-columns: 1fr;
}
.summary {
grid-template-columns:
repeat(2, 1fr);
}
}
@media (
max-width: 700px
) {
.sidebar {
display: none;
}
.main {
margin-left: 0;
width: 100%;
padding: 18px;
}
.summary {
grid-template-columns:
repeat(2, 1fr);
}
}
/* STRATEGIEN-SEITE */
.strategy-table-card {
padding: 22px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.strategy-table-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 18px;
}
.strategy-table-title {
font-size: 19px;
font-weight: 700;
}
.future-button {
padding: 10px 14px;
border: 1px solid #2c3747;
border-radius: 8px;
background: #18202c;
color: #7f8da1;
font-size: 12px;
font-weight: 700;
cursor: not-allowed;
opacity: 0.65;
}
.table-scroll {
width: 100%;
overflow-x: auto;
}
.strategy-table {
width: 100%;
min-width: 1030px;
border-collapse: collapse;
}
.strategy-table th {
padding: 11px 12px;
border-bottom: 1px solid #303846;
color: #6f7d91;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.7px;
text-align: left;
white-space: nowrap;
}
.strategy-table td {
padding: 15px 12px;
border-bottom: 1px solid #202733;
color: #c7cfda;
font-size: 12px;
vertical-align: middle;
}
.strategy-table tbody tr:not(.strategy-detail-row):hover {
background: #141b25;
}
.table-coin {
color: #ffffff;
font-size: 15px;
font-weight: 800;
}
.table-sub {
margin-top: 4px;
color: #68778b;
font-size: 10px;
}
.status-pill {
display: inline-flex;
align-items: center;
padding: 5px 8px;
border-radius: 6px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.6px;
white-space: nowrap;
}
.active-pill,
.online-pill {
background: rgba(66, 201, 133, 0.10);
color: #55d994;
}
.inactive-pill,
.offline-pill {
background: rgba(237, 92, 92, 0.10);
color: #ed6b6b;
}
.table-position {
font-weight: 800;
}
.table-position-flat {
color: #8793a4;
}
.table-position-long {
color: #47d491;
}
.table-position-short {
color: #f06f73;
}
.strategy-detail-row td {
padding-top: 8px;
padding-bottom: 13px;
background: #0d121a;
}
.strategy-detail-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.strategy-detail-grid > div {
padding: 8px 10px;
border-radius: 6px;
background: #101720;
}
.strategy-detail-grid span {
display: block;
margin-bottom: 4px;
color: #657388;
font-size: 9px;
}
.strategy-detail-grid strong {
color: #9aa8ba;
font-size: 10px;
font-weight: 600;
}
.strategy-page-note {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #222a35;
color: #68778b;
font-size: 11px;
}
@media (max-width: 1050px) {
.strategy-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.strategy-table-head {
align-items: flex-start;
flex-direction: column;
}
.strategy-detail-grid {
grid-template-columns: 1fr;
}
}
/* TRADES-SEITE */
.open-trades-card,
.trades-card {
padding: 22px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.open-trades-card {
margin-bottom: 18px;
}
.open-trades-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.open-trade-item {
padding: 13px 14px;
background: #0c1119;
border: 1px solid #202936;
border-radius: 8px;
color: #8897aa;
font-size: 11px;
}
.open-trade-item > div + div {
margin-top: 7px;
}
.open-trade-item strong {
margin-right: 8px;
color: #ffffff;
font-size: 15px;
}
.trades-card-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 18px;
}
.trade-legend {
color: #657388;
font-size: 10px;
}
.trades-table {
width: 100%;
min-width: 1250px;
border-collapse: collapse;
}
.trades-table th {
padding: 11px 12px;
border-bottom: 1px solid #303846;
color: #6f7d91;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
text-align: left;
white-space: nowrap;
}
.trades-table td {
padding: 14px 12px;
border-bottom: 1px solid #202733;
color: #b8c2cf;
font-size: 11px;
vertical-align: middle;
white-space: nowrap;
}
.trade-main-row {
cursor: pointer;
}
.trade-main-row:hover {
background: #141b25;
}
.live-pill {
background: rgba(66, 201, 133, 0.12);
color: #55d994;
}
.shadow-pill {
background: rgba(94, 135, 224, 0.12);
color: #7aa4ff;
}
.trade-side {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
}
.trade-side-long {
color: #47d491;
}
.trade-side-short {
color: #f06f73;
}
.pnl-positive {
color: #55d994 !important;
font-weight: 800;
}
.pnl-negative {
color: #ed6b6b !important;
font-weight: 800;
}
.trade-detail-row td {
padding: 11px 12px 16px 12px;
background: #0c1119;
}
.trade-detail-hidden {
display: none;
}
.trade-detail-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.trade-detail-grid > div {
padding: 9px 10px;
background: #101720;
border-radius: 6px;
}
.trade-detail-grid span {
display: block;
margin-bottom: 4px;
color: #657388;
font-size: 9px;
}
.trade-detail-grid strong {
color: #9aa8ba;
font-size: 10px;
font-weight: 600;
}
.empty-table {
padding: 35px !important;
color: #68778b !important;
text-align: center;
}
@media (max-width: 1050px) {
.open-trades-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trade-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.open-trades-grid,
.trade-detail-grid {
grid-template-columns: 1fr;
}
.trades-card-head {
align-items: flex-start;
flex-direction: column;
}
}
/* BENUTZER-SEITE */
.users-card {
padding: 22px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.users-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 18px;
}
.users-table {
width: 100%;
min-width: 980px;
border-collapse: collapse;
}
.users-table th {
padding: 11px 12px;
border-bottom: 1px solid #303846;
color: #6f7d91;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.7px;
text-align: left;
white-space: nowrap;
}
.users-table td {
padding: 15px 12px;
border-bottom: 1px solid #202733;
color: #c7cfda;
font-size: 12px;
vertical-align: middle;
}
.user-main-row:hover {
background: #141b25;
}
.user-name {
color: #ffffff;
font-size: 15px;
font-weight: 800;
}
.admin-pill {
background: rgba(181, 126, 255, 0.12);
color: #c39aff;
}
.user-pill {
background: rgba(94, 135, 224, 0.12);
color: #7aa4ff;
}
.user-detail-row td {
padding-top: 8px;
padding-bottom: 13px;
background: #0d121a;
}
.user-detail-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.user-detail-grid > div {
padding: 8px 10px;
background: #101720;
border-radius: 6px;
}
.user-detail-grid span {
display: block;
margin-bottom: 4px;
color: #657388;
font-size: 9px;
}
.user-detail-grid strong {
color: #9aa8ba;
font-size: 10px;
font-weight: 600;
}
@media (max-width: 1050px) {
.user-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.users-card-head {
align-items: flex-start;
flex-direction: column;
}
.user-detail-grid {
grid-template-columns: 1fr;
}
}
/* KONTEN-SEITE */
.accounts-card {
padding: 22px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.accounts-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 18px;
}
.account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.account-card {
padding: 20px;
background: #0d121a;
border: 1px solid #263040;
border-radius: 10px;
}
.account-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
}
.account-exchange {
color: #ffffff;
font-size: 20px;
font-weight: 800;
}
.account-label {
margin-top: 5px;
color: #738196;
font-size: 11px;
}
.account-owner {
margin-top: 20px;
padding: 11px 12px;
background: #101720;
border-radius: 7px;
}
.account-owner span,
.account-data-grid span,
.account-strategy-block > span {
display: block;
margin-bottom: 5px;
color: #657388;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.6px;
}
.account-owner strong {
color: #d7deea;
font-size: 13px;
}
.account-data-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.account-data-grid > div {
padding: 10px;
background: #101720;
border-radius: 7px;
}
.account-data-grid strong {
color: #aeb9c8;
font-size: 11px;
}
.account-mode-live {
color: #55d994 !important;
}
.account-mode-shadow {
color: #7aa4ff !important;
}
.account-strategy-block {
margin-top: 14px;
padding: 12px;
background: #101720;
border-radius: 7px;
}
.account-strategy-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.account-strategy-tag {
padding: 5px 8px;
background: rgba(94, 135, 224, 0.12);
border-radius: 6px;
color: #7aa4ff;
font-size: 10px;
font-weight: 700;
}
.account-strategy-empty {
color: #68778b;
font-size: 10px;
}
.account-security-note {
margin-top: 14px;
padding: 10px 12px;
border-left: 3px solid #39475a;
background: #101720;
color: #7e8c9f;
font-size: 10px;
line-height: 1.45;
}
.account-note {
margin-top: 12px;
color: #68778b;
font-size: 10px;
}
.empty-account-card {
grid-column: 1 / -1;
padding: 35px;
border: 1px dashed #2c3543;
border-radius: 10px;
color: #68778b;
text-align: center;
}
@media (max-width: 1050px) {
.account-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.accounts-card-head {
align-items: flex-start;
flex-direction: column;
}
.account-data-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* BERECHTIGUNGEN-SEITE */
.permissions-role-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.permission-role-card,
.permissions-card {
padding: 22px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.permission-role-title {
color: #ffffff;
font-size: 18px;
font-weight: 800;
}
.permission-role-subtitle {
margin-top: 5px;
color: #738196;
font-size: 11px;
}
.permission-role-items {
display: grid;
gap: 8px;
margin-top: 16px;
}
.permission-role-items > div {
padding: 10px 12px;
background: #0d121a;
border-radius: 7px;
color: #9ba8ba;
font-size: 11px;
}
.permissions-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 18px;
}
.permission-types-info {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 18px;
}
.permission-types-info > div {
padding: 10px 12px;
background: #0d121a;
border-radius: 7px;
}
.permission-types-info span {
display: block;
margin-bottom: 5px;
color: #7aa4ff;
font-size: 9px;
font-weight: 800;
}
.permission-types-info strong {
color: #9ba8ba;
font-size: 10px;
font-weight: 600;
}
.permissions-table {
width: 100%;
min-width: 900px;
border-collapse: collapse;
}
.permissions-table th {
padding: 11px 12px;
border-bottom: 1px solid #303846;
color: #6f7d91;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.7px;
text-align: left;
white-space: nowrap;
}
.permissions-table td {
padding: 15px 12px;
border-bottom: 1px solid #202733;
color: #c7cfda;
font-size: 12px;
vertical-align: middle;
}
.permission-tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.permission-tag {
padding: 5px 8px;
background: rgba(94, 135, 224, 0.12);
border-radius: 6px;
color: #7aa4ff;
font-size: 9px;
font-weight: 700;
}
@media (max-width: 1050px) {
.permission-types-info {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.permissions-role-grid {
grid-template-columns: 1fr;
}
.permissions-card-head {
align-items: flex-start;
flex-direction: column;
}
}
/* BENUTZER-ANLEGEN-V2 */
.primary-button,
.secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 9px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.primary-button {
border: 1px solid #345f9d;
background: #1d4f91;
color: #ffffff;
cursor: pointer;
}
.primary-button:hover {
background: #245ca6;
}
.secondary-button {
border: 1px solid #2c3747;
background: #141b25;
color: #9aa8ba;
}
.secondary-button:hover {
background: #19222e;
}
.user-form-card,
.created-user-card {
max-width: 920px;
padding: 24px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.form-field {
display: block;
}
.form-field > span {
display: block;
margin-bottom: 7px;
color: #8290a4;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
}
.form-field input[type="text"],
.form-field select {
width: 100%;
min-height: 42px;
padding: 10px 12px;
border: 1px solid #2c3747;
border-radius: 8px;
outline: none;
background: #0c1119;
color: #e8ecf2;
font: inherit;
font-size: 13px;
}
.form-field input:focus,
.form-field select:focus {
border-color: #4a72a9;
}
.form-field small {
display: block;
margin-top: 6px;
color: #657388;
font-size: 9px;
}
.form-checkbox-field {
min-height: 76px;
}
.checkbox-line {
display: flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 10px 12px;
background: #0c1119;
border: 1px solid #2c3747;
border-radius: 8px;
}
.checkbox-line input {
width: 16px;
height: 16px;
}
.checkbox-line strong {
color: #c7cfda;
font-size: 12px;
}
.form-security-note {
margin-top: 18px;
padding: 13px 15px;
border-left: 3px solid #39475a;
background: #101720;
color: #7f8da1;
font-size: 10px;
line-height: 1.55;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid #252c38;
}
.form-errors {
margin-bottom: 18px;
padding: 13px 15px;
border: 1px solid rgba(237, 92, 92, 0.35);
border-radius: 8px;
background: rgba(237, 92, 92, 0.08);
color: #f08a8a;
font-size: 11px;
}
.form-errors strong {
color: #ff9b9b;
}
.form-errors ul {
margin: 8px 0 0 18px;
padding: 0;
}
.created-user-success {
padding: 12px 14px;
border: 1px solid rgba(66, 201, 133, 0.25);
border-radius: 8px;
background: rgba(66, 201, 133, 0.08);
color: #55d994;
font-size: 12px;
font-weight: 800;
}
.created-user-warning {
margin-top: 14px;
padding: 13px 15px;
border-left: 3px solid #d6a64d;
background: #17150f;
color: #b9aa86;
font-size: 10px;
line-height: 1.5;
}
.created-user-warning strong {
display: block;
margin-bottom: 4px;
color: #e2c274;
font-size: 11px;
}
.created-login-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.created-login-grid > div {
padding: 13px 14px;
background: #0c1119;
border: 1px solid #202936;
border-radius: 8px;
}
.created-login-grid span {
display: block;
margin-bottom: 7px;
color: #657388;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.7px;
}
.created-login-grid strong {
color: #e6ebf2;
font-size: 14px;
}
.created-password-box {
grid-column: 1 / -1;
}
.start-password {
display: inline-block;
margin-right: 12px;
font-family: Consolas, monospace;
font-size: 19px !important;
letter-spacing: 1px;
}
.copy-button {
padding: 7px 10px;
border: 1px solid #2e435f;
border-radius: 7px;
background: #162337;
color: #91b8ee;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.copy-button:hover {
background: #1b2c45;
}
.created-user-note {
margin-top: 16px;
color: #718095;
font-size: 10px;
line-height: 1.55;
}
@media (max-width: 700px) {
.form-grid,
.created-login-grid {
grid-template-columns: 1fr;
}
.form-actions {
align-items: stretch;
flex-direction: column-reverse;
}
}
.logo-link {
display: block;
width: 100%;
text-decoration: none;
}
/* LOGIN / SESSION FIXED */
.sidebar-user-info span {
display: inline-block;
max-width: 110px;
overflow: hidden;
color: #e8ecf2;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.logout-form {
margin-top: 10px;
}
.logout-button {
width: 100%;
padding: 8px 10px;
border: 1px solid #2c3747;
border-radius: 7px;
background: #141b25;
color: #8492a6;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.logout-button:hover {
background: #1a2330;
color: #c8d0dc;
}
.auth-body {
min-height: 100vh;
background:
radial-gradient(
circle at 50% 25%,
rgba(48, 188, 163, 0.08),
transparent 36%
),
#0b0e14;
}
.auth-shell {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 30px 18px;
}
.auth-card {
width: 100%;
max-width: 440px;
padding: 28px;
background: #111620;
border: 1px solid #27303d;
border-radius: 14px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.auth-logo {
display: block;
width: 190px;
max-width: 70%;
height: auto;
margin: 0 auto 23px auto;
border-radius: 12px;
}
.auth-heading {
margin-bottom: 22px;
text-align: center;
}
.auth-heading h1 {
font-size: 24px;
}
.auth-heading p {
margin: 7px 0 0 0;
color: #75849a;
font-size: 12px;
}
.auth-form {
display: grid;
gap: 16px;
}
.auth-submit {
width: 100%;
margin-top: 4px;
}
.auth-footnote {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #242c38;
color: #617086;
font-size: 9px;
line-height: 1.5;
text-align: center;
}
.auth-info-box {
margin-bottom: 17px;
padding: 11px 13px;
background: #0c1119;
border: 1px solid #242e3c;
border-radius: 8px;
color: #8290a4;
font-size: 11px;
text-align: center;
}
.auth-info-box strong {
margin-left: 5px;
color: #dfe5ee;
}
.user-welcome-card {
max-width: 900px;
padding: 24px;
background: #111620;
border: 1px solid #252c38;
border-radius: 12px;
}
.user-welcome-card h2 {
margin: 0 0 8px 0;
font-size: 20px;
}
.user-welcome-card > p {
max-width: 660px;
margin: 0;
color: #78869a;
font-size: 12px;
line-height: 1.6;
}
.user-welcome-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 22px;
}
.user-welcome-grid > div {
padding: 12px;
background: #0d121a;
border-radius: 8px;
}
.user-welcome-grid span {
display: block;
margin-bottom: 5px;
color: #657388;
font-size: 9px;
}
.user-welcome-grid strong {
color: #d8dfe9;
font-size: 12px;
}
.user-welcome-actions {
margin-top: 20px;
padding-top: 17px;
border-top: 1px solid #252c38;
}
@media (max-width: 700px) {
.user-welcome-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auth-card {
padding: 22px;
}
}
/* KONTO-ZUORDNUNG */
.account-uid {
margin-top: 8px;
padding: 10px 12px;
background: #101720;
border-radius: 7px;
}
.account-uid span {
display: block;
margin-bottom: 5px;
color: #657388;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.6px;
}
.account-uid strong {
color: #d7deea;
font-size: 12px;
}
.account-form-card {
max-width: 980px;
}
.strategy-selection {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #252c38;
}
.strategy-selection-title {
margin-bottom: 10px;
color: #8290a4;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.7px;
}
.strategy-selection-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.strategy-check {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 13px;
background: #0c1119;
border: 1px solid #263040;
border-radius: 8px;
cursor: pointer;
}
.strategy-check:hover {
border-color: #3a4c63;
}
.strategy-check input {
width: 16px;
height: 16px;
}
.strategy-check span {
min-width: 0;
}
.strategy-check strong {
display: block;
color: #d7deea;
font-size: 12px;
}
.strategy-check small {
display: block;
margin-top: 3px;
color: #657388;
font-size: 9px;
}
@media (max-width: 700px) {
.strategy-selection-grid {
grid-template-columns: 1fr;
}
}
/* MEINE TRADES */
.personal-trades-empty {
white-space: normal !important;
}
.personal-trades-empty strong {
display: block;
margin-bottom: 7px;
color: #9aa8ba;
font-size: 12px;
}
.personal-trades-empty span {
display: block;
max-width: 680px;
margin: 0 auto;
color: #68778b;
font-size: 10px;
line-height: 1.55;
}
/* ACCOUNT BALANCES */
.balance-summary-value {
white-space: nowrap;
}
.balance-summary-value span {
color: #718095;
font-size: 11px;
font-weight: 700;
}
.account-balance-panel {
margin-top: 10px;
padding: 13px;
background: #0b1219;
border: 1px solid #1e3440;
border-radius: 9px;
}
.account-balance-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #20303c;
}
.account-balance-main span,
.account-balance-grid span,
.account-balance-unavailable span {
display: block;
color: #66778b;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.55px;
}
.account-balance-main strong {
color: #dce5ed;
font-size: 16px;
}
.account-balance-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.account-balance-grid > div {
min-width: 0;
}
.account-balance-grid strong {
display: block;
margin-top: 4px;
color: #b9c6d4;
font-size: 10px;
word-break: break-word;
}
.account-balance-unavailable strong {
display: block;
margin-top: 5px;
color: #8b98a9;
font-size: 11px;
}
.account-strategy-tag-detail {
display: inline-flex !important;
flex-direction: column;
gap: 2px;
}
.account-strategy-tag-detail small {
color: #718095;
font-size: 8px;
font-weight: 700;
}
@media (max-width: 700px) {
.account-balance-grid {
grid-template-columns: 1fr;
}
}
/* FREIGABEN UND SICHTRECHTE */
.permission-form-card {
max-width: 900px;
}
.permission-selection {
display: grid;
gap: 10px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #252c38;
}
.permission-check {
display: flex;
align-items: center;
gap: 12px;
padding: 13px;
background: #0c1119;
border: 1px solid #263040;
border-radius: 8px;
cursor: pointer;
}
.permission-check input {
width: 16px;
height: 16px;
}
.permission-check strong,
.permission-check small {
display: block;
}
.permission-check strong {
color: #d7deea;
font-size: 12px;
}
.permission-check small {
margin-top: 3px;
color: #68778b;
font-size: 10px;
}
.permission-note-field {
margin-top: 18px;
}
.permission-active-line {
margin-top: 16px;
}
.table-delete-button {
padding: 6px 9px;
color: #ff8992;
background: #241318;
border: 1px solid #5a2930;
border-radius: 6px;
cursor: pointer;
font-size: 10px;
font-weight: 700;
}
.shared-user-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.shared-user-card {
padding: 20px;
background: #111823;
border: 1px solid #293241;
border-radius: 10px;
}
.shared-user-card h2 {
margin: 6px 0 2px;
color: #f0f4fa;
font-size: 20px;
}
.shared-rights {
margin: 18px 0;
}
.shared-user-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.account-strategy-tag small {
display: block;
margin-top: 3px;
opacity: 0.75;
font-size: 8px;
}
@media (max-width: 900px) {
.shared-user-grid {
grid-template-columns: 1fr;
}
}
/* ADMIN BEARBEITEN */
.table-edit-button {
display: inline-block;
padding: 6px 9px;
color: #9ec8ff;
background: #102139;
border: 1px solid #27466e;
border-radius: 6px;
text-decoration: none;
font-size: 10px;
font-weight: 700;
}
.table-edit-button:hover {
background: #163052;
}
.account-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.edit-note-field {
margin-top: 18px;
}
/* === Web Admin Edit 2026-09-28 === */
.admin-wide-card { max-width: 1180px; }
.admin-help-text { margin: 6px 0 16px; opacity: .78; font-size: 13px; line-height: 1.45; }
.account-strategy-editor { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.account-strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.account-strategy-card { border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.018); border-radius: 10px; padding: 14px; }
.account-strategy-card.selected { border-color: rgba(43,151,255,.45); background: rgba(43,151,255,.055); }
.account-strategy-check { display:flex; align-items:center; gap:10px; cursor:pointer; }
.account-strategy-check input { width:18px; height:18px; }
.account-strategy-check span { display:flex; flex-direction:column; gap:2px; }
.account-strategy-check small { opacity:.65; }
.account-strategy-fields { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:12px; }
.account-strategy-fields label { display:flex; flex-direction:column; gap:5px; font-size:11px; opacity:.88; text-transform:uppercase; letter-spacing:.03em; }
.account-strategy-fields input, .account-strategy-fields select { width:100%; box-sizing:border-box; min-height:36px; border:1px solid rgba(255,255,255,.12); border-radius:7px; background:#101b28; color:#fff; padding:7px 8px; }
.account-strategy-live-note { margin-top:10px; font-size:11px; color:#68e6bd; }
.mini-action-button { display:inline-block; padding:6px 10px; border-radius:7px; background:#1d5fa8; color:#fff; text-decoration:none; font-size:12px; }
.admin-success-box { margin-bottom:16px; padding:12px 14px; border:1px solid rgba(65,205,151,.35); border-radius:8px; background:rgba(65,205,151,.08); color:#72e3b8; font-weight:700; }
@media (max-width: 760px) { .account-strategy-fields { grid-template-columns: 1fr; } }
/* === End Web Admin Edit === */
/* BEGIN CHRIS EXTENDER ETH SHADOW */
.extender-main { padding-bottom: 60px; }
.extender-hero,
.extender-settings-card,
.extender-live-trade,
.extender-debug-card,
.extender-trades-card {
background: #111722;
border: 1px solid #283142;
border-radius: 14px;
padding: 22px;
margin-bottom: 18px;
}
.extender-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.extender-hero h1, .extender-section-head h2 { margin:4px 0 6px; }
.extender-hero p { margin:0; color:#8f9bae; }
.extender-kicker { font-size:11px; letter-spacing:1.8px; color:#6e8fc7; font-weight:700; }
.extender-mode-badge { padding:9px 13px; border-radius:999px; background:#183d36; color:#75e0c3; font-size:12px; font-weight:800; }
.extender-message { padding:12px 15px; border-radius:10px; margin-bottom:16px; font-size:14px; }
.extender-message.ok { background:#12362f; border:1px solid #235e52; color:#9ae4d0; }
.extender-message.error { background:#421c23; border:1px solid #78303c; color:#ffb1bb; }
.extender-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.extender-stat { background:#101722; border:1px solid #252f40; border-radius:11px; padding:13px 14px; min-width:0; }
.extender-stat span { display:block; font-size:11px; color:#748198; margin-bottom:7px; text-transform:uppercase; letter-spacing:.6px; }
.extender-stat strong { display:block; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ext-good { color:#5ed8ac !important; }
.ext-bad { color:#ff6f7e !important; }
.extender-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.extender-small-note { color:#71809a; font-size:12px; text-align:right; }
.extender-open-pnl { font-size:18px; font-weight:800; }
.extender-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.extender-detail-grid > div { background:#0d131d; border:1px solid #202b3b; padding:12px; border-radius:9px; }
.extender-detail-grid span { display:block; color:#6f7d91; font-size:11px; margin-bottom:5px; }
.extender-filter-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.extender-filter-columns > div { background:#0d131d; border:1px solid #202b3b; border-radius:10px; padding:14px; }
.extender-filter-columns h3 { margin:0 0 10px; }
.extender-filter-list { display:flex; flex-wrap:wrap; gap:7px; }
.extender-filter-list span, .extender-signal-result { padding:6px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.extender-filter-list .pass, .extender-signal-result.pass { background:#153b33; color:#6bddbc; border:1px solid #275e52; }
.extender-filter-list .fail, .extender-signal-result.fail { background:#351820; color:#ff8693; border:1px solid #5d2a35; }
.extender-signal-result { display:inline-block; margin-top:12px; }
.extender-trades-table { width:100%; border-collapse:collapse; min-width:1100px; }
.extender-trades-table th { text-align:left; color:#7086aa; font-size:11px; letter-spacing:.5px; border-bottom:1px solid #2b3444; padding:10px 9px; }
.extender-trades-table td { padding:11px 9px; border-bottom:1px solid #1e2735; font-size:12px; }
.extender-empty { color:#6f7d91; text-align:center; padding:24px !important; }
.extender-properties-note { background:#0d131d; border:1px solid #243044; border-radius:10px; padding:13px; color:#9aa7ba; font-size:12px; line-height:1.55; margin-bottom:14px; }
.extender-settings-form details { border:1px solid #252f40; border-radius:10px; background:#0f151f; margin:10px 0; overflow:hidden; }
.extender-settings-form summary { cursor:pointer; padding:14px 16px; font-weight:800; color:#c8d2e2; user-select:none; }
.extender-settings-form details[open] summary { border-bottom:1px solid #252f40; background:#121b28; }
.extender-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:15px; }
.extender-form-grid label:not(.extender-check) { display:flex; flex-direction:column; gap:7px; color:#8f9bae; font-size:12px; }
.extender-form-grid input:not([type="checkbox"]), .extender-form-grid select { width:100%; background:#0a0f16; color:#e8ecf2; border:1px solid #344056; border-radius:8px; padding:10px 11px; outline:none; }
.extender-form-grid input:focus, .extender-form-grid select:focus { border-color:#4d78b9; }
.extender-check { display:flex; align-items:center; gap:9px; min-height:39px; color:#c3ccda; font-size:13px; }
.extender-check input { width:17px; height:17px; }
.extender-save-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:18px; color:#7e8ca2; font-size:12px; }
.extender-save-row strong { color:#c5d0df; }
.extender-save-button { border:0; background:#2f6fc0; color:white; padding:11px 17px; border-radius:8px; font-weight:800; cursor:pointer; }
.extender-save-button:hover { background:#3a7ed2; }
@media (max-width: 1350px) {
.extender-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.extender-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
.extender-stat-grid, .extender-detail-grid, .extender-filter-columns, .extender-form-grid { grid-template-columns:1fr; }
.extender-hero, .extender-section-head, .extender-save-row { flex-direction:column; align-items:flex-start; }
.extender-small-note { text-align:left; }
}
/* END CHRIS EXTENDER ETH SHADOW */
/* TRADING_PNL_COLORS_20261013 */
.pnl-positive, .wt-positive, .billing-positive {
color: #55d994 !important;
font-weight: 800;
}
.pnl-negative, .wt-negative, .billing-negative {
color: #ed6b6b !important;
font-weight: 800;
}
/* CHRIS_MOBILE_MENU_FINAL */
.chris-mobile-menu-button,
.chris-mobile-menu-overlay {
display: none;
}
@media (max-width: 900px) {
html body > #chris-mobile-menu-button {
display: block !important;
position: fixed !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
bottom: auto !important;
z-index: 2147483647 !important;
width: auto !important;
height: auto !important;
padding: 10px 14px !important;
background: #182536 !important;
border: 1px solid #37506c !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 700 !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
.layout .sidebar {
display: flex !important;
flex-direction: column;
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
width: min(280px, 85vw) !important;
height: 100dvh !important;
overflow-y: auto;
z-index: 1100 !important;
transform: translateX(-105%) !important;
visibility: hidden !important;
transition: transform .22s ease;
}
.layout .sidebar.chris-mobile-open {
transform: translateX(0) !important;
visibility: visible !important;
}
html body > .chris-mobile-menu-overlay.chris-mobile-visible {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 1099 !important;
background: rgba(0,0,0,.65) !important;
}
.layout {
display: block !important;
}
.layout .main {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-top: 65px !important;
}
.layout .sidebar .logo {
margin-top: 48px;
}
}