:root{--bg1:#0b132b;--bg2:#1c2541;--card:#1c2541;--accent:#5bc0be;--accent2:#3aafa9;--text:#e0e6f8;--muted:#9aa6c8;--danger:#ff6b6b}
[data-theme="light"]{--bg1:#f4f7fd;--bg2:#ffffff;--card:#ffffff;--accent:#0066ff;--accent2:#00c2ff;--text:#0d1b2a;--muted:#5c677d;--danger:#d7263d}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 60%,var(--bg1) 100%);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text)}
.app{max-width:1400px;margin:0 auto;padding:12px 24px 24px 24px}
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0}
.brand{font-weight:700;font-size:22px;color:var(--text);letter-spacing:.5px}
.nav{display:flex;gap:8px;align-items:center}
.user-box{margin-left:8px}
.tab-btn{border:none;padding:10px 16px;border-radius:10px;background:#162036;color:var(--text);cursor:pointer;transition:all .2s}
.tab-btn.active{background:var(--accent);color:#052a2b}
.main{display:block}
.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:16px;padding:18px;margin-bottom:16px}
.stats-card{margin-bottom:16px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.summary-grid .stat{display:flex;justify-content:flex-start;align-items:center}
.summary-grid .label{width:140px;flex:0 0 140px;text-align:left;color:var(--muted)}
.summary-grid .value{text-align:left}
.summary-grid .text{display:inline-block}
.trend-up{color:var(--danger)}
.trend-down{color:#28a745}
.run-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text);font-size:12px}
[data-theme="light"] .run-badge{background:#eef2ff;border-color:#d4d9e6;color:#1f2d3d}
.donate{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text);font-size:14px;cursor:pointer}
[data-theme="light"] .donate{background:#eef2ff;border-color:#d4d9e6;color:#1f2d3d}
.donate .tooltip{position:absolute;top:calc(100% + 8px);right:0;min-width:auto;background:#0f192f;color:#fff;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:9999}
[data-theme="light"] .donate .tooltip{background:#ffffff;color:#1f2d3d;border-color:#d4d9e6;box-shadow:0 6px 18px rgba(31,45,61,.15)}
.donate:hover .tooltip,.donate:focus .tooltip{opacity:1;pointer-events:auto}
.donate .tooltip img{display:block;width:200px;height:auto;border-radius:8px;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
.summary-title{display:flex;justify-content:space-between;align-items:center}
.hint{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;border:1px solid rgba(255,255,255,.25);color:var(--text);font-size:13px;cursor:help;margin-left:8px;background:rgba(255,255,255,.08)}
[data-theme="light"] .hint{border-color:#cbd5e1;color:#1f2d3d;background:#eef2ff}
.hint .tooltip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:240px;max-width:280px;background:#0f192f;color:#fff;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:15px;line-height:1.8;opacity:0;pointer-events:none;transition:opacity .15s ease;text-align:left;word-break:break-word;white-space:normal}
[data-theme="light"] .hint .tooltip{background:#ffffff;color:#1f2d3d;border-color:#d4d9e6;box-shadow:0 6px 18px rgba(31,45,61,.15)}
.hint:hover .tooltip,.hint:focus .tooltip{opacity:1;pointer-events:auto}
.hint .tooltip::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);border-width:6px;border-style:solid;border-color:transparent transparent rgba(255,255,255,.15) transparent}
[data-theme="light"] .hint .tooltip::after{border-color:transparent transparent #d4d9e6 transparent}
[data-theme="light"] .run-badge{background:#eef2ff;border-color:#d4d9e6;color:#1f2d3d}
.stat{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04)}
.stat .label{color:var(--muted);font-size:12px}
.stat .value{font-weight:700}
.card-title{font-weight:600;margin-bottom:12px}
.card-title .date{margin-left:8px;font-weight:500;color:var(--muted);font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.form-item{display:flex;flex-direction:column;gap:8px}
.field-sm{width:200px}
.form-item.suggestable{position:relative}
.form-item.actions{align-items:flex-start;gap:8px}
.actions-bar{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
[data-theme="light"] .actions-bar{background:linear-gradient(90deg,#f8fbff,#eef2ff);border:1px solid #e6ecf5;box-shadow:0 8px 18px rgba(13,27,42,.06)}

.order-inline .inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0;border-radius:0;background:transparent;border:none;box-shadow:none}
[data-theme="light"] .order-inline .inline{background:transparent;border:none;box-shadow:none}
.order-inline{grid-column:1/span 3}
.actions-inline{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:10px;justify-content:center;padding:0;border-radius:0;background:transparent;border:none;box-shadow:none}
[data-theme="light"] .actions-inline{background:transparent;border:none;box-shadow:none}
label{font-size:12px;color:var(--muted)}
input[type=text],input[type=number],input[type=password]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#101831;color:var(--text);outline:none}
.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#121b33;color:var(--text);cursor:pointer}
.btn{transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn.lg{padding:12px 18px;border-radius:12px;font-weight:600}
.btn.xl{padding:14px 20px;border-radius:14px;font-weight:700;letter-spacing:.2px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));border:none;color:#052a2b;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.btn.ghost:hover{border-color:rgba(255,255,255,.35);transform:translateY(-1px)}
.btn .icon{display:inline-block;width:16px;height:16px;margin:0}
.btn .icon svg{width:16px;height:16px;fill:currentColor;display:block}
.btn.icon{background:transparent;border:1px solid rgba(255,255,255,.2);width:36px;height:36px;border-radius:10px}
.orders{display:flex;flex-wrap:wrap;gap:10px}
.order-dir{display:flex;align-items:center;gap:10px}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#2a355a;border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--accent)}
.switch input:checked+.slider:before{transform:translateX(20px)}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08);margin-top:12px}
.detail-fixed{max-height:420px}

.suggest-box{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0f192f;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.25);max-height:280px;overflow:auto;display:none;z-index:1000;will-change:transform}
.suggest-box.show{display:block}
.suggest-item{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer}
.suggest-item:hover{background:#121b33}
[data-theme="light"] .suggest-box{background:#ffffff;border-color:#e6ecf5;box-shadow:0 12px 28px rgba(13,27,42,.10)}
[data-theme="light"] .suggest-item{border-bottom:1px solid #eef2f7;color:#1f2d3d}
[data-theme="light"] .suggest-item:hover{background:#f5f7fb}
table.table{width:100%;border-collapse:collapse;background:#0e1730}
table.table th,table.table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;text-align:center}
table.table th{position:sticky;top:0;background:#152046;color:var(--muted)}
table.table tbody tr:nth-child(even) td{background:#0f192f}
table.table tr:hover td{background:#121b33}
.row-buy td{background:rgba(0,170,145,.12) !important}
.row-sell td{background:rgba(215,38,61,.12) !important}
.row-buy:hover td{background:rgba(0,170,145,.18) !important}
.row-sell:hover td{background:rgba(215,38,61,.18) !important}
[data-theme="light"] .row-buy td{background:rgba(0,102,255,.10) !important}
[data-theme="light"] .row-sell td{background:rgba(215,38,61,.12) !important}
.col-highlight{background:#1a2748 !important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
@keyframes colFlash{0%{box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:inset 0 0 0 2px var(--accent)}100%{box-shadow:inset 0 0 0 0 rgba(0,0,0,0)}}
.col-flash{animation:colFlash 1.2s ease}
.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin:14px 2px;color:var(--muted)}
.pagination-nav{display:flex;gap:8px}
[data-theme="light"] .pagination{color:#5c677d}
.pagination-fields{display:flex;align-items:center;gap:8px}
.pagination-fields input[type=number]{width:80px;padding:8px 10px;border-radius:10px}
.pagination-fields select{width:90px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#121b33;color:var(--text)}
[data-theme="light"] .pagination-fields select{background:#ffffff;border-color:#d4d9e6;color:#1f2d3d}
[data-theme="light"] .pagination{color:#5c677d}
.modal{position:fixed;inset:0;background:rgba(10,14,25,.6);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{width:min(1000px,92vw);background:#0f192f;border-radius:14px;border:1px solid rgba(255,255,255,.1);padding:16px}
.modal-content .table-wrap{max-height:60vh;overflow:auto}
[data-theme="light"] .modal-content{background:#ffffff;border-color:rgba(0,0,0,.06)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal-title{font-weight:600}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#0f192f;border:1px solid rgba(255,255,255,.1);color:#fff;padding:12px 24px;border-radius:12px;z-index:10000;box-shadow:0 8px 30px rgba(0,0,0,0.5);opacity:1;transition:opacity 0.5s ease;visibility:visible}
.toast.hidden{opacity:0;visibility:hidden}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,25,.45)}
.loading.hidden{display:none}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tab{display:none}
.tab.active{display:block}
@media (max-width:1024px){.form-grid{grid-template-columns:repeat(2,1fr)}.order-inline{grid-column:1/-1}.actions-inline{grid-column:1/-1;justify-content:center}}
[data-theme="light"] .stat{background:#f8fafc;border-color:#e6ecf5}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}}
[data-theme="light"] .stat{background:#f8fafc;border-color:#e6ecf5}
.theme-ctl{display:flex;align-items:center;gap:6px;margin-left:8px}
.theme-ctl .theme-label{font-size:12px;color:var(--muted)}

.chart-wrap{width:100%;height:280px;position:relative}
.chart-wrap canvas{width:100%;height:100%;display:block}

.footer{max-width:1400px;margin:24px auto 32px;display:flex;justify-content:center;align-items:center}
.footer a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:var(--text);text-decoration:none;font-size:14px}
[data-theme="light"] .footer a{background:#eef2ff;border-color:#d4d9e6;color:#1f2d3d}

.notice-banner{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:12px 16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:14px;line-height:1.7}
.notice-banner .icon{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:#f5c542}
[data-theme="light"] .notice-banner{background:#ffffff;border-color:#e6ecf5;color:#0d1b2a;box-shadow:0 8px 20px rgba(13,27,42,.06)}

.brand-eyes{display:inline-flex;align-items:center;justify-content:center;gap:2px}
.brand-eye{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:10px;margin:0 1px;border-radius:999px;border:2px solid currentColor;overflow:hidden}
.brand-eye-ball{position:relative;width:7px;height:7px;border-radius:50%;background:#5bc0be;box-shadow:0 0 0 2px #ffffff inset;transition:transform .06s linear}
.brand-eye-ball::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#0b132b;top:2px;left:2px}

/* Light theme enhancements */
[data-theme="light"] .brand{color:#0d1b2a}
[data-theme="light"] .tab-btn{background:#eef2ff;color:#1f2d3d;border:1px solid #d4d9e6}
[data-theme="light"] .tab-btn.active{background:var(--accent);color:#ffffff;border:none}
[data-theme="light"] .card{background:#ffffff;border:1px solid #e6ecf5;box-shadow:0 10px 30px rgba(13,27,42,.06)}
[data-theme="light"] input[type=text],[data-theme="light"] input[type=number],[data-theme="light"] input[type=password]{background:#ffffff;border:1px solid #d5dbea;color:#0d1b2a}
input[type=text]:focus,input[type=number]:focus,input[type=password]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,192,190,.15)}
[data-theme="light"] .btn{background:#f4f7fd;color:#1f2d3d;border:1px solid #d4d9e6}
[data-theme="light"] .btn.ghost{border-color:#cdd6e6}
[data-theme="light"] .table-wrap{border-color:#e6ecf5}
[data-theme="light"] table.table{background:#ffffff}
[data-theme="light"] table.table th{background:#f8fafc;color:#5c677d;border-bottom:1px solid #e6ecf5;text-align:center}
[data-theme="light"] table.table td{border-bottom:1px solid #eef2f7;color:#1f2d3d;text-align:center}
[data-theme="light"] table.table tbody tr:nth-child(even) td{background:#f7faff}
[data-theme="light"] .col-highlight{background:#eef6ff !important;box-shadow:inset 0 -1px 0 #e6ecf5}
.th-sortable{cursor:pointer}
table.table th.sort-asc::after{content:" ▲";color:var(--accent);font-weight:700}
table.table th.sort-desc::after{content:" ▼";color:var(--accent);font-weight:700}
[data-theme="light"] table.table tr:hover td{background:#f5f7fb}
[data-theme="light"] .toast{background:#ffffff;border-color:#e6ecf5;color:#0d1b2a;box-shadow:0 8px 24px rgba(13,27,42,.08)}
[data-theme="light"] .loading{background:rgba(240,244,252,.45)}
[data-theme="light"] .spinner{border:3px solid rgba(13,27,42,.12);border-top-color:var(--accent)}
[data-theme="light"] .form-item select{background:#ffffff;border:1px solid #d4d9e6;color:#1f2d3d;border-radius:10px;padding:10px 12px}
.form-item select{background:#121b33;border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:10px;padding:10px 12px}

/* Legal Disclaimer Tooltip */
.legal-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--text);
    font-size: 14px;
    cursor: help;
    margin-left: 12px;
    outline: none;
}
[data-theme="light"] .legal-trigger {
    background: #eef2ff;
    border-color: #d4d9e6;
    color: #1f2d3d;
}
.legal-content {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(600px, 90vw);
    background: #0f192f;
    color: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 10000;
    text-align: left;
    font-size: 13px;
    line-height: 1.6;
    cursor: auto;
}
[data-theme="light"] .legal-content {
    background: #ffffff;
    color: #1f2d3d;
    border-color: #d4d9e6;
    box-shadow: 0 8px 30px rgba(13, 27, 42, .15);
}
.legal-trigger:hover .legal-content,
.legal-trigger:focus .legal-content {
    opacity: 1;
    visibility: visible;
}
.legal-content::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, .15) transparent;
}
[data-theme="light"] .legal-content::after {
    border-color: transparent transparent #d4d9e6 transparent;
}
.legal-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
    color: var(--accent);
}
.legal-content ol {
    margin: 0;
    padding-left: 20px;
}
.legal-content li {
    margin-bottom: 8px;
}
.legal-content li:last-child {
    margin-bottom: 0;
}
.legal-content strong {
    color: var(--danger);
    font-weight: 600;
}
[data-theme="light"] .legal-content strong {
    color: #d7263d;
}

.vip-badge{display:inline-flex;align-items:center;margin-left:6px;color:#f5c542;transition:transform .12s ease}
.vip-badge svg{width:16px;height:16px;display:block;filter:drop-shadow(0 0 2px rgba(0,0,0,.15));transition:filter .12s ease}
.vip-badge:hover{transform:scale(1.08)}
.vip-badge:hover svg{filter:drop-shadow(0 0 4px rgba(245,197,66,.55))}
[data-theme="light"] .vip-badge{color:#d4a017}
[data-theme="light"] .vip-badge:hover svg{filter:drop-shadow(0 0 4px rgba(212,160,23,.55))}

.vip-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,14,25,.55);backdrop-filter:blur(2px);border-radius:16px;z-index:10}
.vip-mask.hidden{display:none}
.vip-mask-box{padding:14px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(15,25,47,.85);color:#fff;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
[data-theme="light"] .vip-mask{background:rgba(240,244,252,.60)}
[data-theme="light"] .vip-mask-box{background:#ffffff;color:#0d1b2a;border-color:#e6ecf5}

.btn.clean { background: transparent; border: none; color: var(--muted); }
.btn.clean:hover { color: var(--text); background: rgba(255,255,255,0.05); }
[data-theme="light"] .btn.clean:hover { background: rgba(0,0,0,0.05); }