/*  FoxS Digital v3 — Design System
    Glassmorphism + Apple-inspired motion + accessible colors
    All variables under :root so themes can swap them at runtime.
*/
:root{
  /* Brand */
  --brand-orange: #E8521A;
  --brand-orange-dark: #C94214;
  --brand-orange-light: #FF6B35;
  --brand-orange-soft: rgba(232,82,26,0.10);
  --brand-orange-ring: rgba(232,82,26,0.20);

  /* Surface */
  --bg: #FAFAFA;
  --surface: rgba(255,255,255,0.78);
  --surface-strong: rgba(255,255,255,0.92);
  --surface-soft: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.55);
  --glass-shadow: 0 8px 32px rgba(31,38,135,0.10), 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.7);
  --glass-shadow-lg: 0 20px 60px rgba(31,38,135,0.16), 0 6px 20px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
  --glass-blur: saturate(180%) blur(20px);
  --glass-blur-lg: saturate(200%) blur(40px);

  /* Text */
  --text: #1A1A1A;
  --text-soft: #4B5563;
  --text-muted: #6B7280;
  --text-disabled: #9CA3AF;

  /* Semantic */
  --success: #059669;
  --success-soft: #D1FAE5;
  --warn: #D97706;
  --warn-soft: #FEF3C7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;
  --info: #2563EB;
  --info-soft: #DBEAFE;

  /* Sizing */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --sidebar: 248px;
  --topbar: 64px;
  --max-content: 1280px;

  /* Motion */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: .15s;
  --t-base: .25s;
  --t-slow: .4s;

  /* Z-index scale */
  --z-base: 1;
  --z-fixed: 100;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ───────── Reset ───────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;color-scheme:light;}
body{
  font-family:'Inter','Hind Siliguri','SF Pro Text',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 18%, rgba(232,82,26,0.08), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(255,107,53,0.08), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255,180,140,0.06), transparent 50%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
a{color:var(--brand-orange);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display','Hind Siliguri',Georgia,serif;font-weight:700;letter-spacing:-0.01em;color:var(--text);}

/* Hide scrollbars (subtle) */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(232,82,26,.4);}
::-webkit-scrollbar-track{background:transparent;}

/* ───────── Typography helpers ───────── */
.h-display{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:800;font-size:28px;line-height:1.1;letter-spacing:-0.02em;}
.h-page{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:700;font-size:20px;}
.h-section{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:700;font-size:16px;}
.text-sm{font-size:13px;}
.text-xs{font-size:12px;}
.text-tiny{font-size:11px;}
.text-muted{color:var(--text-muted);}
.text-soft{color:var(--text-soft);}
.text-accent{color:var(--brand-orange);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-warn{color:var(--warn);}
.font-mono{font-family:'JetBrains Mono','Menlo',monospace;}
.font-bold{font-weight:700;}
.font-semi{font-weight:600;}

/* ───────── Layout primitives ───────── */
.app-layout{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar);
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-right:1px solid var(--glass-border);
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  z-index:var(--z-fixed);
  transition:transform var(--t-base) var(--ease-out);
}
.sidebar-header{
  padding:20px 22px 16px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.sidebar-logo{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand-orange-light),var(--brand-orange));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  box-shadow:0 6px 16px rgba(232,82,26,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.sidebar-title{
  font-family:'Playfair Display','Hind Siliguri',serif;
  font-weight:800;font-size:18px;color:var(--brand-orange);
}
.sidebar-sub{
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-top:2px;
}
.sidebar-role{
  margin:12px 22px;padding:5px 12px;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  display:inline-block;width:fit-content;
  background:var(--brand-orange-soft);color:var(--brand-orange);
  border:1px solid var(--brand-orange-ring);
}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 12px;}
.nav-section{margin-bottom:18px;}
.nav-label{
  font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-disabled);padding:0 12px;margin-bottom:6px;
  font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:9px;cursor:pointer;
  color:var(--text-soft);font-size:13px;
  transition:all var(--t-fast);user-select:none;
  text-decoration:none;
}
.nav-item:hover{background:var(--brand-orange-soft);color:var(--brand-orange);text-decoration:none;}
.nav-item.active{background:rgba(232,82,26,.13);color:var(--brand-orange);font-weight:600;}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.nav-badge{
  margin-left:auto;background:var(--brand-orange);color:#fff;
  font-size:9px;font-weight:700;padding:1px 7px;border-radius:99px;min-width:18px;text-align:center;
}
.sidebar-footer{
  padding:14px 18px;border-top:1px solid rgba(0,0,0,.05);
  display:flex;align-items:center;gap:10px;
}
.avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-orange-light),var(--brand-orange));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display','Hind Siliguri',serif;font-weight:800;font-size:13px;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-info{flex:1;min-width:0;}
.avatar-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.avatar-role{font-size:10px;color:var(--text-muted);}
.avatar-action{color:var(--text-muted);font-size:16px;cursor:pointer;}
.avatar-action:hover{color:var(--danger);}

