/* ═══════════════════════════════════════════════════════════
   NutroPro Design System v3 — Liquid Glass Premium
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --p:        #0774FF;
  --p-dark:   #0558cc;
  --p-light:  rgba(7,116,255,.1);
  --p-glow:   rgba(7,116,255,.25);
  --accent:   #0774FF;
  --success:  #10b981;
  --warning:  #f59e0b;
  --danger:   #ef4444;
  --info:     #06b6d4;

  --dark:     #0f172a;
  --g900:     #1e293b;
  --g700:     #334155;
  --g500:     #64748b;
  --g300:     #cbd5e1;
  --g100:     #f1f5f9;
  --white:    #ffffff;

  --gl-bg:    rgba(255,255,255,.7);
  --gl-bd:    rgba(255,255,255,.5);
  --gl-sh:    0 8px 32px rgba(7,116,255,.08), 0 2px 8px rgba(0,0,0,.05);
  --gl-blur:  blur(24px) saturate(200%);

  --sh-xs:    0 1px 3px rgba(0,0,0,.05);
  --sh-sm:    0 4px 12px rgba(0,0,0,.07);
  --sh-md:    0 8px 24px rgba(0,0,0,.09);
  --sh-lg:    0 20px 48px rgba(0,0,0,.12);
  --sh-glow:  0 0 30px var(--p-glow);

  --r1: 6px;  --r2: 10px; --r3: 14px;
  --r4: 18px; --r5: 24px; --r6: 32px;
  --rf: 9999px;

  --sidebar-w: 268px;
  --topbar-h:  64px;

  --ease:     cubic-bezier(.4,0,.2,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);
  --t1: all .15s var(--ease);
  --t2: all .25s var(--ease);
  --t3: all .4s  var(--ease);
  --ts: all .5s  var(--spring);

  --font:     'Inter', system-ui, sans-serif;
  --font-d:   'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font); color: var(--g700); line-height: 1.6; overflow-x: hidden; min-height: 100vh; background: #f0f2ff; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

/* ── Bootstrap critical overrides ─────────────────────────── */
/* Prevent Bootstrap from breaking our layout elements */
#np-sidebar, #np-main, #np-topbar, #np-content, #np-footer, #np-overlay {
  all: revert;
  box-sizing: border-box;
}
/* Re-apply after revert */
#np-sidebar * { box-sizing: border-box; }
#np-main    * { box-sizing: border-box; }

/* Bootstrap nav override — prevent it from touching our nav items */
#np-sidebar .np-nav-item,
#np-sidebar .np-nav-item:hover,
#np-sidebar .np-nav-item:focus {
  color: var(--g500) !important;
  background: none;
  border: none;
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-radius: var(--r2);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--t2);
  text-decoration: none;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
#np-sidebar .np-nav-item.active { color: var(--p) !important; font-weight: 600; }
#np-sidebar .np-sidebar-nav { padding: .25rem .75rem; }

/* Animated mesh background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 10% -5%,  rgba(7,116,255,.12) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 105%, rgba(139,92,246,.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,  rgba(6,182,212,.04)  0%, transparent 60%),
    linear-gradient(160deg, #eef2ff 0%, #f5f3ff 40%, #ecfdf5 100%);
  animation: bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(15deg); }
}

/* Liquid Glass base */
.glass {
  background: var(--gl-bg);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd);
  box-shadow: var(--gl-sh);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════ */
#np-sidebar {
  position: fixed !important; top: 12px !important; left: 12px !important;
  width: var(--sidebar-w) !important;
  height: calc(100vh - 24px) !important;
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bd) !important;
  border-radius: var(--r6) !important;
  box-shadow: var(--gl-sh), inset 0 1px 0 rgba(255,255,255,.8) !important;
  z-index: 1000 !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
  transition: var(--t3) !important;
  padding: 0 !important; margin: 0 !important;
}
/* Top shimmer line */
#np-sidebar::before {
  content: '';
  position: absolute; top: 0; left: 20%; right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}

/* Brand */
.np-sidebar-brand { padding: 1.25rem 1rem .75rem; flex-shrink: 0; }
.np-brand-link {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--r3);
  transition: var(--t2);
}
.np-brand-link:hover { background: var(--p-light); }
.np-brand-icon {
  width: 40px; height: 40px; border-radius: 0; overflow: visible; flex-shrink: 0;
  background: none; box-shadow: none;
}
.np-brand-icon img { width: 100%; height: 100%; object-fit: contain; }
.np-brand-name {
  display: block; font-family: var(--font-d); font-size: .95rem; font-weight: 800;
  background: linear-gradient(135deg, var(--p), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.np-brand-sub { display: block; font-size: .68rem; font-weight: 600; color: var(--g500); text-transform: uppercase; letter-spacing: .06em; }

/* Nav */
.np-sidebar-nav { flex: 1; padding: .25rem .75rem; overflow-y: auto; overflow-x: hidden; }
.np-sidebar-nav::-webkit-scrollbar { width: 3px; }
.np-sidebar-nav::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 99px; }

.np-nav-section {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--g300);
  padding: .875rem .75rem .3rem; margin-top: .25rem;
}

.np-nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem;
  border-radius: var(--r2);
  font-size: .875rem; font-weight: 500;
  color: var(--g500);
  transition: var(--t2);
  position: relative; overflow: hidden;
  margin-bottom: 2px;
}
.np-nav-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--p-light), rgba(139,92,246,.08));
  opacity: 0; transition: var(--t2); border-radius: var(--r2);
}
.np-nav-item:hover { color: var(--p); transform: translateX(3px); }
.np-nav-item:hover::after { opacity: 1; }
.np-nav-item.active {
  color: var(--p); font-weight: 600;
  background: linear-gradient(135deg, var(--p-light), rgba(139,92,246,.1));
  box-shadow: var(--sh-xs), inset 0 0 0 1px rgba(7,116,255,.15);
}
.np-nav-item.active::after { opacity: 0; }

