/* TunerSuite Ultra Dark (v3 UI polish) */
:root{
  /* Black / Green / Red System */
  --bg:#040606;
  --bg2:#070b09;
  --panel:#070b0a;
  --panel2:#0b1210;

  --stroke:rgba(34,197,94,.22);
  --stroke2:rgba(255,255,255,.08);
  --stroke3:rgba(239,68,68,.18);

  --txt:#eafff1;
  --muted:#a7c9b6;
  --muted2:#7ea892;

  --accent:#22c55e;      /* green */
  --accent2:#10b981;     /* emerald */
  --danger:#ef4444;      /* red */
  --danger2:#dc2626;     /* deep red */
  --warn:#f59e0b;

  --shadow: 0 26px 80px rgba(0,0,0,.70);
  --shadow2: 0 14px 34px rgba(0,0,0,.45);

  --radius:18px;
  --radius2:14px;
  --blur:14px;

  --sidebar:280px;
  --topbar:66px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(34,197,94,.34), transparent 55%),
    radial-gradient(900px 620px at 80% 0%, rgba(239,68,68,.22), transparent 52%),
    radial-gradient(900px 620px at 30% 110%, rgba(16,185,129,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* Decorative frame glow */
.frameGlow:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:
    inset 0 0 0 2px rgba(34,197,94,.22),
    inset 0 0 110px rgba(34,197,94,.22),
    inset 0 0 180px rgba(239,68,68,.10);
}
.bgDots{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:620px 420px, 820px 520px, 980px 680px;
}
.network{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background:
    radial-gradient(circle at 18% 28%, rgba(16,185,129,.10), transparent 55%),
    radial-gradient(circle at 74% 40%, rgba(239,68,68,.08), transparent 58%);
}

/* Layout */
.app{position:relative;z-index:2;display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  padding:18px 16px;
  background:linear-gradient(180deg, rgba(11,18,33,.86), rgba(8,14,26,.64));
  border-right:1px solid var(--stroke2);
  backdrop-filter:blur(var(--blur));
}
.main{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;
  border-bottom:1px solid var(--stroke2);
  background:linear-gradient(180deg, rgba(9,16,30,.60), rgba(9,16,30,.22));
  backdrop-filter:blur(var(--blur));
}
.content{padding:22px 24px 40px}

/* Brand */
.brand{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;border-bottom:1px solid var(--stroke2);margin-bottom:14px}
.mark{width:34px;height:34px;border-radius:12px;
  background:radial-gradient(circle at 30% 30%, rgba(16,185,129,.92), rgba(34,197,94,.92), rgba(239,68,68,.92));
  box-shadow:0 10px 30px rgba(34,197,94,.32)
}
.brandName{font-weight:950;letter-spacing:.02em}
.brandSub{margin-top:2px;color:var(--muted2);font-size:12px}

/* Nav */
.navSection{margin-top:14px}
.navHdr{margin:14px 10px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:rgba(167,201,182,.82)}
.navItem{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:14px;
  color:rgba(233,240,255,.90);
  border:1px solid transparent;
  transition:background .14s ease, border-color .14s ease, transform .14s ease;
}
.navItem:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.navItem.active{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.22);box-shadow:inset 0 0 0 1px rgba(16,185,129,.12)}
.navDot{width:18px;height:18px;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);display:inline-block}
.navLbl{font-weight:750}

/* Sidebar footer */
.sidebarFooter{position:absolute;left:16px;right:16px;bottom:14px}
.balanceBox{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--stroke2)}
.balLbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(167,201,182,.82)}
.balVal{font-size:22px;font-weight:950;margin-top:6px}
.cr{opacity:.7;font-size:12px;margin-left:6px}
.balSub{color:rgba(167,201,182,.85);font-size:12px;margin-top:4px}
.logoutRow{margin-top:10px;display:flex;gap:10px}