.main{flex:1;margin-left:var(--sidebar);display:flex;flex-direction:column;min-height:100vh;}
.topbar{
  height:var(--topbar);
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;position:sticky;top:0;z-index:50;
}
.topbar-title{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:700;font-size:18px;}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.content{padding:24px 28px 80px;width:100%;max-width:100%;}

/* ───────── Card ───────── */
.card{
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  padding:22px;
  margin-bottom:16px;
}
.card-tight{padding:14px 18px;}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;}
.card-title{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:700;font-size:15px;}
.card-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}

/* ───────── Stat tiles ───────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:12px;}
  .stat{padding:11px 12px;border-radius:14px;}
  .stat-label{font-size:9px;letter-spacing:1px;margin-bottom:4px;}
  .stat-value{font-size:22px;}
  .stat-sub{font-size:10px;margin-top:2px;}
  .stat::before{height:2px;}
  .card{padding:16px;margin-bottom:12px;}
  .h-section{font-size:14px;}
}
.stat{
  background:var(--surface);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--glass-shadow);
  position:relative;overflow:hidden;
}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand-orange),transparent);opacity:.6;}
.stat-label{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;font-weight:600;}
.stat-value{font-family:'Inter','Hind Siliguri',sans-serif;font-size:24px;font-weight:800;line-height:1;color:var(--text);}
.stat-sub{font-size:11px;color:var(--text-muted);margin-top:4px;}
.stat.success .stat-value{color:var(--success);}
.stat.warn .stat-value{color:var(--warn);}
.stat.danger .stat-value{color:var(--danger);}
.stat.info .stat-value{color:var(--info);}
.stat.accent .stat-value{color:var(--brand-orange);}

/* ───────── Buttons ───────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;
  cursor:pointer;border:none;text-decoration:none;
  transition:transform var(--t-fast) var(--spring), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  white-space:nowrap;line-height:1;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-primary{
  background:linear-gradient(135deg,var(--brand-orange-light),var(--brand-orange));
  color:#fff;
  box-shadow:0 6px 18px rgba(232,82,26,.30), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover{box-shadow:0 10px 28px rgba(232,82,26,.40), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-secondary{background:rgba(0,0,0,.06);color:var(--text);}
.btn-secondary:hover{background:rgba(0,0,0,.10);}
.btn-ghost{background:transparent;color:var(--text-soft);}
.btn-ghost:hover{background:rgba(0,0,0,.04);color:var(--text);}
.btn-success{background:var(--success-soft);color:var(--success);}
.btn-success:hover{background:#A7F3D0;}
.btn-danger{background:var(--danger-soft);color:var(--danger);}
.btn-danger:hover{background:#FECACA;}
.btn-warn{background:var(--warn-soft);color:var(--warn);}
.btn-warn:hover{background:#FDE68A;}
.btn-outline{background:var(--surface);border:1.5px solid var(--brand-orange);color:var(--brand-orange);}
.btn-outline:hover{background:var(--brand-orange-soft);}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{background:#1FB855;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-xs{padding:4px 10px;font-size:11px;}
.btn-lg{padding:13px 26px;font-size:14px;}
.btn-block{display:flex;width:100%;justify-content:center;}

/* ───────── Forms ───────── */
.field{margin-bottom:14px;}
.field-label{
  display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;margin-bottom:7px;
}
.field-help{font-size:11px;color:var(--text-muted);margin-top:4px;}
.field-error{font-size:11px;color:var(--danger);margin-top:4px;}
.input,.select,.textarea{
  width:100%;padding:11px 14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius-sm);
  background:var(--surface-strong);
  color:var(--text);font-size:14px;outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--brand-orange);
  background:#fff;
  box-shadow:0 0 0 4px var(--brand-orange-ring);
}
.input::placeholder,.textarea::placeholder{color:var(--text-disabled);}
.textarea{resize:vertical;min-height:80px;}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.field-grid{grid-template-columns:1fr;}}

