:root{
  --bg:#061522;
  --bg2:#0a1d2c;
  --glass:rgba(18,49,70,.48);
  --glass-strong:rgba(20,57,82,.64);
  --glass-soft:rgba(75,181,230,.08);
  --line:rgba(151,225,255,.18);
  --line-bright:rgba(117,218,255,.42);
  --blue:#66d7ff;
  --blue2:#27b9f3;
  --blue3:#a9edff;
  --text:#edfaff;
  --muted:#8eafbf;
  --green:#7de7c1;
  --danger:#ff8f9e;
  --shadow:0 20px 60px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 10%,rgba(54,195,255,.16),transparent 28%),
    radial-gradient(circle at 85% 18%,rgba(56,128,255,.14),transparent 30%),
    radial-gradient(circle at 55% 100%,rgba(46,195,255,.09),transparent 34%),
    linear-gradient(145deg,#04111d 0%,#071b2b 48%,#061321 100%);
  background-attachment:fixed;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(150,220,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(150,220,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.topbar{
  height:74px;position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:rgba(5,25,39,.70);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 12px 35px rgba(0,0,0,.24),0 0 30px rgba(56,193,255,.07);
}
.topbar:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,221,255,.5),transparent);
}
.topbar-left,.top-actions{display:flex;align-items:center;gap:12px}
.top-title{font-size:19px;font-weight:850;letter-spacing:-.3px}
.credit-small{font-size:10px;color:#9dc0cf;margin-top:2px}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  color:var(--blue3);background:rgba(77,190,232,.08);
  display:grid;place-items:center;font-size:20px;
  transition:.2s ease;
}
.icon-btn:hover{background:rgba(91,205,247,.17);border-color:var(--line-bright);box-shadow:0 0 22px rgba(71,203,255,.18)}
.top-actions select,.refresh-btn{
  height:38px;border-radius:12px;border:1px solid var(--line);
  color:var(--text);background:rgba(26,73,96,.48);
  padding:0 13px;outline:0;backdrop-filter:blur(12px);
}
.top-actions select{min-width:112px}
.refresh-btn{color:#062230;font-weight:750;background:linear-gradient(135deg,var(--blue3),#55c8f4);box-shadow:0 7px 24px rgba(54,193,245,.18)}
.refresh-btn:hover{box-shadow:0 0 25px rgba(74,209,255,.35);transform:translateY(-1px)}
.layout{display:flex;max-width:1540px;margin:auto;min-height:calc(100vh - 74px)}
.sidebar{
  width:214px;flex:0 0 214px;min-height:calc(100vh - 74px);padding:22px 12px;
  background:rgba(5,24,37,.48);border-right:1px solid var(--line);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
.nav-item{
  width:100%;text-align:left;border:1px solid transparent;
  color:#a9c5d2;background:transparent;padding:12px 14px;margin-bottom:7px;
  border-radius:14px;font-size:14px;transition:.2s ease;
}
.nav-item:hover{
  color:var(--text);background:rgba(71,190,236,.08);
  border-color:rgba(120,217,255,.16);box-shadow:0 0 24px rgba(61,197,245,.08);
}
.nav-item.active{
  color:#062130;font-weight:800;
  background:linear-gradient(135deg,#b3efff,#4dc4f3);
  border-color:rgba(184,242,255,.75);
  box-shadow:0 10px 30px rgba(47,188,237,.2),0 0 25px rgba(75,205,255,.13);
}
.content{width:100%;min-width:0;padding:27px 28px}
.page{animation:pageIn .28s ease}
@keyframes pageIn{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.page-head h1{font-size:25px;line-height:1.15;margin:0 0 7px;letter-spacing:-.5px;color:var(--text)}
.muted{color:var(--muted);font-size:13px}
.status{
  white-space:nowrap;font-size:11px;color:#a8edff;padding:8px 12px;border-radius:999px;
  background:rgba(74,196,238,.07);border:1px solid rgba(105,216,255,.18);
  box-shadow:inset 0 0 18px rgba(83,210,255,.04),0 0 20px rgba(83,210,255,.05);
}
.total-earnings-mini{
  min-height:58px;margin-bottom:15px;padding:13px 17px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  border-radius:17px;border:1px solid var(--line);
  background:linear-gradient(100deg,rgba(41,119,151,.24),rgba(19,57,80,.44));
  box-shadow:inset 0 1px rgba(210,248,255,.06),0 12px 35px rgba(0,0,0,.17),0 0 28px rgba(60,201,255,.07);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.total-earnings-mini span{display:inline-block;color:#82aabb;font-size:12px;margin-right:12px}
.total-earnings-mini strong{font-size:21px;color:#58cdfc;letter-spacing:.2px;text-shadow:0 0 18px rgba(70,205,255,.3)}
.total-earnings-mini small{color:#7eafc1;font-size:10px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric-card{
  position:relative;overflow:hidden;min-height:143px;padding:19px;border-radius:20px;
  border:1px solid rgba(139,224,255,.13);
  background:linear-gradient(145deg,rgba(31,47,58,.68),rgba(21,28,35,.78));
  box-shadow:0 14px 35px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.025);
  transition:.22s ease;
}
.metric-card:before{
  content:"";position:absolute;left:-35px;top:-45px;width:130px;height:100px;
  background:rgba(77,202,255,.09);filter:blur(28px);pointer-events:none;
}
.metric-card:hover{transform:translateY(-3px);border-color:var(--line-bright);box-shadow:var(--shadow),0 0 28px rgba(62,201,255,.1)}
.metric-card span{display:block;color:#b2c4cc;font-size:13px}
.metric-card strong{display:block;font-size:29px;margin:13px 0 8px;color:#f5fbff;letter-spacing:-.6px}
.metric-card small{display:block;color:#829da9;font-size:11px}
.metric-card em{display:block;margin-top:6px;color:var(--green);font-style:normal;font-size:11px}
.panel{
  position:relative;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(145deg,rgba(24,63,84,.54),rgba(11,34,49,.48));
  box-shadow:0 16px 45px rgba(0,0,0,.25),inset 0 1px rgba(220,250,255,.045),0 0 30px rgba(64,199,255,.045);
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
}
.panel:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(160,238,255,.05),transparent 35%,transparent 70%,rgba(63,197,255,.025));
}
.chart-panel{margin-top:17px;padding:18px}
.panel-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}
.panel-head h2{font-size:17px;margin:0;color:#e8f8ff}
.panel-head span{font-size:10px;color:#7799a9}
.chart-wrap{height:330px;margin-top:12px;position:relative;z-index:1}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mini-card{
  padding:17px;text-align:center;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(230,248,255,.94),rgba(207,239,249,.88));
  box-shadow:0 15px 35px rgba(0,0,0,.18),0 0 24px rgba(63,200,255,.08);
}
.mini-card span{display:block;color:#6c8591;font-size:11px}
.mini-card strong{display:block;margin-top:7px;color:#087ec3;font-size:22px;text-shadow:0 0 15px rgba(30,159,225,.14)}
.filters{display:flex;align-items:end;gap:12px;padding:17px;margin-bottom:15px}
.filters label{display:flex;flex-direction:column;gap:6px;color:#89a9b7;font-size:11px}
.filters input,.add-account input{
  min-height:42px;border:1px solid var(--line)!important;border-radius:12px!important;
  padding:10px 12px;color:var(--text)!important;background:rgba(5,28,43,.55)!important;
  outline:0;box-shadow:inset 0 1px rgba(255,255,255,.025);
}
input::placeholder{color:#63818f}
input:focus,select:focus,textarea:focus{border-color:rgba(101,216,255,.55)!important;box-shadow:0 0 0 3px rgba(72,198,247,.08),0 0 24px rgba(64,202,255,.12)!important}
.primary-btn{
  min-height:42px;border:1px solid rgba(181,240,255,.5);border-radius:12px;
  padding:10px 16px;color:#042433;background:linear-gradient(135deg,#b3efff,#4cc4f4);
  font-weight:800;box-shadow:0 8px 25px rgba(47,188,237,.18),0 0 20px rgba(76,205,255,.08);
  transition:.2s ease;
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(47,188,237,.26),0 0 30px rgba(76,205,255,.18)}
.table-panel{padding:0;overflow:hidden}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:680px}
th,td{padding:13px 12px;border-bottom:1px solid rgba(137,218,247,.08);text-align:left;font-size:12px}
th{color:#9fd8ea;background:rgba(65,164,198,.08);font-weight:700}
td{color:#b5cbd5}
tbody tr:hover{background:rgba(72,195,237,.05)}
.add-account{display:grid;grid-template-columns:1fr 1.5fr auto;gap:10px;align-items:center;padding:18px}
.add-account p{grid-column:1/-1;margin:0}
.account-message{font-size:12px}
.account-message.info{color:#8ee2f7}
.account-message.error{color:var(--danger)}
.account-row{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:16px;margin-top:10px;border-radius:17px;border:1px solid var(--line);
  background:rgba(16,50,68,.42);box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.account-row h3{margin:0 0 5px;font-size:15px;color:var(--text)}
.account-row small{color:#799aa9}
.danger{
  border:1px solid rgba(255,130,147,.3);background:rgba(255,92,116,.06);
  color:#ff9dac;border-radius:10px;padding:8px 11px;cursor:pointer
}
footer{text-align:center;padding:30px 10px;color:#668594;font-size:11px}
.hidden{display:none!important}

/* Login */
.login-body{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 50% 18%,rgba(70,205,255,.16),transparent 28%),
    radial-gradient(circle at 12% 80%,rgba(32,125,255,.12),transparent 30%),
    linear-gradient(145deg,#04111c,#071b2b 55%,#04121e);
}
.login-card{
  width:min(430px,100%);padding:31px;border-radius:26px;
  border:1px solid rgba(132,224,255,.32);
  background:linear-gradient(145deg,rgba(28,72,96,.63),rgba(8,32,48,.58));
  box-shadow:0 30px 80px rgba(0,0,0,.42),0 0 45px rgba(60,202,255,.1),inset 0 1px rgba(220,250,255,.08);
  backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);
}
.brand-mark{
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,#ff1744,#e60035);color:white;font-size:25px;font-weight:900;
  box-shadow:0 10px 30px rgba(230,0,50,.28);
}
.login-card h1{margin:19px 0 5px;font-size:29px;letter-spacing:-.7px;color:#effaff}
.login-card form{display:grid;gap:10px;margin-top:25px}
.login-card label{font-size:13px;color:#c3dce7}
.login-card input{
  width:100%;padding:13px;border:1px solid var(--line);border-radius:13px;
  color:var(--text);background:rgba(4,25,38,.55);outline:0;
}
.error{color:#ff8f9e;font-size:12px;min-height:18px}
.design-credit{margin-top:29px;text-align:center;color:#6f929f;font-size:11px}
.design-credit strong{color:#a5cfdd}
@media(max-width:900px){
  .sidebar{position:fixed;left:-235px;top:74px;z-index:45;height:calc(100vh - 74px);transition:.22s ease;box-shadow:20px 0 45px rgba(0,0,0,.25)}
  .sidebar.open{left:0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .content{padding:20px 16px}
  .topbar{padding:0 13px}
  .chart-wrap{height:285px}
}
@media(max-width:560px){
  .topbar{height:68px}.layout{min-height:calc(100vh - 68px)}
  .sidebar{top:68px;height:calc(100vh - 68px)}
  .top-title{font-size:16px}.credit-small{font-size:9px}
  .top-actions{gap:6px}.top-actions select{min-width:92px;max-width:100px;padding:0 8px}
  .refresh-btn{padding:0 10px;font-size:11px}.top-actions .icon-btn{width:35px;height:35px}
  .stats-grid{grid-template-columns:1fr}
  .metric-card{min-height:130px}
  .mini-grid{grid-template-columns:1fr}
  .filters{display:grid;grid-template-columns:1fr}
  .page-head{align-items:flex-start;flex-direction:column}
  .status{align-self:flex-start}
  .add-account{grid-template-columns:1fr}
  .add-account p{grid-column:auto}
  .chart-wrap{height:250px}
  .total-earnings-mini{padding:12px 14px}
  .total-earnings-mini strong{font-size:19px}
  .panel,.metric-card,.mini-card,.login-card{border-radius:18px}
}