*{box-sizing:border-box}
html,body{height:100%}
:root{--bg:#0a0f1e;--surface:#121a2e;--surface2:#0f1629;--text:#e6e8ee;--muted:#9aa3b2;--primary:#1e88e5;--primary700:#1565c0;--accent:#7ab6ff;--border:#2b385a;--success:#43a047;--danger:#e53935;--warning:#ef6c00}
body.light{--bg:#f7f9fc;--surface:#ffffff;--surface2:#f2f5fb;--text:#1b2236;--muted:#6b7485;--primary:#1e88e5;--primary700:#1565c0;--accent:#1e88e5;--border:#d4d9e6}
body{font-family:system-ui,Segoe UI,Arial;padding:0;margin:0;background:linear-gradient(180deg,#0a0f1e 0%,#0b1220 40%,#0a0f1e 100%);color:var(--text)}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover{color:#a5d1ff}
img{max-width:100%;height:auto}
.icon-currency{width:18px;height:18px;vertical-align:middle;margin-left:6px;display:inline-block}

.topbar{background:rgba(18,26,46,.9);padding:12px 20px;backdrop-filter:saturate(140%) blur(6px);position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700}
footer{background:var(--surface);padding:16px 20px;margin-top:20px}
.layout{display:grid;grid-template-columns:240px 1fr}
.sidebar{background:var(--surface);border-right:1px solid var(--border);min-height:calc(100vh - 60px);padding:16px;position:sticky;top:60px}
.sidebar .nav a{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;color:var(--text)}
.sidebar .nav a:hover{background:rgba(42,60,100,.35)}
.sidebar .nav a.active{background:rgba(42,60,100,.5);color:#cfe4ff}
.sidebar-collapsed .layout{grid-template-columns:64px 1fr}
.sidebar-collapsed .sidebar .nav a span{display:none}
.content{padding:20px;max-width:1100px}

input,select,button,textarea{padding:12px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);outline:none;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,136,229,.2)}
button.btn{background:var(--primary);border:none;padding:10px 14px;border-radius:10px;color:#fff;cursor:pointer;transition:transform .08s ease,background .2s ease}
button.btn:hover{background:var(--primary700)}
button.btn:active{transform:translateY(1px)}
.btn.secondary{background:#2b385a}
.btn.danger{background:var(--danger)}
.btn.success{background:var(--success)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.card{background:linear-gradient(180deg,rgba(18,26,46,1),rgba(18,26,46,.9));padding:18px;border-radius:14px;margin-bottom:18px;border:1px solid rgba(43,56,90,.6);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.card h2{margin:6px 0 12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.muted{color:var(--muted)}

table{border-collapse:collapse;width:100%;background:var(--surface);border-radius:10px;overflow:hidden}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}
th{color:#cfd8dc;background:rgba(15,22,41,.6)}
tr:nth-child(even){background:rgba(15,22,41,.4)}

.chat{display:flex;flex-direction:column;gap:10px}
.chat .msg{padding:12px;border-radius:12px;background:var(--surface2);border:1px solid rgba(43,56,90,.5)}
.chat .msg.me{background:#1b2338}
.chat .meta{font-size:12px;color:var(--muted);margin-top:6px}

.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#2b385a;color:var(--text);font-size:12px}
.badge.green{background:#2e7d32}
.badge.orange{background:#ef6c00}
.badge.grey{background:#546e7a}

.currency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.currency-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;gap:8px}
.currency-card img{width:44px;height:44px;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.currency-card .code{font-weight:600}
.currency-card .name{font-size:12px;color:var(--muted)}

h1,h2,h3{color:var(--text);margin:0 0 8px 0}
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:18px}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.stack{display:flex;flex-direction:column;gap:12px}
.inline{display:flex;align-items:center;gap:8px}

.alert{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text)}
.alert.success{border-color:#2e7d32;background:rgba(46,125,50,.15)}
.alert.error{border-color:#e53935;background:rgba(229,57,53,.15)}
.alert.info{border-color:#1565c0;background:rgba(21,101,192,.15)}

.toast{position:fixed;bottom:20px;right:20px;background:var(--surface);border:1px solid var(--border);padding:12px 16px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:1000;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translateY(0)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.modal .box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:280px}
.modal.show{display:flex}

@media (max-width: 760px){
  .grid{grid-template-columns:1fr}
  .currency-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:0;min-height:auto}
}
.topbar .logo{display:flex;align-items:center;gap:8px}
.sidebar .nav a img{width:20px;height:20px;margin-right:6px}