/* =====================================================================
   DORMEDS FAST MEDICINE — Complete Design System v3.0
   Theme: Black + Blue | Premium Dark UI
   Mobile-First + Full Web Responsive
   ===================================================================== */

/* ---- CSS Variables ---- */
:root {
  --blue-50:#EFF6FF;--blue-100:#DBEAFE;--blue-200:#BFDBFE;
  --blue-300:#93C5FD;--blue-400:#60A5FA;--blue-500:#3B82F6;
  --blue-600:#2563EB;--blue-700:#1D4ED8;--blue-800:#1E40AF;--blue-900:#1E3A8A;
  --primary:#3B82F6;--primary-hover:#2563EB;--primary-light:#60A5FA;
  --primary-dark:#1D4ED8;--primary-glow:rgba(59,130,246,.25);--primary-subtle:rgba(59,130,246,.08);
  --bg-root:#05050A;--bg-primary:#0A0A0F;--bg-card:#111118;--bg-card-hover:#16161F;
  --bg-surface:#1A1A24;--bg-elevated:#22222E;--bg-input:#16161F;
  --bg-glass:rgba(17,17,24,.85);--bg-overlay:rgba(0,0,0,.7);
  --text-primary:#F1F5F9;--text-secondary:#94A3B8;--text-tertiary:#64748B;
  --text-muted:#475569;--text-inverse:#0F172A;
  --border:#1E293B;--border-light:#334155;--border-focus:var(--primary);
  --success:#22C55E;--success-bg:rgba(34,197,94,.1);
  --warning:#F59E0B;--warning-bg:rgba(245,158,11,.1);
  --error:#EF4444;--error-bg:rgba(239,68,68,.1);
  --info:#06B6D4;--info-bg:rgba(6,182,212,.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 12px rgba(0,0,0,.5);
  --shadow-lg:0 8px 24px rgba(0,0,0,.6);--shadow-xl:0 16px 48px rgba(0,0,0,.7);
  --shadow-blue:0 4px 20px rgba(59,130,246,.3);--shadow-blue-lg:0 8px 32px rgba(59,130,246,.4);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:24px;--r-full:9999px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;
  --s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;
  --text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;
  --text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;
  --header-h:60px;--nav-h:64px;--sidebar-w:260px;--max-w:1280px;
  --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms;--t-base:250ms;--t-slow:400ms;
  --z-base:1;--z-nav:100;--z-sticky:200;--z-modal:500;--z-toast:600;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}

/* ---- Light Mode ---- */
[data-theme="light"] {
  --bg-root:#F0F4FF;--bg-primary:#F8FAFF;--bg-card:#FFFFFF;--bg-card-hover:#F5F8FF;
  --bg-surface:#EEF2FF;--bg-elevated:#E8EFFF;--bg-input:#F0F4FF;
  --bg-glass:rgba(255,255,255,.85);--bg-overlay:rgba(0,0,0,.5);
  --text-primary:#0F172A;--text-secondary:#475569;--text-tertiary:#64748B;
  --text-muted:#94A3B8;--text-inverse:#F1F5F9;
  --border:#DBEAFE;--border-light:#BFDBFE;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);--shadow-xl:0 16px 48px rgba(0,0,0,.15);
}

/* Transitions */
*,*::before,*::after{transition:background-color .2s ease,border-color .2s ease,color .1s ease}
button,a,input,.btn{transition:all .15s ease!important}

/* ---- Reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--text-base);line-height:1.5;color:var(--text-primary);background:var(--bg-root);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit;font-size:inherit;border:none;background:none;outline:none;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;color:var(--text-primary)}
::selection{background:var(--blue-700);color:white}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full)}

/* ---- Animations ---- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 8px var(--primary-glow)}50%{box-shadow:0 0 24px var(--primary-glow)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes successPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes particleDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(50px);opacity:0}}
@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.4)}100%{box-shadow:0 0 0 12px rgba(59,130,246,0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.anim-fade{animation:fadeIn .3s var(--ease) forwards}
.anim-up{animation:fadeUp .35s var(--ease) forwards}
.anim-scale{animation:scaleIn .3s var(--ease) forwards}
.anim-pop{animation:popIn .4s var(--spring) forwards}
.stg-1{animation-delay:.05s;opacity:0}.stg-2{animation-delay:.1s;opacity:0}.stg-3{animation-delay:.15s;opacity:0}
.stg-4{animation-delay:.2s;opacity:0}.stg-5{animation-delay:.25s;opacity:0}.stg-6{animation-delay:.3s;opacity:0}

/* ---- Skeleton ---- */
.skeleton{background:linear-gradient(90deg,var(--bg-surface) 25%,var(--bg-elevated) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
.skel-text{height:14px;margin-bottom:var(--s-2);width:80%}
.skel-title{height:22px;width:60%;margin-bottom:var(--s-3)}
.skel-avatar{width:48px;height:48px;border-radius:50%}
.skel-card{height:180px;border-radius:var(--r-lg)}
.skel-btn{height:48px;border-radius:var(--r-md);width:100%}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);padding:12px 24px;font-weight:600;font-size:var(--text-sm);border-radius:var(--r-md);position:relative;overflow:hidden;white-space:nowrap;min-height:48px;letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-p{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;box-shadow:var(--shadow-blue)}
.btn-p:hover{background:linear-gradient(135deg,var(--primary-hover),#1e3a8a);box-shadow:var(--shadow-blue-lg);transform:translateY(-1px)}
.btn-s{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-s:hover{background:var(--primary-subtle)}
.btn-g{background:transparent;color:var(--text-secondary)}
.btn-g:hover{background:var(--bg-surface);color:var(--text-primary)}
.btn-d{background:linear-gradient(135deg,var(--error),#B91C1C);color:white}
.btn-d:hover{box-shadow:0 4px 16px rgba(239,68,68,.3);transform:translateY(-1px)}
.btn-sm{padding:8px 16px;font-size:var(--text-xs);min-height:36px;border-radius:var(--r-sm)}
.btn-lg{padding:16px 32px;font-size:var(--text-base);min-height:56px;border-radius:var(--r-lg)}
.btn-icon{padding:10px;min-height:40px;min-width:40px;border-radius:var(--r-md)}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-success{background:linear-gradient(135deg,var(--success),#16A34A);color:white}
.btn-warn{background:linear-gradient(135deg,var(--warning),#D97706);color:white}

/* ---- Cards ---- */
.card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);transition:all var(--t-base) var(--ease);overflow:hidden}
.card:hover{border-color:var(--border-light)}
.card-i:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);cursor:pointer}
.card-body{padding:var(--s-5)}
.card-head{padding:var(--s-5);border-bottom:1px solid var(--border)}
.card-foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--border);background:var(--bg-surface)}
.card-blue{background:linear-gradient(135deg,var(--blue-600),var(--blue-800));color:white;border:none}
.card-glass{background:rgba(17,17,24,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.06)}
.card-glass:hover{background:rgba(17,17,24,.75);border-color:rgba(59,130,246,.2);box-shadow:0 8px 32px rgba(0,0,0,.4)}

/* ---- Inputs ---- */
.inp{width:100%;padding:12px 16px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:var(--text-base);color:var(--text-primary);min-height:48px}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.inp::placeholder{color:var(--text-muted)}

/* ---- Search Bar ---- */
.search{position:relative;width:100%}
.search input{width:100%;padding:14px 16px 14px 48px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--r-xl);font-size:var(--text-base);color:var(--text-primary);min-height:52px}
.search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow),var(--shadow-md)}
.search input::placeholder{color:var(--text-muted)}
.search .s-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:18px}
.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);z-index:var(--z-sticky);max-height:320px;overflow-y:auto;animation:fadeDown .2s var(--ease)}
.search-item{padding:12px 16px;display:flex;align-items:center;gap:var(--s-3);cursor:pointer;font-size:var(--text-sm)}
.search-item:hover{background:var(--primary-subtle)}
.search-item .si-cat{font-size:var(--text-xs);color:var(--text-muted)}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:.03em}
.badge-s{background:var(--success-bg);color:var(--success)}
.badge-w{background:var(--warning-bg);color:var(--warning)}
.badge-e{background:var(--error-bg);color:var(--error)}
.badge-i{background:var(--info-bg);color:var(--info)}
.badge-p{background:var(--primary-subtle);color:var(--primary)}
.badge-n{background:var(--bg-surface);color:var(--text-secondary)}

/* ---- Avatar ---- */
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:var(--text-sm);flex-shrink:0;overflow:hidden}
.av-sm{width:32px;height:32px;font-size:var(--text-xs)}
.av-lg{width:56px;height:56px;font-size:20px}
.av-xl{width:80px;height:80px;font-size:32px}

/* ---- Tabs ---- */
.tabs{display:flex;gap:2px;background:var(--bg-surface);padding:3px;border-radius:var(--r-lg);overflow-x:auto}
.tab{padding:10px 20px;border-radius:var(--r-md);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--text-primary)}
.tab.on{background:var(--primary);color:white;font-weight:600;box-shadow:var(--shadow-blue)}

/* ---- Toggle ---- */
.toggle{position:relative;width:48px;height:28px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--border-light);border-radius:var(--r-full)}
.toggle-track::before{content:'';position:absolute;width:22px;height:22px;left:3px;bottom:3px;background:white;border-radius:50%;box-shadow:var(--shadow-sm)}
.toggle input:checked + .toggle-track{background:var(--primary)}
.toggle input:checked + .toggle-track::before{transform:translateX(20px)}

