:root{
  --bg:#f7f5ef;
  --surface:#ffffff;
  --surface2:#f0ebe2;
  --surface3:#e5ded1;
  --border:rgba(20,36,55,.10);
  --text:#142437;
  --muted:#61758a;
  --success:#0e9f6e;
  --warning:#d29a19;
  --error:#d94b4b;
  --primary:#ee7754;
  --primary-deep:#d46040;
  --accent:#0057B8;
  --shadow:0 18px 50px rgba(22,50,79,.10);
  --font-heading:'Montserrat',sans-serif;
  --font-body:'Roboto',sans-serif;
}

[data-theme="dark"]{
  --bg:#071521;
  --surface:#0d2234;
  --surface2:#102a41;
  --surface3:#16324f;
  --border:rgba(255,255,255,.08);
  --text:#eef6ff;
  --muted:#9db1c4;
  --success:#46d39c;
  --warning:#f0be4d;
  --error:#ff8f8f;
  --primary:#ee7754;
  --primary-deep:#ffc4b4;
  --accent:#7eb5ff;
  --shadow:0 20px 60px rgba(0,0,0,.30);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body) !important;
  background:
    radial-gradient(circle at top right,rgba(245,130,32,.10),transparent 25%),
    radial-gradient(circle at top left,rgba(11,92,171,.08),transparent 22%),
    var(--bg) !important;
  color:var(--text) !important;
}

a{color:inherit}

.sidebar{
  width:260px !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(18px);
  border-right:1px solid var(--border) !important;
  z-index:120 !important;
}

[data-theme="dark"] .sidebar{background:rgba(13,34,52,.86) !important}

.sidebar-logo{
  padding:18px 18px 16px !important;
  border-bottom:1px solid var(--border) !important;
}

.sidebar-logo a{
  display:flex !important;
  align-items:center;
  gap:12px;
}

.sidebar-logo-icon{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  background:#fff !important;
  display:grid !important;
  place-items:center;
  box-shadow:0 10px 24px rgba(238,119,84,.18) !important;
  border:1px solid rgba(238,119,84,.16) !important;
  overflow:hidden;
  color:transparent !important;
  font-size:0 !important;
}

.sidebar-logo-icon img{
  width:30px;
  height:30px;
  object-fit:contain;
}

.sidebar-logo span{
  font-family:var(--font-heading) !important;
  font-size:16px !important;
  font-weight:800 !important;
  color:var(--primary-deep) !important;
  letter-spacing:-.03em !important;
}

.sidebar-user{
  padding:16px 18px !important;
  border-bottom:1px solid var(--border) !important;
  gap:12px !important;
}

.user-avatar{
  width:42px !important;
  height:42px !important;
  background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
  color:#fff !important;
  font-weight:700 !important;
}

.user-name{font-size:14px !important;font-weight:700 !important}
.user-role{
  font-size:11px !important;
  color:var(--primary) !important;
  text-transform:uppercase;
  letter-spacing:.08em !important;
}

.sidebar-nav{padding:12px 10px !important}
.nav-section{
  font-size:10px !important;
  color:var(--muted) !important;
  letter-spacing:.12em !important;
  font-weight:700 !important;
  padding:12px 10px 6px !important;
}

.nav-item{
  padding:11px 12px !important;
  border-radius:16px !important;
  font-size:14px !important;
  color:var(--muted) !important;
  border:1px solid transparent !important;
  margin-bottom:4px !important;
}

.nav-item:hover{
  background:rgba(0,87,184,.08) !important;
  color:var(--text) !important;
}

.nav-item.active{
  background:rgba(238,119,84,.10) !important;
  color:var(--primary) !important;
  border-color:rgba(238,119,84,.16) !important;
}

.nav-badge{
  background:rgba(238,119,84,.16) !important;
  color:var(--primary) !important;
  font-size:9px !important;
  padding:2px 7px !important;
  border-radius:999px !important;
  font-weight:700 !important;
}

.sidebar-footer{
  padding:12px !important;
  border-top:1px solid var(--border) !important;
}

.sidebar-footer a{
  padding:10px 12px !important;
  border-radius:14px !important;
}

.sidebar-footer a:hover{
  background:rgba(217,75,75,.10) !important;
  color:var(--error) !important;
}

.main{
  margin-left:260px !important;
  min-height:100vh;
  background:transparent !important;
}

.topbar{
  padding:16px 28px !important;
  border-bottom:1px solid var(--border) !important;
  background:rgba(255,255,255,.84) !important;
  backdrop-filter:blur(18px);
  position:sticky !important;
  top:0;
  z-index:90 !important;
  gap:14px !important;
}

[data-theme="dark"] .topbar{background:rgba(7,21,33,.84) !important}

