:root{--bg:#0b1020;--panel:#11182d;--panel2:#141d36;--text:#eef3ff;--muted:#9aa8c7;--accent:#7c5cff;--accent2:#29d3a8;--danger:#ff5c7a;--warn:#ffcc66;--line:rgba(255,255,255,.09)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#24315f 0,#0b1020 36%,#070a13 100%);font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}.sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;padding:24px;background:rgba(7,10,19,.72);border-right:1px solid var(--line);backdrop-filter:blur(18px)}.brand{display:flex;gap:12px;align-items:center;margin-bottom:32px}.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:900}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:3px}nav{display:grid;gap:8px}nav a{color:var(--muted);text-decoration:none;padding:13px 14px;border-radius:14px}nav a:hover{background:rgba(255,255,255,.07);color:var(--text)}.sidebar-card{position:absolute;bottom:24px;left:24px;right:24px;padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(124,92,255,.16),rgba(41,211,168,.06))}.sidebar-card p{color:var(--muted);font-size:13px}.main{margin-left:270px;padding:28px;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.eyebrow{color:var(--accent2);font-size:12px;text-transform:uppercase;letter-spacing:.13em}h1{margin:4px 0 0;font-size:34px}h2{font-size:36px;margin:0 0 10px}.hero{display:flex;justify-content:space-between;align-items:center;padding:28px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(124,92,255,.32),rgba(41,211,168,.12));box-shadow:0 20px 70px rgba(0,0,0,.24);margin-bottom:20px}.hero p{color:var(--muted);font-size:17px}.hero-badge{border:1px solid var(--line);border-radius:22px;padding:18px 22px;background:rgba(255,255,255,.08);text-align:right}.grid{display:grid;gap:18px}.metrics{grid-template-columns:repeat(4,1fr);margin-bottom:18px}.two{grid-template-columns:1.2fr .8fr;margin-bottom:18px}.card{background:rgba(17,24,45,.82);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.18)}.metric span{color:var(--muted);font-size:13px}.metric strong{display:block;font-size:25px;margin-top:10px}.btn{border:0;border-radius:14px;background:linear-gradient(135deg,var(--accent),#5f9bff);color:white;padding:12px 16px;font-weight:800;text-decoration:none;cursor:pointer}.btn.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line)}.large{font-size:16px;padding:16px}.ai-box{display:grid;gap:10px}.ai-box p{margin:0;padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.06);color:#dce5ff}.alerts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.alert{padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line)}.alert span{display:block;color:var(--muted);margin-top:4px}.alert.critical{border-color:rgba(255,92,122,.35)}.alert.warning{border-color:rgba(255,204,102,.35)}.form-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stack{display:grid;gap:12px}input,select,textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);outline:none}option{background:#11182d}textarea{min-height:95px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}td small{display:block;color:var(--muted);margin-top:4px}.danger-row{background:rgba(255,92,122,.08)}.flash-wrap{margin-bottom:16px}.flash{padding:12px 14px;border-radius:14px;background:rgba(41,211,168,.16);border:1px solid rgba(41,211,168,.25)}@media(max-width:900px){.sidebar{position:static;width:auto}.main{margin-left:0}.metrics,.two,.alerts,.form-grid{grid-template-columns:1fr}.hero{display:block}.topbar{display:block}} .brand{align-items:flex-start!important;gap:14px!important}.brand strong{display:block!important;white-space:nowrap!important;font-size:18px!important;letter-spacing:.4px!important}.brand span{display:block!important;max-width:170px!important;font-size:11px!important;line-height:1.3!important}.logo{flex:0 0 44px!important} .sidebar{width:300px!important}.main{margin-left:300px!important}.brand strong{font-size:20px!important}.brand span{max-width:210px!important} .logo-img{width:190px;height:auto;display:block;border-radius:14px}
.brand{margin-bottom:32px!important}
.empty-state{
    text-align:center;
    padding:40px;
    border-radius:18px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
}

.empty-state h4{
    margin-bottom:10px;
    font-size:22px;
}

.empty-state p{
    opacity:.8;
}
/* =========================
   AUTH / LOGIN / REGISTER
========================= */

.auth-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(0, 212, 255, .18), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 92, 255, .22), transparent 35%),
    #070b18;
  color: #ffffff;
  font-family: Inter, Segoe UI, Arial, sans-serif;
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  background: rgba(13, 19, 38, .92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
}

.auth-brand {
  margin-bottom: 28px;
}

.auth-brand img {
  width: 190px;
  max-width: 80%;
  display: block;
  margin-bottom: 14px;
}