/* Topbar */
.pageTitle{font-size:18px;font-weight:950}
.topRight{display:flex;align-items:center;gap:10px}
.searchPill{width:520px;max-width:52vw;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.searchPill input{flex:1;background:transparent;border:0;outline:0;color:var(--txt)}
.sIcon{opacity:.8}
.pillMini{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-weight:850}
.userPill{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.userMeta{display:flex;flex-direction:column;line-height:1.1}
.userName{font-weight:900;font-size:12px}
.userSub{color:rgba(167,201,182,.85);font-size:11px}
.avatar{width:30px;height:30px;border-radius:999px;background:rgba(239,68,68,.22);border:1px solid rgba(239,68,68,.25);display:grid;place-items:center;font-weight:950}

/* Cards & typography */
.h1{font-size:28px;font-weight:950;margin:0}
.subtitle{color:var(--muted);margin-top:6px;font-size:13px}
.card{
  position:relative;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(34,197,94,.10), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid rgba(34,197,94,.18);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(var(--blur));
}
.card:before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.cardH{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cardT{font-weight:950;font-size:15px}
.cardSub{color:rgba(167,201,182,.85);font-size:12px;margin-top:2px}
.body{padding:16px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.kpi{border-radius:18px;padding:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.kTitle{color:rgba(167,201,182,.85);font-size:12px}
.kVal{font-size:24px;font-weight:950;margin-top:4px}

/* Badges & status */
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:850}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.badge.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}
.badge.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25)}
.badge.bad{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}

.progress{height:10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg, rgba(16,185,129,.95), rgba(34,197,94,.95));border-radius:999px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:var(--txt);cursor:pointer;font-weight:950;letter-spacing:.01em;transition:transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.primary{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.14)}
.btn.ok{border-color:rgba(34,197,94,.40);background:rgba(34,197,94,.14)}
.btn.warn{border-color:rgba(245,158,11,.40);background:rgba(245,158,11,.12)}
.btn.bad{border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.12)}
.btnGhost{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-weight:900}

.bigBtn{width:100%;margin-top:12px;padding:14px 16px;border-radius:16px;border:1px solid rgba(239,68,68,.45);background:linear-gradient(90deg, rgba(34,197,94,.92), rgba(0,0,0,.10));color:#fff;font-weight:950;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:0 16px 50px rgba(34,197,94,.18)}
.bigBtn:hover{filter:brightness(1.08)}

/* Form controls */
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(167,201,182,.82);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:var(--txt);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(16,185,129,.35);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
textarea{min-height:96px;resize:vertical}

.drop{margin-top:10px;border-radius:16px;border:1px dashed rgba(239,68,68,.55);background:rgba(239,68,68,.10);padding:18px;text-align:center}
.note{color:rgba(167,201,182,.85);font-size:12px;margin-top:8px;text-align:center}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 10px;margin:0;padding:0}
.table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:rgba(167,201,182,.82);text-align:left;padding:0 14px 10px}
.table tbody tr{
  background:linear-gradient(180deg, rgba(6,10,8,.96), rgba(10,16,12,.92));
  border:1px solid rgba(34,197,94,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.table tbody tr:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.50);
  background:linear-gradient(180deg, rgba(8,14,10,.98), rgba(12,20,14,.94));
}
.table tbody td{
  padding:14px 14px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.table tbody tr td:first-child{
  border-left:1px solid rgba(34,197,94,.22);
  border-top-left-radius:14px;border-bottom-left-radius:14px
}
.table tbody tr td:last-child{
  border-right:1px solid rgba(34,197,94,.22);
  border-top-right-radius:14px;border-bottom-right-radius:14px
}
.table tbody tr:hover{
  background:linear-gradient(180deg, rgba(19,35,58,.96), rgba(15,28,48,.92));
  border-color:rgba(47,128,255,.45);
}
.table tbody tr:hover td{ border-top-color:rgba(47,128,255,.25); border-bottom-color:rgba(47,128,255,.25); }

/* Chips grid (wizard) */
.matrixSearch{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.matrixSearch input{flex:1;background:transparent;border:0;outline:0;color:var(--txt)}
.gridCards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opt{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);padding:12px;cursor:pointer;transition:transform .12s ease, border-color .12s ease, background .12s ease;min-height:74px}
.opt:hover{transform:translateY(-1px);border-color:rgba(16,185,129,.24)}
.opt .name{font-weight:950;font-size:13px}
.opt .meta{color:var(--muted2);font-size:12px;margin-top:4px}
.opt .cr{position:absolute;right:10px;bottom:10px;font-weight:950;color:rgba(16,185,129,.95)}
.opt.active{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.10);box-shadow:0 14px 40px rgba(16,185,129,.10)}
.opt.active .cr{color:rgba(34,197,94,.95)}

