/* ================================================================
   MTD API Platform — CSS v2  |  Deep Slate + Emerald
   Mobile-first, clean, minimal, modern
   ================================================================ */

:root {
  --accent:       #10b981;
  --accent-rgb:   16,185,129;
  --accent-dim:   #059669;
  --accent-light: rgba(16,185,129,.12);
  --accent-glow:  0 0 24px rgba(16,185,129,.35);

  --bg:        #0f1117;
  --bg-raised: #161b22;
  --bg-card:   #1a2030;
  --bg-input:  #1e2535;
  --bg-hover:  rgba(255,255,255,.04);

  --border:       rgba(255,255,255,.08);
  --border-focus: rgba(16,185,129,.5);

  --sidebar-bg: #121620;
  --sidebar-w:  256px;
  --topbar-h:   58px;

  --text:       #e8edf5;
  --text-soft:  #8892a4;
  --text-muted: #505c70;

  --green:  #10b981; --green-bg:  rgba(16,185,129,.1);
  --blue:   #3b82f6; --blue-bg:   rgba(59,130,246,.1);
  --amber:  #f59e0b; --amber-bg:  rgba(245,158,11,.1);
  --red:    #f43f5e; --red-bg:    rgba(244,63,94,.1);
  --purple: #8b5cf6; --purple-bg: rgba(139,92,246,.1);

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.7);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 170ms; --dur-lg: 280ms;
}

[data-theme="light"] {
  --bg:        #f0f2f7;
  --bg-raised: #e8ebf2;
  --bg-card:   #ffffff;
  --bg-input:  #f3f5fa;
  --bg-hover:  rgba(0,0,0,.04);
  --border:    rgba(0,0,0,.08);
  --sidebar-bg:#ffffff;
  --text:       #111827;
  --text-soft:  #6b7280;
  --text-muted: #9ca3af;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  font-size:14.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-lg) var(--ease),color var(--dur-lg) var(--ease);
}
a{color:var(--accent);text-decoration:none;transition:color var(--dur)}
a:hover{color:var(--accent-dim)}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit}
code{font-family:'Space Mono','Courier New',monospace;font-size:.85em}
pre{font-family:'Space Mono',monospace;white-space:pre-wrap;word-break:break-all}
::selection{background:rgba(16,185,129,.25);color:var(--text)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12)}

/* LAYOUT */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  background:var(--sidebar-bg);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:300;
  transition:transform var(--dur-lg) var(--ease);
  overflow-y:auto;overflow-x:hidden;
}
.topbar{
  position:fixed;top:0;left:var(--sidebar-w);right:0;
  height:var(--topbar-h);
  background:var(--bg-raised);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;z-index:200;
  transition:left var(--dur-lg) var(--ease);
  backdrop-filter:blur(8px);
}
.main-content{
  margin-left:var(--sidebar-w);padding-top:var(--topbar-h);
  min-height:100vh;padding-bottom:3rem;
  transition:margin-left var(--dur-lg) var(--ease);
}