.auth-brand p {
  color: #23f3dc;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.auth-header h1 {
  font-size: 34px;
  line-height: 1.05;
  margin-bottom: 10px;
}

.auth-header p {
  color: #b8c4df;
  line-height: 1.6;
  margin-bottom: 26px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  color: #dbe6ff;
  font-weight: 700;
}

.form-group input,
.form-group select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #ffffff;
  padding: 14px 15px;
  border-radius: 14px;
  outline: none;
  font-size: 15px;
}

.form-group input::placeholder {
  color: rgba(255,255,255,.38);
}

.form-group input:focus,
.form-group select:focus {
  border-color: #25d6ff;
  box-shadow: 0 0 0 4px rgba(37,214,255,.12);
}

.form-group select option {
  background: #0b1020;
}

.auth-button {
  margin-top: 8px;
  border: none;
  border-radius: 16px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 800;
  color: white;
  cursor: pointer;
  background: linear-gradient(135deg, #7c5cff, #00d4ff);
  box-shadow: 0 18px 40px rgba(0,212,255,.18);
}

.auth-switch {
  margin-top: 22px;
  text-align: center;
  color: #aab6d3;
}

.auth-switch a {
  color: #23f3dc;
  font-weight: 800;
  text-decoration: none;
}

/* =========================
   RESPONSIVE BASE APP
========================= */

@media (max-width: 900px) {
  .sidebar {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 24px !important;
  }

  .sidebar nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
  }

  .sidebar nav a {
    padding: 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.04);
    font-size: 15px !important;
  }

  .sidebar-card {
    margin-top: 18px !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 24px !important;
  }

  .topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }

  .topbar .btn {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 560px) {
  .auth-page {
    padding: 24px 14px;
    align-items: flex-start;
  }

  .auth-card {
    padding: 24px;
    border-radius: 22px;
  }

  .auth-brand img {
    width: 155px;
  }

  .auth-brand p {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .auth-header h1 {
    font-size: 28px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .sidebar nav {
    grid-template-columns: 1fr !important;
  }

  .logo-img {
    max-width: 190px !important;
  }
}
/* =========================
   APP RESPONSIVE FIX
========================= */

.app-body {
  min-height: 100vh;
  background: #0b1020;
  color: #ffffff;
  overflow-x: hidden;
}

.sidebar {
  box-sizing: border-box;
}

.main {
  box-sizing: border-box;
  min-width: 0;
}

img {
  max-width: 100%;
}

table {
  width: 100%;
}

@media (max-width: 900px) {
  .app-body {
    display: block !important;
  }

  .sidebar {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 22px !important;
    border-radius: 0 0 24px 24px !important;
  }

  .brand {
    margin-bottom: 18px !important;
  }

  .logo-img {
    width: 170px !important;
    max-width: 70% !important;
  }

  .sidebar-nav,
  .sidebar nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .sidebar-nav a,
  .sidebar nav a {
    display: block !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.05) !important;
    color: #dbe6ff !important;
    text-decoration: none !important;
    font-size: 14px !important;
  }

  .sidebar-card {
    margin-top: 16px !important;
    padding: 18px !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px !important;
  }

  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
  }

  .topbar h1 {
    font-size: 32px !important;
    line-height: 1.08 !important;
  }

  .topbar .btn,
  .btn.ghost {
    width: 100% !important;
    text-align: center !important;
  }

  .grid,
  .stats-grid,
  .cards-grid,
  .dashboard-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
  }

  .card,
  .panel,
  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .table-wrap {
    overflow-x: auto !important;
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: 18px !important;
  }

  .sidebar-nav,
  .sidebar nav {
    grid-template-columns: 1fr !important;
  }

  .main {
    padding: 18px !important;
  }

  .topbar h1 {
    font-size: 27px !important;
  }

  .eyebrow {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .sidebar-card {
    font-size: 14px !important;
  }
}
@media (max-width: 900px) {
  .sidebar-card {
    position: static !important;
    width: 100% !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  .sidebar nav,
  .sidebar-nav {
    margin-bottom: 0 !important;
  }
}
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#25D366;
    color:white;
    padding:14px 20px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    z-index:9999;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    transition:.2s;
}

.whatsapp-float:hover{
    transform:translateY(-2px);
    opacity:.95;
}
.flash.catalog-success{
    display:none;
}
.pricing-banner{
    display:inline-flex;
    gap:10px;
    align-items:center;
    margin:22px 0 26px;
    padding:12px 16px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(116,92,255,.18), rgba(0,212,255,.13));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    color:#fff;
    font-weight:800;
}

.pricing-banner span{
    color:#8df5d5;
}

.pricing-banner strong{
    color:#fff;
}