/* PixelGuard - iOS-like Muted Dark Theme */
:root{
  --bg-0: oklch(20.7% .002 285.9);
  --bg-1: oklch(24.2% 0.003 285.9);
  --bg-2: oklch(28.1% 0.004 285.9);
  --bg-3: oklch(31.6% 0.005 285.9);
  --bg-4: oklch(26.4% 0.004 285.9);
  --text-0:#ffffff;
  --text-1:#e5e5e5;
  --text-2:#b0b0b0;
  --muted:#6e6e6e;
  --primary-0:#7e5bfd;
  --primary-1:#997ff8;
  --primary-hover:#6245cc;
  --danger:#ff3b30;
  --warning:#ff9500;
  --success:#34c759;
  --card-shadow:0 2px 8px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.2);
  --radius:12px;
  --grid-color:rgba(255,255,255,.02);
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
button{font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
input{font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
body{
  margin:0;
  background: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
    var(--bg-0);
  background-size: 40px 40px;
  color:var(--text-0);
  position:relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0, 123, 255, 0.13) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(52, 199, 89, 0.13) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(180, 94, 94, 0.13) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* Utilities */
.container{width:100%;max-width:1200px;margin:0 auto;padding:24px}
.card{
  background:rgba(23,23,23,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  /* box-shadow:0 4px 16px rgba(0,0,0,.2); */
  backdrop-filter:blur(20px) saturate(180%);
  position:relative;
  z-index:1;
}
.glass{backdrop-filter: blur(8px);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  padding:10px 20px;
  border-radius:10px;
  border:none;
  color:#fff;
  background:var(--primary-0);
  cursor:pointer; 
  transition:all .15s ease;
  font-weight:600;
  font-size:14px;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.1), transparent);
  opacity:0;
  transition:opacity .15s ease;
}
.btn:hover{
  background:var(--primary-hover);
  transform:translateY(-1px);
  /* box-shadow:0 4px 12px rgba(0,122,255,.3); */
}
.btn:hover::before{
  opacity:1;
}
.btn:active{
  transform:translateY(0);
  opacity:0.95;
}
.btn.secondary{
  background:var(--bg-3);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text-0);
}
.btn.secondary:hover{background:var(--bg-4);border-color:rgba(255,255,255,.15)}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#ff2d20}
.btn.success{background:var(--success)}
.btn.success:hover{background:#30d158}
.btn.warning{background:var(--warning);color:#fff}
.btn.warning:hover{background:#ff8800}

.input{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  background:rgba(22,22,22,.6);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text-0);
  outline:none;
  transition:all .2s ease;
  font-size:15px;
  backdrop-filter:blur(10px);
}
.input:hover{
  background:rgba(22,22,22,.8);
  border-color:rgba(255,255,255,.12);
}
.input::placeholder{
  color:var(--muted);
}
.input:focus{
  border-color:var(--primary-0);
  background:rgba(22,22,22,.9);
  /* box-shadow:0 0 0 3px rgba(0,122,255,.12); */
}
.input:disabled{
  opacity:0.5;
  cursor:not-allowed;
  background:rgba(22,22,22,.4);
}
.input-wrap{position:relative}
.input-wrap .icon{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);opacity:.9}
/* Reserve space for the icon on the inline-start side (RTL-friendly) */
.input-wrap .input{padding-inline-start:44px;padding-inline-end:14px}

/* Login */
.auth-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  direction:rtl;
  position:relative;
  overflow:hidden;
}
.auth-page::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,122,255,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(52,199,89,.05) 0%, transparent 50%),
    linear-gradient(135deg, rgba(0,122,255,.02) 0%, transparent 100%);
  pointer-events:none;
  z-index:0;
}
.auth-page::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events:none;
  z-index:0;
}

.auth-card{
  width:100%;
  max-width:420px;
  padding:30px;
  gap:24px;
  display:flex;
  flex-direction:column;
  position:relative;
  border-radius: var(--radius);
  z-index:1;
  background:rgba(23,23,23,.6);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
  /* box-shadow:0 20px 60px rgba(0,0,0,.4); */
}