/* SIDEBAR HEADER */
.sidebar-header{
  padding:1rem .875rem;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-mark{
  width:30px;height:30px;background:var(--accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.85rem;flex-shrink:0;
}
.logo-name{font-family:'Space Mono',monospace;font-size:1rem;font-weight:700;color:var(--text);letter-spacing:.03em}
.logo-name span{color:var(--accent)}
.sidebar-close{
  background:none;border:none;color:var(--text-soft);padding:.3rem;
  border-radius:var(--r-sm);display:none;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.sidebar-close:hover{color:var(--text);background:var(--bg-hover)}

/* SIDEBAR NAV */
.sidebar-nav{flex:1;padding:.625rem .75rem;display:flex;flex-direction:column;gap:1.25rem;overflow-y:auto}
.nav-group{display:flex;flex-direction:column;gap:1px}
.nav-group-label{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);padding:.2rem .55rem .35rem;
}
.nav-link-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .6rem;border-radius:var(--r-sm);
  color:var(--text-soft);font-size:.855rem;font-weight:500;
  text-decoration:none;border:none;background:none;
  width:100%;text-align:left;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-link-item i:first-child{width:15px;text-align:center;font-size:.82rem;flex-shrink:0}
.nav-link-item:hover{background:var(--bg-hover);color:var(--text)}
.nav-link-item.active{background:var(--accent-light);color:var(--accent)}
.nav-admin{color:var(--amber)}
.nav-admin:hover{background:var(--amber-bg);color:var(--amber)}
.nav-admin.active{background:var(--amber-bg);color:var(--amber)}
.nav-logout:hover{background:var(--red-bg);color:var(--red)}
.nav-badge{
  margin-left:auto;font-size:.57rem;font-weight:800;letter-spacing:.06em;
  background:var(--amber);color:#000;border-radius:var(--r-full);padding:1px 5px;
}
.nav-arrow{margin-left:auto;font-size:.62rem;color:var(--text-muted);transition:transform var(--dur)}
.nav-link-item[aria-expanded="true"] .nav-arrow{transform:rotate(180deg)}
.nav-sub{padding-left:1.75rem}
.nav-sub .nav-link-item{font-size:.82rem}

/* SIDEBAR FOOTER */
.sidebar-footer{
  padding:.75rem .875rem;border-top:1px solid var(--border);flex-shrink:0;
}
.credit-label{
  font-size:.7rem;color:var(--text-muted);
  display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem;
}
.credit-label .credit-num{color:var(--text-soft);font-weight:600}
.credit-label a{color:var(--accent);font-weight:600;font-size:.68rem}
.credit-track{height:3px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.credit-fill{height:100%;background:var(--accent);border-radius:var(--r-full);transition:width .5s var(--ease)}

/* OVERLAY */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:299;backdrop-filter:blur(2px)}
.sidebar-overlay.show{display:block}

/* TOPBAR */
.topbar-left{display:flex;align-items:center;gap:.65rem;min-width:0}
.topbar-right{display:flex;align-items:center;gap:.25rem;flex-shrink:0}
.topbar-hamburger{
  background:none;border:none;color:var(--text-soft);padding:.4rem;
  border-radius:var(--r-sm);display:none;align-items:center;justify-content:center;
  font-size:.95rem;transition:all var(--dur);
}
.topbar-hamburger:hover{color:var(--text);background:var(--bg-hover)}
.topbar-crumb{
  font-size:.825rem;color:var(--text-soft);
  display:flex;align-items:center;gap:.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-icon{
  background:none;border:none;color:var(--text-soft);padding:.42rem .48rem;
  border-radius:var(--r-sm);font-size:.88rem;position:relative;
  transition:all var(--dur);display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.topbar-icon:hover{color:var(--text);background:var(--bg-hover)}
.notif-count{
  position:absolute;top:3px;right:3px;
  background:var(--red);color:#fff;
  font-size:.56rem;font-weight:700;
  min-width:14px;height:14px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;padding:0 2px;
  border:1.5px solid var(--bg-raised);
}

/* USER MENU */
.topbar-user{position:relative}
.user-trigger{
  display:flex;align-items:center;gap:.42rem;background:none;border:none;
  padding:.28rem .42rem;border-radius:var(--r-sm);cursor:pointer;
  transition:background var(--dur);
}
.user-trigger:hover{background:var(--bg-hover)}
.user-av{
  width:28px;height:28px;background:var(--accent);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.76rem;font-weight:700;flex-shrink:0;
}
.user-name-text{font-size:.8rem;font-weight:500;color:var(--text)}
.user-menu{
  position:absolute;top:calc(100% + .45rem);right:0;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:.35rem;min-width:196px;z-index:9999;display:none;
  animation:fadeDown .14s var(--ease);
}
.user-menu.open{display:block}
@keyframes fadeDown{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.user-menu-hdr{padding:.45rem .6rem .55rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.user-menu-name{font-size:.83rem;font-weight:600;color:var(--text)}
.user-menu-email{font-size:.72rem;color:var(--text-muted);margin-top:.08rem}
.user-menu-plan{
  display:inline-flex;margin-top:.25rem;font-size:.63rem;font-weight:700;
  background:var(--accent-light);color:var(--accent);
  border-radius:var(--r-full);padding:1px 6px;letter-spacing:.04em;
}
.user-menu-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .6rem;border-radius:var(--r-sm);
  font-size:.815rem;color:var(--text-soft);text-decoration:none;
  cursor:pointer;border:none;background:none;width:100%;text-align:left;
  transition:background var(--dur),color var(--dur);
}
.user-menu-item:hover{background:var(--bg-hover);color:var(--text)}
.user-menu-item.danger:hover{background:var(--red-bg);color:var(--red)}
.user-menu-item i{width:13px;text-align:center;font-size:.78rem}
.user-menu-sep{height:1px;background:var(--border);margin:.25rem 0}

/* PAGE SHELL */
.page-wrap{padding:1.5rem 1.25rem 0}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.page-title{font-size:1.35rem;font-weight:700;line-height:1.2;color:var(--text)}
.page-title .hl{color:var(--accent)}
.page-sub{font-size:.86rem;color:var(--text-soft);margin-top:.2rem}
.page-actions{display:flex;gap:.45rem;align-items:center;flex-shrink:0}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;
  font-family:inherit;font-size:.83rem;font-weight:600;line-height:1;
  padding:.52rem .95rem;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:all var(--dur) var(--ease);text-decoration:none;-webkit-appearance:none;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-dim);border-color:var(--accent-dim);color:#fff;box-shadow:var(--accent-glow)}
.btn-ghost{background:transparent;color:var(--text-soft);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:hover{background:#e11d48;color:#fff}
.btn-outline{background:transparent;color:var(--text-soft);border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.btn-outline-danger{background:transparent;color:var(--red);border-color:rgba(244,63,94,.25)}
.btn-outline-danger:hover{background:var(--red-bg);border-color:var(--red)}
.btn-sm{font-size:.77rem;padding:.37rem .72rem}
.btn-xs{font-size:.7rem;padding:.26rem .5rem;border-radius:5px}
.btn-icon{padding:.44rem;aspect-ratio:1}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.card-body{padding:1.1rem 1.2rem}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.82rem 1.2rem;border-bottom:1px solid var(--border);gap:1rem;
}
.card-title{font-size:.855rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.38rem;margin:0}
.card-title i{color:var(--accent);font-size:.78rem}
.card-link{font-size:.74rem;color:var(--accent);font-weight:500;white-space:nowrap}
.card-link:hover{text-decoration:underline}

/* STAT GRID */
.stat-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.65rem;padding:0 1.25rem 1.25rem;
}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:.9rem 1rem;display:flex;flex-direction:column;gap:.55rem;
  transition:transform var(--dur),box-shadow var(--dur);position:relative;overflow:hidden;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-card-icon{
  width:34px;height:34px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;
}
.sc-green{background:var(--green-bg);color:var(--green)}
.sc-blue{background:var(--blue-bg);color:var(--blue)}
.sc-amber{background:var(--amber-bg);color:var(--amber)}
.sc-red{background:var(--red-bg);color:var(--red)}
.sc-purple{background:var(--purple-bg);color:var(--purple)}
.stat-card-val{font-size:1.45rem;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;word-break:break-all}
.stat-card-label{font-size:.73rem;color:var(--text-soft)}
.stat-card-foot{font-size:.7rem;color:var(--text-muted);display:flex;align-items:center;gap:.3rem}
.stat-key-val{font-family:'Space Mono',monospace;font-size:.74rem;color:var(--text);word-break:break-all;line-height:1.4}

/* GRIDS */
.grid-2{display:grid;grid-template-columns:1fr;gap:.65rem;padding:0 1.25rem 1.25rem}
.grid-3{display:grid;grid-template-columns:1fr;gap:.65rem;padding:0 1.25rem 1.25rem}
.full-card{margin:0 1.25rem 1.25rem}

/* FORMS */
.form-label{display:block;font-size:.78rem;font-weight:600;color:var(--text-soft);margin-bottom:.32rem}
.form-control,.form-select,
input[type="text"],input[type="email"],input[type="password"],
input[type="number"],textarea,select{
  display:block;width:100%;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);
  font-family:inherit;font-size:.855rem;padding:.575rem .82rem;
  transition:border-color var(--dur),box-shadow var(--dur);outline:none;-webkit-appearance:none;
}
.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(16,185,129,.14);
}
.form-control::placeholder,input::placeholder,textarea::placeholder{color:var(--text-muted)}
.form-group{margin-bottom:.82rem}
.input-group{position:relative}
.input-group-icon{position:absolute;left:.78rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.77rem;pointer-events:none;z-index:1}
.input-group input{padding-left:2.3rem}
.input-reveal{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);padding:.2rem;z-index:1;border-radius:4px;transition:color var(--dur)}
.input-reveal:hover{color:var(--text)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.form-check{display:flex;align-items:center;gap:.45rem;font-size:.83rem;color:var(--text-soft);cursor:pointer}
.form-check input[type="checkbox"]{width:14px;height:14px;accent-color:var(--accent);flex-shrink:0}
.check-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.82rem}
.form-error{font-size:.73rem;color:var(--red);margin-top:.28rem;display:block}
.form-hint{font-size:.73rem;color:var(--text-muted);margin-top:.28rem;display:block}

/* TABLES */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:.83rem}
.data-table thead tr{border-bottom:1px solid var(--border)}
.data-table th{padding:.6rem 1.05rem;font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);white-space:nowrap;text-align:left}
.data-table td{padding:.66rem 1.05rem;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background var(--dur)}
.data-table tbody tr:hover{background:var(--bg-hover)}
.row-warn{background:rgba(245,158,11,.04)!important}
.row-danger{background:rgba(244,63,94,.04)!important}

