:root{
  --app-bg: #f6f8fb;
  --app-panel: #ffffff;
  --app-border: rgba(15, 23, 42, .08);
  --app-text: #0f172a;
  --app-muted: #64748b;
  --app-primary: #4f46e5;
  --app-primary-2: #7c3aed;
  --app-success: #16a34a;
  --app-danger: #ef4444;
  --app-warning: #f59e0b;
  --app-radius: 16px;
  --app-shadow: 0 18px 50px rgba(15,23,42,.08);
  --app-shadow-sm: 0 8px 24px rgba(15,23,42,.08);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

html, body { height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--app-bg);
  color: var(--app-text);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a{ color: var(--app-primary); }
a:hover{ color: #3730a3; }

/* Make main content naturally fill remaining screen height */
.app-content{
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
}

/* Top navbar */
.app-navbar{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-border);
}
.app-navbar .nav-link{ color: var(--app-text); opacity: .82; }
.app-navbar .nav-link:hover{ opacity: 1; }
.app-navbar .nav-link.active{ opacity: 1; font-weight: 600; }
.app-brand-mark{
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  color: #fff;
  box-shadow: 0 10px 30px rgba(79,70,229,.25);
}

/* Panels / cards */
.card{
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow-sm);
}
.card .card-title{ letter-spacing: -.01em; }

/* Buttons & inputs */
.btn{ border-radius: 12px; }
.btn-primary{
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-2));
  border: 0;
  box-shadow: 0 12px 28px rgba(79,70,229,.22);
}
.btn-primary:hover{ filter: brightness(.98); }
.btn-outline-primary{ border-color: rgba(79,70,229,.35); color: var(--app-primary); }
.btn-outline-primary:hover{ background: rgba(79,70,229,.08); border-color: rgba(79,70,229,.55); color: var(--app-primary); }

.form-control, .form-select{
  border-radius: 12px;
  border-color: var(--app-border);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus{
  border-color: rgba(79,70,229,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(79,70,229,.15) !important;
}

/* Tables */
.table{
  --bs-table-border-color: rgba(15, 23, 42, .08);
}
.table > :not(caption) > * > *{
  padding-top: .85rem;
  padding-bottom: .85rem;
}

/* Footer */
.footer{
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--app-border);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
}

/* Auth pages */
.auth-shell{
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
}
.auth-card{
  overflow: hidden;
}
.auth-card .auth-aside{
  background: radial-gradient(1200px circle at 0% 0%, rgba(79,70,229,.20), transparent 60%),
              radial-gradient(900px circle at 100% 0%, rgba(124,58,237,.18), transparent 55%),
              linear-gradient(180deg, #0b1220, #0f172a);
  color: #e2e8f0;
}
.auth-card .auth-aside small{ color: rgba(226,232,240,.75); }

/* Admin shell */
.admin-shell{
  flex: 1 0 auto;
}
.admin-topbar{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
}
.admin-sidebar{
  background: linear-gradient(180deg, #0b1220, #0f172a);
  color: #e2e8f0;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,.08);
  min-height: 100vh;
}
.admin-sidebar .nav-link{
  color: rgba(226,232,240,.85);
  border-radius: 12px;
}
.admin-sidebar .nav-link:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}
.admin-sidebar .nav-link.active{
  background: rgba(79,70,229,.25);
  color: #fff;
}
.admin-sidebar .nav-section{
  color: rgba(226,232,240,.55);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
}