.auth-card h2{
  margin:0 0 8px 0;
  font-size:24px;
  font-weight:700;
  color:var(--text-0);
  text-align:center;
}

.auth-card .brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:32px;
  padding:0;
  background:transparent;
  border:none;
}
.auth-card .brand .logo{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg, var(--primary-0), var(--primary-1));
  /* box-shadow:0 4px 16px rgba(0,122,255,.3); */
}
.auth-card .brand .title{
  font-weight:700;
  letter-spacing:.2px;
  font-size:20px;
}
.auth-card .subtle{
  color:var(--text-2);
  font-size:13px;
  text-align:center;
  margin-top:-8px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
.form-row label{
  font-weight:600;
  margin-bottom:6px;
  color:var(--text-1);
  font-size:13px;
}
.row-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
}
.auth-card .row-actions .btn{
  padding:14px 24px;
  font-weight:600;
  letter-spacing:.1px;
  min-width:100%;
  font-size:15px;
  border-radius:10px;
}

/* Layout */
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;direction:rtl}
.sidebar{
  position:sticky;top:0;height:100vh;padding:24px;display:flex;flex-direction:column;gap:4px;
  background:rgba(22,22,22,.8);
  backdrop-filter:blur(24px) saturate(180%);
  border-inline-start:1px solid rgba(255,255,255,.06);
  z-index:10;
  top: 2.5%;
  border-radius: var(--radius);
  right: 1%;
  height: 900px;
  max-height: 95%;
  overflow-y:auto;
  border:1px solid rgba(255,255,255,.04);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}

.brand{
  padding:12px 16px;
  margin-bottom:24px;
  border-radius:12px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
}

.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:8px;
  color:var(--text-2);text-decoration:none;
  transition:all .15s ease;
  font-size:14px;
  font-weight:500;
  position:relative;
}
.nav-item::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:0;
  background:var(--primary-0);
  border-radius:0 2px 2px 0;
  transition:height .2s ease;
}
.nav-item:hover{
  color:var(--text-0);
  background:rgba(255,255,255,.04);
}
.nav-item.active{
  color:var(--primary-0);
  background:rgba(255,255,255,.01);
  font-weight:600;
}
.nav-item.active::before{
  height:60%;
}
.nav-item svg{
  width:18px;
  height:18px;
  opacity:0.8;
  transition:opacity .15s ease;
}
.nav-item.active svg,
.nav-item:hover svg{
  opacity:1;
}

.sidebar > .btn{
  margin-top:auto;
  width:100%;
  justify-content:center;
  padding:12px 20px;
}
.content{
  padding:32px;
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:0 auto;
  width:100%;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:32px;
}
.topbar h2{
  font-size:32px;
  font-weight:700;
  color:var(--text-0);
  margin:0;
  letter-spacing:-0.5px;
}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(4,1fr); gap:16px}
.metric{
  padding:24px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.metric:hover{
  transform:translateY(-2px);
  /* box-shadow:0 8px 24px rgba(0,0,0,.3); */
}
.metric h3{
  margin:0 0 12px 0;
  font-size:12px;
  color:var(--text-2);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.8px;
}
.metric .value{
  font-size:36px;
  font-weight:700;
  color:var(--text-0);
  letter-spacing:-1px;
}

/* Table */
.table-container{
  max-height:calc(100vh - 280px);
  overflow-y:auto;
  overflow-x:auto;
  position:relative;
  padding:16px;
}
.table-container::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.table-container::-webkit-scrollbar-track{
  background:transparent;
}
.table-container::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.1);
  border-radius:4px;
}
.table-container::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.15);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
  min-width:1000px;
}
.table thead{
  position:sticky;
  top:0;
  z-index:10;
}
.table thead th{
  font-size:12px;
  color:var(--text-2);
  font-weight:600;
  text-align:right;
  padding:12px 16px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  background:rgba(23,23,23,.95);
  backdrop-filter:blur(20px) saturate(180%);
  top:0;
}
.table tbody tr{
  border:1px solid rgba(255,255,255,.05);
  transition:all .15s ease;
}
.table tbody td{
  padding:16px;
  color:var(--text-1);
  font-size:14px;
}
.table tbody tr:first-child td{
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}
.table tbody tr:last-child td{
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}
.table tbody tr:hover{
  background:rgba(23,23,23,.6);
  border-color:rgba(255,255,255,.08);
  transform:translateX(-2px);
}
/* Tighter buttons inside tables */
.table .btn{padding:6px 14px;font-size:13px}
/* Align table cell contents vertically to reduce perceived whitespace */
.table tbody td{vertical-align:middle}