.np-nav-icon {
  width: 30px; height: 30px; border-radius: var(--r1);
  background: linear-gradient(135deg, var(--p), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: white; flex-shrink: 0;
  box-shadow: 0 3px 8px var(--p-glow);
  transition: var(--ts);
}
.np-nav-item:hover .np-nav-icon { transform: scale(1.1) rotate(-3deg); }
.np-nav-item.active .np-nav-icon { box-shadow: 0 4px 12px var(--p-glow); }

/* User card */
.np-sidebar-user {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1rem;
  margin: .5rem .75rem .75rem;
  border-radius: var(--r3);
  background: linear-gradient(135deg, rgba(7,116,255,.08), rgba(139,92,246,.06));
  border: 1px solid rgba(7,116,255,.12);
  flex-shrink: 0;
}
.np-user-avatar {
  width: 36px; height: 36px; border-radius: var(--r2);
  background: linear-gradient(135deg, var(--p), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 800; color: white; flex-shrink: 0;
  box-shadow: 0 4px 10px var(--p-glow);
}
.np-user-name { font-size: .8rem; font-weight: 700; color: var(--g900); line-height: 1.2; }
.np-user-role { font-size: .68rem; color: var(--g500); text-transform: capitalize; }
.np-user-info { flex: 1; min-width: 0; }
.np-logout-btn {
  width: 30px; height: 30px; border-radius: var(--r1);
  display: flex; align-items: center; justify-content: center;
  color: var(--g500); font-size: .8rem;
  transition: var(--t2); flex-shrink: 0;
}
.np-logout-btn:hover { background: rgba(239,68,68,.1); color: var(--danger); }

/* ═══════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════ */
#np-main {
  margin-left: calc(var(--sidebar-w) + 24px);
  min-height: 100vh;
  display: flex; flex-direction: column;
  transition: var(--t3);
}

#np-content { flex: 1; padding: 1.5rem 1.5rem 1rem; }

#np-footer {
  padding: 1rem 1.5rem;
  font-size: .78rem; color: var(--g500);
  border-top: 1px solid rgba(148,163,184,.12);
  text-align: center;
}
#np-footer a { color: var(--p); font-weight: 600; }

/* Overlay */
#np-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(6px);
  z-index: 999;
  opacity: 0; visibility: hidden;
  transition: var(--t3);
}
#np-overlay.show { opacity: 1; visibility: visible; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════ */
#np-topbar {
  position: sticky; top: 12px; z-index: 900;
  margin: 12px 12px 0;
  padding: .75rem 1.25rem;
  background: var(--gl-bg);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd);
  border-radius: var(--r5);
  box-shadow: var(--gl-sh), inset 0 1px 0 rgba(255,255,255,.8);
  display: flex; align-items: center; gap: 1rem;
}
#np-topbar::before {
  content: '';
  position: absolute; top: 0; left: 25%; right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}

/* Hamburger */
.np-hamburger {
  display: none; flex-direction: column; justify-content: space-around;
  width: 22px; height: 18px; padding: 0; flex-shrink: 0;
}
.np-hamburger span {
  width: 100%; height: 2px;
  background: var(--g500); border-radius: 99px;
  transition: var(--t2); transform-origin: left;
}
.np-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(1px,-1px); }
.np-hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.np-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(1px,1px); }

/* Welcome */
.np-topbar-welcome {
  flex: 1; font-size: .875rem; color: var(--g500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-topbar-welcome strong { color: var(--g900); font-weight: 700; }
.np-wave { display: inline-block; animation: wave 2.5s ease-in-out infinite; }
@keyframes wave { 0%,100%{transform:rotate(0)} 20%{transform:rotate(20deg)} 40%{transform:rotate(-8deg)} 60%{transform:rotate(14deg)} 80%{transform:rotate(-4deg)} }

/* Topbar actions */
.np-topbar-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Search */
.np-search-box {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(241,245,249,.8);
  border: 1px solid rgba(148,163,184,.2);
  border-radius: var(--rf);
  padding: .4rem .875rem;
  min-width: 180px;
  transition: var(--t2);
}
.np-search-box:focus-within {
  border-color: var(--p);
  background: white;
  box-shadow: 0 0 0 3px var(--p-light);
  min-width: 220px;
}
.np-search-box i { color: var(--g300); font-size: .78rem; flex-shrink: 0; }
.np-search-box input { border: none; background: transparent; outline: none; font-size: .8rem; color: var(--g700); width: 100%; }
.np-search-box input::placeholder { color: var(--g300); }

/* Action buttons */
.np-action-btn {
  width: 36px; height: 36px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  color: var(--g500); font-size: .9rem;
  background: rgba(241,245,249,.8);
  border: 1px solid rgba(148,163,184,.15);
  transition: var(--ts); position: relative;
}
.np-action-btn:hover { background: var(--p-light); color: var(--p); transform: translateY(-2px); box-shadow: var(--sh-sm); }

.np-notif-btn .np-notif-dot {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  border: 2px solid white;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)} 50%{box-shadow:0 0 0 5px rgba(239,68,68,0)} }

/* Flash messages */
.np-flash {
  display: flex; align-items: center; gap: .75rem;
  margin: .75rem 1.5rem 0;
  padding: .875rem 1rem;
  border-radius: var(--r3);
  font-size: .875rem;
  backdrop-filter: blur(8px);
  animation: flashIn .4s var(--spring);
  border: 1px solid transparent;
}
@keyframes flashIn { from{opacity:0;transform:translateY(-10px) scale(.97)} to{opacity:1;transform:none} }
.np-flash-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); color: #065f46; }
.np-flash-danger  { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.2);  color: #991b1b; }
.np-flash-info    { background: rgba(6,182,212,.08);  border-color: rgba(6,182,212,.2);  color: #164e63; }
.np-flash-warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); color: #92400e; }
.np-flash-close { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .5; line-height: 1; }
.np-flash-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.np-page-header { margin-bottom: 1.5rem; }
.np-page-header h2 {
  font-family: var(--font-d); font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(135deg, var(--g900) 30%, var(--p));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.2; margin-bottom: .3rem;
}
.np-page-header p { color: var(--g500); font-size: .875rem; }

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.np-card {
  background: var(--gl-bg);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd);
  border-radius: var(--r4);
  box-shadow: var(--gl-sh);
  overflow: hidden;
  transition: var(--t2);
  position: relative;
}
/* Top highlight */
.np-card::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  pointer-events: none;
}
.np-card:hover {
  box-shadow: var(--sh-md), 0 0 0 1px rgba(7,116,255,.08);
  transform: translateY(-2px);
}

.np-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(148,163,184,.12);
  font-family: var(--font-d); font-weight: 700; font-size: .9rem; color: var(--g900);
  background: rgba(255,255,255,.3);
}
.np-card-body { padding: 1.25rem; }

/* ═══════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════ */
.np-stat-card {
  background: var(--gl-bg);
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd);
  border-radius: var(--r4);
  box-shadow: var(--gl-sh);
  padding: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  transition: var(--ts);
  position: relative; overflow: hidden;
}
/* Ambient glow blob */
.np-stat-card::after {
  content: '';
  position: absolute; top: -40%; right: -15%;
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--p-light); filter: blur(25px);
  pointer-events: none; transition: var(--t3);
}
.np-stat-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--sh-lg), var(--sh-glow); }
.np-stat-card:hover::after { transform: scale(1.5); }