/* ---- Progress ---- */
.progress{width:100%;height:6px;background:var(--bg-surface);border-radius:var(--r-full);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:var(--r-full)}

/* ---- Table ---- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
.tbl{width:100%;border-collapse:collapse;min-width:480px}
.tbl th{padding:14px 16px;text-align:left;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--bg-surface);border-bottom:1px solid var(--border)}
.tbl td{padding:14px 16px;font-size:var(--text-sm);border-bottom:1px solid var(--border)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--primary-subtle)}

/* ---- Toast ---- */
.toast-container{position:fixed;top:var(--s-4);right:var(--s-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s-3);max-width:380px;pointer-events:none}
.toast{background:var(--bg-card);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-xl);border:1px solid var(--border);display:flex;align-items:center;gap:var(--s-3);animation:slideRight .3s var(--ease);pointer-events:all;border-left:3px solid var(--primary)}
.toast-s{border-left-color:var(--success)}.toast-e{border-left-color:var(--error)}.toast-w{border-left-color:var(--warning)}
.toast-msg{flex:1;font-size:var(--text-sm);font-weight:500}
.toast-x{color:var(--text-muted);cursor:pointer;padding:4px;font-size:16px}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn .2s var(--ease);padding:var(--s-4)}
.modal{background:var(--bg-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);border:1px solid var(--border);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;animation:scaleIn .25s var(--ease)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border)}
.modal-h h3{font-size:var(--text-lg);font-weight:600}
.modal-b{padding:var(--s-6)}
.modal-f{padding:var(--s-4) var(--s-6);display:flex;gap:var(--s-3);justify-content:flex-end;border-top:1px solid var(--border)}

/* ---- Quantity Stepper ---- */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.qty button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--primary)}
.qty button:hover{background:var(--primary-subtle)}
.qty .qty-v{width:40px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-sm);border-left:1px solid var(--border);border-right:1px solid var(--border);color:var(--text-primary)}

/* ---- Timeline ---- */
.timeline{display:flex;flex-direction:column}
.tl-item{display:flex;gap:var(--s-4);padding-bottom:var(--s-6);position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-dot{width:32px;height:32px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;z-index:1;border:2px solid var(--border)}
.tl-dot.done{background:var(--success);border-color:var(--success);color:white}
.tl-dot.now{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 0 0 4px var(--primary-glow);animation:glow 2s infinite}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--border)}
.tl-item.done:not(:last-child)::before{background:var(--success)}
.tl-body{padding-top:4px}
.tl-body h4{font-size:var(--text-sm);font-weight:600;margin-bottom:2px}
.tl-body p{font-size:var(--text-xs);color:var(--text-secondary)}

/* ---- Stat Card ---- */
.stat{background:var(--bg-card);border-radius:var(--r-lg);padding:var(--s-5);border:1px solid var(--border)}
.stat:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat .st-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--s-3)}
.stat .st-val{font-size:var(--text-2xl);font-weight:800;margin-bottom:2px;animation:countUp .5s var(--ease)}
.stat .st-label{font-size:var(--text-sm);color:var(--text-secondary)}
.stat .st-delta{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);margin-top:var(--s-2)}
.st-up{background:var(--success-bg);color:var(--success)}
.st-down{background:var(--error-bg);color:var(--error)}

/* ---- Chart ---- */
.chart{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-5)}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-5)}
.chart-head h3{font-size:var(--text-base);font-weight:600}
.chart-bars{display:flex;align-items:flex-end;justify-content:space-between;height:200px;padding-top:var(--s-4);gap:8px}
.chart-bar{flex:1;border-radius:var(--r-sm) var(--r-sm) 0 0;background:linear-gradient(180deg,var(--primary),var(--primary-dark));position:relative;cursor:pointer;min-width:20px}
.chart-bar:hover{opacity:.85;box-shadow:0 -4px 12px rgba(59,130,246,.3)}
.chart-bar .cb-val{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.chart-bar .cb-lbl{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text-muted);white-space:nowrap}

/* ============ LAYOUT ============ */

/* ---- Splash ---- */
.splash{position:fixed;inset:0;background:linear-gradient(135deg,#0A0A0F,#111128,#0A0A0F);display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:9999;transition:opacity .5s,visibility .5s}
.splash.out{opacity:0;visibility:hidden}
/* Logo on dark splash: white rounded card so the light-bg logo pops */
.splash-logo-img{
  width:260px;height:auto;object-fit:contain;
  background:white;
  border-radius:20px;
  padding:16px 24px;
  box-shadow:0 8px 40px rgba(59,130,246,.35),0 2px 12px rgba(0,0,0,.4);
  animation:successPop .6s var(--spring)
}
.splash-sub{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.15em;text-transform:uppercase;margin-top:var(--s-4)}
.splash-bar{margin-top:var(--s-6);width:180px;height:3px;background:var(--border);border-radius:var(--r-full);overflow:hidden}
.splash-bar::after{content:'';display:block;width:40%;height:100%;background:var(--primary);border-radius:var(--r-full);animation:shimmer 1.2s infinite}

/* ---- Logo Variants ---- */
/* Full logo (landing page) — shown on dark bg, white card treatment */
.logo-img{
  height:80px;width:auto;max-width:280px;object-fit:contain;
  background:white;
  border-radius:var(--r-lg);
  padding:8px 20px;
  box-shadow:0 4px 24px rgba(59,130,246,.25)
}
/* Header logo — compact, white pill bg */
.hdr-logo-img{
  height:40px;width:auto;object-fit:contain;
  background:white;
  border-radius:var(--r-md);
  padding:4px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.2)
}
/* Sidebar logo — same compact treatment */
.side-logo-img{
  height:40px;width:auto;object-fit:contain;
  background:white;
  border-radius:var(--r-md);
  padding:4px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.2)
}
/* Light theme — no white bg needed since app bg is already light */
[data-theme="light"] .logo-img,
[data-theme="light"] .hdr-logo-img,
[data-theme="light"] .side-logo-img,
[data-theme="light"] .splash-logo-img{
  background:transparent;
  box-shadow:none;
  padding:0
}

/* ---- Landing ---- */
.landing{min-height:100vh;background:var(--bg-root);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:var(--s-6);position:relative;overflow:hidden}
.landing::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,.08),transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite}
.landing::after{content:'';position:absolute;bottom:-200px;left:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.06),transparent 70%);border-radius:50%;animation:float 8s ease-in-out infinite 2s}
.landing .particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.landing .particle{position:absolute;width:3px;height:3px;background:rgba(59,130,246,.3);border-radius:50%;animation:particleDrift linear infinite}
.landing .particle:nth-child(1){left:10%;animation-duration:12s}
.landing .particle:nth-child(2){left:25%;animation-duration:15s;animation-delay:2s}
.landing .particle:nth-child(3){left:40%;animation-duration:10s;animation-delay:4s}
.landing .particle:nth-child(4){left:55%;animation-duration:14s;animation-delay:1s}
.landing .particle:nth-child(5){left:70%;animation-duration:11s;animation-delay:3s}
.landing .particle:nth-child(6){left:85%;animation-duration:13s;animation-delay:5s}
.landing .particle:nth-child(7){left:15%;animation-duration:16s;animation-delay:6s;width:2px;height:2px;background:rgba(139,92,246,.3)}
.landing .particle:nth-child(8){left:60%;animation-duration:9s;animation-delay:7s;width:2px;height:2px;background:rgba(139,92,246,.3)}
.land-content{position:relative;z-index:1;max-width:800px}
.land-logo{display:inline-flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-8)}
.land-content h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;line-height:1.1;margin-bottom:var(--s-4);letter-spacing:-.03em}
.land-content h1 .hl{background:linear-gradient(135deg,var(--blue-400),var(--blue-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.land-content .land-sub{font-size:var(--text-lg);color:var(--text-secondary);max-width:560px;margin:0 auto var(--s-8);line-height:1.6}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);max-width:720px;margin:0 auto}
.role-c{background:var(--bg-card);border-radius:var(--r-xl);padding:var(--s-8) var(--s-6);text-align:center;cursor:pointer;border:1.5px solid var(--border);position:relative;overflow:hidden}
.role-c::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.03),transparent 50%);opacity:0}
.role-c:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-blue)}
.role-c:hover::before{opacity:1}
.role-c .rc-icon{font-size:42px;margin-bottom:var(--s-4);display:block}
.role-c:hover .rc-icon{transform:scale(1.15)}
.role-c h3{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--s-2)}
.role-c p{font-size:var(--text-sm);color:var(--text-secondary)}

/* ---- Login ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s-6);background:var(--bg-root)}
.login-card{width:100%;max-width:400px;text-align:center}
.login-icon{font-size:64px;margin-bottom:var(--s-6);animation:float 3s ease-in-out infinite}
.login-card h2{margin-bottom:var(--s-2)}
.login-card .login-sub{color:var(--text-secondary);margin-bottom:var(--s-8);font-size:var(--text-sm)}
.phone-row{display:flex;gap:var(--s-2);margin-bottom:var(--s-4)}
.phone-pre{padding:12px 14px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--r-md);font-weight:600;color:var(--text-secondary);min-height:48px;display:flex;align-items:center;font-size:var(--text-sm)}
.otp-row{display:flex;gap:var(--s-3);justify-content:center;margin:var(--s-6) 0}
.otp-box{width:52px;height:52px;text-align:center;font-size:var(--text-xl);font-weight:700;background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--r-md);color:var(--text-primary)}
.otp-box:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}

/* ---- Mobile Header ---- */
.m-head{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:var(--s-3) var(--s-4);
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);
  padding-top:max(12px,env(safe-area-inset-top,12px));
  padding-left:max(var(--s-4),env(safe-area-inset-left,16px));
  padding-right:max(var(--s-4),env(safe-area-inset-right,16px))
}
.m-head .h-title{font-size:var(--text-lg);font-weight:700}
.hdr-btn{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);position:relative;font-size:18px}
.hdr-btn:hover{background:var(--bg-surface);color:var(--text-primary)}
.dot-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;background:var(--error);color:white;font-size:10px;font-weight:700;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;animation:ringPulse 2s infinite}