/* BADGES */
.badge{display:inline-flex;align-items:center;font-size:.67rem;font-weight:700;padding:2px 6px;border-radius:var(--r-full);letter-spacing:.02em;white-space:nowrap}
.badge-green{background:var(--green-bg);color:var(--green)}
.badge-red{background:var(--red-bg);color:var(--red)}
.badge-amber{background:var(--amber-bg);color:var(--amber)}
.badge-blue{background:var(--blue-bg);color:var(--blue)}
.badge-purple{background:var(--purple-bg);color:var(--purple)}
.badge-muted{background:var(--bg-hover);color:var(--text-soft)}
.badge-plan{background:var(--accent-light);color:var(--accent)}
.method{font-family:'Space Mono',monospace;font-size:.63rem;font-weight:700;padding:1px 5px;border-radius:4px}
.method-post{background:rgba(16,185,129,.15);color:var(--green)}
.method-get{background:rgba(59,130,246,.15);color:var(--blue)}
.method-put{background:rgba(245,158,11,.15);color:var(--amber)}
.method-delete{background:rgba(244,63,94,.15);color:var(--red)}
.status-code{font-family:'Space Mono',monospace;font-size:.7rem;font-weight:700;padding:1px 5px;border-radius:4px}
.status-2xx{background:var(--green-bg);color:var(--green)}
.status-4xx{background:var(--amber-bg);color:var(--amber)}
.status-5xx{background:var(--red-bg);color:var(--red)}
.txn-complete{color:var(--green)}.txn-pending{color:var(--amber)}.txn-failed{color:var(--red)}.txn-refunded{color:var(--text-soft)}

