/* ============================================================
   NinzaHost — Royal Purple Premium Theme v4 (2026)
   ============================================================ */
:root{
  --brand:#7c3aed;            /* royal purple */
  --brand-2:#5b21b6;          /* deep purple */
  --brand-3:#a855f7;          /* light purple */
  --brand-grad:linear-gradient(135deg,#a855f7 0%,#7c3aed 45%,#5b21b6 100%);
  --brand-soft:rgba(124,58,237,.10);
  --brand-soft-2:rgba(124,58,237,.18);
  --ring:rgba(124,58,237,.22);
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 8px rgba(76,29,149,.06);
  --shadow:0 10px 30px -12px rgba(76,29,149,.18);
  --shadow-lg:0 24px 60px -20px rgba(76,29,149,.32);
  --shadow-glow:0 16px 40px -16px rgba(124,58,237,.45);
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --sidebar-w:260px;
  --topbar-h:60px;
  --bs-primary:#7c3aed;
  --bs-primary-rgb:124,58,237;
}
[data-bs-theme="dark"]{
  --brand:#a855f7; --brand-2:#7c3aed; --brand-3:#c084fc;
  --bs-body-bg:#0b0716; --bs-body-color:#ece7f5;
  --bs-tertiary-bg:#140a26; --bs-border-color:#231344;
  --brand-soft:rgba(168,85,247,.14);
  --shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --shadow:0 14px 36px -12px rgba(0,0,0,.7);
}
*{ -webkit-font-smoothing:antialiased; }
html,body{ font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; scroll-behavior:smooth; }
body{
  background:var(--bs-body-bg);
  background-image:
    radial-gradient(1200px 600px at 100% -200px, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(124,58,237,.08), transparent 60%);
  min-height:100vh;
}
a{ color:var(--brand); }
a:hover{ color:var(--brand-2); }

/* Page loader */
.page-loader{position:fixed;inset:0;background:var(--bs-body-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .35s,visibility .35s;}
.page-loader.hide{opacity:0;visibility:hidden;}
.spinner{width:48px;height:48px;border-radius:50%;border:4px solid rgba(124,58,237,.18);border-top-color:var(--brand);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes pop{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}
@keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.animate-fade-in{animation:fadeIn .5s ease both;}
.animate-slide-down{animation:slideDown .35s ease both;}
.animate-pop{animation:pop .35s ease both;}
.skeleton{background:linear-gradient(90deg,#ece7f5 25%,#f6f3fb 50%,#ece7f5 75%);background-size:800px 100%;animation:shimmer 1.4s infinite;border-radius:8px;height:18px;}

/* Top navbar (public + app) */
.site-navbar{
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .site-navbar{ background:rgba(20,10,38,.75); }
.navbar-brand{ color:var(--bs-body-color)!important; font-size:1.1rem; }
.navbar-brand .brand-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--brand-grad); box-shadow:0 0 0 4px rgba(124,58,237,.18);
  margin-right:8px; animation:float 3s ease-in-out infinite; vertical-align:middle;
}
.nav-link{transition:color var(--transition), transform var(--transition);}
.nav-link:hover{color:var(--brand)!important;}

/* Hero */
.hero{
  text-align:center; padding:6rem 1rem 4rem;
  background:
    radial-gradient(1000px 400px at 50% -100px, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(600px 300px at 80% 200px, rgba(124,58,237,.12), transparent 60%);
}
.hero h1{font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-1px;}
.hero h1 span{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .lead{font-size:1.15rem;}

/* Buttons */
.btn{ transition:all var(--transition); border-radius:10px; font-weight:600; }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--brand-grad); border:0; color:#fff;
  box-shadow:0 8px 18px -6px rgba(124,58,237,.50); }
.btn-primary:hover,.btn-primary:focus{
  background:var(--brand-grad); filter:brightness(1.06);
  transform:translateY(-1px); box-shadow:var(--shadow-glow); color:#fff;
}
.btn-outline-primary{ color:var(--brand); border-color:var(--brand);}
.btn-outline-primary:hover{ background:var(--brand-grad); color:#fff; border-color:transparent;}
.btn-icon{ width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--brand-soft); color:var(--brand); border:0; }
.btn-icon:hover{ background:var(--brand-soft-2); color:var(--brand-2); }
.btn-menu{ background:var(--brand-soft); color:var(--brand); border:0; width:42px;height:42px; padding:0; border-radius:10px; }
.btn-menu:hover{ background:var(--brand-soft-2); color:var(--brand); }

/* Cards */
.card{
  border:1px solid var(--bs-border-color); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
  background:var(--bs-body-bg);
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.card-glass{
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.5));
  backdrop-filter:blur(14px);
  border:1px solid rgba(124,58,237,.15);
}
[data-bs-theme="dark"] .card-glass{
  background:linear-gradient(180deg,rgba(36,17,68,.7),rgba(20,10,38,.55));
  border-color:rgba(168,85,247,.18);
}

/* Plan cards */
.plan-card{ position:relative; padding:1.75rem; text-align:left; overflow:hidden;}
.plan-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(400px 200px at 80% -40px, rgba(168,85,247,.14), transparent 70%);
  pointer-events:none;
}
.plan-card.popular{ border-color:var(--brand); box-shadow:var(--shadow-glow); }
.plan-card .badge-pop{
  position:absolute; top:-10px; right:16px;
  background:var(--brand-grad); color:#fff; font-size:.7rem; font-weight:700;
  padding:5px 12px; border-radius:999px; letter-spacing:.5px;
}

/* Stat cards */
.stat-card{
  background:var(--bs-body-bg); border:1px solid var(--bs-border-color);
  border-radius:var(--radius); padding:1.25rem 1.5rem; box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
  animation:fadeIn .5s ease both; position:relative; overflow:hidden;
}
.stat-card::after{content:"";position:absolute;inset:auto -30px -30px auto;width:120px;height:120px;border-radius:50%;background:var(--brand-grad);opacity:.08;}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-card .l{ font-size:.78rem; color:#6b7280; text-transform:uppercase; letter-spacing:.5px;}
.stat-card .v{ font-size:1.85rem; font-weight:800; color:var(--brand-2); margin-top:6px;}
[data-bs-theme="dark"] .stat-card .v{ color:var(--brand-3);}
.stat-card .ico{ position:absolute; top:14px; right:14px; width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand);}

/* Forms */
.form-control,.form-select{ border-radius:10px; padding:.7rem 1rem; transition:all var(--transition);}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }
.form-label{ color:var(--bs-body-color); font-weight:500;}

/* Status pills */
.status-dot{ display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
.status-dot.active{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);}
.status-dot.pending{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18);}
.status-dot.suspended{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18);}
.status-dot.expired{background:#6b7280;box-shadow:0 0 0 4px rgba(107,114,128,.18);}

/* Tables */
.table{ --bs-table-bg:transparent; margin-bottom:0;}
.table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.4px;
  color:#6b7280; border-bottom:1px solid var(--bs-border-color); padding:.85rem .9rem;}
.table tbody tr{ transition:background var(--transition); }
.table tbody tr:hover{ background:rgba(124,58,237,.05);}
.table tbody td{ padding:.85rem .9rem; vertical-align:middle;}

/* Alerts */
.alert{ border-radius:var(--radius); border:0; box-shadow:0 8px 24px -12px rgba(0,0,0,.15);}
.alert-success{ background:linear-gradient(135deg,#dcfce7,#bbf7d0); color:#14532d;}
.alert-danger{ background:linear-gradient(135deg,#fee2e2,#fecaca); color:#7f1d1d;}
.alert-info{ background:linear-gradient(135deg,#ede9fe,#ddd6fe); color:#4c1d95;}

/* Pay box */
.pay-box{ background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(124,58,237,.05));
  border:1px dashed var(--brand); border-radius:var(--radius); padding:1.25rem;}
.pay-box code{ background:var(--brand-soft); padding:2px 8px; border-radius:6px; color:var(--brand);}

/* ============================================================
   APP SHELL  (admin + dashboard sidebar layout)
   ============================================================ */
.app-shell{ background:var(--bs-body-bg); min-height:100vh; }
.app-topbar{
  position:sticky; top:0; z-index:1030; height:var(--topbar-h);
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .app-topbar{ background:rgba(20,10,38,.85); }
.app-body{ display:flex; min-height:calc(100vh - var(--topbar-h)); align-items:stretch; }
.app-main{ flex:1 1 auto; min-width:0; padding:0; }

/* Sidebar — desktop fixed; mobile becomes offcanvas */
.app-sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--bs-body-bg);
  border-right:1px solid var(--bs-border-color);
  position:sticky; top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  overflow:hidden; display:flex; flex-direction:column;
}
.app-sidebar .sidebar-inner{
  padding:1rem .85rem 2rem;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
}
.app-sidebar .sidebar-inner::-webkit-scrollbar{width:6px;}
.app-sidebar .sidebar-inner::-webkit-scrollbar-thumb{background:var(--brand-soft-2);border-radius:3px;}

/* User card in dashboard sidebar */
.user-card{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--brand-soft),transparent);
  border:1px solid var(--bs-border-color);
}
.user-card-avatar{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:var(--brand-grad); color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700; font-size:1.1rem;
  box-shadow:var(--shadow-glow);
}

/* Sidebar links */
.sidebar .nav-link{
  color:var(--bs-body-color); border-radius:10px;
  padding:.65rem .9rem; margin-bottom:2px;
  display:flex; align-items:center; gap:.7rem;
  transition:all var(--transition); font-weight:500;
  position:relative;
}
.sidebar .nav-link i{ font-size:1.1rem; opacity:.8; width:20px; text-align:center;}
.sidebar .nav-link:hover{ background:var(--brand-soft); color:var(--brand);}
.sidebar .nav-link.active{
  background:var(--brand-grad); color:#fff !important;
  box-shadow:0 8px 18px -10px rgba(124,58,237,.7);
}
.sidebar .nav-link.active i{ opacity:1; color:#fff;}

/* Mobile offcanvas adjustments */
@media (max-width: 991.98px){
  .app-sidebar{
    position:fixed; top:0; left:0; height:100vh;
    width:min(82vw, 320px) !important;
    box-shadow:24px 0 60px -20px rgba(0,0,0,.35);
    z-index:1045;
  }
  .app-sidebar .offcanvas-header{
    padding:1rem 1.1rem; border-bottom:1px solid var(--bs-border-color);
    background:var(--brand-soft);
    position:sticky; top:0; z-index:2;
  }
  .app-sidebar .offcanvas-header .btn-close{
    background-size:1rem; opacity:.85;
  }
}
/* Backdrop visible to confirm tap-to-close */
.offcanvas-backdrop.show{ opacity:.55; }

/* Footer (public) */
.site-footer{ background:var(--bs-tertiary-bg); border-top:1px solid var(--bs-border-color); padding:3rem 0; margin-top:5rem;}
.site-footer a{ color:var(--bs-body-color); text-decoration:none; transition:color var(--transition);}
.site-footer a:hover{ color:var(--brand);}

/* License key chip */
.license-key{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand-soft); color:var(--brand-2);
  padding:.4rem .7rem; border-radius:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.85rem;
  border:1px dashed var(--brand);
  word-break:break-all;
}
[data-bs-theme="dark"] .license-key{ color:var(--brand-3); }

/* Screenshot thumb */
.screenshot-thumb{
  width:80px; height:60px; object-fit:cover; border-radius:8px;
  border:1px solid var(--bs-border-color); cursor:zoom-in;
  transition:transform var(--transition);
}
.screenshot-thumb:hover{ transform:scale(1.05); }

/* Mobile tweaks */
@media (max-width:768px){
  .hero{ padding:3rem .5rem 2rem; }
  .hero h1{ font-size:2rem;}
  .stat-card{ padding:1rem;}
  .stat-card .v{ font-size:1.5rem;}
  .plan-card{ padding:1.25rem;}
  .table-responsive { border: 0; }
  .table{ font-size:.85rem; min-width: 600px; }
  h1.fw-bold{ font-size:1.5rem;}
  .card{ border-radius:12px;}
  .btn-icon{ width:38px; height:38px; }
  .app-main { padding-bottom: 60px; }
  .d-flex.flex-wrap { gap: 10px !important; }
}

/* PC View Fixes */
@media (min-width: 992px) {
  .app-main { padding: 2rem; }
  .container-fluid { max-width: 1400px; margin: 0 auto; }
}

/* Print */
@media print{ .app-sidebar,.app-topbar,.btn{ display:none !important; } }