/* ---- Bottom Nav (Customer Mobile) ---- */
.b-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-around;
  min-height:var(--nav-h);
  padding:0 var(--s-2);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px)
}
.n-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--s-1) var(--s-3);color:var(--text-muted);font-size:10px;font-weight:500;cursor:pointer;position:relative;min-width:56px}
.n-item .n-icon{font-size:22px}
.n-item.on{color:var(--primary)}
.n-item.on .n-icon{transform:scale(1.15)}
.n-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--primary);border-radius:var(--r-full)}
.n-item.on::before{width:28px}

/* ---- Content padding above bottom nav ---- */
.mob-content{
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--s-4))
}
.page{animation:fadeUp .3s var(--ease) forwards}

/* ---- Dashboard Layout ---- */
.dash{display:flex;min-height:100vh}
.side{
  width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:var(--z-nav);overflow-y:auto;
  transition:transform var(--t-base) var(--ease)
}
.side-head{padding:var(--s-5);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--s-3)}
.side-brand{font-size:var(--text-lg);font-weight:900;background:linear-gradient(135deg,var(--blue-400),var(--blue-500));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.side-nav{padding:var(--s-4);flex:1}
.side-sec{margin-bottom:var(--s-6)}
.side-sec-t{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;padding:0 var(--s-3);margin-bottom:var(--s-2)}
.side-link{display:flex;align-items:center;gap:var(--s-3);padding:10px 14px;border-radius:var(--r-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;cursor:pointer;margin-bottom:2px}
.side-link:hover{background:var(--primary-subtle);color:var(--primary)}
.side-link.on{background:var(--primary-subtle);color:var(--primary);font-weight:600}
.side-link .sl-icon{font-size:18px;width:24px;text-align:center}
.side-foot{padding:var(--s-4);border-top:1px solid var(--border)}
.side-ov{position:fixed;inset:0;background:var(--bg-overlay);z-index:calc(var(--z-nav) - 1);opacity:0;visibility:hidden}
.side-ov.vis{opacity:1;visibility:visible}
.main{margin-left:var(--sidebar-w);flex:1;min-height:100vh}
.main-head{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:var(--s-4) var(--s-6);display:flex;align-items:center;justify-content:space-between}
.main-head h1{font-size:var(--text-xl);font-weight:700}
.main-body{padding:var(--s-6)}

/* ---- Dashboard Mobile Bottom Nav ---- */
.dash-mob-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  display:none;
  align-items:center;justify-content:space-around;
  min-height:var(--nav-h);
  padding:0 var(--s-1);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
.dash-mob-nav .n-item{flex:1;min-width:0;font-size:9px;padding:var(--s-1) 4px}
.dash-mob-nav .n-icon{font-size:18px}

/* Stats Grid */
.stats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-bottom:var(--s-6)}

/* ============================================================
   WEB CUSTOMER LAYOUT
   ============================================================ */
.customer-web-layout{display:block;min-height:100vh}/* mobile default */
.customer-web-sidenav{display:none}/* hidden on mobile */
.customer-web-main{min-height:100vh}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet 1024px: collapse sidebar for dashboards --- */
@media(max-width:1024px){
  .side{transform:translateX(-100%);box-shadow:var(--shadow-xl)}
  .side.open{transform:translateX(0)}
  .main{margin-left:0}
  .main-body{padding:var(--s-4)}
  .dash-mob-nav{display:flex}
  .dash .main-body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--s-4))}
  #menuBtn{display:flex!important}
}

/* --- Tablet 768px: 2-col stat grids --- */
@media(max-width:768px){
  .stats-g{grid-template-columns:repeat(2,1fr)!important}
  .chart-bars{height:160px;padding-bottom:30px}
  .chart-bar{min-width:20px}
}

/* --- Mobile 640px: card-stack tables, bottom toast --- */
@media(max-width:640px){
  .tbl-wrap{border:none;border-radius:0;overflow-x:hidden}
  .tbl{min-width:0}
  .tbl,thead,tbody,th,td,tr{display:block!important;width:100%}
  thead{display:none!important}
  .tbl tr{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);margin-bottom:var(--s-3);padding:var(--s-3);animation:fadeUp .3s var(--ease)}
  .tbl td{display:flex!important;justify-content:space-between;align-items:center;padding:6px 4px;font-size:var(--text-sm);border-bottom:1px solid var(--border);gap:var(--s-2)}
  .tbl td:last-child{border-bottom:none}
  .tbl td::before{content:attr(data-label);font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;min-width:80px}
  .toast-container{top:auto!important;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--s-3));left:var(--s-3);right:var(--s-3);max-width:none}
  .toast{border-radius:var(--r-lg)}
  .cats{grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
  .cat-c{padding:var(--s-3) var(--s-2)}
  .cat-c .cc-icon{font-size:22px}
  .med-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-2)}
  .prof-stats{gap:var(--s-2)}
  .ps-num{font-size:var(--text-lg)}
  .main-body{padding:var(--s-3)}
  .main-head{padding:var(--s-3) var(--s-4)}
  .chart-bars{height:140px}
}

/* --- Small 480px --- */
@media(max-width:480px){
  html{font-size:15px}
  .roles{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .role-c{padding:var(--s-5) var(--s-3)}
  .role-c .rc-icon{font-size:30px}
  .stats-g{grid-template-columns:1fr 1fr!important}
  .offer{min-width:260px;padding:var(--s-5)}
  .otp-box{width:44px;height:44px}
  .pd-img{height:180px;font-size:56px}
  .pd-sell{font-size:var(--text-2xl)}
  .btn-lg{padding:14px 24px;font-size:var(--text-sm);min-height:52px}
  .trk-step .ts-lbl{font-size:9px;max-width:44px}
  .trk-step .ts-dot{width:28px;height:28px;font-size:11px}
}

/* --- Tiny 360px --- */
@media(max-width:360px){
  html{font-size:14px}
  .roles{gap:var(--s-2)}
  .role-c{padding:var(--s-4) var(--s-2)}
  .stats-g{grid-template-columns:1fr 1fr!important;gap:var(--s-2)!important}
  .stat{padding:var(--s-3)}
  .otp-row{gap:var(--s-2)}
  .otp-box{width:40px;height:40px;font-size:var(--text-lg)}
}

/* ===========================================================
   DESKTOP ≥ 1025px — Sidebar always visible, web layout
   =========================================================== */
@media(min-width:1025px){
  /* Sidebar always shown */
  .side{transform:translateX(0)!important}
  .main{margin-left:var(--sidebar-w)}
  .dash-mob-nav{display:none!important}
  #menuBtn{display:none!important}
  .main-body{padding:var(--s-6)}
  .dash .main-body{padding-bottom:var(--s-6)!important}

  /* Stats always 4 col */
  .stats-g{grid-template-columns:repeat(4,1fr)!important}

  /* Grid helpers */
  .dash-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-6)}

  /* Med grid 4 col */
  .med-grid{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(6,1fr)}

  /* Customer centering */
  .c-home,.pd,.trk,.prof{max-width:1000px;margin:0 auto}

  /* Customer web two-panel */
  .customer-web-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh;max-width:1400px;margin:0 auto}
  .customer-web-sidenav{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg-card);border-right:1px solid var(--border);padding:var(--s-5);gap:var(--s-2)}
  .customer-web-sidenav .side-logo-row{display:flex;align-items:center;gap:var(--s-2);padding-bottom:var(--s-4);border-bottom:1px solid var(--border);margin-bottom:var(--s-4)}
  .customer-web-sidenav .cwn-item{display:flex;align-items:center;gap:var(--s-3);padding:12px 14px;border-radius:var(--r-md);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);cursor:pointer}
  .customer-web-sidenav .cwn-item:hover{background:var(--primary-subtle);color:var(--primary)}
  .customer-web-sidenav .cwn-item.active{background:var(--primary-subtle);color:var(--primary);font-weight:600}
  .customer-web-sidenav .cwn-icon{font-size:20px;width:24px;text-align:center}
  .customer-web-main{overflow-y:auto}

  /* Hide mobile nav, adjust floating cart */
  .b-nav{display:none!important}
  .f-cart{bottom:var(--s-4)!important}
  .mob-content{padding-bottom:var(--s-6)!important}

  /* Toast top-right */
  .toast-container{top:var(--s-4)!important;bottom:auto!important;right:var(--s-5);left:auto;max-width:380px}
}

/* --- Tablet 641-1024px med grid --- */
@media(min-width:641px) and (max-width:1024px){
  .med-grid{grid-template-columns:repeat(3,1fr)}
  .cats{grid-template-columns:repeat(6,1fr)}
  .offer{min-width:300px}
}

/* --- Large Desktop 1280px+ --- */
@media(min-width:1280px){
  .main-body{padding:var(--s-8)}
  .c-home,.pd,.trk,.prof{max-width:1040px}
}

