/* ==========================================================
   URL Shortener — Glass UI design system
   এই ফাইলটা bootstrap.min.css এর পরে লোড হয়, তাই এখানকার রুলগুলো
   বুটস্ট্র্যাপের ডিফল্ট থিমকে ওভাররাইড করে। বুটস্ট্র্যাপের গ্রিড আর
   মডাল JS মেকানিক্স (data-bs-*) অপরিবর্তিত রাখা হয়েছে, শুধু রঙ/লুক বদলানো।
   ========================================================== */

:root{
  --bg-deep:#070d14;
  --bg-mid:#0b1a22;
  --bg-teal:#0e2a33;
  --accent:#f2b84b;
  --accent-ink:#1a1206;
  --accent-2:#4fd1c5;
  --glass-fill:rgba(255,255,255,0.055);
  --glass-fill-strong:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.14);
  --text-primary:#f5f7fa;
  --text-secondary:rgba(245,247,250,0.68);
  --text-muted:rgba(245,247,250,0.44);
  --danger:#e2665c;
  --font-head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
}

/* ---------- base ---------- */
body{
  font-family:var(--font-body);
  color:var(--text-primary);
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(242,184,75,0.12), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(79,209,197,0.14), transparent 45%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 45%, var(--bg-teal) 100%);
  background-size: auto, auto, 26px 26px, auto;
  min-height:100vh;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); font-weight:600; }
a{ color:var(--accent-2); }
.site-main{ display:block; padding-bottom:76px; }

/* ---------- shared glass block ---------- */
.glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:20px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
}