/* Checkbox + Radio (visual) */
.check-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;}
.check-row input{accent-color:var(--brand-orange);width:16px;height:16px;}

/* ───────── Badges / Pills ───────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;
  letter-spacing:0.4px;text-transform:uppercase;line-height:1.4;
}
.badge-pending{background:var(--warn-soft);color:var(--warn);}
.badge-processing{background:var(--info-soft);color:var(--info);}
.badge-active{background:var(--success-soft);color:var(--success);}
.badge-confirmed{background:var(--info-soft);color:var(--info);}
.badge-completed{background:var(--success-soft);color:var(--success);}
.badge-ended,.badge-cancelled{background:rgba(0,0,0,.06);color:var(--text-soft);}
.badge-danger{background:var(--danger-soft);color:var(--danger);}

/* ───────── Tables ───────── */
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th{
  text-align:left;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;
  padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.06);
}
.table td{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.04);color:var(--text);}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:rgba(232,82,26,.03);}
@media(max-width:640px){
  .table thead{display:none;}
  .table,.table tbody,.table tr,.table td{display:block;width:100%;}
  .table tr{background:var(--surface-strong);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;border:1px solid rgba(0,0,0,.06);}
  .table td{border:none;padding:5px 0;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .table td::before{content:attr(data-label);font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;}
}

/* ───────── Empty / Loading ───────── */
.empty{padding:48px 24px;text-align:center;color:var(--text-disabled);}
.empty-icon{font-size:48px;margin-bottom:12px;opacity:.5;}
.spinner{
  display:inline-block;width:18px;height:18px;
  border:2px solid rgba(0,0,0,.12);border-top-color:var(--brand-orange);
  border-radius:50%;animation:spin .7s linear infinite;
}
.spinner-lg{width:28px;height:28px;border-width:3px;}
@keyframes spin{to{transform:rotate(360deg);}}
.skeleton{
  background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.08),rgba(0,0,0,.04));
  background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ───────── Modal ───────── */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(15,15,15,.30);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  z-index:var(--z-modal);
  display:none;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity var(--t-fast);
}
.modal-backdrop.open{display:flex;opacity:1;}
.modal{
  background:var(--surface-strong);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:24px;width:520px;max-width:100%;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  transform:translateY(20px);
  transition:transform var(--t-base) var(--spring);
}
.modal-backdrop.open .modal{transform:translateY(0);}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-title{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:700;font-size:18px;}
.modal-close{
  width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.05);color:var(--text-soft);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  cursor:pointer;transition:background var(--t-fast);
}
.modal-close:hover{background:rgba(0,0,0,.10);}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap;}
@media(max-width:480px){ .modal-footer{flex-direction:column-reverse;align-items:stretch;} .modal-footer>.btn{width:100%;} }