/* ============================================================
   CUSTOMER UI
   ============================================================ */
.c-home{padding:var(--s-4)}
.greet .g-sub{font-size:var(--text-sm);color:var(--text-secondary)}
.greet h2{font-size:var(--text-xl);font-weight:700}
.greet h2 span{color:var(--primary)}

/* Offers carousel */
.offers{margin-bottom:var(--s-6);overflow:hidden;position:relative}
.offers-track{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px;scroll-behavior:smooth}
.offers-track::-webkit-scrollbar{display:none}
.offer{min-width:280px;scroll-snap-align:start;border-radius:var(--r-xl);padding:var(--s-6);position:relative;overflow:hidden;color:white}
.offer:hover{transform:scale(1.02)}
.offer:nth-child(1){background:linear-gradient(135deg,#2563EB,#1D4ED8)}
.offer:nth-child(2){background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.offer:nth-child(3){background:linear-gradient(135deg,#059669,#047857)}
.offer::after{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;background:rgba(255,255,255,.08);border-radius:50%}
.offer::before{content:'';position:absolute;left:-30px;bottom:-30px;width:80px;height:80px;background:rgba(255,255,255,.05);border-radius:50%}
.offer .o-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.8;margin-bottom:var(--s-2)}
.offer h3{font-size:var(--text-xl);font-weight:800;margin-bottom:4px}
.offer p{font-size:var(--text-sm);opacity:.8;margin-bottom:var(--s-4)}
.offer .o-code{display:inline-block;padding:4px 12px;background:rgba(255,255,255,.15);border-radius:var(--r-sm);font-size:var(--text-sm);font-weight:700;letter-spacing:.05em;backdrop-filter:blur(4px)}

.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.sec-h h3{font-size:var(--text-lg);font-weight:700}
.sec-h .see-all{font-size:var(--text-sm);font-weight:600;color:var(--primary);cursor:pointer}
.sec-h .see-all:hover{color:var(--primary-light)}

.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-bottom:var(--s-6)}
.cat-c{background:var(--bg-card);border-radius:var(--r-lg);padding:var(--s-4);text-align:center;cursor:pointer;border:1px solid var(--border)}
.cat-c:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cat-c .cc-icon{font-size:28px;margin-bottom:var(--s-2);display:block}
.cat-c:hover .cc-icon{transform:scale(1.2)}
.cat-c .cc-name{font-size:var(--text-xs);font-weight:600;color:var(--text-primary)}

.med-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.med-c{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;cursor:pointer}
.med-c:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--border-light)}
.med-img{height:110px;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:36px;position:relative}
.med-off{position:absolute;top:8px;left:8px;background:var(--error);color:white;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-full)}
.med-rx{position:absolute;top:8px;right:8px;background:var(--primary);color:white;font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--r-sm)}
.med-info{padding:var(--s-3)}
.med-name{font-size:var(--text-sm);font-weight:600;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.med-gen{font-size:11px;color:var(--text-muted);margin-bottom:var(--s-2)}
.med-row{display:flex;align-items:center;justify-content:space-between}
.med-price{font-size:var(--text-base);font-weight:800;color:var(--primary)}
.med-mrp{font-size:11px;color:var(--text-muted);text-decoration:line-through;margin-left:4px}
.med-rat{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--warning);font-weight:600;margin-top:4px}
.med-add{width:32px;height:32px;border-radius:var(--r-sm);background:var(--primary-subtle);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.med-add:hover{background:var(--primary);color:white;transform:scale(1.1)}

/* ---- Product Detail ---- */
.pd{padding:var(--s-4)}
.pd-img{height:220px;background:var(--bg-surface);border-radius:var(--r-xl);display:flex;align-items:center;justify-content:center;font-size:72px;margin-bottom:var(--s-5);position:relative;overflow:hidden}
.pd-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 80%,rgba(59,130,246,.08),transparent 60%)}
.pd-badges{position:absolute;top:var(--s-3);left:var(--s-3);display:flex;gap:var(--s-2)}
.pd-name{font-size:var(--text-xl);font-weight:800;margin-bottom:4px}
.pd-gen{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--s-4)}
.pd-price{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-4)}
.pd-sell{font-size:var(--text-3xl);font-weight:900;color:var(--primary)}
.pd-mrp{font-size:var(--text-lg);color:var(--text-muted);text-decoration:line-through}
.pd-save{font-size:var(--text-sm);font-weight:600;color:var(--success)}
.info-tbl{margin-bottom:var(--s-6)}
.info-r{display:flex;padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.info-r:last-child{border-bottom:none}
.info-l{width:130px;font-size:var(--text-sm);color:var(--text-secondary);flex-shrink:0}
.info-v{font-size:var(--text-sm);font-weight:500}

/* ---- Pharmacy Selection ---- */
.ph-opt{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s-3);cursor:pointer}
.ph-opt:hover,.ph-opt.sel{border-color:var(--primary);background:var(--primary-subtle)}
.ph-logo{width:44px;height:44px;border-radius:var(--r-md);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;font-weight:700}
.ph-info{flex:1}
.ph-name{font-size:var(--text-sm);font-weight:600}
.ph-dist{font-size:var(--text-xs);color:var(--text-secondary)}
.ph-eta{font-size:var(--text-sm);font-weight:700;color:var(--primary)}

/* ---- Cart ---- */
.cart-item{display:flex;gap:var(--s-3);padding:var(--s-4);background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);margin-bottom:var(--s-3);animation:slideInRight .3s var(--ease) backwards}
.cart-item:nth-child(2){animation-delay:.05s}
.cart-item:nth-child(3){animation-delay:.1s}
.cart-item:hover{border-color:var(--border-light)}
.ci-img{width:60px;height:60px;background:var(--bg-surface);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ci-info{flex:1}
.ci-name{font-size:var(--text-sm);font-weight:600;margin-bottom:2px}
.ci-sub{font-size:11px;color:var(--text-muted);margin-bottom:var(--s-2)}
.ci-bot{display:flex;align-items:center;justify-content:space-between}
.ci-price{font-weight:700;color:var(--primary)}
.cart-sum{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-5);margin-bottom:var(--s-4)}
.sum-r{display:flex;justify-content:space-between;padding:var(--s-2) 0;font-size:var(--text-sm);color:var(--text-secondary)}
.sum-r.total{font-size:var(--text-lg);font-weight:800;color:var(--text-primary);border-top:1px solid var(--border);padding-top:var(--s-3);margin-top:var(--s-2)}

/* ---- Checkout ---- */
.addr-c{display:flex;gap:var(--s-3);padding:var(--s-4);border:1.5px solid var(--border);border-radius:var(--r-lg);cursor:pointer;margin-bottom:var(--s-3)}
.addr-c.sel{border-color:var(--primary);background:var(--primary-subtle)}
.addr-type{font-size:var(--text-sm);font-weight:600;margin-bottom:2px}
.addr-txt{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}
.pay-opt{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s-3);cursor:pointer}
.pay-opt.sel{border-color:var(--primary);background:var(--primary-subtle)}
.pay-icon{font-size:24px}
.pay-name{font-size:var(--text-sm);font-weight:600}
.pay-desc{font-size:11px;color:var(--text-muted)}
.radio{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-light);display:flex;align-items:center;justify-content:center}
.pay-opt.sel .radio{border-color:var(--primary)}
.pay-opt.sel .radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--primary)}
.emg-toggle{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);background:var(--error-bg);border:1.5px solid rgba(239,68,68,.3);border-radius:var(--r-lg);margin-bottom:var(--s-4);cursor:pointer}
.emg-toggle:hover{border-color:var(--error)}
.emg-toggle.active{background:rgba(239,68,68,.15);border-color:var(--error)}

/* ---- Prescription Upload ---- */
.upload-zone{border:2px dashed var(--border-light);border-radius:var(--r-xl);padding:var(--s-10);text-align:center;cursor:pointer;margin-bottom:var(--s-4)}
.upload-zone:hover{border-color:var(--primary);background:var(--primary-subtle)}
.upload-zone .uz-icon{font-size:48px;margin-bottom:var(--s-4);animation:float 3s ease-in-out infinite}

/* ---- OCR Results ---- */
.ocr-result{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-5);margin-bottom:var(--s-4)}
.ocr-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.ocr-item:last-child{border-bottom:none}
.ocr-match{font-size:10px;font-weight:600;padding:2px 6px;border-radius:var(--r-full)}
.ocr-exact{background:var(--success-bg);color:var(--success)}
.ocr-fuzzy{background:var(--warning-bg);color:var(--warning)}
.ocr-alt{background:var(--info-bg);color:var(--info)}

/* ---- Tracking ---- */
.trk{padding:var(--s-4)}
.trk-head{text-align:center;margin-bottom:var(--s-6)}
.trk-oid{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--s-2)}
.trk-eta{display:flex;align-items:center;justify-content:center;gap:var(--s-2);font-size:var(--text-2xl);font-weight:900;color:var(--primary);margin-bottom:4px}
.trk-status{font-size:var(--text-sm);color:var(--text-secondary)}
.trk-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:var(--s-8)}
.trk-steps::before{content:'';position:absolute;top:18px;left:18px;right:18px;height:3px;background:var(--border);z-index:0}
.trk-steps .trk-line{position:absolute;top:18px;left:18px;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light));z-index:1}
.trk-step{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);z-index:2}
.trk-step .ts-dot{width:36px;height:36px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:14px;border:2px solid var(--border)}
.trk-step.done .ts-dot{background:var(--primary);border-color:var(--primary);color:white}
.trk-step.now .ts-dot{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 0 0 4px var(--primary-glow);animation:glow 2s infinite}
.trk-step .ts-lbl{font-size:10px;font-weight:500;color:var(--text-muted);text-align:center;max-width:60px}
.trk-step.done .ts-lbl,.trk-step.now .ts-lbl{color:var(--text-primary);font-weight:600}
.trk-map{height:180px;background:var(--bg-surface);border-radius:var(--r-xl);margin-bottom:var(--s-4);display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;overflow:hidden}
.trk-map::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(59,130,246,.04),rgba(139,92,246,.04));pointer-events:none}
.trk-map-bar{position:absolute;bottom:0;left:0;right:0;background:var(--bg-glass);backdrop-filter:blur(8px);padding:8px 14px;font-size:11px;color:var(--text-secondary)}