.prBtn{padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);cursor:pointer;font-weight:950;font-size:12px}
.prBtn.active{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.18)}

/* Layout helpers */
.grid2{margin-top:18px;display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.hr{height:1px;background:rgba(255,255,255,.06);margin:14px 0}

/* Responsive */
@media (max-width:1100px){
  .app{grid-template-columns:84px 1fr}
  .brandTxt,.navHdr,.navLbl,.sidebarFooter{display:none}
  .navItem{justify-content:center}
  .searchPill{display:none}
}
@media (max-width:980px){.grid2{grid-template-columns:1fr}.gridCards{grid-template-columns:repeat(2,1fr)}.kpis{grid-template-columns:1fr;}}
@media (max-width:560px){.row{grid-template-columns:1fr}.gridCards{grid-template-columns:1fr}}

/* Layout helpers used by admin/user pages */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.actions{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(233,240,255,.92);font-weight:850;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);font-weight:900;font-size:12px}
.chip.stage{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.14)}
.chip.emis{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
.chip.feature{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10)}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.progress span{display:block;height:100%;background:linear-gradient(90deg, rgba(16,185,129,.95), rgba(34,197,94,.95));border-radius:999px}

@media (max-width:980px){.split{grid-template-columns:1fr}}


/* =========================
   DarkPro v5 Internal Redesign
   ========================= */
:root{
  --card1: linear-gradient(180deg, rgba(8,16,32,.92), rgba(10,20,40,.92));
  --card2: rgba(10,20,42,.72);
  --card3: rgba(8,16,32,.68);
  --line: rgba(120,170,255,.18);
  --line2: rgba(120,170,255,.10);
  --glass: rgba(10,18,34,.55);
}
.pageTitle .ptMain{font-size:18px;font-weight:800;letter-spacing:.2px}
.pageTitle .ptSub{margin-top:2px;font-size:12px;color:var(--muted2);opacity:.95}

.navBadge{
  margin-left:auto;
  min-width:22px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  color:rgba(240,248,255,.92);
  background: rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.35);
}

.cardL1,.cardL2,.cardL3{
  border-radius: 16px;
  border:1px solid var(--line2);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}
.cardL1{ background: var(--card1); }
.cardL2{ background: var(--card2); }
.cardL3{ background: var(--card3); }

.txList{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.txItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(160,200,255,.14);
  background: rgba(5,10,18,.35);
}
.txIcon{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.35);
  font-weight:900;
}
.txMain{flex:1;min-width:0}
.txTitle{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txSub{font-size:12px;color:var(--muted2);margin-top:2px}
.txAmt{
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.txAmt.pos{color:var(--ok);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.txAmt.neg{color:var(--bad);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}

.balanceCard{
  background: linear-gradient(180deg, rgba(8,55,120,.60), rgba(5,10,20,.70));
  border:1px solid rgba(90,160,255,.35);
}
.balanceCard .balBig{font-size:28px;font-weight:1000;letter-spacing:.3px}
.balanceCard .balSmall{color:rgba(240,248,255,.85);font-size:12px;margin-top:2px}
.statSplit{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.statMini{
  padding:10px 12px;border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.statMini .smLbl{font-size:11px;color:var(--muted2)}
.statMini .smVal{margin-top:6px;font-weight:900;font-size:14px}

/* Sharp tables (Admin + User) */
.tableWrap{margin-top:12px}
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.table thead th{
  text-align:left;
  font-size:11px;
  color: rgba(230,240,255,.72);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding: 8px 12px;
}
.table tbody tr{
  background: rgba(8,16,32,.72);
  border:1px solid rgba(120,170,255,.18);
}
.table tbody td{
  padding: 12px 14px;
  border-top:1px solid rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:13px;
}
.table tbody tr td:first-child{
  border-left:1px solid rgba(120,170,255,.18);
  border-radius:12px 0 0 12px;
}
.table tbody tr td:last-child{
  border-right:1px solid rgba(120,170,255,.18);
  border-radius:0 12px 12px 0;
}
.table tbody tr:hover td{
  background: rgba(19,35,58,.62);
  border-color: rgba(34,197,94,.35);
}

/* Pills sharper */
.pill, .badge{
  border:1px solid rgba(160,200,255,.18) !important;
}

/* Sidebar section headers */
.navHdr{
  letter-spacing:.18em;
  font-size:10px;
  opacity:.9;
}