/* ───────── Toast ───────── */
.toast-stack{
  position:fixed;bottom:24px;right:24px;
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:var(--text);color:#fff;
  padding:13px 18px;border-radius:12px;font-size:13px;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  min-width:240px;max-width:340px;
  opacity:0;transform:translateX(40px);
  transition:opacity var(--t-base), transform var(--t-base);
}
.toast.show{opacity:1;transform:translateX(0);}
.toast.success{background:linear-gradient(135deg,#10B981,var(--success));}
.toast.danger{background:linear-gradient(135deg,#F43F5E,var(--danger));}
.toast.warn{background:linear-gradient(135deg,#F59E0B,var(--warn));color:#fff;}

/* ───────── Login screen ───────── */
.auth-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%,rgba(232,82,26,.20),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(255,107,53,.18),transparent 50%),
    var(--bg);
}
.auth-card{
  background:var(--surface-strong);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);
  border-radius:24px;padding:36px 32px;
  width:420px;max-width:100%;
  box-shadow:var(--glass-shadow-lg);
}
.auth-brand{text-align:center;margin-bottom:24px;}
.auth-brand .sidebar-logo{margin:0 auto 12px;width:56px;height:56px;font-size:30px;}
.auth-brand .title{font-family:'Playfair Display','Hind Siliguri',serif;font-weight:800;font-size:24px;color:var(--brand-orange);}
.auth-brand .sub{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-top:3px;}
.auth-tabs{
  display:flex;background:rgba(0,0,0,.04);border-radius:12px;padding:4px;gap:4px;margin-bottom:18px;
}
.auth-tab{
  flex:1;text-align:center;padding:8px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;
  transition:all var(--t-fast);
}
.auth-tab.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.06);}

/* ───────── Mobile sidebar ───────── */
.mobile-toggle{display:none;}
.sidebar-backdrop{display:none;}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);width:280px;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .mobile-toggle{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:10px;
    background:rgba(0,0,0,.05);font-size:18px;cursor:pointer;
  }
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
    z-index:90;
  }
  .sidebar-backdrop.show{display:block;}
  .content{padding:18px 14px 80px;}
}

/* ───────── Utility ───────── */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.col{display:flex;flex-direction:column;gap:8px;}
.gap-sm{gap:6px;}
.gap-lg{gap:18px;}
.mt-1{margin-top:6px;}
.mt-2{margin-top:12px;}
.mt-3{margin-top:18px;}
.mb-1{margin-bottom:6px;}
.mb-2{margin-bottom:12px;}
.mb-3{margin-bottom:18px;}
.hidden{display:none !important;}
.flex-1{flex:1;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.divider{height:1px;background:rgba(0,0,0,.06);margin:14px 0;}

/* Reduced motion */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;}
}

/* ───────── Per-link row (Request Ad form) ───────── */
.lk-row{
  display:grid;
  grid-template-columns: 2fr 100px 110px auto;
  gap:10px;
  align-items:end;
}
.lk-row .field{margin:0;}
.lk-row > .field input{width:100%;}
.lk-row .lk-field-rm{ display:flex; align-items:flex-end; }
@media(max-width:720px){
  .lk-row{
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "url  url  url"
      "days bpd  rm";
    gap:12px 10px;
    align-items:end;
  }
  .lk-row .lk-field-url  { grid-area: url; }
  .lk-row .lk-field-days { grid-area: days; }
  .lk-row .lk-field-bpd  { grid-area: bpd; }
  .lk-row .lk-field-rm   { grid-area: rm; }
  /* Make the link box the prominent, full-width field on top */
  .lk-row .lk-field-url input{ min-height:48px; font-size:15px; }
  /* Equal control heights so Days / USD / × line up exactly (iOS number-input fix) */
  .lk-row .lk-field-days input,
  .lk-row .lk-field-bpd input{ height:46px; -webkit-appearance:none; appearance:none; }
}

/* ───────── iOS Safari datetime-local + select normalisation ───────── */
input[type="datetime-local"],
input[type="date"],
input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  font: inherit;
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{
  text-align: left;
  min-height: 1.2em;
}
input[type="datetime-local"]:not(:valid):before,
input[type="date"]:not(:valid):before{
  content: attr(placeholder);
  color: var(--text-disabled);
  margin-right: 6px;
}
select.select{
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6B7280 50%), linear-gradient(135deg, #6B7280 50%, transparent 50%);
  background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}