/* Rating */
.rating-stars{display:flex;gap:var(--s-2);justify-content:center;margin:var(--s-4) 0}
.rating-stars .star{font-size:32px;cursor:pointer;filter:grayscale(1) opacity(.4)}
.rating-stars .star:hover{transform:scale(1.2)}
.rating-stars .star.active{filter:none;animation:popIn .3s var(--spring)}
.rating-input{width:100%;padding:12px 16px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:var(--text-sm);color:var(--text-primary);min-height:80px;resize:vertical}
.rating-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}

/* ---- Profile ---- */
.prof{padding:var(--s-4)}
.prof-head{text-align:center;padding:var(--s-6) 0}
.prof-head .avatar{margin:0 auto var(--s-3);animation:popIn .5s var(--spring)}
.prof-head h2{font-size:var(--text-xl);margin-bottom:4px}
.prof-head p{color:var(--text-secondary);font-size:var(--text-sm)}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-bottom:var(--s-6)}
.ps-item{text-align:center;padding:var(--s-4);background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border)}
.ps-item:hover{border-color:var(--border-light);transform:translateY(-2px)}
.ps-num{font-size:var(--text-xl);font-weight:800;color:var(--primary)}
.ps-lbl{font-size:11px;color:var(--text-secondary);margin-top:4px}
.menu-list{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;margin-bottom:var(--s-4)}
.menu-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border-bottom:1px solid var(--border);cursor:pointer}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{background:var(--primary-subtle)}
.mi-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.mi-text{flex:1}
.mi-text h4{font-size:var(--text-sm);font-weight:600}
.mi-text p{font-size:11px;color:var(--text-secondary)}
.mi-arrow{color:var(--text-muted);font-size:var(--text-lg)}
.menu-item:hover .mi-arrow{transform:translateX(4px);color:var(--primary)}

/* ---- Order Card ---- */
.ord-c{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-4);margin-bottom:var(--s-3);cursor:pointer;animation:slideInRight .3s var(--ease) backwards}
.ord-c:nth-child(2){animation-delay:.05s}
.ord-c:nth-child(3){animation-delay:.1s}
.ord-c:hover{box-shadow:var(--shadow-md);border-color:var(--border-light);transform:translateX(4px)}
.ord-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.ord-ph{font-size:var(--text-sm);font-weight:600}
.ord-items{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--s-3)}
.ord-bot{display:flex;align-items:center;justify-content:space-between}
.ord-total{font-weight:700}
.ord-date{font-size:var(--text-xs);color:var(--text-muted)}

/* ---- Floating Cart ---- */
.f-cart{position:fixed;bottom:calc(var(--nav-h) + var(--s-4));left:var(--s-4);right:var(--s-4);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border-radius:var(--r-xl);padding:var(--s-4) var(--s-5);display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-blue-lg);cursor:pointer;z-index:var(--z-sticky);animation:slideUp .3s var(--ease)}
.f-cart:hover{transform:translateY(-2px)}

/* ---- Dashboard extras ---- */
.dl-item{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);border-bottom:1px solid var(--border)}
.dl-item:last-child{border-bottom:none}
.dl-item:hover{background:var(--primary-subtle)}
.dl-av{width:44px;height:44px;border-radius:var(--r-md);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}

/* ---- Delivery Card ---- */
.del-card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;margin-bottom:var(--s-3)}
.del-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-md)}
.del-head{padding:var(--s-4);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.del-body{padding:var(--s-4)}
.del-loc{display:flex;gap:var(--s-3);margin-bottom:var(--s-3)}
.del-dots{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:4px}
.del-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--primary);flex-shrink:0}
.del-dot.fill{background:var(--primary)}
.del-line{width:2px;height:20px;background:var(--border)}
.del-lbl{font-size:10px;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.05em}
.del-addr{font-size:var(--text-sm);margin-top:2px}
.del-acts{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);display:flex;gap:var(--s-3)}

/* ---- Earnings ---- */
.earn-card{background:linear-gradient(135deg,var(--blue-600),var(--blue-900));border-radius:var(--r-xl);padding:var(--s-6);color:white;text-align:center;margin-bottom:var(--s-6);box-shadow:var(--shadow-blue-lg);position:relative;overflow:hidden}
.earn-card::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;background:rgba(255,255,255,.06);border-radius:50%}
.earn-period{font-size:var(--text-sm);opacity:.75;margin-bottom:var(--s-2)}
.earn-amt{font-size:var(--text-4xl);font-weight:900;margin-bottom:4px}
.earn-sub{font-size:var(--text-sm);opacity:.75}
.earn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-bottom:var(--s-6)}
.eg-item{text-align:center;padding:var(--s-4);background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border)}
.eg-item:hover{border-color:var(--border-light);transform:translateY(-2px)}
.eg-val{font-size:var(--text-lg);font-weight:800}
.eg-lbl{font-size:11px;color:var(--text-secondary);margin-top:4px}

/* ---- Coupon Card ---- */
.cpn{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-5);position:relative;overflow:hidden}
.cpn:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cpn::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.cpn-code{display:inline-block;padding:4px 12px;background:var(--primary-subtle);border-radius:var(--r-sm);font-family:monospace;font-size:var(--text-sm);font-weight:700;color:var(--primary);letter-spacing:.05em;margin-bottom:var(--s-2)}
.cpn-desc{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--s-3)}
.cpn-meta{display:flex;gap:var(--s-4);font-size:11px;color:var(--text-muted);flex-wrap:wrap}

/* ---- Emergency ---- */
.emg{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:var(--error-bg);color:var(--error);border-radius:var(--r-full);font-size:11px;font-weight:700;animation:pulse 2s infinite}

/* ---- Success Overlay ---- */
.success-ov{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s-6);z-index:var(--z-modal);text-align:center;padding:var(--s-6);cursor:pointer}
.success-check{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--success),#16A34A);display:flex;align-items:center;justify-content:center;font-size:40px;animation:successPop .5s var(--spring);box-shadow:0 0 40px rgba(34,197,94,.3)}

/* ---- Rating Modal ---- */
.rate-modal{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--s-4)}
.rate-card{background:var(--bg-card);border-radius:var(--r-xl);border:1px solid var(--border);padding:var(--s-8);max-width:400px;width:100%;text-align:center;animation:scaleIn .3s var(--ease)}

/* ---- Utility ---- */
.hide-mobile{display:none}
.hide-desktop{display:block}
@media(min-width:1025px){.hide-mobile{display:block}.hide-desktop{display:none}}

/* ---- Print ---- */
@media print{
  .b-nav,.m-head,.side,.toast-container,.f-cart,.dash-mob-nav{display:none!important}
  .mob-content{padding-bottom:0!important}
  body{background:white;color:black}
}

/* ---- Landscape mobile ---- */
@media(max-height:500px) and (orientation:landscape){
  .splash-logo-img{width:100px}
  .roles{grid-template-columns:repeat(4,1fr);max-width:600px}
  .role-c{padding:var(--s-3) var(--s-2)}
  .role-c .rc-icon{font-size:24px;margin-bottom:var(--s-2)}
  .login{align-items:flex-start;padding-top:var(--s-4)}
  .login-icon{display:none}
}

/* ---- Reduced Motion ---- */
@media(prefers-reduced-motion:reduce){
  *,.anim-fade,.anim-up,.anim-scale,.anim-pop{animation:none!important;transition:none!important}
}

/* =====================================================================
   DORMEDS 3.0 UPGRADE — New Component Styles
   Delivery Checklist · OTP Verify · BPT Exercise Library
   Counselling · Physical Verification · Super Admin Panel
   ===================================================================== */

/* ---- Modal Overlay (shared) ---- */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--s-4);animation:fadeIn .2s var(--ease)}
.modal-x{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:16px}
.modal-x:hover{background:var(--bg-surface);color:var(--text-primary)}

/* ---- Delivery Checklist ---- */
.checklist-modal{background:var(--bg-card);border-radius:var(--r-xl);border:1px solid var(--border);width:100%;max-width:460px;animation:scaleIn .25s var(--ease);overflow:hidden}
.checklist-header{padding:var(--s-5) var(--s-6);background:linear-gradient(135deg,#1E40AF,#3B82F6);display:flex;align-items:center;justify-content:space-between}
.checklist-header h3{color:white;font-size:var(--text-lg)}
.checklist-header .modal-x{color:rgba(255,255,255,.7)}
.checklist-header .modal-x:hover{background:rgba(255,255,255,.1);color:white}
.checklist-body{padding:var(--s-6)}
.checklist-item{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-4);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s-3);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.checklist-item:hover{border-color:var(--primary);background:var(--primary-subtle)}
.checklist-item.checked{border-color:var(--success);background:var(--success-bg)}
.checklist-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary);flex-shrink:0;margin-top:2px;cursor:pointer}
.checklist-item .ci-label{font-size:var(--text-sm);font-weight:600}
.checklist-item .ci-desc{font-size:11px;color:var(--text-muted);margin-top:2px}
.checklist-req-badge{font-size:10px;font-weight:700;padding:2px 8px;background:var(--error-bg);color:var(--error);border-radius:var(--r-full);margin-left:auto;flex-shrink:0}
.checklist-footer{padding:var(--s-4) var(--s-6);border-top:1px solid var(--border);background:var(--bg-surface)}