/* USER CELL */
.user-cell{display:flex;align-items:center;gap:.55rem}
.u-av{width:26px;height:26px;background:var(--accent-light);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.7rem;font-weight:700;flex-shrink:0}
.u-av.admin{background:var(--amber-bg);color:var(--amber)}
.u-name{font-weight:600;font-size:.82rem}
.u-email{font-size:.7rem;color:var(--text-muted)}

/* PAGINATION */
.pager{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:.82rem 1.05rem;border-top:1px solid var(--border)}
.pager-info{font-size:.76rem;color:var(--text-soft)}

/* NOTIFS */
.notif-list{padding:.2rem 0}
.notif-item{display:flex;align-items:flex-start;gap:.7rem;padding:.82rem 1.2rem;border-bottom:1px solid var(--border);transition:background var(--dur)}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg-hover)}
.notif-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0;margin-top:.05rem}
.notif-info .notif-icon{background:var(--blue-bg);color:var(--blue)}
.notif-success .notif-icon{background:var(--green-bg);color:var(--green)}
.notif-warning .notif-icon{background:var(--amber-bg);color:var(--amber)}
.notif-danger .notif-icon{background:var(--red-bg);color:var(--red)}
.notif-title{font-size:.83rem;font-weight:600;color:var(--text);margin-bottom:.12rem}
.notif-msg{font-size:.78rem;color:var(--text-soft)}
.notif-time{font-size:.68rem;color:var(--text-muted);margin-top:.18rem}