/* ───────── Bengali (Bangla) typography ───────── */
/* Hind Siliguri carries Bangla + Latin, so Bangla text and numbers/৳/$ share one baseline. */
html[lang="bn"] body,
html[lang="bn"] .btn, html[lang="bn"] .input, html[lang="bn"] textarea, html[lang="bn"] select, html[lang="bn"] .stat-value,
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3, html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6,
html[lang="bn"] .h-display, html[lang="bn"] .h-page, html[lang="bn"] .h-section,
html[lang="bn"] .card-title, html[lang="bn"] .topbar-title, html[lang="bn"] .modal-title, html[lang="bn"] .auth-brand .title{
  font-family:'Hind Siliguri','Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
}
html[lang="bn"] body{ line-height:1.6; }
html[lang="bn"] .stat-value{ line-height:1.2; }
html[lang="bn"] .h-display{ line-height:1.25; }

/* ───────── Higher-contrast buttons ───────── */
.btn{font-weight:700;}
.btn-secondary{background:rgba(17,24,39,.10);color:var(--text);border:1px solid rgba(17,24,39,.18);}
.btn-secondary:hover{background:rgba(17,24,39,.15);}
.btn-ghost{color:var(--text);}
.btn-ghost:hover{background:rgba(17,24,39,.07);}
.btn-success{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7;}
.btn-danger{background:#FEE2E2;color:#B91C1C;border:1px solid #FCA5A5;}
.btn-warn{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;}
.btn-outline{border-width:2px;}
/* spinning reload icon */
@keyframes fxspin360{to{transform:rotate(360deg);}}
.btn.spin{animation:fxspin360 .8s linear infinite;}

/* ───────── Client app (Option A: native + bottom tabs) ───────── */
.bottom-tabs{ display:none; }
.app-hero{ border-radius:18px; padding:16px 18px; color:#fff; margin-bottom:12px; box-shadow:0 8px 22px rgba(232,82,26,.16); }
.app-hero-due{ background:linear-gradient(135deg,#FF6B35,#E8521A); }
.app-hero-clear{ background:linear-gradient(135deg,#10B981,#059669); box-shadow:0 8px 22px rgba(16,185,129,.16); }
.app-hero-amt{ font-size:38px; font-weight:800; line-height:1.04; margin:3px 0; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.app-hero-btn{ margin-top:12px; background:#fff !important; color:#E8521A !important; font-weight:800; border:none; }
.app-chips{ display:flex; gap:12px; overflow-x:auto; padding:2px 0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.app-chips::-webkit-scrollbar{ display:none; }
.app-chip{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:60px; font-size:11px; font-weight:600; color:var(--text); text-decoration:none; }
.app-chip-ic{ width:52px; height:52px; border-radius:16px; background:var(--brand-orange-soft); display:flex; align-items:center; justify-content:center; font-size:23px; }
.app-camp{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--glass-border); border-radius:14px; padding:9px 11px; margin-bottom:8px; text-decoration:none; color:inherit; }
.app-camp-img{ width:46px; height:46px; border-radius:11px; object-fit:cover; flex:none; }
.app-camp-noimg{ background:var(--brand-orange-soft); display:flex; align-items:center; justify-content:center; font-size:20px; }
body.client-app .topbar-title{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; }
body.client-app .bottom-tabs a{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--text-muted); text-decoration:none; flex:1; }
body.client-app .bottom-tabs a .bt-ic{ font-size:21px; line-height:1; }
body.client-app .bottom-tabs a.active{ color:var(--brand-orange); font-weight:800; }
body.client-app .bottom-tabs a.active .bt-ic{ background:var(--brand-orange-soft); border-radius:13px; padding:2px 12px; }
body.client-app .bottom-tabs .bt-fab{ flex:0 0 auto; }
body.client-app .bottom-tabs .bt-fab .bt-fab-ic{ display:flex; align-items:center; justify-content:center; width:50px; height:50px; margin-top:-22px; border-radius:50%; background:linear-gradient(135deg,#FF6B35,#E8521A); color:#fff; font-size:30px; box-shadow:0 6px 16px rgba(232,82,26,.4); }
/* Mobile: bottom tab bar (the sidebar drawer is handled globally) */
@media(max-width:900px){
  body.client-app .bottom-tabs{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); border-top:1px solid rgba(0,0,0,.08); justify-content:space-around; align-items:flex-end; padding:7px 4px calc(7px + env(safe-area-inset-bottom)); }
  body.client-app .content{ padding-bottom:88px !important; }
}

/* ───────── Client app polish (batch) ───────── */
*{ -webkit-tap-highlight-color: transparent; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, .btn, .app-chip, .app-camp, .stat, .bottom-tabs a, .app-hero-btn { touch-action: manipulation; }
.app-chips{ justify-content:space-between; gap:6px; overflow-x:visible; }
.app-chip{ min-width:0; flex:1 1 0; }
.app-chip-ic{ margin:0 auto; }
.home-refresh{ background:var(--brand-orange); color:#fff; border:none; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 4px 12px rgba(232,82,26,.35); flex:none; }
body.client-app .topbar #pwaInstallBtn{ display:none; }
@media(max-width:900px){ body.client-app .topbar #btnReload{ display:none; } }
.home-refresh.spin{ animation:fxspin360 .8s linear infinite; }
body.client-app .topbar #btnNotif{ order:99; }
@media(max-width:900px){
  /* Liquid-glass floating pill menu bar */
  body.client-app .bottom-tabs{ left:14px; right:14px; bottom:calc(10px + env(safe-area-inset-bottom)); border-radius:30px; align-items:center; padding:9px 10px; background:rgba(255,255,255,.42); -webkit-backdrop-filter:saturate(200%) blur(30px); backdrop-filter:saturate(200%) blur(30px); border:1px solid rgba(255,255,255,.55); box-shadow:0 14px 40px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.65); }
  body.client-app .bottom-tabs a{ color:var(--text-muted); }
  body.client-app .bottom-tabs a svg{ width:23px; height:23px; display:block; }
  body.client-app .bottom-tabs a.active{ color:var(--brand-orange); font-weight:800; }
  body.client-app .bottom-tabs a.active .bt-ic{ background:var(--brand-orange-soft); border-radius:13px; padding:3px 11px; }
  body.client-app .bottom-tabs .bt-fab .bt-fab-ic{ background:linear-gradient(135deg,#FF7A45,#D8431A); color:#fff; border:3px solid rgba(255,255,255,.92); box-shadow:0 6px 16px rgba(232,82,26,.45); }
  body.client-app .content{ padding-bottom:104px !important; }
  /* Glassy top header */
  body.client-app .topbar{ background:rgba(255,247,242,.72); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,.5); }
}

/* notification count badge on quick-action chips */
.app-chip-ic{ position:relative; }
.chip-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#E24B4A; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--surface,#fff); }
.chip-badge.hidden{ display:none; }


/* ═════════ Bold & playful client UI ═════════ */
@keyframes fxPop{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes fxFab{ 0%,100%{ box-shadow:0 6px 16px rgba(232,82,26,.45); } 50%{ box-shadow:0 8px 26px rgba(232,82,26,.72); } }
body.client-app .card, body.client-app .stat, body.client-app .app-camp{ animation:fxPop .42s cubic-bezier(.2,.8,.3,1) both; }
body.client-app .card{ border-radius:20px; }

/* Greeting banner */
body.client-app .app-greet{ background:linear-gradient(120deg,#FFE6DA,#FFF3D6 55%,#E7F6FF); border:1px solid rgba(255,255,255,.7); border-radius:18px; padding:12px 16px; box-shadow:0 6px 18px rgba(232,82,26,.12); }

/* Colorful quick-action chips */
body.client-app .app-chip{ font-weight:700; }
body.client-app .app-chip-ic{ width:56px; height:56px; border-radius:18px; box-shadow:0 6px 14px rgba(0,0,0,.10); transition:transform .15s ease; }
body.client-app .app-chip:active .app-chip-ic{ transform:scale(.88); }
.app-chip-ic.ci-ad{ background:linear-gradient(145deg,#FF8A4C,#E8521A); box-shadow:0 8px 16px rgba(232,82,26,.34); }
.app-chip-ic.ci-topup{ background:linear-gradient(145deg,#34D399,#059669); box-shadow:0 8px 16px rgba(16,185,129,.34); }
.app-chip-ic.ci-consult{ background:linear-gradient(145deg,#60A5FA,#2563EB); box-shadow:0 8px 16px rgba(37,99,235,.32); }
.app-chip-ic.ci-ai{ background:linear-gradient(145deg,#A78BFA,#7C3AED); box-shadow:0 8px 16px rgba(124,58,237,.32); }
.app-chip-ic.ci-msg{ background:linear-gradient(145deg,#2DD4BF,#0D9488); box-shadow:0 8px 16px rgba(13,148,136,.32); }
.app-chip-ic.ci-inv{ background:linear-gradient(145deg,#FBBF24,#D97706); box-shadow:0 8px 16px rgba(217,119,6,.32); }
.app-chip-ic.ci-alert{ background:linear-gradient(145deg,#F472B6,#DB2777); box-shadow:0 8px 16px rgba(219,39,119,.30); }

/* Bold tinted stat cards */
body.client-app .stat{ border:none !important; border-radius:18px; overflow:hidden; }
body.client-app .stat-value{ font-size:30px; }
body.client-app .stat::before{ height:6px; }
body.client-app .stat.warn{ background:linear-gradient(150deg,#FFF1DF,#FFFFFF); box-shadow:0 9px 22px rgba(245,158,11,.17); }
body.client-app .stat.warn::before{ background:linear-gradient(90deg,#FBBF24,#F59E0B)!important; }
body.client-app .stat.success{ background:linear-gradient(150deg,#E5F8EE,#FFFFFF); box-shadow:0 9px 22px rgba(16,185,129,.17); }
body.client-app .stat.success::before{ background:linear-gradient(90deg,#34D399,#10B981)!important; }
body.client-app .stat.danger{ background:linear-gradient(150deg,#FEECEC,#FFFFFF); box-shadow:0 9px 22px rgba(239,68,68,.17); }
body.client-app .stat.danger::before{ background:linear-gradient(90deg,#F87171,#EF4444)!important; }
body.client-app .stat.info{ background:linear-gradient(150deg,#E8F1FE,#FFFFFF); box-shadow:0 9px 22px rgba(59,130,246,.17); }
body.client-app .stat.info::before{ background:linear-gradient(90deg,#60A5FA,#3B82F6)!important; }
body.client-app .stat.accent{ background:linear-gradient(150deg,#FFEEE5,#FFFFFF); box-shadow:0 9px 22px rgba(232,82,26,.17); }
body.client-app .stat.accent::before{ background:linear-gradient(90deg,#FF8A4C,#E8521A)!important; }

/* Playful tab bar */
@media(max-width:900px){
  body.client-app .bottom-tabs a.active .bt-ic{ box-shadow:0 4px 14px rgba(232,82,26,.42); }
  body.client-app .bottom-tabs .bt-fab .bt-fab-ic{ animation:fxFab 2.6s ease-in-out infinite; }
}


/* ═════ Admin client cards (distinct, scannable rows) ═════ */
.cli-head{ display:flex; align-items:center; gap:16px; padding:2px 18px 10px; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.cli-card{ display:flex; align-items:center; gap:16px; background:var(--surface,#fff); border:1px solid var(--border,rgba(0,0,0,.08)); border-radius:14px; padding:12px 18px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.045); transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.cli-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.10); transform:translateY(-2px); border-color:var(--brand-orange-ring); }
.cli-cell{ min-width:0; }
.cli-main{ flex:2.2; display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.cli-owner{ flex:1.6; }
.cli-run{ flex:1; text-align:center; }
.cli-view{ flex:none; }
@media(max-width:760px){
  .cli-head{ display:none; }
  .cli-card{ flex-wrap:wrap; gap:8px 12px; padding:12px 14px; }
  .cli-main{ flex:1 1 100%; }
  .cli-owner{ flex:1 1 auto; }
  .cli-run{ flex:0 0 auto; text-align:left; }
  .cli-view{ margin-left:auto; }
}