/* Counselling Toggle (YES/NO) */
.counselling-toggle-row{margin-top:var(--s-2);padding:var(--s-4);background:rgba(139,92,246,.06);border:1.5px solid rgba(139,92,246,.2);border-radius:var(--r-lg)}
.counselling-toggle-row .ct-label{font-size:var(--text-sm);font-weight:700;color:#8B5CF6;margin-bottom:var(--s-3);display:flex;align-items:center;gap:var(--s-2)}
.yn-toggle{display:flex;gap:var(--s-2)}
.yn-btn{flex:1;padding:10px;border-radius:var(--r-md);font-size:var(--text-sm);font-weight:700;border:2px solid var(--border);cursor:pointer;background:transparent;color:var(--text-secondary)}
.yn-btn.yes.active{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.yn-btn.no.active{border-color:var(--error);background:var(--error-bg);color:var(--error)}
.yn-btn:hover{border-color:var(--border-light)}

/* ---- OTP Verify Modal ---- */
.otp-verify-modal{background:var(--bg-card);border-radius:var(--r-xl);border:1px solid var(--border);width:100%;max-width:380px;animation:scaleIn .25s var(--ease);overflow:hidden}
.otp-verify-modal .ovh{padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.otp-verify-modal .ovb{padding:var(--s-6);text-align:center}
.otp-hint{font-size:11px;color:var(--text-muted);margin-top:var(--s-3)}
.otp-input-lg{width:100%;text-align:center;font-size:var(--text-3xl);font-weight:900;letter-spacing:.3em;padding:16px;background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--r-lg);color:var(--text-primary);margin:var(--s-4) 0}
.otp-input-lg:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.otp-order-info{background:var(--bg-surface);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:var(--text-sm);color:var(--text-secondary);text-align:left}

/* ---- Physical Verification Banner ---- */
.phys-verify-banner{display:flex;align-items:flex-start;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:rgba(245,158,11,.08);border:1.5px solid rgba(245,158,11,.3);border-radius:var(--r-lg);margin-bottom:var(--s-4)}
.phys-verify-banner .pvb-icon{font-size:28px;flex-shrink:0}
.phys-verify-banner .pvb-text h4{font-size:var(--text-sm);font-weight:700;color:var(--warning);margin-bottom:4px}
.phys-verify-banner .pvb-text p{font-size:11px;color:var(--text-secondary)}
.phys-verify-banner-complete{background:var(--success-bg);border-color:rgba(34,197,94,.3)}
.phys-verify-banner-complete h4{color:var(--success)!important}

/* ---- Counselling Request Cards (Counsellor Panel) ---- */
.counselling-req-card{background:var(--bg-card);border-radius:var(--r-lg);border:1.5px solid rgba(139,92,246,.2);padding:var(--s-5);margin-bottom:var(--s-4);animation:slideInRight .3s var(--ease)}
.counselling-req-card:hover{border-color:#8B5CF6;box-shadow:0 4px 20px rgba(139,92,246,.1)}
.counselling-req-card .crc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.counselling-req-card .crc-patient{font-size:var(--text-sm);font-weight:700}
.counselling-req-card .crc-order{font-size:11px;color:var(--text-muted)}
.badge-counselling{background:rgba(139,92,246,.12);color:#8B5CF6;padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:600}
.badge-counselling-done{background:var(--success-bg);color:var(--success)}

/* ---- BPT Exercise Library ---- */
.exercise-filters{display:flex;gap:var(--s-3);margin-bottom:var(--s-5);flex-wrap:wrap;align-items:center}
.exercise-filters select,.exercise-filters .ef-select{padding:10px 14px;background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--r-md);font-size:var(--text-sm);color:var(--text-primary);font-weight:500;cursor:pointer;min-height:44px;min-width:140px}
.exercise-filters select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}
.diff-chips{display:flex;gap:var(--s-2)}
.diff-chip{padding:8px 14px;border-radius:var(--r-full);border:1.5px solid var(--border);font-size:var(--text-xs);font-weight:600;cursor:pointer;background:transparent;color:var(--text-secondary)}
.diff-chip:hover{border-color:var(--primary);color:var(--primary)}
.diff-chip.active{border-color:var(--primary);background:var(--primary-subtle);color:var(--primary)}
.diff-chip[data-diff=Easy].active{border-color:var(--success);background:var(--success-bg);color:var(--success)}
.diff-chip[data-diff=Hard].active{border-color:var(--error);background:var(--error-bg);color:var(--error)}

.exercise-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4)}
.exercise-card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;transition:all var(--t-base) var(--ease);cursor:pointer}
.exercise-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
.exercise-card.expanded{box-shadow:var(--shadow-xl);border-color:var(--primary)}
.ec-header{padding:var(--s-4);display:flex;align-items:flex-start;gap:var(--s-3)}
.ec-icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.ec-info{flex:1}
.ec-name{font-size:var(--text-sm);font-weight:700;margin-bottom:4px}
.ec-body{font-size:11px;color:var(--text-secondary);margin-bottom:var(--s-2)}
.ec-badges{display:flex;gap:var(--s-1);flex-wrap:wrap}
.diff-badge-easy{background:var(--success-bg);color:var(--success);padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700}
.diff-badge-medium{background:var(--warning-bg);color:var(--warning);padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700}
.diff-badge-hard{background:var(--error-bg);color:var(--error);padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700}
.ec-meta{display:flex;gap:var(--s-3);padding:0 var(--s-4) var(--s-3);font-size:11px;color:var(--text-muted)}
.ec-meta span{display:flex;align-items:center;gap:4px}
.ec-instructions{padding:var(--s-4);background:var(--bg-surface);border-top:1px solid var(--border);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;display:none;animation:fadeIn .2s var(--ease)}
.exercise-card.expanded .ec-instructions{display:block}
.ec-actions{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);display:flex;gap:var(--s-2);justify-content:flex-end}

/* Physio panel / exercise plan */
.plan-card{background:var(--bg-card);border-radius:var(--r-lg);border:1px solid var(--border);padding:var(--s-5);margin-bottom:var(--s-4)}
.plan-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.plan-card .pc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.plan-card .pc-title{font-size:var(--text-sm);font-weight:700}
.plan-card .pc-patient{font-size:11px;color:var(--text-muted)}
.plan-exercises{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-3)}
.plan-ex-chip{padding:4px 12px;background:var(--primary-subtle);color:var(--primary);border-radius:var(--r-full);font-size:11px;font-weight:600}

/* ---- Super Admin Panel ---- */
.sa-root{min-height:100vh;background:linear-gradient(135deg,#04040A,#0D0820,#050516);position:relative;overflow:hidden}
.sa-root::before{content:'';position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,.06),transparent 70%);border-radius:50%}
.sa-root::after{content:'';position:absolute;bottom:-20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(59,130,246,.05),transparent 70%);border-radius:50%}