.np-stat-icon {
  width: 52px; height: 52px; border-radius: var(--r3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: white; flex-shrink: 0;
  position: relative; z-index: 1;
  transition: var(--ts);
}
.np-stat-card:hover .np-stat-icon { transform: scale(1.1) rotate(-5deg); }
.np-stat-icon.primary { background: linear-gradient(135deg,var(--p),var(--accent));   box-shadow: 0 8px 20px var(--p-glow); }
.np-stat-icon.success { background: linear-gradient(135deg,#10b981,#059669);           box-shadow: 0 8px 20px rgba(16,185,129,.3); }
.np-stat-icon.warning { background: linear-gradient(135deg,#f59e0b,#d97706);           box-shadow: 0 8px 20px rgba(245,158,11,.3); }
.np-stat-icon.danger  { background: linear-gradient(135deg,#ef4444,#dc2626);           box-shadow: 0 8px 20px rgba(239,68,68,.3); }
.np-stat-icon.info    { background: linear-gradient(135deg,#06b6d4,#0891b2);           box-shadow: 0 8px 20px rgba(6,182,212,.3); }

.np-stat-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--g500); margin-bottom: .2rem; }
.np-stat-value { font-family: var(--font-d); font-size: 1.7rem; font-weight: 900; color: var(--g900); line-height: 1; }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.np-tab {
  padding: .7rem 1.1rem;
  font-size: .875rem; font-weight: 600;
  color: var(--g500); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; white-space: nowrap; transition: var(--t2);
  font-family: var(--font);
}
.np-tab:hover { color: var(--p); }
.np-tab.active { color: var(--p); border-bottom-color: var(--p); }

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.np-table th {
  padding: .75rem 1rem; text-align: left;
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--g500); border-bottom: 1px solid rgba(148,163,184,.12);
  white-space: nowrap; background: rgba(248,250,252,.5);
}
.np-table td {
  padding: .875rem 1rem;
  border-bottom: 1px solid rgba(148,163,184,.07);
  color: var(--g700); vertical-align: middle; transition: var(--t1);
}
.np-table tr:last-child td { border-bottom: none; }
.np-table tr:hover td { background: rgba(7,116,255,.025); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--r2); border: 1px solid transparent;
  font-size: .875rem; font-weight: 600; font-family: var(--font);
  white-space: nowrap; text-decoration: none;
  transition: var(--t2); position: relative; overflow: hidden;
  cursor: pointer;
}
/* Shine sweep on hover */
.np-btn::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.np-btn:hover::before { left: 150%; }
.np-btn:active { transform: scale(.96); }
.np-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.np-btn-primary {
  background: linear-gradient(135deg, var(--p), var(--accent));
  color: white; box-shadow: 0 4px 14px var(--p-glow);
}
.np-btn-primary:hover { box-shadow: 0 6px 22px var(--p-glow); transform: translateY(-1px); color: white; }

.np-btn-success { background: linear-gradient(135deg,#10b981,#059669); color:white; box-shadow:0 4px 14px rgba(16,185,129,.3); }
.np-btn-success:hover { box-shadow:0 6px 20px rgba(16,185,129,.4); transform:translateY(-1px); color:white; }

.np-btn-danger  { background: linear-gradient(135deg,#ef4444,#dc2626); color:white; box-shadow:0 4px 14px rgba(239,68,68,.3); }
.np-btn-danger:hover  { box-shadow:0 6px 20px rgba(239,68,68,.4); transform:translateY(-1px); color:white; }

.np-btn-warning { background: linear-gradient(135deg,#f59e0b,#d97706); color:white; box-shadow:0 4px 14px rgba(245,158,11,.3); }
.np-btn-warning:hover { box-shadow:0 6px 20px rgba(245,158,11,.4); transform:translateY(-1px); color:white; }

.np-btn-info    { background: linear-gradient(135deg,#06b6d4,#0891b2); color:white; box-shadow:0 4px 14px rgba(6,182,212,.3); }
.np-btn-info:hover    { box-shadow:0 6px 20px rgba(6,182,212,.4); transform:translateY(-1px); color:white; }

.np-btn-outline {
  background: transparent; color: var(--p); border-color: var(--p);
}
.np-btn-outline:hover { background: var(--p-light); color: var(--p); }

.np-btn-secondary {
  background: var(--gl-bg); backdrop-filter: blur(8px);
  color: var(--g700); border-color: rgba(148,163,184,.2);
  box-shadow: var(--sh-xs);
}
.np-btn-secondary:hover { background: var(--g100); color: var(--g900); }

.np-btn-white { background: white; color: var(--p); box-shadow: var(--sh-sm); }
.np-btn-sm { padding: .3rem .7rem; font-size: .78rem; border-radius: var(--r1); }
.np-btn-lg { padding: .75rem 1.75rem; font-size: 1rem; border-radius: var(--r3); }
.w-100 { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.np-form-group { margin-bottom: 1rem; }
.np-form-group label { display: block; font-size: .78rem; font-weight: 600; color: var(--g700); margin-bottom: .4rem; }

.np-input, .np-select, .np-textarea {
  width: 100%; padding: .6rem .875rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,.2);
  border-radius: var(--r2);
  font-size: .875rem; color: var(--g700);
  font-family: var(--font);
  transition: var(--t2);
}
.np-input:focus, .np-select:focus, .np-textarea:focus {
  outline: none; border-color: var(--p);
  background: white; box-shadow: 0 0 0 3px var(--p-light);
}
.np-input::placeholder { color: var(--g300); }
.np-textarea { resize: vertical; }

.np-input-wrap { position: relative; display: flex; align-items: center; }
.np-input-wrap > i { position: absolute; left: .875rem; color: var(--g300); font-size: .85rem; pointer-events: none; z-index: 1; }
.np-input-wrap input {
  width: 100%; padding: .6rem .875rem .6rem 2.5rem;
  background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,.2); border-radius: var(--r2);
  font-size: .875rem; color: var(--g700); font-family: var(--font); transition: var(--t2);
}
.np-input-wrap input:focus { outline: none; border-color: var(--p); background: white; box-shadow: 0 0 0 3px var(--p-light); }
.np-input-wrap input::placeholder { color: var(--g300); }
.np-input-toggle { position: absolute; right: .875rem; color: var(--g300); font-size: .85rem; }

/* Bootstrap form override */
.form-control, .form-select {
  background: rgba(255,255,255,.75) !important; backdrop-filter: blur(8px);
  border: 1px solid rgba(148,163,184,.2) !important;
  border-radius: var(--r2) !important;
  font-size: .875rem !important; color: var(--g700) !important;
  font-family: var(--font) !important; transition: var(--t2) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--p) !important; background: white !important;
  box-shadow: 0 0 0 3px var(--p-light) !important;
}

/* ═══════════════════════════════════════════════════════════
   BADGES & STATUS
   ═══════════════════════════════════════════════════════════ */
.np-status {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .65rem; border-radius: var(--rf);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}
.np-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.np-status-active    { background: rgba(16,185,129,.1);  color: #065f46; }
.np-status-active::before { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.6); animation: statusPulse 2s infinite; }
.np-status-suspended { background: rgba(239,68,68,.1);  color: #991b1b; }
.np-status-suspended::before { background: #ef4444; }
.np-status-expired   { background: rgba(245,158,11,.1); color: #92400e; }
.np-status-expired::before { background: #f59e0b; }
.np-status-pending   { background: rgba(6,182,212,.1);  color: #164e63; }
.np-status-pending::before { background: #06b6d4; animation: statusPulse 1.5s infinite; }
.np-status-success   { background: rgba(16,185,129,.1);  color: #065f46; }
.np-status-success::before { background: #10b981; }
@keyframes statusPulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.np-badge-danger  { color: var(--danger);  font-size: .72rem; font-weight: 700; }
.np-badge-warning { color: var(--warning); font-size: .72rem; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */
.np-alert {
  padding: .875rem 1rem; border-radius: var(--r3);
  font-size: .875rem; margin-bottom: 1rem;
  display: flex; align-items: flex-start; gap: .6rem;
  backdrop-filter: blur(8px); border: 1px solid transparent;
  animation: alertIn .35s var(--spring);
}
@keyframes alertIn { from{opacity:0;transform:translateY(-8px) scale(.98)} to{opacity:1;transform:none} }
.np-alert-danger  { background: rgba(239,68,68,.07);   border-color: rgba(239,68,68,.18);   color: #991b1b; }
.np-alert-success { background: rgba(16,185,129,.07);  border-color: rgba(16,185,129,.18);  color: #065f46; }
.np-alert-warning { background: rgba(245,158,11,.07);  border-color: rgba(245,158,11,.18);  color: #92400e; }
.np-alert-info    { background: rgba(6,182,212,.07);   border-color: rgba(6,182,212,.18);   color: #164e63; }

/* Bootstrap alert override */
.alert { border-radius: var(--r3) !important; backdrop-filter: blur(8px); font-size: .875rem; }
.alert-success { background: rgba(16,185,129,.07) !important; border-color: rgba(16,185,129,.18) !important; color: #065f46 !important; }
.alert-danger  { background: rgba(239,68,68,.07)  !important; border-color: rgba(239,68,68,.18)  !important; color: #991b1b !important; }
.alert-warning { background: rgba(245,158,11,.07) !important; border-color: rgba(245,158,11,.18) !important; color: #92400e !important; }
.alert-info    { background: rgba(6,182,212,.07)  !important; border-color: rgba(6,182,212,.18)  !important; color: #164e63 !important; }

/* ═══════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop { background: rgba(15,23,42,.5) !important; backdrop-filter: blur(8px); }
.modal-backdrop.show { opacity: 1 !important; }
.np-modal .modal-content {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bd) !important;
  border-radius: var(--r5) !important;
  box-shadow: var(--sh-lg) !important;
  overflow: hidden;
}
.np-modal .modal-header { border-bottom: 1px solid rgba(148,163,184,.12); padding: 1.25rem 1.5rem; background: rgba(255,255,255,.3); }
.np-modal .modal-body   { padding: 1.5rem; }
.np-modal .modal-footer { border-top: 1px solid rgba(148,163,184,.12); padding: 1rem 1.5rem; }
.modal-content { border-radius: var(--r5) !important; border: 1px solid var(--gl-bd) !important; background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur) !important; }

/* ═══════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════ */
.dropdown-menu {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important;
  border: 1px solid var(--gl-bd) !important;
  border-radius: var(--r4) !important;
  box-shadow: var(--sh-lg) !important;
  padding: .5rem !important;
  animation: dropIn .25s var(--spring);
}
@keyframes dropIn { from{opacity:0;transform:translateY(-8px) scale(.96)} to{opacity:1;transform:none} }
.dropdown-item {
  border-radius: var(--r2) !important; padding: .55rem .875rem !important;
  font-size: .875rem !important; color: var(--g700) !important;
  transition: var(--t2) !important; font-family: var(--font);
}
.dropdown-item:hover { background: var(--p-light) !important; color: var(--p) !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.08) !important; color: var(--danger) !important; }
.dropdown-divider { border-color: rgba(148,163,184,.12) !important; }

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
#toastContainer { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; }
.np-toast {
  background: var(--gl-bg); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd); border-radius: var(--r3); box-shadow: var(--sh-md);
  padding: .875rem 1rem; min-width: 300px; max-width: 380px;
  display: flex; align-items: center; gap: .75rem;
  animation: toastIn .45s var(--spring);
}
@keyframes toastIn { from{opacity:0;transform:translateX(110%) scale(.85)} to{opacity:1;transform:none} }
.np-toast.success { border-left: 3px solid var(--success); }
.np-toast.error   { border-left: 3px solid var(--danger);  }
.np-toast.warning { border-left: 3px solid var(--warning); }
.np-toast.info    { border-left: 3px solid var(--info);    }

/* ═══════════════════════════════════════════════════════════
   SERVICE ICONS
   ═══════════════════════════════════════════════════════════ */
.np-service-name { display: flex; align-items: center; gap: .75rem; }
.np-service-icon {
  width: 38px; height: 38px; border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: white; flex-shrink: 0;
}
.np-service-vps        { background: linear-gradient(135deg,var(--p),var(--accent));  box-shadow: 0 4px 12px var(--p-glow); }
.np-service-domain     { background: linear-gradient(135deg,#06b6d4,#0891b2);          box-shadow: 0 4px 12px rgba(6,182,212,.3); }
.np-service-webhosting { background: linear-gradient(135deg,#10b981,#059669);          box-shadow: 0 4px 12px rgba(16,185,129,.3); }
.np-service-frp        { background: linear-gradient(135deg,#f59e0b,#d97706);          box-shadow: 0 4px 12px rgba(245,158,11,.3); }

/* ═══════════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════════ */
.np-checkout-container { max-width:1100px; margin:2rem auto; padding:0 1rem; display:grid; grid-template-columns:1fr 340px; gap:1.5rem; align-items:start; }
.np-checkout-main, .np-checkout-sidebar {
  background: var(--gl-bg); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-bd); border-radius: var(--r5); box-shadow: var(--gl-sh); overflow: hidden;
}
.np-checkout-sidebar { padding: 1.5rem; position: sticky; top: 90px; }
.np-checkout-step { padding: 1.5rem; border-bottom: 1px solid rgba(148,163,184,.1); }
.np-checkout-step:last-child { border-bottom: none; }
.np-checkout-step h3 { font-family: var(--font-d); font-size: .95rem; font-weight: 700; color: var(--g900); margin-bottom: 1rem; }

.np-term-choices { display: flex; gap: .75rem; flex-wrap: wrap; }
.np-term-card {
  flex: 1; min-width: 100px; border: 2px solid rgba(148,163,184,.2);
  border-radius: var(--r3); padding: .875rem; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.6); transition: var(--ts);
}
.np-term-card:hover, .np-term-card.selected { border-color: var(--p); background: var(--p-light); transform: translateY(-3px); box-shadow: 0 8px 20px var(--p-glow); }
.np-term-price { font-family: var(--font-d); font-size: 1.1rem; font-weight: 800; }
.np-term-period { font-size: .7rem; color: var(--g500); }

.np-os-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: .75rem; }
.np-os-card { border: 2px solid rgba(148,163,184,.2); border-radius: var(--r3); padding: .875rem .5rem; text-align: center; cursor: pointer; background: rgba(255,255,255,.6); transition: var(--ts); }
.np-os-card:hover, .np-os-card.selected { border-color: var(--p); background: var(--p-light); transform: translateY(-3px); box-shadow: 0 6px 16px var(--p-glow); }
.np-os-card img { width: 32px; height: 32px; margin: 0 auto .4rem; }
.np-os-card span { font-size: .78rem; font-weight: 600; display: block; }

.np-region-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
.np-region-card { border: 2px solid rgba(148,163,184,.2); border-radius: var(--r3); padding: .75rem .5rem; text-align: center; cursor: pointer; background: rgba(255,255,255,.6); transition: var(--ts); }
.np-region-card:hover, .np-region-card.selected { border-color: var(--p); background: var(--p-light); transform: translateY(-2px); }
.np-region-dot { width: 8px; height: 8px; background: var(--g300); border-radius: 50%; margin: 0 auto .4rem; transition: var(--t2); }
.np-region-card.selected .np-region-dot { background: var(--p); box-shadow: 0 0 8px var(--p-glow); }
.np-region-name { font-size: .7rem; font-weight: 600; }
.np-region-ping { font-size: .63rem; color: var(--success); }

/* ═══════════════════════════════════════════════════════════
   AUTH
   ═══════════════════════════════════════════════════════════ */
.np-auth-body {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ecfdf5 100%);
}
.np-auth-body::before { content:''; position:absolute; top:-30%; left:-20%; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(7,116,255,.12),transparent 70%); animation:float 8s ease-in-out infinite; }
.np-auth-body::after  { content:''; position:absolute; bottom:-20%; right:-10%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%); animation:float 10s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.np-auth-card { background:var(--gl-bg); backdrop-filter:var(--gl-blur); -webkit-backdrop-filter:var(--gl-blur); border:1px solid var(--gl-bd); border-radius:var(--r6); box-shadow:var(--sh-lg); padding:2.5rem; width:100%; max-width:420px; position:relative; z-index:1; animation:cardIn .5s var(--spring); }
@keyframes cardIn { from{opacity:0;transform:translateY(30px) scale(.95)} to{opacity:1;transform:none} }
.np-auth-container { width:100%; max-width:420px; }
.np-auth-logo { text-align:center; margin-bottom:1.5rem; }
.np-auth-logo img { width:56px; height:56px; border-radius:var(--r3); margin:0 auto .75rem; box-shadow:0 8px 24px var(--p-glow); }
.np-auth-logo h1 { font-family:var(--font-d); font-size:1.25rem; font-weight:800; color:var(--g900); }
.np-auth-logo p  { font-size:.875rem; color:var(--g500); }
.np-captcha-box { background:var(--g100); border:1px solid rgba(148,163,184,.2); border-radius:var(--r2); padding:.6rem 1rem; font-weight:800; font-size:1.1rem; color:var(--g900); letter-spacing:.15em; min-width:90px; text-align:center; user-select:none; font-family:monospace; }

/* ═══════════════════════════════════════════════════════════
   OFFERS + MISC
   ═══════════════════════════════════════════════════════════ */
.np-offers-section { margin-top:1.5rem; }
.np-offers-title { font-family:var(--font-d); font-size:1.1rem; font-weight:800; color:var(--g900); margin-bottom:1rem; }
.np-offers-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.np-offer-card { background:var(--gl-bg); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-bd); border-radius:var(--r4); padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; transition:var(--ts); }
.np-offer-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); }
.np-offer-card h4 { font-family:var(--font-d); font-size:1rem; font-weight:700; color:var(--g900); }
.np-offer-card p  { font-size:.875rem; color:var(--g500); flex:1; }
.np-offer-featured { background:linear-gradient(160deg,#1e1b4b 0%,var(--p) 100%); border:none; }
.np-offer-featured h4, .np-offer-featured p { color:rgba(255,255,255,.9); }

.np-pagination { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:1.5rem; }
.np-page-btn { width:34px; height:34px; border:1px solid rgba(148,163,184,.2); border-radius:var(--r1); background:var(--gl-bg); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:.875rem; cursor:pointer; transition:var(--t2); text-decoration:none; color:var(--g700); }
.np-page-btn:hover { border-color:var(--p); color:var(--p); transform:translateY(-1px); }
.np-page-btn.active { background:linear-gradient(135deg,var(--p),var(--accent)); border-color:transparent; color:white; box-shadow:0 4px 12px var(--p-glow); }

.np-rating-popup { position:fixed; bottom:1.5rem; right:1.5rem; width:340px; background:var(--gl-bg); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-bd); border-radius:var(--r5); box-shadow:var(--sh-lg); z-index:1050; padding:1.25rem; animation:toastIn .5s var(--spring); }
.np-chip { width:30px; height:30px; border:1.5px solid rgba(148,163,184,.2); border-radius:var(--r1); background:rgba(255,255,255,.7); font-size:.8rem; font-weight:600; cursor:pointer; transition:var(--ts); display:flex; align-items:center; justify-content:center; }
.np-chip:hover { border-color:var(--p); background:var(--p-light); color:var(--p); transform:scale(1.12); }
.np-chip.active { background:linear-gradient(135deg,var(--p),var(--accent)); border-color:transparent; color:white; box-shadow:0 4px 10px var(--p-glow); }
.np-rating-chips { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.np-rating-labels { display:flex; justify-content:space-between; font-size:.72rem; color:var(--g500); }
.np-rating-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; }
.np-rating-header h6 { font-size:.9rem; font-weight:600; color:var(--g900); }
.np-rating-close { background:none; border:none; cursor:pointer; color:var(--g500); font-size:1rem; }

code { background:rgba(7,116,255,.08); color:var(--p); padding:.15rem .45rem; border-radius:var(--r1); font-size:.82rem; font-family:'JetBrains Mono','Fira Code',monospace; }
.np-info-grid { display:flex; flex-direction:column; gap:.75rem; }
.np-info-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding:.5rem .75rem; border-radius:var(--r2); transition:var(--t1); }
.np-info-row:hover { background:var(--p-light); }
.np-info-label { font-size:.78rem; font-weight:600; color:var(--g500); min-width:130px; }
.np-snapshot-item { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; background:rgba(255,255,255,.6); backdrop-filter:blur(8px); border:1px solid rgba(148,163,184,.15); border-radius:var(--r3); margin-bottom:.5rem; transition:var(--t2); }
.np-snapshot-item:hover { border-color:var(--p); background:var(--p-light); transform:translateX(3px); }
.np-server-switcher { display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:1rem; }
.np-server-card { border:1.5px solid rgba(148,163,184,.2); border-radius:var(--r3); background:rgba(255,255,255,.7); backdrop-filter:blur(8px); padding:.875rem 1.25rem; min-width:160px; cursor:pointer; transition:var(--ts); text-decoration:none; }
.np-server-card:hover { border-color:var(--p); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.np-server-card.active { border-color:var(--p); background:var(--p-light); }
.np-server-name { font-weight:700; color:var(--p); font-size:.9rem; margin-bottom:.25rem; }
.np-server-meta { font-size:.72rem; color:var(--g500); }
.np-power-actions { display:flex; gap:.75rem; justify-content:center; margin-bottom:1rem; }
.np-suspended-msg { position:absolute; inset:0; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-radius:var(--r4); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:10; text-align:center; padding:2rem; }
.np-suspended-msg i { font-size:2.5rem; color:var(--danger); margin-bottom:.75rem; }
.np-blur-overlay { position:relative; min-height:200px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.7); backdrop-filter:blur(12px); border-radius:var(--r4); border:1px solid rgba(148,163,184,.15); }
.np-blur-message { text-align:center; padding:2rem; }
.np-blur-message i { font-size:2.5rem; color:var(--p); margin-bottom:.75rem; display:block; }
.np-pkg-card { background:rgba(255,255,255,.7); border:1px solid rgba(148,163,184,.15); border-radius:var(--r2); padding:.875rem; margin-bottom:.5rem; transition:var(--t2); }
.np-pkg-card:hover { border-color:var(--p); }
.np-pkg-name { font-weight:700; color:var(--p); font-size:.9rem; }
.np-pkg-features { font-size:.78rem; color:var(--g500); display:flex; flex-wrap:wrap; gap:.4rem; }
.np-inline-form { display:flex; gap:.75rem; align-items:center; }
.np-inline-form .np-input { flex:1; }
.np-reseller-card { background:var(--gl-bg); backdrop-filter:var(--gl-blur); border:1px solid var(--gl-bd); border-radius:var(--r4); padding:1.25rem; transition:var(--ts); }
.np-reseller-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.np-charts-row { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.np-chart-card { background:rgba(255,255,255,.7); backdrop-filter:blur(8px); border:1px solid rgba(148,163,184,.15); border-radius:var(--r4); padding:1.25rem; min-width:160px; text-align:center; flex-shrink:0; transition:var(--t2); }
.np-chart-card:hover { transform:translateY(-2px); box-shadow:var(--sh-sm); }
.np-chart-title { font-size:.78rem; font-weight:600; color:var(--g500); margin-bottom:.5rem; }
.np-chart-value { font-family:var(--font-d); font-size:1.25rem; font-weight:800; color:var(--p); }

/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.text-primary{color:var(--p)!important} .text-success{color:var(--success)!important} .text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important} .text-muted{color:var(--g500)!important} .text-dark{color:var(--g900)!important}
.text-sm{font-size:.875rem} .text-xs{font-size:.75rem}
.fw-500{font-weight:500} .fw-600{font-weight:600} .fw-700{font-weight:700} .fw-800{font-weight:800}
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:1rem} .mt-4{margin-top:1.5rem}
.mb-1{margin-bottom:.25rem} .mb-2{margin-bottom:.5rem} .mb-3{margin-bottom:1rem} .mb-4{margin-bottom:1.5rem}
.me-1{margin-right:.25rem} .me-2{margin-right:.5rem} .ms-1{margin-left:.25rem} .ms-auto{margin-left:auto}
.gap-1{gap:.25rem} .gap-2{gap:.5rem} .gap-3{gap:1rem} .gap-4{gap:1.5rem}
.d-flex{display:flex} .d-none{display:none} .d-block{display:block} .d-inline-flex{display:inline-flex}
.align-items-center{align-items:center} .justify-content-between{justify-content:space-between}
.justify-content-center{justify-content:center} .flex-wrap{flex-wrap:wrap} .flex-column{flex-direction:column}
.text-center{text-align:center} .text-end{text-align:right}
.py-3{padding-top:1rem;padding-bottom:1rem} .py-5{padding-top:3rem;padding-bottom:3rem}
.p-0{padding:0} .position-relative{position:relative} .overflow-hidden{overflow:hidden}
.w-100{width:100%} .cursor-pointer{cursor:pointer}
.row{display:flex;flex-wrap:wrap;margin:0 -.75rem}
.col-md-3{flex:0 0 25%;max-width:25%;padding:0 .75rem}
.col-md-4{flex:0 0 33.333%;max-width:33.333%;padding:0 .75rem}
.col-md-6{flex:0 0 50%;max-width:50%;padding:0 .75rem}
.col-md-8{flex:0 0 66.666%;max-width:66.666%;padding:0 .75rem}
.col-lg-5{flex:0 0 41.666%;max-width:41.666%;padding:0 .75rem}
.col-lg-7{flex:0 0 58.333%;max-width:58.333%;padding:0 .75rem}
.g-3{gap:1rem} .g-4{gap:1.5rem}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (min-width:1200px) { .d-xl-none{display:none!important} }
@media (max-width:1199px) {
  #np-sidebar { transform:translateX(calc(-100% - 24px)); }
  #np-sidebar.open { transform:translateX(0); }
  #np-main { margin-left:0; }
  .np-hamburger { display:flex; }
  .np-topbar-welcome { display:none; }
  .np-offers-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  #np-content { padding:1rem; }
  #np-topbar { margin:8px 8px 0; }
  .np-checkout-container { grid-template-columns:1fr; }
  .np-region-grid { grid-template-columns:repeat(2,1fr); }
  .np-search-box { min-width:120px; }
  .col-md-3,.col-md-4,.col-md-6,.col-md-8,.col-lg-5,.col-lg-7 { flex:0 0 100%;max-width:100%; }
}
@media (min-width:992px) { .d-none.d-lg-block,.d-lg-block{display:block!important} }

/* ═══════════════════════════════════════════════════════════
   CRITICAL BOOTSTRAP OVERRIDES — must be last
   ═══════════════════════════════════════════════════════════ */

/* Fix sidebar */
#np-sidebar {
  position: fixed !important;
  top: 12px !important; left: 12px !important;
  width: var(--sidebar-w) !important;
  height: calc(100vh - 24px) !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 32px !important;
  box-shadow: 0 8px 32px rgba(7,116,255,.08), 0 2px 8px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.8) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}

/* Fix main */
#np-main {
  margin-left: calc(var(--sidebar-w) + 24px) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Fix topbar */
#np-topbar {
  position: sticky !important;
  top: 12px !important;
  z-index: 900 !important;
  margin: 12px 12px 0 !important;
  padding: .75rem 1.25rem !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(7,116,255,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Fix content & footer */
#np-content { flex: 1 !important; padding: 1.5rem !important; }
#np-footer {
  padding: 1rem 1.5rem !important;
  font-size: .78rem !important;
  color: #64748b !important;
  border-top: 1px solid rgba(148,163,184,.12) !important;
  text-align: center !important;
  background: transparent !important;
}
#np-footer a { color: #0774FF !important; font-weight: 600 !important; }

/* Fix overlay */
#np-overlay {
  position: fixed !important; inset: 0 !important;
  background: rgba(15,23,42,.45) !important;
  backdrop-filter: blur(6px) !important;
  z-index: 999 !important;
  opacity: 0 !important; visibility: hidden !important;
  transition: all .4s ease !important;
  display: block !important;
}
#np-overlay.show { opacity: 1 !important; visibility: visible !important; }

/* Fix sidebar nav items — Bootstrap overrides <a> */
#np-sidebar .np-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  padding: .55rem .75rem !important;
  border-radius: 10px !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-decoration: none !important;
  transition: all .25s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 2px !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}
#np-sidebar .np-nav-item:hover {
  color: #0774FF !important;
  background: rgba(7,116,255,.1) !important;
  transform: translateX(3px) !important;
}
#np-sidebar .np-nav-item.active {
  color: #0774FF !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, rgba(7,116,255,.1), rgba(139,92,246,.08)) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), inset 0 0 0 1px rgba(7,116,255,.15) !important;
}
#np-sidebar .np-nav-section {
  font-size: .62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: #cbd5e1 !important;
  padding: .875rem .75rem .3rem !important;
  display: block !important;
}
#np-sidebar .np-nav-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .78rem !important; color: white !important;
  flex-shrink: 0 !important;
  transition: all .5s cubic-bezier(.34,1.56,.64,1) !important;
}
#np-sidebar .np-nav-item:hover .np-nav-icon { transform: scale(1.1) rotate(-3deg) !important; }

/* Fix sidebar brand */
.np-sidebar-brand { padding: 1.25rem 1rem .75rem !important; flex-shrink: 0 !important; }
.np-brand-link {
  display: flex !important; align-items: center !important; gap: .75rem !important;
  padding: .6rem .75rem !important; border-radius: 14px !important;
  transition: all .25s ease !important; text-decoration: none !important;
}
.np-brand-link:hover { background: rgba(7,116,255,.1) !important; }
.np-brand-icon { width: 40px !important; height: 40px !important; border-radius: 0 !important; overflow: visible !important; flex-shrink: 0 !important; box-shadow: none !important; background: none !important; }
.np-brand-icon img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.np-brand-name {
  display: block !important; font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .95rem !important; font-weight: 800 !important;
  background: linear-gradient(135deg, #0774FF, #3d8eff) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  line-height: 1.2 !important;
}
.np-brand-sub { display: block !important; font-size: .68rem !important; font-weight: 600 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: .06em !important; -webkit-text-fill-color: #64748b !important; }

/* Fix sidebar user card */
.np-sidebar-user {
  display: flex !important; align-items: center !important; gap: .75rem !important;
  padding: .875rem 1rem !important;
  margin: .5rem .75rem .75rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(7,116,255,.08), rgba(139,92,246,.06)) !important;
  border: 1px solid rgba(7,116,255,.12) !important;
  flex-shrink: 0 !important;
}
.np-user-avatar {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  background: linear-gradient(135deg, #0774FF, #3d8eff) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .9rem !important; font-weight: 800 !important; color: white !important;
  flex-shrink: 0 !important; box-shadow: 0 4px 10px rgba(7,116,255,.3) !important;
}
.np-user-name { font-size: .8rem !important; font-weight: 700 !important; color: #1e293b !important; line-height: 1.2 !important; }
.np-user-role { font-size: .68rem !important; color: #64748b !important; text-transform: capitalize !important; }
.np-user-info { flex: 1 !important; min-width: 0 !important; }
.np-logout-btn {
  width: 30px !important; height: 30px !important; border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #64748b !important; font-size: .8rem !important;
  transition: all .25s ease !important; flex-shrink: 0 !important;
  text-decoration: none !important;
}
.np-logout-btn:hover { background: rgba(239,68,68,.1) !important; color: #ef4444 !important; }

/* Fix topbar elements */
.np-topbar-welcome { flex: 1 !important; font-size: .875rem !important; color: #64748b !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.np-topbar-welcome strong { color: #1e293b !important; font-weight: 700 !important; }
.np-topbar-actions { display: flex !important; align-items: center !important; gap: .5rem !important; flex-shrink: 0 !important; }
.np-hamburger { display: none !important; flex-direction: column !important; justify-content: space-around !important; width: 22px !important; height: 18px !important; padding: 0 !important; flex-shrink: 0 !important; background: none !important; border: none !important; cursor: pointer !important; }
.np-hamburger span { width: 100% !important; height: 2px !important; background: #64748b !important; border-radius: 99px !important; transition: all .25s ease !important; transform-origin: left !important; display: block !important; }
.np-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(1px,-1px) !important; }
.np-hamburger.open span:nth-child(2) { opacity: 0 !important; transform: translateX(-8px) !important; }
.np-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(1px,1px) !important; }

/* Fix search */
.np-search-box {
  display: flex !important; align-items: center !important; gap: .5rem !important;
  background: rgba(241,245,249,.8) !important;
  border: 1px solid rgba(148,163,184,.2) !important;
  border-radius: 9999px !important;
  padding: .4rem .875rem !important; min-width: 180px !important;
  transition: all .25s ease !important;
}
.np-search-box:focus-within { border-color: #0774FF !important; background: white !important; box-shadow: 0 0 0 3px rgba(7,116,255,.1) !important; }
.np-search-box i { color: #cbd5e1 !important; font-size: .78rem !important; flex-shrink: 0 !important; }
.np-search-box input { border: none !important; background: transparent !important; outline: none !important; font-size: .8rem !important; color: #334155 !important; width: 100% !important; box-shadow: none !important; }

/* Fix action buttons */
.np-action-btn {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #64748b !important; font-size: .9rem !important;
  background: rgba(241,245,249,.8) !important;
  border: 1px solid rgba(148,163,184,.15) !important;
  transition: all .5s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative !important; cursor: pointer !important;
}
.np-action-btn:hover { background: rgba(7,116,255,.1) !important; color: #0774FF !important; transform: translateY(-2px) !important; }
.np-notif-dot {
  position: absolute !important; top: 7px !important; right: 7px !important;
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: #ef4444 !important; border: 2px solid white !important;
  animation: pulseDot 2s infinite !important;
}

/* Responsive */
@media (max-width: 1199px) {
  #np-sidebar { transform: translateX(calc(-100% - 24px)) !important; }
  #np-sidebar.open { transform: translateX(0) !important; }
  #np-main { margin-left: 0 !important; }
  .np-hamburger { display: flex !important; }
  .np-topbar-welcome { display: none !important; }
}
@media (max-width: 768px) {
  #np-content { padding: 1rem !important; }
  #np-topbar { margin: 8px 8px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════
   SECONDARY SIDEBAR (context nav like Hostinger)
   ═══════════════════════════════════════════════════════════ */
.np-layout-with-subnav {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 100px);
}

.np-subnav {
  width: 200px;
  flex-shrink: 0;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 16px;
  padding: .75rem .5rem;
  height: fit-content;
  position: sticky;
  top: 90px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.np-subnav-title {
  font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #94a3b8; padding: .4rem .6rem .5rem;
  display: block;
}

.np-subnav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  font-size: .82rem; font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: all .18s ease;
  cursor: pointer;
  border: none; background: none; width: 100%;
  margin-bottom: 1px;
}
.np-subnav-item i { width: 16px; text-align: center; font-size: .8rem; flex-shrink: 0; }
.np-subnav-item:hover { background: rgba(7,116,255,.08); color: #0558cc; }
.np-subnav-item.active {
  background: rgba(7,116,255,.1);
  color: #0558cc; font-weight: 600;
  box-shadow: inset 2px 0 0 #0558cc;
}
.np-subnav-divider {
  height: 1px; background: rgba(0,0,0,.06);
  margin: .4rem .5rem;
}

.np-subnav-main { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════════════════
   HOSTINGER-STYLE SERVICE CARDS
   ═══════════════════════════════════════════════════════════ */
.np-service-row {
  display: flex; align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
  transition: background .15s;
  gap: 1rem;
}
.np-service-row:last-child { border-bottom: none; }
.np-service-row:hover { background: rgba(7,116,255,.025); }

.np-service-row-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #f1f0ff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: #0558cc; flex-shrink: 0;
}
.np-service-row-info { flex: 1; min-width: 0; }
.np-service-row-name { font-size: .9rem; font-weight: 700; color: #111827; }
.np-service-row-meta { font-size: .75rem; color: #6b7280; margin-top: .1rem; }
.np-service-row-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Quick action chips */
.np-chip-action {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 99px;
  font-size: .72rem; font-weight: 600;
  color: #0558cc;
  background: #f1f0ff;
  border: 1px solid #e0e0ff;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
}
.np-chip-action:hover { background: #0558cc; color: white; border-color: #0558cc; }
.np-chip-action.danger { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.np-chip-action.danger:hover { background: #dc2626; color: white; border-color: #dc2626; }
.np-chip-action.success { color: #059669; background: #f0fdf4; border-color: #bbf7d0; }
.np-chip-action.success:hover { background: #059669; color: white; border-color: #059669; }

/* Welcome banner */
.np-welcome-banner {
  background: linear-gradient(135deg, #0558cc 0%, #0774FF 60%, #818cf8 100%);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 8px 24px rgba(7,116,255,.25);
  position: relative; overflow: hidden;
}
.np-welcome-banner::before {
  content: '';
  position: absolute; top: -30%; right: -5%;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.np-welcome-banner::after {
  content: '';
  position: absolute; bottom: -40%; right: 10%;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.np-welcome-text { position: relative; z-index: 1; }
.np-welcome-text h2 { font-family: 'Plus Jakarta Sans','Inter',sans-serif; font-size: 1.2rem; font-weight: 800; color: white; margin-bottom: .25rem; }
.np-welcome-text p  { font-size: .82rem; color: rgba(255,255,255,.8); }
.np-welcome-actions { display: flex; gap: .5rem; position: relative; z-index: 1; flex-shrink: 0; }
.np-welcome-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 8px;
  font-size: .8rem; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.np-welcome-btn-white { background: white; color: #0558cc; }
.np-welcome-btn-white:hover { background: #f5f3ff; }
.np-welcome-btn-ghost { background: rgba(255,255,255,.15); color: white; border: 1px solid rgba(255,255,255,.3); }
.np-welcome-btn-ghost:hover { background: rgba(255,255,255,.25); }

/* ── Content max-width fix ── */
#np-content > div { width: 100%; }

/* ── Subnav layout fix ── */
.np-layout-with-subnav {
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  width: 100% !important;
}
.np-subnav {
  width: 190px !important;
  flex-shrink: 0 !important;
}
.np-subnav-main {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ── Nav icon — single color, no rainbow ── */
#np-sidebar .np-nav-icon {
  background: #f1f0ff !important;
  color: #0558cc !important;
}
#np-sidebar .np-nav-item:hover .np-nav-icon {
  background: rgba(7,116,255,.18) !important;
  color: #0558cc !important;
}
#np-sidebar .np-nav-item.active .np-nav-icon {
  background: #0558cc !important;
  color: white !important;
}

/* ── Service rows fill width ── */
.np-service-row { width: 100%; }

/* ── Upsell grid fills width ── */
.np-upsell-section { width: 100%; }
.np-upsell-grid { width: 100%; }