/* REQUEST LIST */
.req-list{padding:.15rem 0}
.req-item{display:flex;align-items:center;justify-content:space-between;padding:.56rem 1.2rem;border-bottom:1px solid var(--border);gap:.7rem;transition:background var(--dur)}
.req-item:last-child{border-bottom:none}
.req-item:hover{background:var(--bg-hover)}
.req-left{display:flex;align-items:center;gap:.45rem;min-width:0}
.req-route{font-family:'Space Mono',monospace;font-size:.73rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.req-meta{display:flex;align-items:center;gap:.38rem;flex-shrink:0}
.req-time{font-size:.68rem;color:var(--text-muted)}

/* INFO LIST */
.info-list{display:flex;flex-direction:column;padding:.2rem 0}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:.52rem 1.2rem;border-bottom:1px solid var(--border);gap:1rem}
.info-row:last-child{border-bottom:none}
.info-key{font-size:.78rem;color:var(--text-soft);flex-shrink:0}
.info-val{font-size:.8rem;color:var(--text);text-align:right;word-break:break-all}

/* API KEY */
.apikey-box{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem .85rem;font-family:'Space Mono',monospace;font-size:.76rem;color:var(--text);word-break:break-all;line-height:1.5;flex:1}
.apikey-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.code-block{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);padding:.82rem .95rem;font-family:'Space Mono',monospace;font-size:.76rem;color:var(--accent);line-height:1.7;overflow-x:auto}

/* CHART */
.chart-container{padding:.875rem 1.2rem;height:195px}

/* ROUTE STATS */
.route-stats{padding:.7rem 1.2rem;display:flex;flex-direction:column;gap:.6rem}
.route-stat{display:flex;align-items:center;gap:.7rem}
.route-stat-name{font-family:'Space Mono',monospace;font-size:.7rem;color:var(--text-soft);width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-stat-track{flex:1;height:3px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.route-stat-fill{height:100%;background:var(--accent);border-radius:var(--r-full)}
.route-stat-count{font-size:.7rem;font-weight:600;color:var(--text-soft);flex-shrink:0;width:26px;text-align:right}

/* LOGS */
.log-list{padding:.15rem 0;max-height:340px;overflow-y:auto}
.log-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 1.2rem;border-bottom:1px solid var(--border)}
.log-item:last-child{border-bottom:none}
.log-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:.4rem}
.log-info .log-dot{background:var(--blue)}
.log-warning .log-dot{background:var(--amber)}
.log-error .log-dot,.log-critical .log-dot{background:var(--red)}
.log-action{font-size:.805rem;font-weight:500;color:var(--text)}
.log-detail{font-size:.7rem;color:var(--text-muted);display:flex;gap:.38rem;flex-wrap:wrap}
.log-ip{font-family:'Space Mono',monospace}
.log-level-tag{font-size:.6rem;font-weight:700;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em;margin-left:auto;flex-shrink:0}
.log-info .log-level-tag{background:var(--blue-bg);color:var(--blue)}
.log-warning .log-level-tag{background:var(--amber-bg);color:var(--amber)}
.log-error .log-level-tag,.log-critical .log-level-tag{background:var(--red-bg);color:var(--red)}

