:root{
  --bg:#0f1115;
  --card:#151923;
  --muted:#8b93a7;
  --text:#e7ecf3;
  --accent:#47a3ff;
  --danger:#ff6b6b;
  --success:#4cd964;

  /* NEW */
  --accent-strong:#1e8bff;
  --border:#1f2430;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
header,footer{background:#0c0f14}
header{position:sticky;top:0;z-index:10;border-bottom:1px solid #1f2430}
.container{max-width:1120px;margin:0 auto;padding:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px}
.nav a{margin-right:12px}
.card{background:var(--card);border:1px solid #23293a;border-radius:14px;padding:16px}
.btn{background:var(--accent);color:var(--text);padding:10px 14px;border:none;border-radius:10px;cursor:pointer;font-weight:600}
.btn.secondary{background:#23293a;color:var(--text)}
.btn.danger{background:var(--danger);color:#000}
.btn.small{padding:6px 10px;font-size:12px}
.input, select, textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #30384b;background:#0f1320;color:var(--text)
}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
/* admin/users.php filters */
.grid.four{grid-template-columns:repeat(4,1fr)}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #2a3243;padding:10px;text-align:left}

/* Base badge */
.badge{
  display:inline-block;
  padding:6px 10px;
  background:#263147;
  border-radius:999px;
  color:var(--text);
  font-size:12px;
  line-height:1;
  font-weight:700;
}

/* ===== Countdown chip (dashboard) ===== */
#access-eta{
  font-size:1.15rem;          /* பெரிய எழுத்து */
  padding:6px 12px;
  letter-spacing:.2px;
  border:2px solid transparent;
}
/* Strong override + fallback selectors */
#access-eta.warn,
.badge#access-eta.warn{
  background:#fde047 !important;   /* amber-300 */
  color:#111827 !important;         /* very dark */
  border-color:#facc15 !important;  /* amber-400 */
}
#access-eta.danger,
.badge#access-eta.danger{
  background:#ef4444 !important;    /* red-500 */
  color:#000 !important;
  border-color:#f87171 !important;  /* red-400 */
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.35); }
  50%   { box-shadow:0 0 0 8px rgba(239,68,68,.05); }
}

/* footer & misc */
footer{margin-top:32px;border-top:1px solid #1f2430}
.copy-btn{cursor:pointer}
.notice{padding:10px;border:1px dashed #3b445a;border-radius:10px;margin-bottom:12px}
.small{font-size:12px;color:var(--muted)}

/* ===========================
   Mobile Responsive
   =========================== */
.container { padding-left: 12px; padding-right: 12px; }
.grid { display: grid; gap: 14px; }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { margin-top: 12px; }

.topnav, .nav, .header-nav, .menu, .navbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: nowrap;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.topnav a, .nav a, .header-nav a, .menu a, .navbar a { display: inline-block; }

.logo img, .brand img { height: 28px; max-width: 100%; }

@media (max-width: 768px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  form .input, form input, form select, form textarea, .btn { width: 100%; }

  .table { display: block; overflow-x: auto; white-space: nowrap; }
  .table thead, .table tbody { width: 100%; }
  .table th, .table td { padding: 10px; }

  .card { padding: 14px; }
}
@media (max-width: 1024px) {
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.four  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  h1, h2 { font-size: 1.1rem; }
  .btn.small, .badge { font-size: .8rem; padding: 6px 10px; }
  .footer { font-size: .85rem; }
}

/* ===== Mobile Drawer ===== */
.site-header { background: #0f172a; color: #fff; }
.site-header a { color: #e5e7eb; text-decoration: none; }
.hdr-wrap { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand { display:flex; align-items:center; gap:8px; }
.brand img { height:28px; }
.brand-text { font-weight:600; color:#fff; }
.site-nav { display:flex; gap:16px; }
.site-nav a { padding:6px 8px; border-radius:8px; }
.site-nav a:hover { background:#1f2937; }
.hamburger { display:none; width:40px; height:36px; border:0; background:transparent; padding:6px; border-radius:10px; }
.hamburger:focus { outline:2px solid #93c5fd; }
.hamburger span { display:block; height:2px; margin:5px 0; background:#e5e7eb; border-radius:2px; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90; }
.mobile-drawer { position:fixed; inset:0 auto 0 0; width:280px; max-width:85%; background:#0b1220; color:#fff;
  box-shadow:2px 0 20px rgba(0,0,0,.4); transform:translateX(-100%); transition:transform .22s ease; z-index:99; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #1f2937; }
.drawer-close { background:transparent; border:0; font-size:24px; color:#e5e7eb; cursor:pointer; }
.drawer-nav { display:flex; flex-direction:column; padding:8px; }
.drawer-nav a { padding:10px 12px; border-radius:8px; color:#e5e7eb; }
.drawer-nav a:hover { background:#1f2937; }
@media (max-width: 1024px) { .site-nav { display:none; } .hamburger { display:block; } }

/* Buttons vertical stacking on mobile */
.card .btn + .btn { margin-left: 10px; }
@media (max-width: 768px) {
  .card .btn { display: block; width: 100%; }
  .card .btn + .btn { margin-left: 0; margin-top: 8px; }
}

/* Quick Bar */
.quickbar{
  position:fixed; left:0; right:0; bottom:0;
  background:rgba(10,14,26,.95); border-top:1px solid var(--border);
  display:none; gap:6px; justify-content:space-around; align-items:center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom)); z-index:90;
  backdrop-filter: blur(8px);
}
.quickbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); text-decoration:none; font-size:.78rem; padding:6px 0;
}
.quickbar a.qb-active{ color:#fff; }
.quickbar a.qb-primary{ color:#fff; background:var(--accent); border-radius:12px; padding:8px 10px; }
.quickbar a.qb-primary:hover{ background:var(--accent-strong); }
@media (max-width: 768px){ .quickbar{ display:flex; } main.container{ padding-bottom:72px; } }

/* Category list */
.catlist{ list-style:none; padding:0; margin:0; }
.catlist li{ display:flex; align-items:center; justify-content:flex-start; gap:8px; padding:4px 6px; border-radius:10px; }
.catlist li + li{ margin-top:6px; }
.catlink{ color:var(--text); text-decoration:none; }
.catlink:hover{ text-decoration:underline; }
.count-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; min-width:auto; line-height:1.2; border-radius:999px; font-weight:700;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text); text-decoration:none;
}
@media (hover:hover){ .count-pill:hover{ background:var(--accent); color:#000; } }

/* Search table alignments */
.secret-stack,.actions-row{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.secret-stack .secret-value{ min-width:18px; text-align:center; }
.w64{ min-width:64px; text-align:center; justify-content:center; }
.table td{ vertical-align:middle; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > .table{ min-width:1200px; }
@media (max-width:1024px){
  .secret-stack, .actions-row{ gap:6px; }
  .w64{ min-width:56px; }
  .table-scroll > .table{ min-width:1050px; }
}
@media (max-width:768px){ .secret-stack, .actions-row{ flex-wrap:wrap; } }
.actions-row form{ margin:0; }

/* toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:88px; background:var(--card,#1f2937); color:var(--text,#fff);
  padding:8px 12px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.35); z-index:9999;
}

/* Password field shared */
.pw-field{ position:relative; }
.pw-field .input{ padding-right:84px; }
.pw-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:#243043; color:#dbe4ff; border:0; border-radius:8px; padding:6px 10px; cursor:pointer;
}
.pw-tools{ margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }
.pw-tools .btn.small{ padding:6px 10px; }
@media (max-width:480px){ .pw-field .input{ padding-right:92px; } }