/* ---------- top nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:1040;
  background:rgba(7,13,20,0.6);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-nav .wrap{
  max-width:1080px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap; min-height:64px; gap:8px;
}
.site-nav .logo{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--text-primary);
  text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.site-nav .logo svg{ flex-shrink:0; }
.site-nav .navlinks{ display:flex;align-items:center;gap:8px; flex-wrap:nowrap; flex-shrink:0; }
.site-nav .nl{ padding:8px 12px;border-radius:999px;font-size:14px;color:var(--text-secondary); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;}
.site-nav .nl:hover{ color:var(--text-primary); background:var(--glass-fill-strong); }
.site-nav .nl-text{ color:var(--text-secondary); font-size:14px; white-space:nowrap; }
.site-nav .btn{ white-space:nowrap; }

/* ---------- pill buttons (used on hero / dashboard) ---------- */
.btn-accent{ background:var(--accent) !important; color:var(--accent-ink) !important; border:none !important; }
.btn-accent:hover{ background:#f7c66a !important; color:var(--accent-ink) !important; }
.btn-glass{ background:var(--glass-fill-strong) !important; color:var(--text-primary) !important; border:1px solid var(--glass-border) !important; text-decoration:none; }
.btn-glass:hover{ background:rgba(255,255,255,0.16) !important; color:var(--text-primary) !important; }

/* ---------- bootstrap component re-theme ---------- */
.btn{ border-radius:999px; font-weight:600; transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, opacity .18s ease; }
.btn-primary, .btn-success{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary:hover, .btn-success:hover{ background:#f7c66a; border-color:#f7c66a; color:var(--accent-ink); }
.btn-danger{ background:rgba(226,102,92,0.18); border:1px solid rgba(226,102,92,0.4); color:#f2a49d; }
.btn-danger:hover{ background:rgba(226,102,92,0.3); color:#fff; }
.btn-warning{ background:rgba(242,184,75,0.18); border:1px solid rgba(242,184,75,0.4); color:var(--accent); }
.btn-warning:hover{ background:rgba(242,184,75,0.3); color:var(--accent); }
.btn-info{ background:rgba(79,209,197,0.18); border:1px solid rgba(79,209,197,0.4); color:var(--accent-2); }
.btn-info:hover{ background:rgba(79,209,197,0.3); color:var(--accent-2); }
.btn-secondary, .btn-outline-success, .btn-outline-primary{
  background:var(--glass-fill-strong); border:1px solid var(--glass-border); color:var(--text-primary);
}
.btn-secondary:hover, .btn-outline-success:hover, .btn-outline-primary:hover{
  background:rgba(255,255,255,0.16); color:var(--text-primary);
}

.card{
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  border-radius:20px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  color:var(--text-primary);
}
.card{ transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover{ transform:translateY(-3px); }
.card-icon{ color:var(--accent-2); }

.form-control, .form-select{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  color:var(--text-primary);
  border-radius:12px;
}
.form-control:focus, .form-select:focus{
  background:rgba(255,255,255,0.08);
  border-color:var(--accent-2);
  color:var(--text-primary);
  box-shadow:0 0 0 0.2rem rgba(79,209,197,0.15);
}
.form-control::placeholder{ color:var(--text-muted); }
.form-control[readonly]{ background:rgba(255,255,255,0.03); color:var(--text-secondary); }
.form-label{ color:var(--text-secondary); font-weight:600; font-size:14px; }
.form-select option{ background:var(--bg-mid); color:var(--text-primary); }

.modal-content{
  background:rgba(14,26,33,0.92);
  border:1px solid var(--glass-border);
  border-radius:20px;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  color:var(--text-primary);
}
.modal-header, .modal-footer{ border-color:var(--glass-border); }
.modal-title{ font-family:var(--font-head); font-weight:600; }
.modal-backdrop.show{ opacity:.7; background:#04080c; }
.btn-close{ filter:invert(1) grayscale(100%) brightness(1.7); opacity:.7; }
.btn-close:hover{ opacity:1; }

.alert-danger{ background:rgba(226,102,92,0.14); border:1px solid rgba(226,102,92,0.35); color:#f6b6b0; border-radius:12px; }
.alert-success{ background:rgba(79,209,197,0.14); border:1px solid rgba(79,209,197,0.35); color:var(--accent-2); border-radius:12px; }

.table{
  color:var(--text-primary);
  --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: rgba(255,255,255,0.07);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-border-color: var(--glass-border);
}
.table-bordered, .table-bordered th, .table-bordered td{ border-color:var(--glass-border); }

/* ---------- status / info pills ---------- */
.status-badge, .expired-badge, .joined-date, .pill{
  border-radius:999px; padding:5px 14px; font-size:0.8rem; display:inline-block;
  white-space:nowrap; font-weight:600;
}
.status-badge.Approved{ background:rgba(79,209,197,0.16); color:var(--accent-2); }
.status-badge.Pending{ background:rgba(242,184,75,0.16); color:var(--accent); }
.status-badge.Rejected{ background:rgba(226,102,92,0.16); color:#f2a49d; }
.joined-date{ background:rgba(255,255,255,0.06); color:var(--text-secondary); }
.expired-badge.active{ background:rgba(79,209,197,0.16); color:var(--accent-2); }
.expired-badge.expired{ background:rgba(226,102,92,0.16); color:#f2a49d; }
.pill-accent2{ background:rgba(79,209,197,0.16); color:var(--accent-2); }
.pill-danger{ background:rgba(226,102,92,0.16); color:#f2a49d; }

/* ---------- footer (fixed — always visible, no scrolling needed) ---------- */
.site-footer{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  padding:10px 0;
  background:rgba(7,13,20,0.75);
  border-top:1px solid var(--glass-border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.site-footer .wrap{ max-width:1080px;margin:0 auto;padding:0 20px; display:flex; justify-content:center; }
.social{ display:flex; gap:12px; }
.social a{
  width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--glass-fill-strong); border:1px solid var(--glass-border); color:var(--text-primary);
  font-size:15px; line-height:1; text-decoration:none;
}
.social a:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ---------- generic page wrap ---------- */
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---------- hero (index.php) ---------- */
.hero{ text-align:center; padding:64px 0 24px; }
.hero .banner-image{ max-width:520px; width:100%; border-radius:20px; margin:0 auto 28px; display:block; }
.hero h1{ font-size:clamp(1.9rem,5vw,2.6rem); margin-bottom:10px; }
.hero p.lead{ color:var(--text-secondary); font-size:17px; margin-bottom:28px; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- auth pages (login/signup/admin login) ---------- */
.auth-page{ min-height:calc(100vh - 64px); min-height:calc(100dvh - 64px); display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.auth-page .card{ width:100%; max-width:400px; padding:28px; }
.auth-page h3{ text-align:center; margin-bottom:22px; }
.auth-links{ margin-top:16px; text-align:center; font-size:14px; color:var(--text-secondary); }
.auth-links a{ color:var(--accent-2); font-weight:600; text-decoration:none; }

/* ---------- user dashboard ---------- */
.dash-page{ padding:32px 0; }
.dash-panel{ padding:0; overflow:hidden; }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--glass-border); flex-wrap:wrap; gap:8px; }
.dash-topbar .who{ font-size:15px; color:var(--text-secondary); }
.dash-topbar .who b{ color:var(--text-primary); }
.dash-body{ padding:22px; }
.shorten-row{ display:flex; gap:10px; flex-wrap:wrap; }
.shorten-row input{ flex:1; min-width:200px; }
.result-row{ display:none; flex-direction:column; gap:12px; margin-top:14px; }
.result-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.result-top input{ flex:1; min-width:180px; background:rgba(79,209,197,0.08); border-color:rgba(79,209,197,0.35); }
.result-row .btn{ align-self:center; }
.copy-btn{ background:none; border:1px solid var(--glass-border); color:var(--text-secondary); border-radius:8px; padding:9px 14px; font-size:13px; cursor:pointer; }
.copy-btn:hover{ color:var(--text-primary); border-color:var(--text-secondary); }
.dash-error{ color:#f2a49d; text-align:center; margin-top:14px; }
.dash-updated{ text-align:center; color:var(--text-muted); font-size:13px; margin-top:20px; }
.expired-block{ text-align:center; padding:36px 16px; }
.expired-block .icon{ font-size:36px; color:var(--danger); margin-bottom:12px; }
.expired-block h3{ margin-bottom:8px; }
.expired-block p{ color:var(--text-secondary); margin:0; }

/* ---------- recent links panel (এখন আলাদা glass প্যানেল, তাই উপরে gap) ---------- */
.recent-links-panel{ margin-top:20px; }
.links-cap-note{ color:var(--text-muted); font-weight:400; font-size:12px; }
.link-row{ display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--glass-border);gap:10px; }
.link-row:first-of-type{ border-top:none; }
.link-row .short{ font-size:14px;color:var(--text-primary);font-weight:500;word-break:break-all; }
.link-row .meta{ font-size:12px;color:var(--text-muted); }

/* ---------- loading spinner ---------- */
.spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(26,18,6,0.35);border-top-color:var(--accent-ink);
  animation:spin .7s linear infinite;vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn:disabled{ opacity:.75; cursor:not-allowed; }

/* ---------- toast notification ---------- */
.toast{
  position:fixed;left:50%;bottom:76px;transform:translateX(-50%);
  background:rgba(14,26,33,0.95);border:1px solid rgba(79,209,197,0.4);
  color:var(--text-primary);padding:11px 18px;border-radius:12px;font-size:13px;
  display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  z-index:1050;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{ opacity:1;transform:translateX(-50%) translateY(-6px); }
.toast .dot{ width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex-shrink:0; }
.toast.error{ border-color:rgba(226,102,92,0.55); }
.toast.error .dot{ background:var(--danger); }

/* ---------- admin: inline modal errors, empty table state ---------- */
.form-error{ font-size:13px; padding:9px 12px; }
.modal-user-name{ color:var(--accent); }
.empty-state{ text-align:center; color:var(--text-muted); font-size:14px; padding:22px 10px; }


/* ---------- subscription ended ---------- */
.status-page{ min-height:calc(100vh - 64px); min-height:calc(100dvh - 64px); display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.status-page .card{ max-width:440px; padding:32px; text-align:center; }
.status-page .icon{ font-size:40px; color:var(--danger); margin-bottom:14px; }

/* ---------- admin dashboard ---------- */
.admin-page{ padding:28px 0; }
.admin-page h2{ text-align:center; margin-bottom:26px; }
.admin-toolbar{ display:flex; justify-content:center; margin-bottom:18px; }

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:14px;
  margin-bottom:26px;
}
.stat-card{ padding:18px 12px; text-align:center; cursor:pointer; border:1px solid transparent; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.stat-card:hover{ background:var(--glass-fill-strong); }
.stat-card.active{ background:rgba(242,184,75,0.12); border-color:var(--accent); }
.stat-card.active .card-icon, .stat-card.active h2{ color:var(--accent); }
.stat-card .card-icon{ font-size:1.5rem; }
.stat-card h4{ font-size:0.8rem; color:var(--text-secondary); font-weight:600; margin:6px 0 2px; }
.stat-card h2{ font-size:1.5rem; margin:0; }
.action-buttons{ display:flex; flex-wrap:nowrap; gap:5px; }
.action-buttons .btn{ padding:6px 9px; }

/* ---------- shared: range selector (Daily Activity, Leaderboard, user stats widget) ---------- */
.widget-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.widget-title{ font-size:13px; font-weight:600; color:var(--text-secondary); }
.widget-title span{ font-weight:400; color:var(--text-muted); }
.range-select{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); color:var(--text-primary);
  border-radius:10px; padding:7px 10px; font-size:13px; font-family:var(--font-body);
}
.range-select option{ background:var(--bg-mid); color:var(--text-primary); }
.custom-range-row{ display:none; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.custom-range-row.show{ display:flex; }
.custom-range-row input[type="date"]{
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); color:var(--text-primary);
  border-radius:8px; padding:6px 8px; font-size:13px;
}
.custom-range-row .btn{ padding:6px 12px; font-size:13px; }

/* date-range field: calendar icon + resolved dates; the real <select> sits invisibly on top so a tap/click opens the native list */
.range-field{
  position:relative; display:inline-flex; align-items:center; gap:7px; margin:0; flex-shrink:0; max-width:100%;
  padding:6px 10px; border:1px solid var(--glass-border); border-radius:10px;
  background:rgba(255,255,255,0.06); color:var(--text-primary); font-size:12.5px; line-height:1.2; cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.range-field:hover{ border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.09); }
.range-field:focus-within{ outline:2px solid var(--accent-2); outline-offset:2px; }
.range-field .range-select{
  /* the invisible select reaches 6px beyond the field on every side, so the finger target is bigger than the compact field itself */
  position:absolute; top:-6px; right:-4px; bottom:-6px; left:-4px; width:auto; height:auto; opacity:0; cursor:pointer;
  border:0; padding:0; border-radius:10px; font-size:16px; /* 16px: iOS Safari zooms the page on smaller form controls */
}
.range-ico, .range-caret{ flex:none; color:var(--text-secondary); }
.range-text{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.rt-short{ display:none; }

/* ---------- daily activity widget (admin) ---------- */
.daily-widget{ padding:18px; margin-bottom:22px; }
.daily-widget .chart-wrap{ --chart-h:190px; }
.stat-mini-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.stat-mini{
  text-align:center; min-width:0; padding:8px 8px 7px;
  background:rgba(255,255,255,0.045); border:1px solid var(--glass-border); border-radius:12px;
}
.stat-mini .num{ font-family:var(--font-head); font-weight:700; font-size:22px; line-height:1.2; }
.stat-mini .lbl{ font-size:11px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbl-short{ display:none; }

/* bar chart: y-axis ticks + gridlines + candles; tap / click / hover / arrow-keys on a candle opens the detail tooltip */
.chart-wrap{ --chart-h:176px; --x-h:16px; --y-w:30px; position:relative; display:flex; height:var(--chart-h); padding-top:7px; }
.chart-y{ position:relative; flex:none; width:var(--y-w); margin-bottom:var(--x-h); }
.chart-ytick{ position:absolute; right:7px; transform:translateY(50%); font-size:10px; line-height:1; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.chart-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.chart-plot{ position:relative; flex:1 1 auto; min-height:0; }
.chart-grid{ position:absolute; top:0; right:0; bottom:0; left:0; pointer-events:none; }
.chart-gridline{ position:absolute; left:0; right:0; height:0; border-top:1px solid rgba(255,255,255,0.08); }
.chart-gridline.base{ border-top-color:rgba(255,255,255,0.24); }
.chart-bars{ --bar-pad:4px; position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:stretch; }
.chart-bars.dense{ --bar-pad:1px; }
.chart-bar-col{
  flex:1 1 0; min-width:0; display:flex; align-items:flex-end; justify-content:center; padding:0 var(--bar-pad);
  border-radius:6px 6px 0 0; cursor:pointer; outline:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease;
}
.chart-bar-col.is-active{ background:rgba(255,255,255,0.07); }
.chart-bar-col:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent-2); }
.chart-bar{ width:100%; max-width:30px; background:var(--accent-2); opacity:.85; border-radius:4px 4px 0 0; }
.chart-bars.dense .chart-bar{ border-radius:3px 3px 0 0; }
.chart-bar-col.is-active .chart-bar{ opacity:1; background:var(--accent); }
/* hover is handled through .is-active (set by JS for mouse pointers only), so a finger tap never leaves a stuck :hover highlight */
.chart-x{ position:relative; flex:none; height:var(--x-h); }
.chart-xlabel{ position:absolute; top:4px; font-size:10px; line-height:12px; color:var(--text-muted); white-space:nowrap; pointer-events:none; }

/* detail tooltip */
.chart-tip{
  position:absolute; left:0; top:0; z-index:6; min-width:132px; max-width:230px; padding:7px 11px 8px;
  background:rgba(12,24,32,0.97); border:1px solid rgba(255,255,255,0.2); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,0.5); font-size:12px; line-height:1.4; pointer-events:none;
  opacity:0; visibility:hidden; transform:translateY(5px);
  transition:opacity .16s ease, transform .16s ease, left .12s ease, top .12s ease, visibility 0s linear .16s;
}
.chart-tip.show{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.chart-tip::after{
  content:''; position:absolute; bottom:-5px; left:var(--caret-x,50%); width:8px; height:8px; margin-left:-4px;
  background:rgba(12,24,32,0.97); border-right:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2);
  transform:rotate(45deg);
}
.chart-tip-date{ font-weight:700; color:var(--text-primary); white-space:nowrap; }
.chart-tip-row{ display:flex; align-items:center; gap:7px; margin-top:3px; color:var(--text-secondary); }
.chart-tip-row b{ color:var(--text-primary); font-weight:700; }
.chart-tip-swatch{ flex:none; width:10px; height:10px; border-radius:3px; background:var(--accent); }
.chart-tip-sub{ margin-top:2px; font-size:11px; color:var(--text-muted); }
.chart-empty{ text-align:center; color:var(--text-muted); font-size:13px; padding:20px 0; }

/* ---------- leaderboard widget (admin) ---------- */
.leaderboard-widget{ padding:18px; margin-bottom:22px; }
.leaderboard-search{ margin-bottom:12px; }
.leaderboard-list{ display:flex; flex-direction:column; }
.leaderboard-row{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-top:1px solid var(--glass-border); }
.leaderboard-row:first-child{ border-top:none; }
.leaderboard-rank{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; background:var(--glass-fill-strong); color:var(--text-secondary);
}
.leaderboard-rank.gold{ background:#f2b84b; color:#1a1206; }
.leaderboard-rank.silver{ background:#cfd6dd; color:#1a1206; }
.leaderboard-rank.bronze{ background:#c98a4b; color:#1a1206; }
.leaderboard-name{ flex:1; font-size:14px; color:var(--text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-count{ font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--accent-2); flex-shrink:0; }
.leaderboard-count small{ font-family:var(--font-body); font-weight:400; font-size:11px; color:var(--text-muted); }

/* ---------- user dashboard: personal stats widget ---------- */
.user-stats-widget{ padding:11px 16px 9px; margin-top:20px; }
.user-stats-widget .widget-head{ flex-wrap:nowrap; margin-bottom:6px; }
.user-stats-widget .widget-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.user-stats-widget .range-field{ padding:5px 9px; font-size:12px; gap:6px; }
.user-stats-widget .stat-mini-grid{ gap:8px; margin-bottom:6px; }
.user-stats-widget .stat-mini{ padding:3px 6px 3px; border-radius:10px; }
.user-stats-widget .stat-mini .num{ font-size:18px; line-height:1.2; }
.user-stats-widget .stat-mini .lbl{ font-size:10.5px; margin-top:0; }
.user-stats-widget .chart-wrap{ --chart-h:90px; --x-h:14px; padding-top:6px; }
.user-stats-widget .chart-empty{ padding:8px 0; }

/* ---------- pagination ---------- */
.pagination-controls{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:18px 0 26px; }
.page-btn{
  background:var(--glass-fill-strong); border:1px solid var(--glass-border); color:var(--text-secondary);
  border-radius:8px; padding:7px 12px; font-size:13px; cursor:pointer; min-width:36px;
}
.page-btn:hover:not(:disabled){ color:var(--text-primary); background:rgba(255,255,255,0.16); }
.page-btn.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.page-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- admin: email check page + failed-email warning ---------- */
.mail-warning{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px; margin-bottom:18px; border-radius:14px; font-size:14px;
  background:rgba(242,184,75,0.12); border:1px solid rgba(242,184,75,0.4); color:var(--text-primary); }
.mail-warning > i{ color:var(--accent); font-size:18px; margin-top:2px; }
.mail-warning a{ color:var(--accent); font-weight:600; white-space:nowrap; }
.mail-check-page{ max-width:760px; }
.mc-intro{ text-align:center; color:var(--text-secondary); margin:-14px 0 22px; font-size:14px; }
.mc-card{ padding:8px 18px; margin-bottom:18px; }
.mc-h3{ font-size:16px; margin:14px 0 10px; }
.check-list{ list-style:none; margin:0; padding:0; }
.check-item{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--glass-border); }
.check-item:first-child{ border-top:none; }
.check-icon{ flex:0 0 28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;
  background:var(--glass-fill-strong); color:var(--text-secondary); }
.check-item.is-ok .check-icon{ background:rgba(79,209,197,0.2); color:var(--accent-2); }
.check-item.is-bad .check-icon{ background:rgba(226,102,92,0.22); color:#f2a49d; }
.check-body{ min-width:0; }
.check-title{ font-weight:600; font-size:14px; }
.check-detail{ color:var(--text-secondary); font-size:13px; margin-top:2px; word-break:break-word; }
.check-detail strong{ color:var(--text-primary); }
.check-raw{ margin-top:4px; font-size:12.5px; color:#f2c7c3; background:rgba(226,102,92,0.1); border-radius:8px; padding:6px 10px; word-break:break-word; }
.mc-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mc-form input{ flex:1; min-width:200px; }
.mc-result{ border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:13.5px; }
.mc-result.ok{ background:rgba(79,209,197,0.12); border:1px solid rgba(79,209,197,0.35); }
.mc-result.bad{ background:rgba(226,102,92,0.12); border:1px solid rgba(226,102,92,0.35); }
.mc-sub{ font-weight:400; color:var(--text-muted); font-size:12px; }
.mc-empty{ color:var(--text-secondary); font-size:13px; margin:0 0 14px; }
.log-list{ list-style:none; margin:0; padding:0; }
.log-item{ padding:12px 0; border-top:1px solid var(--glass-border); }
.log-item:first-child{ border-top:none; }
.log-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.log-pill{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--glass-fill-strong); }
.log-pill.good{ background:rgba(79,209,197,0.18); color:var(--accent-2); }
.log-pill.warn{ background:rgba(242,184,75,0.18); color:var(--accent); }
.log-pill.bad{ background:rgba(226,102,92,0.2); color:#f2a49d; }
.log-time{ font-size:12px; color:var(--text-muted); }
.log-to{ font-size:13.5px; word-break:break-all; }
.log-subject{ font-size:12.5px; color:var(--text-muted); }
.log-delay{ margin-top:8px; font-size:13px; border-radius:10px; padding:8px 12px; line-height:1.45; }
.log-delay i{ margin-right:4px; }
.log-delay.good{ background:rgba(79,209,197,0.1); color:var(--accent-2); }
.log-delay.warn{ background:rgba(242,184,75,0.1); color:var(--accent); }
.log-timeline{ list-style:none; margin:10px 0 0 4px; padding:0; border-left:2px solid var(--glass-border); }
.log-timeline li{ position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:0 0 8px 14px; font-size:12.5px; }
.log-timeline li:last-child{ padding-bottom:0; }
.log-timeline li::before{ content:''; position:absolute; left:-6px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--text-muted); }
.log-timeline li.good::before{ background:var(--accent-2); }
.log-timeline li.warn::before{ background:var(--accent); }
.log-timeline li.bad::before{ background:#e2665c; }
.log-timeline li.gap::before{ background:transparent; border:2px dotted var(--text-muted); }
.lt-label{ font-weight:600; }
.lt-time{ color:var(--text-muted); }
.lt-reason{ flex-basis:100%; color:var(--text-muted); font-size:12px; word-break:break-word; }
.lt-gap{ color:var(--text-muted); font-style:italic; }
.dns-list{ list-style:none; margin:8px 0 2px; padding:0; }
.dns-item{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding:4px 0; font-size:13px; }
.dns-state{ flex:0 0 16px; text-align:center; font-size:11px; }
.dns-item.is-ok .dns-state{ color:var(--accent-2); }
.dns-item.is-bad .dns-state{ color:#f2a49d; }
.dns-label{ font-weight:600; color:var(--text-primary); }
.dns-word{ color:var(--text-muted); font-size:12px; }
.dns-fix{ flex-basis:100%; padding-left:24px; font-size:12.5px; color:var(--text-secondary); word-break:break-all; }
.dns-fix code{ background:var(--glass-fill-strong); border-radius:6px; padding:1px 6px; font-size:12px; color:var(--text-primary); }
.mc-back{ text-align:center; font-size:14px; }
.mc-back a{ color:var(--accent-2); text-decoration:none; }

/* ---------- smooth motion ---------- */
/* ডেটা লোড হওয়ার সময় widget হালকা ফেড হয় (JS: setWidgetLoading) */
.widget-loading .stat-mini-grid,
.widget-loading .chart-bars,
.widget-loading .leaderboard-list{ opacity:.45; }
.stat-mini-grid, .chart-bars, .leaderboard-list{ transition:opacity .2s ease; }
.chart-bar{ transition:height .55s cubic-bezier(.22,.8,.3,1), background-color .2s ease, opacity .2s ease; }

@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes linkRowIn{ from{ opacity:0; transform:translateY(-8px); background:rgba(79,209,197,0.16); } to{ opacity:1; transform:none; background:transparent; } }

@media (prefers-reduced-motion: no-preference){
  .dash-page > .glass,
  .admin-page .daily-widget,
  .admin-page .leaderboard-widget,
  .auth-page .card,
  .status-page .card,
  .hero{ animation:panelIn .5s cubic-bezier(.22,.8,.3,1) backwards; }
  .dash-page > .glass:nth-child(2){ animation-delay:.08s; }
  .dash-page > .glass:nth-child(3){ animation-delay:.16s; }
  .admin-page .daily-widget{ animation-delay:.08s; }
  .admin-page .leaderboard-widget{ animation-delay:.16s; }
  .stat-grid > .card{ animation:panelIn .45s cubic-bezier(.22,.8,.3,1) backwards; }
  .stat-grid > .card:nth-child(2){ animation-delay:.04s; }
  .stat-grid > .card:nth-child(3){ animation-delay:.08s; }
  .stat-grid > .card:nth-child(4){ animation-delay:.12s; }
  .stat-grid > .card:nth-child(5){ animation-delay:.16s; }
  .stat-grid > .card:nth-child(6){ animation-delay:.2s; }


  .link-row.new{ animation:linkRowIn .55s ease backwards; border-radius:8px; }
  .leaderboard-row{ animation:panelIn .35s ease backwards; }
  .result-row{ animation:panelIn .35s ease backwards; }
  .btn:active:not(:disabled){ transform:scale(.97); }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-delay:0s !important; }
  .spinner{ animation-duration:1.4s !important; } /* লোডিং স্পিনার ঘুরতেই থাকুক, নাহলে কাজ চলছে বোঝা যায় না */
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .site-nav .nl-text{ display:none; }
  .site-nav .btn-label{ display:none; }
  .site-nav .wrap{ padding:0 12px; gap:6px; }
  .site-nav .logo{ font-size:14px; gap:4px; }
  .site-nav .logo svg{ width:20px; height:20px; }
  .site-nav .navlinks{ gap:6px; }
  .site-nav .nl, .site-nav .btn{ padding:8px 10px; font-size:13px; }
  .hero{ padding:44px 0 16px; }
  .stat-grid{ grid-template-columns:repeat(3, 1fr); gap:10px; }
  .stat-card{ padding:14px 8px; }
  .stat-card .card-icon{ font-size:1.25rem; }
  .stat-card h2{ font-size:1.2rem; }
  .site-main{ padding-bottom:96px; }
}

/* narrow screens: shorter stat labels so the three blocks stay on one line each; the date field gets the room */
@media (max-width:520px){
  .lbl-full{ display:none; }
  .lbl-short{ display:inline; }
  .rt-full{ display:none; }
  .rt-short{ display:inline; }
  .chart-tip{ max-width:200px; }
}