/* QUICK GRID */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;padding:0 1.25rem 1.25rem}
.quick-item{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);
  padding:.8rem .65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.38rem;text-align:center;color:var(--text-soft);text-decoration:none;
  font-size:.72rem;font-weight:500;transition:all var(--dur);
}
.quick-item i{font-size:1rem;color:var(--accent)}
.quick-item:hover{background:var(--accent-light);border-color:rgba(16,185,129,.3);color:var(--accent);transform:translateY(-2px)}

/* BUY CREDITS */
.buy-grid{display:grid;grid-template-columns:1fr;gap:.7rem;padding:0 1.25rem 1.25rem}
.price-summary{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-sm);margin-top:.7rem}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:.48rem .82rem;font-size:.82rem;color:var(--text-soft);border-bottom:1px solid var(--border)}
.price-row:last-child{border-bottom:none;font-weight:700;color:var(--text);font-size:.92rem}
.steps{display:flex;flex-direction:column;gap:.82rem;padding:1.05rem 1.2rem}
.step{display:flex;align-items:flex-start;gap:.6rem}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;margin-top:.06rem}
.step-body strong{font-size:.83rem;display:block;color:var(--text);margin-bottom:.08rem}
.step-body p{font-size:.76rem;color:var(--text-soft);margin:0}

/* SUCCESS PAGE */
.success-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--topbar-h));padding:2rem 1rem}
.success-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:2.25rem 1.75rem;text-align:center;max-width:420px;width:100%}
.success-icon{font-size:3.25rem;color:var(--green);margin-bottom:1.1rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.success-card h1{font-size:1.35rem;margin-bottom:.38rem}
.success-card p{color:var(--text-soft);font-size:.86rem;margin-bottom:1.4rem}
.success-details{background:var(--bg-input);border-radius:var(--r-sm);padding:.6rem;text-align:left;margin-bottom:1.4rem}

/* FLASH */
.flash-stack{position:fixed;top:calc(var(--topbar-h) + .7rem);right:.875rem;z-index:9999;display:flex;flex-direction:column;gap:.38rem;max-width:340px;width:calc(100vw - 1.75rem);pointer-events:none}
.flash-msg{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:.66rem .85rem;font-size:.82rem;display:flex;align-items:flex-start;gap:.52rem;box-shadow:var(--shadow);animation:slideInRight .2s var(--ease);pointer-events:all;border-left:3px solid transparent}
@keyframes slideInRight{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
.flash-msg.success{border-left-color:var(--green)}
.flash-msg.danger{border-left-color:var(--red)}
.flash-msg.warning{border-left-color:var(--amber)}
.flash-msg.info{border-left-color:var(--blue)}
.flash-msg i{margin-top:1px;flex-shrink:0}
.flash-body{flex:1;line-height:1.4}
.flash-close-btn{background:none;border:none;color:var(--text-muted);font-size:.88rem;cursor:pointer;padding:0;flex-shrink:0;transition:color var(--dur)}
.flash-close-btn:hover{color:var(--text)}
.alert{display:flex;align-items:flex-start;gap:.45rem;padding:.62rem .82rem;border-radius:var(--r-sm);font-size:.81rem;margin-bottom:.82rem;border:1px solid transparent}
.alert-danger{background:var(--red-bg);border-color:rgba(244,63,94,.2);color:var(--red)}
.alert-success{background:var(--green-bg);border-color:rgba(16,185,129,.2);color:var(--green)}
.alert-warning{background:var(--amber-bg);border-color:rgba(245,158,11,.2);color:var(--amber)}
.alert-info{background:var(--blue-bg);border-color:rgba(59,130,246,.2);color:var(--blue)}

/* EMPTY STATE */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:3rem 1.5rem;text-align:center}
.empty-state i{font-size:2.1rem;color:var(--text-muted);opacity:.35}
.empty-state p{font-size:.83rem;color:var(--text-soft);margin:0}

/* SEARCH BAR */
.search-bar{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.search-input-wrap{position:relative;flex:1;min-width:150px}
.search-input-wrap i{position:absolute;left:.72rem;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.77rem;pointer-events:none}
.search-input-wrap input{padding-left:2.15rem}

/* AUTH */
.auth-page{background:var(--bg)}
.auth-shell{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.5rem 1rem 2rem;gap:1.25rem;
  background:radial-gradient(ellipse at 50% 0%,rgba(16,185,129,.07) 0%,transparent 60%);
}
.auth-brand-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.32rem}
.auth-brand-logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.auth-brand-sub{font-size:.76rem;color:var(--text-muted)}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.875rem 1.625rem;width:100%;max-width:410px;box-shadow:var(--shadow-xl)}
.auth-heading{text-align:center;margin-bottom:1.625rem}
.auth-heading h1{font-size:1.35rem;font-weight:700;margin-bottom:.22rem}
.auth-heading p{font-size:.83rem;color:var(--text-soft)}
.auth-otp-icon{font-size:2.1rem;color:var(--accent);margin-bottom:.65rem}
.auth-btn{width:100%;padding:.68rem 1rem;font-size:.88rem;margin-top:.22rem}
.auth-footer{text-align:center;font-size:.78rem;color:var(--text-muted);margin-top:1.2rem}
.auth-footer a{color:var(--accent);font-weight:600}
.auth-footer a:hover{text-decoration:underline}
.check-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.82rem;font-size:.78rem}
.forgot-link{color:var(--accent);font-weight:500;text-decoration:none;font-size:.78rem}
.forgot-link:hover{text-decoration:underline}
.otp-input{text-align:center;letter-spacing:.4em;font-size:1.35rem;font-family:'Space Mono',monospace;font-weight:700}
.theme-toggle-pill{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-full);padding:.32rem .6rem;font-size:.78rem;color:var(--text-soft);cursor:pointer;display:flex;align-items:center;gap:.38rem;transition:all var(--dur)}
.theme-toggle-pill:hover{color:var(--text);border-color:var(--accent)}