.status{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block}
.status.active{background:rgba(52,199,89,.15);color:var(--success);border:1px solid rgba(52,199,89,.2)}
.status.expired{background:rgba(255,149,0,.15);color:var(--warning);border:1px solid rgba(255,149,0,.2)}
.status.banned{background:rgba(255,59,48,.15);color:var(--danger);border:1px solid rgba(255,59,48,.2)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:50}
.modal-backdrop.open{display:flex}
.modal{
  width:100%;
  max-width:560px;
  padding:32px;
  /* box-shadow:0 20px 60px rgba(0,0,0,.5); */
  background:rgba(23,23,23,.8);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.08);
}

.toasts{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:9999
}

.toast{
  min-width:220px;
  max-width:300px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px) saturate(160%);
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.82rem;
  opacity:0;
  transform:translateY(6px) scale(.97);
  transition:opacity .22s ease, transform .22s ease
}

.toast.show{
  opacity:1;
  transform:translateY(0) scale(1)
}

.toast.exit{
  opacity:0;
  transform:translateY(6px) scale(.97)
}

.toast .icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  opacity:.85
}

.toast .content{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  gap:2px
}

.toast .title{
  font-weight:600;
  font-size:.82rem
}

.toast .message{
  opacity:.8;
  font-size:.78rem
}

.toast .close{
  margin-left:auto;
  background:none;
  border:none;
  color:#fff;
  opacity:.6;
  font-size:16px;
  cursor:pointer
}

.toast .close:hover{
  opacity:1
}

.toast.info{background:rgba(110, 120, 253, 0.1)}
.toast.success{background:rgba(109, 248, 151, 0.1)}
.toast.warn{background:rgba(252, 179, 96, 0.1)}
.toast.error{background:rgba(253, 82, 82, 0.1)}


/* Responsive */
/* Chart container */
.chart-container{
  background:rgba(23,23,23,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  padding:32px;
  margin-top:24px;
  /* box-shadow:0 4px 16px rgba(0,0,0,.2); */
  backdrop-filter:blur(20px) saturate(180%);
  height:450px;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.chart-container:hover{
  transform:translateY(-2px);
  /* box-shadow:0 8px 24px rgba(0,0,0,.3); */
}
.chart-container h3{
  margin:0 0 20px 0;
  font-size:18px;
  font-weight:700;
  color:var(--text-0);
}
.chart-container canvas{
  max-height:340px;
}

/* Lifetime toggle */
.lifetime-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:rgba(22,22,22,.6);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  cursor:pointer;
  transition:all .2s ease;
}
.lifetime-toggle:hover{
  background:rgba(22,22,22,.8);
  border-color:rgba(255,255,255,.12);
}
.lifetime-toggle.active{
  background:rgba(0,122,255,.12);
  border-color:var(--primary-0);
  /* box-shadow:0 0 0 3px rgba(0,122,255,.08); */
}
.lifetime-toggle input[type="checkbox"]{
  width:20px;
  height:20px;
  cursor:pointer;
  accent-color:var(--primary-0);
}
.lifetime-toggle label{
  cursor:pointer;
  font-weight:600;
  color:var(--text-0);
  flex:1;
}

@media (max-width: 1024px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-inline-start:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .grid.cards{grid-template-columns:1fr}
}