/* Super Admin Login */
.sa-login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--s-6);position:relative;z-index:1}
.sa-login-card{background:rgba(17,10,40,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(139,92,246,.25);border-radius:var(--r-2xl);padding:var(--s-10) var(--s-8);width:100%;max-width:420px;text-align:center;animation:scaleIn .35s var(--ease);box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 60px rgba(139,92,246,.08)}
.sa-logo{font-size:60px;margin-bottom:var(--s-5);animation:float 4s ease-in-out infinite}
.sa-brand{font-size:var(--text-2xl);font-weight:900;background:linear-gradient(135deg,#A78BFA,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.sa-subtitle{font-size:var(--text-sm);color:rgba(167,139,250,.6);margin-bottom:var(--s-8);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.sa-inp{width:100%;padding:14px 16px 14px 48px;background:rgba(255,255,255,.04);border:1.5px solid rgba(139,92,246,.2);border-radius:var(--r-md);font-size:var(--text-sm);color:#F1F5F9;min-height:52px;margin-bottom:var(--s-4);position:relative}
.sa-inp:focus{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.2);outline:none}
.sa-inp::placeholder{color:rgba(167,139,250,.4)}
.sa-inp-wrap{position:relative;margin-bottom:var(--s-4)}
.sa-inp-wrap .sa-inp-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:rgba(167,139,250,.5)}
.sa-btn{width:100%;padding:16px;background:linear-gradient(135deg,#7C3AED,#5B21B6);color:white;border-radius:var(--r-md);font-weight:700;font-size:var(--text-base);min-height:54px;letter-spacing:.02em;box-shadow:0 8px 24px rgba(124,58,237,.35)}
.sa-btn:hover{background:linear-gradient(135deg,#8B5CF6,#6D28D9);box-shadow:0 12px 32px rgba(124,58,237,.45);transform:translateY(-1px)}
.sa-back{margin-top:var(--s-4);color:rgba(167,139,250,.5);font-size:var(--text-sm);cursor:pointer}
.sa-back:hover{color:#A78BFA}
.sa-creds-hint{margin-top:var(--s-5);padding:var(--s-3) var(--s-4);background:rgba(139,92,246,.08);border-radius:var(--r-md);border:1px solid rgba(139,92,246,.15);font-size:12px;color:rgba(167,139,250,.6)}

/* Super Admin Dashboard Layout */
.sa-layout{display:flex;min-height:100vh;position:relative;z-index:1}
.sa-sidebar{width:260px;background:rgba(17,10,40,.95);border-right:1px solid rgba(139,92,246,.15);display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}
.sa-sidebar-head{padding:var(--s-6) var(--s-5);border-bottom:1px solid rgba(139,92,246,.12)}
.sa-sidebar-brand{font-size:var(--text-base);font-weight:900;background:linear-gradient(135deg,#A78BFA,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sa-sidebar-label{font-size:10px;color:rgba(139,92,246,.6);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.sa-nav{padding:var(--s-4);flex:1}
.sa-nav-item{display:flex;align-items:center;gap:var(--s-3);padding:10px 14px;border-radius:var(--r-md);color:rgba(167,139,250,.6);font-size:var(--text-sm);font-weight:500;cursor:pointer;margin-bottom:2px}
.sa-nav-item:hover{background:rgba(139,92,246,.1);color:#A78BFA}
.sa-nav-item.on{background:rgba(139,92,246,.15);color:#A78BFA;font-weight:600;border-left:3px solid #8B5CF6;padding-left:11px}
.sa-nav-item .sa-nav-icon{font-size:18px;width:22px;text-align:center}
.sa-sidebar-foot{padding:var(--s-4);border-top:1px solid rgba(139,92,246,.1)}
.sa-sidebar-user{padding:var(--s-3) var(--s-3) var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.sa-sidebar-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#5B21B6);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:white;flex-shrink:0}
.sa-sidebar-uname{font-size:var(--text-sm);font-weight:600;color:#E2D9F3}
.sa-sidebar-urole{font-size:10px;color:rgba(139,92,246,.6);text-transform:uppercase;letter-spacing:.08em}

.sa-main{margin-left:260px;flex:1;min-height:100vh}
.sa-main-head{position:sticky;top:0;z-index:200;background:rgba(13,8,32,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(139,92,246,.1);padding:var(--s-4) var(--s-6);display:flex;align-items:center;justify-content:space-between}
.sa-main-head h1{font-size:var(--text-xl);font-weight:700;color:#E2D9F3}
.sa-main-body{padding:var(--s-6)}

/* Super Admin Stat Cards */
.sa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-bottom:var(--s-6)}
.sa-stat{background:rgba(17,10,40,.8);border:1px solid rgba(139,92,246,.15);border-radius:var(--r-lg);padding:var(--s-5)}
.sa-stat:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sa-stat .ss-icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--s-3)}
.sa-stat .ss-val{font-size:var(--text-2xl);font-weight:800;color:#E2D9F3;margin-bottom:2px}
.sa-stat .ss-label{font-size:var(--text-sm);color:rgba(167,139,250,.6)}
.sa-stat .ss-delta{font-size:11px;font-weight:600;margin-top:var(--s-2);padding:2px 8px;border-radius:var(--r-full)}

/* Super Admin Table */
.sa-table-wrap{background:rgba(17,10,40,.8);border:1px solid rgba(139,92,246,.15);border-radius:var(--r-lg);overflow:hidden}
.sa-table{width:100%;border-collapse:collapse}
.sa-table th{padding:12px 16px;text-align:left;font-size:10px;font-weight:700;color:rgba(139,92,246,.6);text-transform:uppercase;letter-spacing:.08em;background:rgba(139,92,246,.06);border-bottom:1px solid rgba(139,92,246,.1)}
.sa-table td{padding:14px 16px;font-size:var(--text-sm);color:#C4B5FD;border-bottom:1px solid rgba(139,92,246,.07)}
.sa-table tr:last-child td{border-bottom:none}
.sa-table tr:hover td{background:rgba(139,92,246,.05)}
.sa-card{background:rgba(17,10,40,.8);border:1px solid rgba(139,92,246,.15);border-radius:var(--r-lg);padding:var(--s-5);margin-bottom:var(--s-4)}
.sa-card:hover{border-color:rgba(139,92,246,.35)}
.sa-card h3{font-size:var(--text-base);font-weight:600;color:#E2D9F3;margin-bottom:var(--s-4)}
.sa-badge-sa{background:rgba(139,92,246,.15);color:#A78BFA;padding:3px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase}
.sa-badge-admin{background:var(--primary-subtle);color:var(--primary);padding:3px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase}
.sa-badge-ops{background:var(--success-bg);color:var(--success);padding:3px 10px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase}
.sa-inp-dark{width:100%;padding:12px 16px;background:rgba(255,255,255,.04);border:1.5px solid rgba(139,92,246,.2);border-radius:var(--r-md);font-size:var(--text-sm);color:#F1F5F9;min-height:48px}
.sa-inp-dark:focus{border-color:#8B5CF6;outline:none;box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.sa-inp-dark::placeholder{color:rgba(167,139,250,.35)}
.sa-inp-dark option{background:#0D0820;color:#F1F5F9}

/* Super Admin mobile responsive */
@media(max-width:1024px){
  .sa-sidebar{transform:translateX(-100%);transition:transform var(--t-base) var(--ease)}
  .sa-sidebar.open{transform:translateX(0)}
  .sa-main{margin-left:0}
  .sa-stats{grid-template-columns:repeat(2,1fr)}
  .sa-main-body{padding:var(--s-4)}
}
@media(max-width:640px){
  .sa-stats{grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
  .exercise-grid{grid-template-columns:1fr}
  .sa-main-body{padding:var(--s-3)}
}

/* ---- Pending Physical Verification Status (tracking) ---- */
.ppv-banner{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.04));border:1.5px solid rgba(245,158,11,.3);border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.ppv-banner .ppv-icon{font-size:26px}
.ppv-banner h4{font-size:var(--text-sm);font-weight:700;color:var(--warning)}
.ppv-banner p{font-size:11px;color:var(--text-secondary);margin-top:2px}

/* ---- Role / Access Tags ---- */
.role-tag-sa{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(124,58,237,.1));border:1px solid rgba(139,92,246,.3);color:#A78BFA;border-radius:var(--r-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.role-tag-admin{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--primary-subtle);border:1px solid rgba(59,130,246,.2);color:var(--primary);border-radius:var(--r-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.role-tag-ops{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;background:var(--success-bg);border:1px solid rgba(34,197,94,.2);color:var(--success);border-radius:var(--r-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* ---- Sub-banner (subscription prompt in customer) ---- */
.sub-banner-v2{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(59,130,246,.06));border:1.5px solid rgba(139,92,246,.2);border-radius:var(--r-xl);margin-bottom:var(--s-5);cursor:pointer}
.sub-banner-v2:hover{border-color:#8B5CF6;background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(59,130,246,.1))}

/* =====================================================================
   DORMEDS 3.0 — LAUNCH-READY UPGRADE STYLES
   Notification Center · Loyalty · Health Profile · Reminders
   Drug Interactions · Invoice · Demo Mode
   ===================================================================== */

/* ---- Notification Panel ---- */
.notif-panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);
  width:100%;max-width:440px;max-height:90vh;overflow-y:auto;
  animation:slideInRight .3s var(--ease);
  display:flex;flex-direction:column;
}
.notif-panel-head{
  position:sticky;top:0;background:var(--bg-glass);backdrop-filter:blur(16px);
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;z-index:1;
}
.notif-panel-head h3{font-size:var(--text-lg);font-weight:700}
.notif-panel-body{flex:1;overflow-y:auto}
.notif-item{
  display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--border);cursor:pointer;position:relative;
  transition:background var(--t-fast) var(--ease);
}
.notif-item:hover{background:var(--primary-subtle)}
.notif-item.unread{background:rgba(59,130,246,.03)}
.notif-item:last-child{border-bottom:none}
.ni-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.ni-body{flex:1;min-width:0}
.ni-title{font-size:var(--text-sm);font-weight:600;margin-bottom:2px}
.ni-desc{font-size:11px;color:var(--text-secondary);line-height:1.5;margin-bottom:4px}
.ni-time{font-size:10px;color:var(--text-muted)}
.ni-dot{
  width:8px;height:8px;border-radius:50%;background:var(--primary);
  flex-shrink:0;margin-top:6px;
}
@media(max-width:640px){
  .notif-panel{max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;align-self:flex-end;margin-top:auto}
  .modal-ov:has(.notif-panel){align-items:flex-end}
}

/* ---- Loyalty Coins Hero ---- */
.loyalty-hero{
  background:linear-gradient(135deg,#1C0F3F,#2D1B6B,#1C0F3F);
  border-radius:var(--r-xl);padding:var(--s-6) var(--s-5);margin-bottom:var(--s-5);
  text-align:center;position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(124,58,237,.3);
}
.loyalty-hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(252,211,77,.12),transparent 70%);border-radius:50%;
}
.loyalty-hero::after{
  content:'';position:absolute;bottom:-30%;left:-10%;width:160px;height:160px;
  background:radial-gradient(circle,rgba(139,92,246,.2),transparent 70%);border-radius:50%;
}
.lh-icon{font-size:48px;margin-bottom:var(--s-3);animation:bounce 2s ease-in-out infinite;position:relative;z-index:1}
.lh-coins{font-size:clamp(2.5rem,8vw,4rem);font-weight:900;color:#FCD34D;line-height:1;position:relative;z-index:1;letter-spacing:-.03em}
.lh-label{font-size:var(--text-sm);font-weight:700;color:rgba(252,211,77,.7);text-transform:uppercase;letter-spacing:.12em;margin:var(--s-2) 0;position:relative;z-index:1}
.lh-value{font-size:var(--text-base);color:rgba(255,255,255,.7);margin-bottom:var(--s-4);position:relative;z-index:1}
.lh-progress-wrap{position:relative;z-index:1;text-align:left}
@keyframes coinSpin{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* ---- Vital Cards ---- */
.vital-card{
  background:var(--bg-card);border-radius:var(--r-xl);border:1px solid var(--border);
  padding:var(--s-4);text-align:center;cursor:pointer;
  transition:all var(--t-base) var(--ease);
}
.vital-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vc-icon{
  width:52px;height:52px;border-radius:var(--r-md);margin:0 auto var(--s-3);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.vc-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s-2)}
.vc-val{font-size:var(--text-2xl);font-weight:900;line-height:1;margin-bottom:4px}
.vc-unit{font-size:11px;color:var(--text-muted);margin-bottom:var(--s-2)}
.vc-status{font-size:11px;font-weight:700;padding:3px 10px;display:inline-block;border-radius:var(--r-full);background:var(--bg-surface)}

/* ---- Medicine Reminders ---- */
.reminder-card{
  display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4);
  background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:var(--s-3);transition:all var(--t-fast) var(--ease);
}
.reminder-card:hover{border-color:var(--primary);background:var(--primary-subtle)}
.reminder-card.disabled{opacity:.5}
.rc-left{display:flex;align-items:flex-start;gap:var(--s-3);flex:1;min-width:0}
.rc-icon{font-size:28px;width:46px;height:46px;background:var(--bg-surface);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rc-med{font-size:var(--text-sm);font-weight:700;margin-bottom:2px}
.rc-time{font-size:11px;color:var(--primary);font-weight:600}
.rc-note{font-size:11px;color:var(--text-muted);margin-top:2px}
.rc-days{display:flex;gap:4px;flex-wrap:wrap;margin-top:var(--s-2)}
.rc-day{padding:2px 6px;background:var(--bg-surface);border-radius:var(--r-sm);font-size:9px;font-weight:700;color:var(--text-muted)}
.rc-right{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);flex-shrink:0}

/* ---- Drug Interaction Toast (styled as warning) ---- */
.drug-interaction-banner{
  background:rgba(245,158,11,.08);border:1.5px solid rgba(245,158,11,.3);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-3);
  display:flex;gap:var(--s-3);align-items:flex-start;
}
.drug-interaction-banner.major{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3)}
.drug-interaction-banner.minor{background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.3)}
.dib-icon{font-size:22px;flex-shrink:0;margin-top:2px}
.dib-content h5{font-size:var(--text-sm);font-weight:700;margin-bottom:2px}
.dib-content p{font-size:11px;color:var(--text-secondary);line-height:1.5}

/* ---- BPT Slot / Day pickers ---- */
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.slot-item{padding:10px;text-align:center;border-radius:var(--r-md);border:1.5px solid var(--border);font-size:var(--text-sm);font-weight:500;cursor:pointer;background:transparent;color:var(--text-primary)}
.slot-item:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}
.slot-item.on{border-color:var(--primary);background:var(--primary);color:white}

/* ---- Demo Mode FAB ---- */
.demo-fab{
  position:fixed;bottom:calc(var(--nav-h) + var(--s-3));left:var(--s-4);
  background:linear-gradient(135deg,#7C3AED,#1D4ED8);color:white;
  padding:10px 16px;border-radius:var(--r-full);font-size:13px;font-weight:700;
  box-shadow:0 4px 20px rgba(124,58,237,.4);z-index:calc(var(--z-sticky) - 1);
  display:flex;align-items:center;gap:var(--s-2);animation:popIn .4s var(--spring);
  cursor:pointer;
}
.demo-fab:hover{transform:scale(1.05);box-shadow:0 8px 28px rgba(124,58,237,.5)}

/* ---- Drug Interaction Cart Warning ---- */
.cart-interaction-warn{
  background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-4);
  animation:fadeIn .3s var(--ease);
}
.cart-interaction-warn h5{font-size:var(--text-sm);font-weight:700;color:var(--error);margin-bottom:var(--s-2)}

/* ---- Health chart bars ---- */
.health-bars{display:flex;gap:var(--s-1);margin-top:var(--s-3)}
.hb-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:4px}
.hb-val{font-size:10px;color:var(--text-muted);font-weight:600}
.hb-bar{width:100%;border-radius:3px 3px 0 0;min-height:4px}
.hb-lbl{font-size:9px;color:var(--text-muted);text-align:center}

/* ---- Responsive: notification panel on mobile ---- */
@media(max-width:480px){
  .notif-panel{max-width:calc(100vw - 32px)}
  .loyalty-hero{padding:var(--s-5) var(--s-4)}
  .vital-card{padding:var(--s-3)}
  .lh-coins{font-size:2.5rem}
  .slot-grid{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   DORMEDS 4.0 UPGRADE — Inventory · Support · Counselling · Rx Fix
   ===================================================================== */

/* ---- Input label ---- */
.inp-label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}

/* ---- Inventory ---- */
.inv-alert{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);margin-bottom:var(--s-3);font-size:var(--text-sm);font-weight:500}
.inv-alert-warn{background:var(--warning-bg);border:1px solid rgba(245,158,11,.25);color:var(--warning)}
.inv-alert-err{background:var(--error-bg);border:1px solid rgba(239,68,68,.25);color:var(--error)}
.sync-bar{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:var(--s-4);flex-wrap:wrap}
.sync-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse 2s ease-in-out infinite}

/* ---- Barcode Scanner ---- */
.scanner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scanner-line{width:70%;height:2px;background:var(--primary);box-shadow:0 0 8px var(--primary);animation:scanLine 2s linear infinite}
@keyframes scanLine{0%{transform:translateY(-60px)}50%{transform:translateY(60px)}100%{transform:translateY(-60px)}}
.scanner-corner{position:absolute;width:20px;height:20px;border-color:var(--primary);border-style:solid}
.scanner-corner.tl{top:20%;left:15%;border-width:3px 0 0 3px}
.scanner-corner.tr{top:20%;right:15%;border-width:3px 3px 0 0}
.scanner-corner.bl{bottom:20%;left:15%;border-width:0 0 3px 3px}
.scanner-corner.br{bottom:20%;right:15%;border-width:0 3px 3px 0}

/* ---- Prescription Upload ---- */
.upload-zone{border:2px dashed var(--border);border-radius:var(--r-xl);padding:var(--s-8) var(--s-6);text-align:center;cursor:pointer;transition:all var(--t-base) var(--ease);margin-bottom:var(--s-4);background:var(--bg-surface)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--primary);background:var(--primary-subtle)}
.uz-icon{font-size:48px;margin-bottom:var(--s-3)}
.rx-card{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s-3);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.rx-card:hover{border-color:var(--primary);background:var(--primary-subtle)}
.rx-thumbnail{width:48px;height:48px;border-radius:var(--r-md);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}

/* ---- Support System ---- */
.support-option{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s-5);text-align:center;cursor:pointer;transition:all var(--t-base) var(--ease)}
.support-option:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.so-icon{width:52px;height:52px;border-radius:var(--r-md);margin:0 auto var(--s-3);display:flex;align-items:center;justify-content:center;font-size:24px}
.so-title{font-size:var(--text-sm);font-weight:700;margin-bottom:4px}
.so-sub{font-size:11px;color:var(--text-muted)}
.ticket-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-3);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.ticket-card:hover{border-color:var(--primary);background:var(--primary-subtle)}
.ticket-admin-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);margin-bottom:var(--s-3);transition:all var(--t-fast) var(--ease)}
.ticket-admin-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md)}
.unread-dot-wrap{display:flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2)}