/* ERROR PAGES */
.error-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:1rem}
.error-code-big{font-size:clamp(4.5rem,14vw,8rem);font-weight:900;font-family:'Space Mono',monospace;line-height:1;color:var(--accent);opacity:.55}
.error-title{font-size:1.45rem;font-weight:700}
.error-desc{color:var(--text-soft);max-width:370px;font-size:.88rem}

/* DANGER ZONE */
.danger-card{border-color:rgba(244,63,94,.2)!important}
.danger-card .card-title{color:var(--red)!important}

/* RESPONSIVE */
@media(min-width:600px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(2,1fr)}.buy-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:480px){.quick-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:700px){.quick-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1024px){.quick-grid{grid-template-columns:repeat(6,1fr)}}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:275px;box-shadow:var(--shadow-xl)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex}
  .topbar{left:0}
  .topbar-hamburger{display:flex}
  .main-content{margin-left:0}
  .stat-grid,.grid-2,.grid-3,.full-card,.page-wrap,.quick-grid,.buy-grid{padding-left:1rem;padding-right:1rem}
  .full-card{margin-left:1rem;margin-right:1rem}
  .page-wrap{padding:1.2rem 1rem 0}
  .chart-container{height:175px}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .page-head{flex-direction:column;align-items:flex-start}
  .topbar-crumb{display:none}
  .auth-card{padding:1.5rem 1.2rem}
  .form-row-2{grid-template-columns:1fr}
}

/* UTILS */
.text-accent{color:var(--accent)}.text-muted{color:var(--text-muted)!important}.text-soft{color:var(--text-soft)}.text-danger{color:var(--red)}.text-success{color:var(--green)}.text-warn{color:var(--amber)}
.mono{font-family:'Space Mono',monospace;font-size:.84em}
.fw-600{font-weight:600}.fw-700{font-weight:700}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.ms-auto{margin-left:auto}.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}
.w-full{width:100%}.flex{display:flex}.items-center{align-items:center}.flex-col{flex-direction:column}
.d-none{display:none}
@media(min-width:768px){.d-md-inline{display:inline!important}}