.topbar h1{
  font-family:var(--font-heading) !important;
  font-size:28px !important;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
  color:var(--text) !important;
}

.topbar-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.topbar-right{gap:10px !important}

.icon-btn,
.menu-btn,
.theme-toggle{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--muted) !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s;
  font-size:14px !important;
  font-family:var(--font-body) !important;
}

.icon-btn:hover,
.menu-btn:hover,
.theme-toggle:hover{
  border-color:var(--primary) !important;
  color:var(--primary) !important;
}

.menu-btn{
  display:none !important;
  width:auto !important;
  min-width:44px;
  padding:0 14px;
  border-radius:999px !important;
}

.content{
  padding:28px !important;
  background:transparent !important;
}

.panel,
.course-card,
.settings-menu,
.danger-box,
.upcoming-card,
.cert-row,
.stat-card,
.hero-stat{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
}

.panel,
.course-card,
.settings-menu{border-radius:24px !important}

.panel{
  padding:22px !important;
  margin-bottom:20px !important;
}

.panel-title,
.modal-title,
.danger-title,
.ca-name,
.toggle-label{
  font-family:var(--font-heading) !important;
  color:var(--text) !important;
}

.panel-desc,
.panel-action,
.cc-meta,
.toggle-sub,
.ca-status,
th,
.field label{
  color:var(--muted) !important;
}

.panel-action{font-weight:700 !important}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-sm{
  border-radius:999px !important;
  font-weight:700 !important;
}

.btn-primary{
  background:#EE7754 !important;
  color:#fff !important;
  box-shadow:0 16px 30px rgba(238,119,84,.28) !important;
}

.btn-primary:hover{transform:translateY(-1px)}

.btn-secondary,
.btn-sm{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  color:var(--muted) !important;
}

.btn-secondary:hover,
.btn-sm:hover{
  border-color:var(--primary) !important;
  color:var(--primary) !important;
}

.btn-danger{
  background:rgba(217,75,75,.1) !important;
  border:1px solid rgba(217,75,75,.25) !important;
  color:var(--error) !important;
}

.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea{
  background:var(--surface2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:16px !important;
  font-family:var(--font-body) !important;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:var(--primary) !important;
  outline:none;
}

table{border-collapse:separate;border-spacing:0 8px}
th{border-bottom:1px solid var(--border) !important}
td{
  background:var(--surface) !important;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border) !important;
}
td:first-child{
  border-left:1px solid var(--border);
  border-top-left-radius:16px;
  border-bottom-left-radius:16px;
}
td:last-child{
  border-right:1px solid var(--border);
  border-top-right-radius:16px;
  border-bottom-right-radius:16px;
}

.badge-blue{background:rgba(0,87,184,.12) !important;color:var(--accent) !important}
.badge-orange{background:rgba(238,119,84,.12) !important;color:var(--primary) !important}
.badge-green{background:rgba(14,159,110,.12) !important;color:var(--success) !important}
.badge-red{background:rgba(217,75,75,.12) !important;color:var(--error) !important}
.badge-gray{background:var(--surface2) !important;color:var(--muted) !important}

.cc-thumb,
.ca-icon,
.uc-dt{
  background:linear-gradient(135deg,rgba(238,119,84,.12),rgba(0,87,184,.10)) !important;
}

.cc-fill,
.ci-fill{
  background:linear-gradient(90deg,var(--primary),var(--accent)) !important;
}

.cc-cat,
.cc-pct,
.s-val,
.lb-xp,
.slider-val{
  color:var(--primary) !important;
  font-family:var(--font-heading) !important;
}

.modal-box{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:24px !important;
  box-shadow:var(--shadow) !important;
}

.settings-layout > *,
.settings-menu,
.theme-option,
.connected-row,
.toggle-row,
.danger-box,
.toast{
  backdrop-filter:blur(0);
}

.toast{
  background:#EE7754 !important;
  color:#fff !important;
}

#sidebar-backdrop{display:none}

@media(max-width:860px){
  .sidebar{
    transform:translateX(-100%);
    transition:transform .25s ease;
  }

  body.sidebar-open .sidebar{transform:translateX(0)}

  #sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:.2s;
    z-index:110;
  }

  body.sidebar-open #sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .main{margin-left:0 !important}
  .menu-btn{display:flex !important}
  .topbar{
    padding:14px 18px !important;
    flex-wrap:wrap;
  }
  .topbar h1{font-size:24px !important}
  .topbar-right{
    width:100%;
    justify-content:flex-end;
  }
  .content{padding:18px !important}
  .settings-layout,
  .grid2,
  .frow{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:560px){
  .topbar h1{font-size:22px !important}
  .panel,
  .course-card,
  .settings-menu{border-radius:20px !important}
}