/* ============================================================
   AGILEWEB LLC — COMMAND CENTER
   Design System v5 · Obsidian Forge Pro
   Mobile-First · All-Screen Responsive · Full Feature Coverage
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

   /* ── DESIGN TOKENS ── */
   :root {
     --bg-void:      #020508;
     --bg-deep:      #050c14;
     --bg-base:      #080e18;
     --bg-surface:   #0c1420;
     --bg-panel:     #0f1a27;
     --bg-elevated:  #131f2e;
     --bg-card:      #162030;
     --bg-hover:     #1a2638;
     --bg-input:     rgba(0,0,0,0.45);
   
     --border-faint:  rgba(0,180,255,0.06);
     --border-subtle: rgba(0,180,255,0.13);
     --border-soft:   rgba(0,180,255,0.20);
     --border-medium: rgba(0,180,255,0.32);
     --border-strong: rgba(0,180,255,0.50);
   
     --cyan:          #00d4ff;
     --cyan-bright:   #40e8ff;
     --cyan-dim:      rgba(0,212,255,0.15);
     --cyan-glow:     rgba(0,212,255,0.28);
     --cyan-ghost:    rgba(0,212,255,0.07);
   
     --green:         #00e89a;
     --green-dim:     rgba(0,232,154,0.13);
     --amber:         #f5a623;
     --amber-dim:     rgba(245,166,35,0.13);
     --rose:          #ff3d6b;
     --rose-dim:      rgba(255,61,107,0.13);
     --violet:        #9b6bff;
     --violet-dim:    rgba(155,107,255,0.13);
     --emerald:       #10d494;
     --sky:           #38bdf8;
   
     --text-primary:   #e8f4ff;
     --text-secondary: #8ab4d4;
     --text-muted:     #4a7a9b;
     --text-faint:     #2a4a62;
     --text-accent:    #00d4ff;
   
     --font-ui:      'DM Sans', sans-serif;
     --font-display: 'Orbitron', sans-serif;
     --font-mono:    'DM Mono', monospace;
   
     --fs-xs:   0.75rem;
     --fs-sm:   0.8125rem;
     --fs-base: 0.9375rem;
     --fs-md:   1rem;
     --fs-lg:   1.125rem;
     --fs-xl:   1.25rem;
     --fs-2xl:  1.5rem;
     --fs-3xl:  1.875rem;
   
     --sidebar-w:  256px;
     --topbar-h:   64px;
     --page-pad:   clamp(1rem, 3vw, 2rem);
     --radius-xs:  4px;
     --radius-sm:  6px;
     --radius-md:  10px;
     --radius-lg:  14px;
     --radius-xl:  20px;
     --radius-2xl: 28px;
     --radius-pill:9999px;
   
     --shadow-sm:   0 2px 8px rgba(0,0,0,0.45);
     --shadow-md:   0 4px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
     --shadow-lg:   0 8px 40px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.04);
     --shadow-glow: 0 0 28px rgba(0,212,255,0.18), 0 0 64px rgba(0,212,255,0.07);
     --shadow-deep: 0 14px 64px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);
     --shadow-card: 0 2px 12px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.02);
   
     --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
     --ease-out:    cubic-bezier(0, 0, 0.2, 1);
     --t-fast:   130ms;
     --t-normal: 220ms;
     --t-slow:   360ms;
   
     /* aliases */
     --bg: var(--bg-void); --panel: var(--bg-panel); --card: var(--bg-card);
     --border: var(--border-subtle); --b2: var(--border-soft);
     --glow: var(--cyan); --glow2: var(--green);
     --profit: var(--green); --loss: var(--rose);
     --text: var(--text-primary); --muted: var(--text-secondary);
     --hfont: var(--font-display); --font: var(--font-ui);
     --sh-deep: var(--shadow-deep);
   }
   
   /* ── RESET ── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { font-size: 16px; height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; scrollbar-gutter: stable; }
   body { background: var(--bg-void); font-family: var(--font-ui); font-size: var(--fs-base); color: var(--text-primary); line-height: 1.65; min-height: 100dvh; overflow: hidden; background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,212,255,0.08) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 90% 85%, rgba(155,107,255,0.05) 0%, transparent 55%); }
   a { color: var(--cyan); text-decoration: none; transition: color var(--t-fast) var(--ease-smooth); }
   a:hover { color: var(--cyan-bright); }
   ::-webkit-scrollbar { width: 4px; height: 4px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; }
   ::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }
   [x-cloak] { display: none !important; }
   ::selection { background: rgba(0,212,255,0.28); color: var(--text-primary); }
   button, a, [role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
   :focus-visible { outline: 2px solid rgba(0,212,255,0.65); outline-offset: 2px; border-radius: var(--radius-sm); }
   
   /* ── AUTH SCREEN ── */
   #global-auth-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-void); background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,212,255,0.12) 0%, transparent 65%); }
   #global-auth-loader::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.028) 1px, transparent 1px); background-size: 60px 60px; animation: grid-drift 22s linear infinite; pointer-events: none; }
   @keyframes grid-drift { from { transform: translateY(0); } to { transform: translateY(60px); } }
   #auth-checking { text-align: center; position: relative; }
   #auth-checking p { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: 0.04em; }
   #auth-login-form { width: 100%; max-width: 400px; padding: 0 1.5rem; position: relative; animation: fade-up 0.5s var(--ease-spring) both; }
   .login-card { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--radius-2xl); padding: clamp(1.5rem,5vw,2.5rem); box-shadow: var(--shadow-deep); position: relative; overflow: hidden; }
   .login-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,212,255,0.07) 0%, rgba(155,107,255,0.035) 50%, transparent 72%); pointer-events: none; }
   .login-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.55), transparent); }
   .login-card label { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-secondary); margin-bottom: 0.5rem; }
   .login-card input { width: 100%; background: rgba(0,0,0,0.5) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-md) !important; color: var(--text-primary) !important; font-family: var(--font-ui); font-size: var(--fs-base) !important; padding: 0.8rem 1rem !important; outline: none !important; transition: border-color var(--t-fast), box-shadow var(--t-fast); -webkit-appearance: none; }
   .login-card input:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(0,212,255,0.18) !important; }
   .login-card input::placeholder { color: var(--text-faint); }
   #login-error { font-size: var(--fs-sm); color: var(--rose); padding: 0.6rem 0.875rem; background: rgba(255,61,107,0.09); border: 1px solid rgba(255,61,107,0.22); border-radius: var(--radius-md); margin-top: 0.25rem; }
   #login-btn { width: 100%; padding: 0.85rem 1.5rem; background: linear-gradient(135deg, var(--cyan), #0099cc); color: #001a26; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 800; border: none; border-radius: var(--radius-md); cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; transition: all var(--t-normal) var(--ease-smooth); position: relative; overflow: hidden; margin-top: 0.35rem; }
   #login-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,212,255,0.38); }
   #login-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
   
   /* ── APP SHELL ── */
   .admin-shell { display: flex; height: 100dvh; overflow: hidden; background: var(--bg-void); }
   
   /* ── SIDEBAR ── */
   .admin-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border-faint); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-smooth), box-shadow var(--t-slow); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); scrollbar-width: thin; scrollbar-color: var(--border-subtle) transparent; }
   .admin-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-deep), 6px 0 64px rgba(0,0,0,0.65); }
   .admin-sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(0,212,255,0.22), transparent); pointer-events: none; }
   @media (min-width: 1024px) { .admin-sidebar { position: static; transform: none !important; box-shadow: none !important; border-right: 1px solid var(--border-faint); } }
   
   .sb-brand { height: var(--topbar-h); min-height: var(--topbar-h); border-bottom: 1px solid var(--border-faint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 1rem; }
   .sb-brand h1 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
   .sb-brand h1 span { color: var(--cyan); }
   .sb-nav { padding: 0.75rem; flex: 1; overflow-y: auto; }
   .sb-section { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding: 0.75rem 0.75rem 0.3rem; }
   .sidebar-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.875rem; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; border: 1px solid transparent; transition: all var(--t-normal) var(--ease-smooth); cursor: pointer; white-space: nowrap; margin-bottom: 2px; position: relative; overflow: hidden; }
   .sidebar-nav-link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 60%; border-radius: 0 3px 3px 0; background: var(--cyan); transition: width var(--t-normal) var(--ease-smooth); }
   .sidebar-nav-link:hover { color: var(--text-primary); background: rgba(0,212,255,0.055); border-color: var(--border-faint); transform: translateX(3px); }
   .sidebar-nav-link.nav-item-active { color: var(--cyan); background: rgba(0,212,255,0.09); border-color: rgba(0,212,255,0.22); font-weight: 600; }
   .sidebar-nav-link.nav-item-active::before { width: 3px; }
   .sidebar-nav-link svg, .sidebar-nav-link .icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.65; transition: opacity var(--t-fast), transform var(--t-fast); }
   .sidebar-nav-link:hover svg, .sidebar-nav-link:hover .icon { opacity: 0.95; transform: scale(1.06); }
   .sidebar-nav-link.nav-item-active svg, .sidebar-nav-link.nav-item-active .icon { opacity: 1; }
   .sb-footer { padding: 1rem; border-top: 1px solid var(--border-faint); flex-shrink: 0; }
   .sb-user { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-xs); color: var(--text-muted); padding: 0.5rem 0; }
   .sb-logout { width: 100%; margin-top: 0.5rem; padding: 0.6rem; background: var(--rose-dim); border: 1px solid rgba(255,61,107,0.2); border-radius: var(--radius-md); color: var(--rose); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; transition: all var(--t-fast); }
   .sb-logout:hover { background: var(--rose); color: #fff; }
   
   /* Sidebar overlay (mobile) */
   .sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); }
   .sidebar-overlay.show { display: block; animation: fade-in 0.2s ease; }
   @media (min-width: 1024px) { .sidebar-overlay { display: none !important; } }
   
   /* ── MAIN AREA ── */
   .admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-base); }
   
   /* ── TOPBAR ── */
   .admin-topbar { height: var(--topbar-h); min-height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; background: var(--bg-panel); border-bottom: 1px solid var(--border-faint); flex-shrink: 0; gap: 0.75rem; position: relative; }
   .admin-topbar::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,212,255,0.22), transparent); pointer-events: none; }
   #topbar-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .tb-hamburger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; transition: all var(--t-fast); flex-shrink: 0; }
   .tb-hamburger:hover { color: var(--cyan); border-color: rgba(0,212,255,0.38); background: var(--cyan-ghost); }
   @media (min-width: 1024px) { .tb-hamburger { display: none !important; } }
   
   /* ── SECTIONS ── */
   .sections-wrapper { flex: 1; overflow: hidden; position: relative; }
   .admin-section { position: absolute; inset: 0; display: none; flex-direction: column; overflow: hidden; background: var(--bg-base); }
   .admin-section.active { display: flex; animation: section-enter 0.28s var(--ease-smooth) both; }
   @keyframes section-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
   .section-scroll { flex: 1 1 0% !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--page-pad) !important; min-height: 0 !important; }
   
   /* ── SHARED GLASS CARD ── */
   .card, .glass-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: border-color var(--t-normal), box-shadow var(--t-normal), transform var(--t-normal); }
   .card::before, .glass-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%); pointer-events: none; border-radius: inherit; }
   .card:hover, .glass-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow), var(--shadow-md); }
   
   /* ── BADGES ── */
   .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
   .badge-cyan    { background: rgba(0,212,255,0.13);   color: #5ee8ff;  border: 1px solid rgba(0,212,255,0.25); }
   .badge-green   { background: rgba(0,232,154,0.13);   color: #4dffc0;  border: 1px solid rgba(0,232,154,0.25); }
   .badge-amber   { background: rgba(245,166,35,0.13);  color: #ffcc5a;  border: 1px solid rgba(245,166,35,0.25); }
   .badge-rose    { background: rgba(255,61,107,0.13);  color: #ff7fa5;  border: 1px solid rgba(255,61,107,0.25); }
   .badge-violet  { background: rgba(155,107,255,0.13); color: #c4a6ff;  border: 1px solid rgba(155,107,255,0.25); }
   .badge-slate   { background: rgba(100,116,139,0.12); color: #aabfd4;  border: 1px solid rgba(100,116,139,0.18); }
   .badge-active, .badge-completed, .badge-operational { background: rgba(0,232,154,0.12); color: #4dffc0; border: 1px solid rgba(0,232,154,0.22); }
   .badge-inactive, .badge-pending, .badge-maintenance { background: rgba(251,191,36,0.12); color: #ffd740; border: 1px solid rgba(251,191,36,0.22); }
   .badge-terminated, .badge-decommissioned { background: rgba(248,113,113,0.12); color: #ff7fa5; border: 1px solid rgba(248,113,113,0.22); }
   
   /* ── SEARCH INPUT ── */
   .search-input { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); padding: 0.55rem 1rem; font-size: var(--fs-base); outline: none; transition: all var(--t-fast); font-family: var(--font-ui); width: 100%; }
   .search-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.12); }
   .search-input::placeholder { color: var(--text-muted); }
   
   /* ── EMPTY STATE ── */
   .empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
   .empty-state p { margin-top: 0.75rem; font-size: var(--fs-base); }
   
   /* ── MODAL SYSTEM ── */
   .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fade-in 0.18s ease; overflow-y: auto; }
   .modal-box { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); box-shadow: var(--shadow-deep); animation: modal-enter 0.28s var(--ease-spring); width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; }
   .modal-box-lg { max-width: 900px; }
   .modal-body { max-height: 65dvh; overflow-y: auto; padding: 0.25rem; }
   .modal-body fieldset { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
   .modal-body legend { font-size: var(--fs-xs); font-weight: 700; color: var(--cyan); padding: 0 0.5rem; text-transform: uppercase; letter-spacing: 0.09em; font-family: var(--font-display); }
   .modal-body label { display: block; font-size: var(--fs-xs); text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin-top: 1rem; letter-spacing: 0.07em; }
   .modal-body label:first-child { margin-top: 0; }
   .modal-body p { background: rgba(0,0,0,0.38); padding: 0.55rem 0.95rem; border-radius: var(--radius-sm); margin-top: 0.3rem; word-break: break-word; font-size: var(--fs-base); color: var(--text-primary); line-height: 1.65; border: 1px solid var(--border-faint); }
   .modal-body p.na { color: var(--text-muted); font-style: italic; }
   .modal-body .chat-transcript { background: rgba(0,0,0,0.42); border-radius: var(--radius-md); padding: 1rem; margin-top: 0.5rem; font-size: var(--fs-sm); line-height: 1.9; white-space: pre-wrap; max-height: 260px; overflow-y: auto; color: var(--text-secondary); border: 1px solid var(--border-subtle); font-family: var(--font-mono); }
   .modal-body .user-line { color: var(--cyan); font-weight: 600; display: block; }
   .modal-body .bot-line  { color: var(--text-primary); display: block; }
   @keyframes modal-enter { from { opacity: 0; transform: scale(0.95) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } }
   
   /* ── FORMS ── */
   .fg { margin-bottom: 1rem; }
   .fg label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.07em; }
   .fg input, .fg select, .fg textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-base); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); -webkit-appearance: none; min-height: 44px; }
   .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.11); }
   .fg input::placeholder, .fg textarea::placeholder { color: var(--text-faint); }
   .fg select option { background: var(--bg-elevated); color: var(--text-primary); }
   .fg textarea { resize: vertical; min-height: 88px; line-height: 1.65; }
   .fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
   
   /* ── BUTTONS ── */
   .btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border: none; transition: all var(--t-normal); min-height: 40px; white-space: nowrap; }
   .btn:active { transform: scale(0.97); }
   .btn-cyan   { background: var(--cyan); color: #001a26; }
   .btn-cyan:hover { filter: brightness(1.12); box-shadow: 0 6px 20px rgba(0,212,255,0.38); }
   .btn-green  { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,232,154,0.25); }
   .btn-green:hover  { background: var(--green); color: #001a26; }
   .btn-amber  { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(245,166,35,0.25); }
   .btn-amber:hover  { background: var(--amber); color: #001a26; }
   .btn-rose   { background: var(--rose-dim);  color: var(--rose);  border: 1px solid rgba(255,61,107,0.25); }
   .btn-rose:hover   { background: var(--rose); color: #fff; }
   .btn-violet { background: var(--violet-dim); color: var(--violet); border: 1px solid rgba(155,107,255,0.25); }
   .btn-violet:hover { background: var(--violet); color: #fff; }
   .btn-ghost  { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
   .btn-ghost:hover  { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-medium); }
   .btn-white  { background: #fff; color: #000; font-weight: 800; }
   .btn-white:hover  { background: var(--cyan); color: #001a26; }
   .btn-sm { padding: 0.4rem 0.875rem; font-size: var(--fs-xs); min-height: 32px; }
   .btn-xs { padding: 0.28rem 0.65rem; font-size: 0.68rem; min-height: 26px; border-radius: var(--radius-sm); }
   .btn-block { width: 100%; justify-content: center; }
   
   /* ── TABLES ── */
   .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); scrollbar-width: thin; }
   .data-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--fs-base); }
   .data-table th { background: var(--bg-panel); color: var(--text-muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; padding: 0.8rem 1.1rem; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 2; }
   .data-table td { padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border-faint); color: var(--text-secondary); vertical-align: middle; }
   .data-table tbody tr { transition: background var(--t-fast); }
   .data-table tbody tr:hover { background: rgba(0,212,255,0.025); }
   
   /* ── DATA ROWS (non-table list items) ── */
   .data-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1.1rem; border-radius: var(--radius-lg); background: var(--bg-elevated); border: 1px solid var(--border-faint); transition: all var(--t-normal); }
   .data-row:hover { border-color: var(--border-subtle); background: var(--bg-hover); transform: translateX(2px); }
   .data-row h4 { font-size: var(--fs-base); font-weight: 700; color: var(--text-primary); }
   .data-row p { font-size: var(--fs-sm); color: var(--text-secondary); }
   
   /* ── MANAGEMENT TABS ── */
   .tab-link { padding: 0.65rem 1.1rem; cursor: pointer; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: var(--fs-base); font-weight: 500; font-family: var(--font-ui); white-space: nowrap; transition: all var(--t-fast); margin-bottom: -1px; }
   .tab-link:hover { color: var(--text-primary); }
   .tab-link.active { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 700; }
   .tab-nav { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border-faint); scrollbar-width: none; -ms-overflow-style: none; }
   .tab-nav::-webkit-scrollbar { display: none; }
   
   /* ── FORM GROUP (management style) ── */
   .form-group { margin-bottom: 1rem; }
   .form-group label { display: block; font-size: var(--fs-xs); color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
   .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.65rem 0.875rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--fs-base); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-ui); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); min-height: 42px; -webkit-appearance: none; }
   .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,0.11); }
   .form-group textarea { resize: vertical; min-height: 80px; }
   
   /* ── NOTIFICATION BELL ── */
   .notif-dropdown { background: var(--bg-elevated) !important; border: 1px solid var(--border-soft) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-deep) !important; }
   
   /* ── FUNDSPILOT SPECIFIC ── */
   #section-fundspilot { display: none; flex-direction: column; flex: 1 1 0%; min-height: 0; height: 100%; overflow: hidden; background: var(--bg-void) !important; position: relative; }
   #section-fundspilot.active { display: flex !important; }
   #section-fundspilot::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.02) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; z-index: 0; animation: grid-drift 30s linear infinite; }
   #section-fundspilot > * { position: relative; z-index: 1; }
   #section-fundspilot .fp-inner { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; overflow: hidden; }
   #section-fundspilot .fp-row { display: flex; flex: 1 1 0%; overflow: hidden; position: relative; }
   #section-fundspilot aside { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 210px !important; min-width: 210px !important; background: var(--bg-panel) !important; border-right: 1px solid var(--border-subtle) !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; flex-shrink: 0 !important; z-index: 30 !important; transform: translateX(-100%) !important; transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s !important; }
   #section-fundspilot aside.open { transform: translateX(0) !important; box-shadow: 4px 0 32px rgba(0,0,0,0.6) !important; }
   @media (min-width: 1024px) { #section-fundspilot aside { position: static !important; transform: none !important; box-shadow: none !important; width: 210px !important; height: 100% !important; } }
   #section-fundspilot .fp-main { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
   #section-fundspilot .fp-header { height: var(--topbar-h); min-height: var(--topbar-h); max-height: var(--topbar-h); flex-shrink: 0; background: var(--bg-panel) !important; border-bottom: 1px solid var(--border-subtle) !important; display: flex !important; align-items: center !important; padding: 0 0.875rem !important; gap: 0.5rem !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
   #section-fundspilot .fp-header::-webkit-scrollbar { display: none; }
   #section-fundspilot .fp-content { flex: 1 1 0%; overflow-y: auto; overflow-x: hidden; padding: 1rem; min-height: 0; -webkit-overflow-scrolling: touch; }
   @media (min-width: 768px) { #section-fundspilot .fp-content { padding: 1.25rem; } }
   #section-fundspilot .card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.4); position: relative; }
   #section-fundspilot .card-hover:hover { border-color: var(--border-soft); }
   #section-fundspilot .stat-val { font-family: var(--font-display); font-size: clamp(0.85rem, 1.8vw, 1.15rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
   #section-fundspilot .profit { color: var(--green) !important; }
   #section-fundspilot .loss   { color: var(--rose) !important; }
   #section-fundspilot .split-bar { height: 18px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(0,0,0,0.4); }
   #section-fundspilot .sl { background: linear-gradient(90deg, #00e89a, #00d4ff); transition: width 0.7s ease; }
   #section-fundspilot .so { background: linear-gradient(90deg, #f5a623, #ff3d6b); transition: width 0.7s ease; }
   #section-fundspilot .chart-wrap { position: relative; height: clamp(110px, 14vw, 180px); }
   #section-fundspilot .fp-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
   #section-fundspilot .fp-table th { background: var(--bg-panel); color: var(--text-muted); text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.1em; padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 5; font-weight: 700; }
   #section-fundspilot .fp-table td { padding: 5px 10px; border-bottom: 1px solid rgba(0,180,255,0.04); white-space: nowrap; vertical-align: middle; color: var(--text-secondary); font-size: 0.78rem; }
   #section-fundspilot .fp-table tbody tr:hover { background: rgba(0,212,255,0.025); }
   #section-fundspilot .fp-table .cat-row td { background: rgba(0,212,255,0.05); color: rgba(0,212,255,0.7); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
   #section-fundspilot .fp-table .total-row td { background: rgba(0,212,255,0.08); color: var(--cyan); font-weight: 700; font-family: var(--font-display); font-size: 0.68rem; }
   #section-fundspilot .fp-table .split-row td { background: rgba(0,232,154,0.05); color: var(--green); font-weight: 600; font-size: 0.68rem; }
   #section-fundspilot .fp-table .ops-row td { background: rgba(245,166,35,0.05); color: var(--amber); font-weight: 600; font-size: 0.68rem; }
   #section-fundspilot .fp-input { width: 80px; background: rgba(0,212,255,0.04); border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-primary); padding: 4px 6px; text-align: right; font-size: 0.78rem; font-family: var(--font-mono); outline: none; -moz-appearance: textfield; transition: all 0.12s; }
   #section-fundspilot .fp-input::-webkit-outer-spin-button, #section-fundspilot .fp-input::-webkit-inner-spin-button { -webkit-appearance: none; }
   #section-fundspilot .fp-input:focus { border-color: var(--cyan); background: rgba(0,212,255,0.09); box-shadow: 0 0 0 2px rgba(0,212,255,0.14); }
   #section-fundspilot .fp-input-name { width: 150px; background: rgba(0,212,255,0.03); border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-primary); padding: 4px 8px; font-size: 0.78rem; font-family: var(--font-ui); outline: none; }
   #section-fundspilot .fp-input-name:focus { border-color: var(--cyan); }
   #section-fundspilot .btn { border-radius: 8px; padding: 6px 11px; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.13s; display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; white-space: nowrap; font-family: var(--font-ui); min-height: 0; }
   #section-fundspilot .btn-cyan   { background: rgba(0,212,255,0.11); color: #5ee8ff; border-color: rgba(0,212,255,0.28); }
   #section-fundspilot .btn-green  { background: rgba(0,232,154,0.11); color: #4dffc0; border-color: rgba(0,232,154,0.28); }
   #section-fundspilot .btn-amber  { background: rgba(245,166,35,0.11); color: #ffcc5a; border-color: rgba(245,166,35,0.28); }
   #section-fundspilot .btn-rose   { background: rgba(255,61,107,0.11); color: #ff7fa5; border-color: rgba(255,61,107,0.28); }
   #section-fundspilot .btn-violet { background: rgba(155,107,255,0.11); color: #c4a6ff; border-color: rgba(155,107,255,0.28); }
   #section-fundspilot .btn-cyan:hover   { background: rgba(0,212,255,0.22); transform: translateY(-1px); }
   #section-fundspilot .btn-green:hover  { background: rgba(0,232,154,0.22); transform: translateY(-1px); }
   #section-fundspilot .btn-amber:hover  { background: rgba(245,166,35,0.22); transform: translateY(-1px); }
   #section-fundspilot .btn-rose:hover   { background: rgba(255,61,107,0.22); transform: translateY(-1px); }
   #section-fundspilot .btn-violet:hover { background: rgba(155,107,255,0.22); transform: translateY(-1px); }
   #section-fundspilot .tab-pill { padding: 5px 13px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); transition: all 0.13s; white-space: nowrap; font-family: var(--font-ui); }
   #section-fundspilot .tab-pill:hover { color: var(--text-primary); border-color: var(--border-soft); }
   #section-fundspilot .tab-pill.active { background: rgba(0,212,255,0.1); color: var(--cyan); border-color: rgba(0,212,255,0.32); }
   #section-fundspilot .badge { border-radius: 5px; padding: 2px 7px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
   #section-fundspilot .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: fp-pulse 2.5s ease-in-out infinite; flex-shrink: 0; }
   #section-fundspilot .sdot.syncing { background: var(--amber); animation-duration: 0.8s; }
   #section-fundspilot .sdot.error { background: var(--rose); animation: none; }
   @keyframes fp-pulse { 0%,100%{opacity:1} 50%{opacity:0.25} }
   @keyframes fp-spin { to { transform: rotate(360deg); } }
   #section-fundspilot .spinner { animation: fp-spin 0.75s linear infinite; }
   #section-fundspilot .mpesa-box { background: linear-gradient(135deg, rgba(0,212,255,0.07), rgba(0,232,154,0.04)); border: 1px solid rgba(0,212,255,0.2); border-radius: 10px; padding: 0.875rem 1rem; }
   #section-fundspilot .modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1rem; }
   #section-fundspilot .modal-box { background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: 20px; padding: 1.6rem; width: 100%; max-width: 500px; max-height: 90dvh; overflow-y: auto; box-shadow: var(--shadow-deep); animation: modal-enter 0.28s var(--ease-spring); }
   #section-fundspilot select { background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-primary); border-radius: 8px; padding: 5px 9px; font-size: 0.78rem; font-family: var(--font-ui); outline: none; cursor: pointer; min-height: 0; }
   #section-fundspilot .delete-btn { opacity: 0; transition: opacity 0.13s; }
   #section-fundspilot tr:hover .delete-btn { opacity: 1; }
   #section-fundspilot .calc-panel { background: var(--bg-panel) !important; border-left: 1px solid var(--border-soft) !important; position: fixed !important; top: 0 !important; right: 0 !important; height: 100dvh !important; z-index: 70 !important; transform: translateX(100%); transition: transform 0.36s var(--ease-smooth); }
   #section-fundspilot .calc-panel.open { transform: translateX(0); }
   #section-fundspilot input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--border-subtle); outline: none; cursor: pointer; }
   #section-fundspilot input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); cursor: pointer; border: 2px solid var(--bg-elevated); box-shadow: 0 0 10px rgba(0,212,255,0.45); }
   
   /* ── DATA INTELLIGENCE SECTION ── */
   #section-data-intelligence .tab-btn { padding: 0.5rem 1rem; border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: 600; cursor: pointer; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-family: var(--font-ui); white-space: nowrap; transition: all var(--t-fast); }
   #section-data-intelligence .tab-btn.active-tab { background: rgba(0,212,255,0.1); color: var(--cyan); border-color: rgba(0,212,255,0.32); box-shadow: 0 0 13px rgba(0,212,255,0.13); }
   #section-data-intelligence .consent-bar { height: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.06); overflow: hidden; }
   #section-data-intelligence .consent-bar-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.9s var(--ease-smooth); }
   #section-data-intelligence .stat-glow-cyan   { box-shadow: 0 0 0 1px rgba(0,212,255,0.15), var(--shadow-md); }
   #section-data-intelligence .stat-glow-violet { box-shadow: 0 0 0 1px rgba(155,107,255,0.15), var(--shadow-md); }
   #section-data-intelligence .stat-glow-amber  { box-shadow: 0 0 0 1px rgba(245,166,35,0.15), var(--shadow-md); }
   #section-data-intelligence .stat-glow-green  { box-shadow: 0 0 0 1px rgba(0,232,154,0.15), var(--shadow-md); }
   #section-data-intelligence .search-input { max-width: 260px; }
   
   /* ── PROJECT & SUPPORT SECTIONS ── */
   #section-proj-mgmt .glass-card:hover h3 { color: var(--cyan); }
   
   /* ── SETTINGS SECTION ── */
   #section-settings .form-group input, #section-settings .form-group select, #section-settings .form-group textarea { background: var(--bg-elevated) !important; }
   
   /* ── MANAGEMENT SECTION ── */
   #section-management .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); scrollbar-width: thin; }
   #section-management table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--fs-base); }
   #section-management th, #section-management td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-faint); vertical-align: middle; }
   #section-management thead th { background: var(--bg-panel); font-weight: 700; text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.09em; color: var(--text-muted); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
   #section-management tbody tr:hover { background: rgba(0,212,255,0.022); }
   #section-management td { color: var(--text-secondary); }
   #mgmt-toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); padding: 0.75rem 1.5rem; border-radius: var(--radius-md); color: white; font-weight: 600; font-size: var(--fs-base); z-index: 1000; box-shadow: var(--shadow-deep); animation: fade-up 0.3s var(--ease-spring); }
   
   /* ── SUPPORT SECTION ── */
   #section-support .tab-pill { padding: 0.5rem 1.1rem; border-radius: var(--radius-2xl); font-size: var(--fs-xs); font-weight: 800; cursor: pointer; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); transition: all var(--t-fast); text-transform: uppercase; letter-spacing: 0.06em; }
   #section-support .tab-pill.active { background: var(--cyan); color: #001a26; border-color: transparent; }
   
   /* ── TAILWIND COLOR OVERRIDES ── */
   .bg-slate-900  { background-color: var(--bg-base) !important; }
   .bg-slate-800  { background-color: var(--bg-elevated) !important; }
   .bg-slate-700  { background-color: var(--bg-hover) !important; }
   .border-slate-700, .border-slate-600 { border-color: var(--border-subtle) !important; }
   .border-slate-800 { border-color: var(--border-faint) !important; }
   .text-slate-400 { color: var(--text-secondary) !important; }
   .text-slate-500 { color: var(--text-muted) !important; }
   .text-slate-300 { color: var(--text-primary) !important; }
   .text-white     { color: var(--text-primary) !important; }
   .text-cyan-400  { color: var(--cyan) !important; }
   .text-emerald-400 { color: var(--green) !important; }
   .text-rose-400  { color: #ff7fa5 !important; }
   .text-amber-400 { color: var(--amber) !important; }
   .text-violet-400 { color: var(--violet) !important; }
   .text-xs  { font-size: var(--fs-xs) !important; }
   .text-sm  { font-size: var(--fs-base) !important; }
   .text-base { font-size: var(--fs-md) !important; }
   .text-lg  { font-size: var(--fs-lg) !important; }
   .text-xl  { font-size: var(--fs-xl) !important; }
   .text-2xl { font-size: var(--fs-2xl) !important; }
   .text-3xl { font-size: var(--fs-3xl) !important; }
   .text-\[10px\], .text-\[9px\], .text-\[8px\], .text-\[11px\] { font-size: var(--fs-xs) !important; }
   .rounded-lg.bg-slate-700 { background: var(--bg-elevated) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; }
   .rounded-xl.bg-cyan-600, .rounded-lg.bg-cyan-600 { background: linear-gradient(135deg, #0099cc, var(--cyan)) !important; color: #001a26 !important; font-weight: 700; }
   
   /* ── ANIMATIONS ── */
   @keyframes fade-in  { from { opacity: 0; }  to { opacity: 1; } }
   @keyframes fade-up  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
   @keyframes fp-su    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
   #section-fundspilot .stagger > * { animation: fp-su 0.5s var(--ease-spring) both; }
   #section-fundspilot .stagger > *:nth-child(1){animation-delay:.04s}
   #section-fundspilot .stagger > *:nth-child(2){animation-delay:.09s}
   #section-fundspilot .stagger > *:nth-child(3){animation-delay:.14s}
   #section-fundspilot .stagger > *:nth-child(4){animation-delay:.19s}
   #section-fundspilot .stagger > *:nth-child(5){animation-delay:.24s}
   #section-fundspilot .stagger > *:nth-child(6){animation-delay:.29s}
   
   /* ── RESPONSIVE MOBILE ── */
   @media (max-width: 640px) {
     :root { --topbar-h: 54px; --page-pad: 0.875rem; }
     #section-fundspilot .fp-header { padding: 0 0.6rem !important; gap: 0.3rem !important; flex-wrap: nowrap; }
     #section-fundspilot .fp-header h2 { font-size: 0.75rem !important; }
     #section-fundspilot .btn { padding: 5px 8px; font-size: 0.72rem; }
     #section-fundspilot .btn span.hidden-sm { display: none !important; }
     #section-fundspilot .fp-content { padding: 0.625rem !important; }
     #section-fundspilot .stat-val { font-size: 0.9rem; }
     #section-fundspilot .chart-wrap { height: 110px; }
     .data-row { flex-direction: column; align-items: flex-start; }
     .tab-nav { -webkit-overflow-scrolling: touch; }
     #section-data-intelligence .search-input { max-width: 100%; }
     #section-management .tab-link { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
     .modal-backdrop { padding: 0.5rem; align-items: flex-end; }
     .modal-box { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 95dvh; }
     .login-card { padding: 1.5rem 1.25rem; }
   }
   
   /* ── RESPONSIVE TABLET ── */
   @media (min-width: 641px) and (max-width: 1023px) {
     :root { --page-pad: 1.25rem; }
     #section-fundspilot .chart-wrap { height: 155px; }
   }
   
   /* ── RESPONSIVE DESKTOP ── */
   @media (min-width: 1440px) {
     :root { --sidebar-w: 268px; --page-pad: 2rem; }
     #section-fundspilot .stat-val { font-size: 1.25rem; }
     #section-fundspilot .chart-wrap { height: 200px; }
   }
   
   /* ── PRINT ── */
   @media print {
     .admin-sidebar, .sidebar-overlay { display: none !important; }
     .admin-shell { height: auto; overflow: visible; }
     .admin-main { display: block; overflow: visible; }
     .admin-section { display: block !important; height: auto !important; overflow: visible !important; position: static !important; }
     .section-scroll { overflow: visible !important; height: auto !important; }
   }
   
   /* ============================================================
      SALES PIPELINE (CRM) SECTION
      ============================================================ */
   #section-crm .section-scroll { background: var(--bg-base) !important; }
   
   /* Kanban scroll container — horizontal on desktop, vertical stack on mobile */
   #section-crm > .section-scroll > div[style*="overflow-x:auto"] {
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     scrollbar-color: var(--border-soft) transparent;
     padding-bottom: 1.5rem;
   }
   
   #section-crm .glass-card h5 {
     font-size: var(--fs-base) !important;
     font-weight: 700 !important;
     color: var(--text-primary) !important;
     line-height: 1.4;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 180px;
   }
   
   /* Stage column headers */
   #section-crm h4 {
     font-size: var(--fs-xs) !important;
     font-weight: 800 !important;
     text-transform: uppercase !important;
     letter-spacing: .14em !important;
     color: var(--text-secondary) !important;
   }
   
   /* Pipeline deal cards */
   #section-crm .glass-card.p-4 {
     transition: border-color var(--t-normal) var(--ease-smooth),
                 box-shadow var(--t-normal) var(--ease-smooth),
                 transform var(--t-fast) var(--ease-smooth);
   }
   #section-crm .glass-card.p-4:hover {
     border-color: var(--border-medium) !important;
     transform: translateY(-2px);
     box-shadow: var(--shadow-glow);
   }
   
   /* Deal value text */
   #section-crm p[style*="color:var(--green)"] {
     font-size: var(--fs-sm) !important;
     font-weight: 800 !important;
   }
   
   /* Move buttons */
   #section-crm .btn-xs {
     padding: 4px 7px;
     font-size: var(--fs-xs);
     min-height: 28px;
     border-radius: var(--radius-sm);
   }
   .btn-ghost {
     background: var(--bg-elevated);
     border: 1px solid var(--border-subtle);
     color: var(--text-secondary);
   }
   .btn-ghost:hover {
     background: var(--bg-hover);
     color: var(--text-primary);
     border-color: var(--border-soft);
   }
   
   /* Kanban columns — stack on mobile */
   @media (max-width: 768px) {
     #section-crm > .section-scroll > div[style*="overflow-x:auto"] {
       flex-direction: column !important;
       overflow-x: hidden !important;
     }
     #section-crm > .section-scroll > div[style*="overflow-x:auto"] > * {
       width: 100% !important;
       flex-shrink: unset !important;
     }
   }
   
   /* ============================================================
      SITE HEALTH SECTION
      ============================================================ */
   #section-site-health .section-scroll { background: var(--bg-base) !important; }
   
   /* Uptime history bar container */
   #section-site-health div[style*="height:20px"] {
     border-radius: var(--radius-sm);
     overflow: hidden;
   }
   
   /* Site cards */
   #section-site-health .glass-card h4 {
     font-size: var(--fs-md) !important;
     font-weight: 700 !important;
     color: var(--text-primary) !important;
   }
   #section-site-health .glass-card p[style*="font-mono"] {
     font-family: var(--font-mono) !important;
     font-size: var(--fs-xs) !important;
   }
   
   /* SSL warning pulse */
   #section-site-health p[style*="color:var(--rose)"] {
     animation: sslWarn 1.5s ease-in-out infinite alternate;
   }
   @keyframes sslWarn {
     from { opacity: 1; }
     to   { opacity: 0.55; }
   }
   
   /* Check All Now button loading state */
   #section-site-health .btn[disabled] {
     opacity: 0.55;
     cursor: wait;
   }
   
   /* Add site modal */
   #section-site-health .glass-card.p-6 {
     animation: modal-enter 0.3s var(--ease-spring);
   }
   
   /* Metric labels */
   #section-site-health p[style*="0.6rem"] {
     font-size: 0.62rem !important;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .09em;
   }
   
   /* fg-input class used in the add-monitor modal */
   .fg-input {
     width: 100%;
     padding: .65rem .95rem;
     background: var(--bg-input);
     border: 1px solid var(--border-subtle);
     border-radius: var(--radius-md);
     color: var(--text-primary);
     font-family: var(--font-ui);
     font-size: var(--fs-base);
     outline: none;
     transition: border-color var(--t-fast), box-shadow var(--t-fast);
     margin-top: .35rem;
   }
   .fg-input:focus {
     border-color: var(--cyan);
     box-shadow: 0 0 0 3px rgba(0,212,255,.12);
   }
   
   /* ============================================================
      MOBILE SIDEBAR — full menu scrollable
      ============================================================ */
   @media (max-width: 1023px) {
     .admin-sidebar {
       overflow-y: auto !important;
       -webkit-overflow-scrolling: touch;
       /* Ensure all new nav items are reachable */
       padding-bottom: 2rem;
     }
     /* Push footer down on smaller phones */
     .sb-footer {
       position: static !important;
       margin-top: auto;
       padding-top: 1rem;
       border-top: 1px solid var(--border-faint);
     }
   }
   
   /* ============================================================
      NOTIFICATION PANEL — new types
      ============================================================ */
   /* CMS update pulse indicator */
   .notif-cms::before {
     content: '';
     display: inline-block;
     width: 6px; height: 6px;
     border-radius: 50%;
     background: var(--cyan);
     margin-right: 6px;
     animation: pulse2s ease-in-out infinite;
     vertical-align: middle;
   }
   /* Login auth highlight */
   .notif-login {
     border-left: 2px solid var(--amber) !important;
   }