/* ---- Chat UI ---- */
.chat-msg{display:flex;flex-direction:column;max-width:75%}
.chat-user{align-self:flex-end;align-items:flex-end}
.chat-agent{align-self:flex-start;align-items:flex-start}
.cm-bubble{padding:10px 14px;border-radius:18px;font-size:var(--text-sm);line-height:1.5;word-break:break-word}
.chat-user .cm-bubble{background:var(--primary);color:white;border-bottom-right-radius:4px}
.chat-agent .cm-bubble{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-primary);border-bottom-left-radius:4px}
.cm-time{font-size:10px;color:var(--text-muted);margin-top:3px;padding:0 4px}
.quick-reply-btn{padding:6px 12px;border-radius:var(--r-full);border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.quick-reply-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-subtle)}

/* ---- Call Animation ---- */
.call-animation{position:relative;width:80px;height:80px;margin:0 auto}
.call-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);opacity:.7;animation:callRing 1.5s ease-out infinite}
@keyframes callRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.call-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--primary);border-radius:50%;z-index:1}
.btn-success{background:linear-gradient(135deg,var(--success),#15803d);color:white}
.btn-success:hover{background:linear-gradient(135deg,#4ADE80,var(--success))}

/* ---- Counselling ---- */
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Responsive 4.0 ---- */
@media(max-width:640px){
  .sync-bar{flex-direction:column;align-items:flex-start;gap:var(--s-1)}
  .support-option{padding:var(--s-3)}
  .so-icon{width:40px;height:40px;font-size:18px}
  .chat-msg{max-width:88%}
}