/* ============================================================
   CourseNest — Design System (Light Theme)
   Theme: Teal + Coral on clean white/grey
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Brand */
  --teal-50:  #e6faf8;
  --teal-100: #b3f0e9;
  --teal-200: #7ee5d9;
  --teal-300: #3dd4c6;
  --teal-400: #00c4b3;
  --teal-500: #009e90;   /* primary */
  --teal-600: #007d72;
  --teal-700: #005d54;
  --teal-800: #003e38;
  --teal-900: #001f1c;

  --coral-400: #ff7c5c;
  --coral-500: #ff5c38;
  --coral-600: #e04820;

  --gold-400:  #f5c842;
  --gold-500:  #f0b429;

  /* Light neutrals */
  --white:     #ffffff;
  --gray-25:   #fafbfc;
  --gray-50:   #f6f8fa;
  --gray-100:  #eef1f5;
  --gray-150:  #e4e8ef;
  --gray-200:  #d1d9e2;
  --gray-300:  #9dafc0;
  --gray-400:  #6b7e92;
  --gray-500:  #4a5e72;
  --gray-600:  #344554;
  --gray-700:  #213040;
  --gray-800:  #152130;
  --gray-900:  #0c1720;

  /* Semantic */
  --bg-base:       var(--gray-50);
  --bg-surface:    var(--white);
  --bg-elevated:   var(--gray-25);
  --bg-card:       var(--white);
  --border:        var(--gray-150);
  --border-subtle: var(--gray-100);
  --text-primary:  var(--gray-800);
  --text-secondary:var(--gray-400);
  --text-muted:    var(--gray-300);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08);
  --shadow-teal: 0 4px 20px rgba(0,158,144,.18);
  --shadow-coral: 0 4px 20px rgba(255,92,56,.18);

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill:999px;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Transitions */
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --transition:      200ms var(--ease);
  --transition-slow: 380ms var(--ease);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: var(--teal-500); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--teal-600); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); line-height: 1.2; color: var(--text-primary); font-weight: 700; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--teal-300); }

/* ── Selection ─────────────────────────────────────────────── */
::selection { background: rgba(0,196,179,.18); color: var(--teal-800); }

/* ── Navbar ────────────────────────────────────────────────── */
.cn-nav {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky; top: 0; z-index: 1000;
  box-shadow: var(--shadow-xs);
}
.cn-nav .navbar-brand {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800;
  color: var(--gray-800) !important;
  letter-spacing: -0.02em;
}
.cn-nav .navbar-brand span { color: var(--teal-500); }
.cn-nav .nav-link {
  color: var(--gray-500) !important;
  font-weight: 500; font-size: .875rem;
  padding: .5rem 1rem !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.cn-nav .nav-link:hover { color: var(--teal-600) !important; background: var(--teal-50); }
.cn-nav .nav-link.active { color: var(--teal-500) !important; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body); font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
  color: var(--white);
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--teal-400), var(--teal-500));
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,158,144,.28);
  color: var(--white);
}
.btn-accent {
  background: linear-gradient(135deg, var(--coral-500), var(--coral-600));
  color: var(--white); box-shadow: var(--shadow-coral);
}
.btn-accent:hover {
  background: linear-gradient(135deg, var(--coral-400), var(--coral-500));
  transform: translateY(-1px); color: var(--white);
}
.btn-outline-teal {
  background: transparent; color: var(--teal-600);
  border: 1.5px solid var(--teal-400);
}
.btn-outline-teal:hover {
  background: var(--teal-500); color: var(--white); transform: translateY(-1px);
}
.btn-ghost {
  background: var(--gray-50); color: var(--gray-500);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }
.btn-sm { padding: .375rem .85rem; font-size: .8rem; }
.btn-lg { padding: .75rem 1.75rem; font-size: 1rem; }
.btn-xl { padding: .9rem 2.2rem; font-size: 1.05rem; border-radius: var(--radius-md); }

/* ── Cards ─────────────────────────────────────────────────── */
.cn-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-slow);
  overflow: hidden; position: relative;
}
.cn-card:hover {
  border-color: var(--teal-200);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,158,144,.08);
  transform: translateY(-3px);
}

/* Course card */
.course-card { cursor: pointer; }
.course-card .card-thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9; background: var(--gray-100);
}
.course-card .card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--ease);
}
.course-card:hover .card-thumb img { transform: scale(1.05); }
.course-card .card-thumb .delivery-badge {
  position: absolute; top: .6rem; right: .6rem;
  font-size: .7rem; padding: .25rem .65rem;
  border-radius: var(--radius-pill); font-weight: 600;
  letter-spacing: .03em;
}
.badge-digital  { background: rgba(0,158,144,.9);  color: #fff; }
.badge-physical { background: rgba(240,180,41,.95); color: #533800; }
.badge-hybrid   { background: rgba(255,92,56,.9);   color: #fff; }

.course-card .card-body { padding: 1.25rem; }
.course-card .faculty-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.course-card .faculty-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--teal-200); }
.course-card .faculty-name  { font-size: .78rem; color: var(--gray-400); font-weight: 500; }
.course-card .course-title  {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  margin-bottom: .5rem; color: var(--text-primary);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
}
.course-card .rating-row { display: flex; align-items: center; gap: .35rem; margin-bottom: .75rem; }
.stars { color: var(--gold-500); font-size: .8rem; }
.course-card .rating-num  { font-size: .8rem; font-weight: 600; color: var(--gold-500); }
.course-card .review-count{ font-size: .75rem; color: var(--text-secondary); }
.course-card .price-row   { display: flex; align-items: center; gap: .65rem; margin-top: .5rem; }
.price-current  { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--teal-600); }
.price-original { font-size: .85rem; color: var(--text-secondary); text-decoration: line-through; }
.price-discount { font-size: .75rem; color: var(--coral-500); font-weight: 700; background: rgba(255,92,56,.08); padding: .1rem .4rem; border-radius: var(--radius-pill); }

/* ── Section headings ──────────────────────────────────────── */
.section-label {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal-500);
  display: block; margin-bottom: .5rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800;
  line-height: 1.15; color: var(--text-primary); letter-spacing: -0.03em;
}
.section-title span { color: var(--teal-500); }

/* ── Forms ─────────────────────────────────────────────────── */
.cn-form-control {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-md); color: var(--text-primary);
  padding: .7rem 1rem; font-size: .9rem; font-family: var(--font-body);
  width: 100%; transition: all var(--transition);
  box-shadow: var(--shadow-xs);
}
.cn-form-control::placeholder { color: var(--gray-300); }
.cn-form-control:focus {
  outline: none; border-color: var(--teal-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,196,179,.12), var(--shadow-xs);
  color: var(--text-primary);
}
.cn-form-label {
  font-size: .8rem; font-weight: 600; color: var(--gray-600);
  margin-bottom: .4rem; display: block; letter-spacing: .02em;
}
.cn-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7e92' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ── Badges ────────────────────────────────────────────────── */
.cn-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.cn-badge-teal    { background: var(--teal-50);           color: var(--teal-600);  border: 1px solid var(--teal-100); }
.cn-badge-coral   { background: rgba(255,92,56,.08);       color: var(--coral-500); border: 1px solid rgba(255,92,56,.2); }
.cn-badge-gold    { background: rgba(240,180,41,.1);       color: #a06800;          border: 1px solid rgba(240,180,41,.25); }
.cn-badge-gray    { background: var(--gray-100);           color: var(--gray-500);  border: 1px solid var(--gray-200); }
.cn-badge-success { background: rgba(34,197,94,.08);       color: #16803c;          border: 1px solid rgba(34,197,94,.2); }
.cn-badge-danger  { background: rgba(239,68,68,.08);       color: #b91c1c;          border: 1px solid rgba(239,68,68,.2); }

/* ── Toast ─────────────────────────────────────────────────── */
.cn-toast-container { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; pointer-events: none; }
.cn-toast {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: var(--shadow-lg); min-width: 280px; max-width: 380px;
  pointer-events: all; animation: toastIn 320ms var(--ease-spring) forwards;
}
.cn-toast.hide { animation: toastOut 250ms var(--ease) forwards; }
.cn-toast .icon { font-size: 1.1rem; flex-shrink: 0; }
.cn-toast .msg  { font-size: .875rem; color: var(--text-primary); font-weight: 500; }
.cn-toast.success { border-left: 3px solid #16a34a; } .cn-toast.success .icon { color: #16a34a; }
.cn-toast.error   { border-left: 3px solid #dc2626; } .cn-toast.error .icon   { color: #dc2626; }
.cn-toast.info    { border-left: 3px solid var(--teal-500); } .cn-toast.info .icon { color: var(--teal-500); }
.cn-toast.warning { border-left: 3px solid var(--gold-500); } .cn-toast.warning .icon { color: var(--gold-500); }
@keyframes toastIn  { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(24px)} }

/* ── Loading ───────────────────────────────────────────────── */
.cn-spinner {
  width:38px;height:38px;border:3px solid var(--gray-150);
  border-top-color:var(--teal-500);border-radius:50%;
  animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cn-loading { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem;gap:1rem;color:var(--text-secondary);font-size:.875rem; }

/* ── Pagination ────────────────────────────────────────────── */
.cn-pagination { display:flex;align-items:center;justify-content:center;gap:.35rem;margin-top:2.5rem; }
.cn-page-btn {
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;
  border:1px solid var(--border);background:var(--white);
  color:var(--text-secondary);cursor:pointer;transition:all var(--transition);
  box-shadow:var(--shadow-xs);
}
.cn-page-btn:hover { background:var(--teal-50);color:var(--teal-600);border-color:var(--teal-200); }
.cn-page-btn.active { background:var(--teal-500);border-color:var(--teal-500);color:#fff;box-shadow:var(--shadow-teal); }
.cn-page-btn:disabled { opacity:.4;cursor:default; }

/* ── Stat chip ─────────────────────────────────────────────── */
.stat-chip { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.25rem 1.5rem;text-align:center;box-shadow:var(--shadow-xs); }
.stat-chip .val { font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--teal-500);line-height:1;margin-bottom:.25rem; }
.stat-chip .lbl { font-size:.75rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.06em; }

/* ── Divider ───────────────────────────────────────────────── */
.cn-divider { height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:2rem 0; }

/* ── Empty state ───────────────────────────────────────────── */
.cn-empty { text-align:center;padding:5rem 2rem;color:var(--text-secondary); }
.cn-empty i { font-size:3rem;color:var(--gray-200);margin-bottom:1rem; }
.cn-empty h4 { font-size:1.1rem;color:var(--gray-600);margin-bottom:.5rem; }
.cn-empty p  { font-size:.875rem; }

/* ── Star rating ───────────────────────────────────────────── */
.star-rating { display:flex;gap:.2rem; }
.star-rating .star { color:var(--gray-200);font-size:1.1rem;cursor:pointer;transition:color var(--transition); }
.star-rating .star.active,.star-rating .star:hover { color:var(--gold-400); }

/* ── Filter panel ──────────────────────────────────────────── */
.filter-panel {
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  position:sticky;top:80px;box-shadow:var(--shadow-sm);
}
.filter-panel h6 { font-family:var(--font-display);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--teal-500);margin-bottom:1rem; }
.filter-group { margin-bottom:1.5rem; }
.filter-group .filter-label { font-size:.8rem;font-weight:600;color:var(--gray-600);margin-bottom:.6rem; }
.filter-item { display:flex;align-items:center;gap:.5rem;padding:.4rem 0;cursor:pointer;font-size:.85rem;color:var(--text-secondary);transition:color var(--transition); }
.filter-item:hover { color:var(--teal-500); }
.filter-item input[type="radio"],.filter-item input[type="checkbox"] { accent-color:var(--teal-500);width:15px;height:15px; }
.price-range-inputs { display:flex;gap:.5rem;align-items:center; }
.price-range-inputs input { flex:1;padding:.45rem .65rem;font-size:.8rem;min-width:0; }

/* ── Auth pages ────────────────────────────────────────────── */
.auth-page {
  min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(ellipse 80% 80% at 50% -20%,rgba(0,196,179,.08),transparent),var(--bg-base);
  padding:2rem 1rem;
}
.auth-card {
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:2.5rem;width:100%;max-width:440px;
  box-shadow:var(--shadow-lg);
}
.auth-card .auth-logo { font-family:var(--font-display);font-size:1.75rem;font-weight:800;text-align:center;margin-bottom:2rem;color:var(--gray-800); }
.auth-card .auth-logo span { color:var(--teal-500); }

/* ── Dashboard layout ──────────────────────────────────────── */
.dash-layout { display:flex;min-height:100vh;background:var(--bg-base); }
.dash-sidebar {
  width:260px;flex-shrink:0;background:var(--white);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  overflow-y:auto;transition:transform var(--transition-slow);
  box-shadow:var(--shadow-sm);
}
.dash-sidebar .sidebar-logo {
  padding:1.5rem 1.5rem 1rem;
  font-family:var(--font-display);font-size:1.35rem;font-weight:800;
  color:var(--gray-800);border-bottom:1px solid var(--border-subtle);margin-bottom:.75rem;
}
.dash-sidebar .sidebar-logo span { color:var(--teal-500); }
.dash-sidebar .sidebar-section { padding:.5rem 1rem;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-300);margin-top:.75rem; }
.dash-sidebar .sidebar-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem 1.25rem;margin:.1rem .75rem;
  border-radius:var(--radius-md);font-size:.875rem;font-weight:500;
  color:var(--gray-500);cursor:pointer;transition:all var(--transition);
  text-decoration:none;position:relative;
}
.dash-sidebar .sidebar-item i { font-size:1rem;width:20px;text-align:center; }
.dash-sidebar .sidebar-item:hover { background:var(--teal-50);color:var(--teal-600); }
.dash-sidebar .sidebar-item.active { background:var(--teal-50);color:var(--teal-600);border:1px solid var(--teal-100); }
.dash-sidebar .sidebar-item .badge-dot { width:7px;height:7px;border-radius:50%;background:var(--coral-500);position:absolute;right:1rem;top:50%;transform:translateY(-50%); }

.dash-main { margin-left:260px;flex:1;min-width:0; }
.dash-topbar {
  background:var(--white);border-bottom:1px solid var(--border);
  padding:.85rem 2rem;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow-xs);
}
.dash-topbar .page-title { font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--text-primary); }
.dash-topbar .topbar-actions { display:flex;align-items:center;gap:.75rem; }

.user-pill {
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .85rem .35rem .5rem;
  border-radius:var(--radius-pill);background:var(--gray-50);
  border:1px solid var(--border);cursor:pointer;transition:all var(--transition);
  box-shadow:var(--shadow-xs);
}
.user-pill:hover { border-color:var(--teal-300);background:var(--teal-50); }
.user-pill .avatar {
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0;
}
.user-pill .uname { font-size:.8rem;font-weight:600;color:var(--text-primary); }

.dash-content { padding:2rem; }
.dash-overlay { position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:150;display:none; }
.dash-overlay.show { display:block; }

/* ── Stat cards ────────────────────────────────────────────── */
.dash-stat {
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  display:flex;align-items:flex-start;gap:1rem;
  transition:all var(--transition-slow);box-shadow:var(--shadow-xs);
}
.dash-stat:hover { border-color:var(--teal-200);box-shadow:var(--shadow-teal); }
.dash-stat .stat-icon { width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0; }
.dash-stat .stat-body .label { font-size:.75rem;color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.25rem; }
.dash-stat .stat-body .value { font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:var(--text-primary);line-height:1; }
.dash-stat .stat-body .sub   { font-size:.75rem;color:var(--text-secondary);margin-top:.2rem; }

/* ── Tables ────────────────────────────────────────────────── */
.cn-table-wrap { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs); }
.cn-table { width:100%;border-collapse:collapse;font-size:.875rem; }
.cn-table th { background:var(--gray-50);padding:.85rem 1rem;font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border); }
.cn-table td { padding:.9rem 1rem;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);vertical-align:middle; }
.cn-table tr:last-child td { border-bottom:none; }
.cn-table tr:hover td { background:var(--gray-25); }
.cn-table .td-muted { color:var(--text-secondary);font-size:.8rem; }

/* ── Modal ─────────────────────────────────────────────────── */
.cn-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn 200ms ease forwards; }
.cn-modal { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-width:540px;box-shadow:var(--shadow-lg);animation:slideUp 300ms var(--ease-spring) forwards;max-height:90vh;overflow-y:auto; }
.cn-modal-header { padding:1.5rem 1.75rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between; }
.cn-modal-header h5 { font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-primary); }
.cn-modal-close { width:32px;height:32px;border-radius:var(--radius-sm);background:var(--gray-100);border:1px solid var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all var(--transition); }
.cn-modal-close:hover { background:var(--gray-150);color:var(--text-primary); }
.cn-modal-body   { padding:1.5rem 1.75rem; }
.cn-modal-footer { padding:1.25rem 1.75rem;border-top:1px solid var(--border-subtle);display:flex;gap:.75rem;justify-content:flex-end; }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── Hero ──────────────────────────────────────────────────── */
.hero { min-height:82vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:5rem 0 4rem; }
.hero::before { content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(0,196,179,.06) 0%,transparent 70%);pointer-events:none; }
.hero-eyebrow { font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-500);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.25rem; }
.hero-eyebrow::before { content:'';display:inline-block;width:24px;height:1.5px;background:var(--teal-500); }
.hero h1 { font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:1.08;letter-spacing:-0.04em;margin-bottom:1.5rem; }
.hero h1 .highlight { background:linear-gradient(135deg,var(--teal-500),var(--teal-700));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.hero h1 .accent    { color:var(--coral-500); }
.hero .lead { font-size:1.1rem;color:var(--text-secondary);max-width:520px;line-height:1.7;margin-bottom:2.25rem; }
.hero-actions { display:flex;flex-wrap:wrap;gap:1rem; }

/* ── Category pill ─────────────────────────────────────────── */
.cat-pill { display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--radius-pill);background:var(--white);border:1px solid var(--border);font-size:.825rem;font-weight:600;color:var(--gray-500);cursor:pointer;transition:all var(--transition);white-space:nowrap;box-shadow:var(--shadow-xs); }
.cat-pill:hover,.cat-pill.active { background:var(--teal-50);border-color:var(--teal-300);color:var(--teal-600); }

/* ── Step cards ────────────────────────────────────────────── */
.step-card { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem 1.5rem;text-align:center;position:relative;transition:all var(--transition-slow);box-shadow:var(--shadow-xs); }
.step-card::before { content:attr(data-step);position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--teal-500),var(--teal-700));color:#fff;font-family:var(--font-mono);font-size:.7rem;font-weight:700;padding:.2rem .65rem;border-radius:var(--radius-pill); }
.step-card:hover { border-color:var(--teal-200);box-shadow:var(--shadow-md),var(--shadow-teal);transform:translateY(-4px); }
.step-card .step-icon { width:60px;height:60px;border-radius:var(--radius-md);background:var(--teal-50);border:1px solid var(--teal-100);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--teal-500);margin:0 auto 1rem; }
.step-card h5 { font-size:1rem;font-weight:700;margin-bottom:.5rem; }
.step-card p  { font-size:.85rem;color:var(--text-secondary);line-height:1.6; }

/* ── Accordion ─────────────────────────────────────────────── */
.cn-accordion-item { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:.5rem;overflow:hidden;transition:border-color var(--transition);box-shadow:var(--shadow-xs); }
.cn-accordion-item.open { border-color:var(--teal-300); }
.cn-accordion-header { padding:1.1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--text-primary);transition:color var(--transition); }
.cn-accordion-header:hover { color:var(--teal-600); }
.cn-accordion-header .chevron { transition:transform var(--transition);font-size:.85rem;color:var(--text-secondary); }
.cn-accordion-item.open .chevron { transform:rotate(180deg);color:var(--teal-500); }
.cn-accordion-body { max-height:0;overflow:hidden;transition:max-height 350ms var(--ease),padding 350ms var(--ease);font-size:.875rem;color:var(--text-secondary);line-height:1.7;padding:0 1.5rem; }
.cn-accordion-item.open .cn-accordion-body { max-height:400px;padding:0 1.5rem 1.25rem; }

/* ── Order timeline ────────────────────────────────────────── */
.order-timeline { position:relative;padding-left:2rem; }
.order-timeline::before { content:'';position:absolute;left:.55rem;top:.5rem;bottom:.5rem;width:2px;background:var(--border); }
.timeline-item { position:relative;margin-bottom:1.5rem; }
.timeline-item::before { content:'';position:absolute;left:-1.57rem;top:.35rem;width:12px;height:12px;border-radius:50%;background:var(--gray-200);border:2px solid var(--white);transition:all var(--transition); }
.timeline-item.done::before { background:var(--teal-500);border-color:var(--teal-100);box-shadow:0 0 8px rgba(0,158,144,.3); }
.timeline-item .tl-title { font-weight:600;font-size:.875rem;color:var(--text-primary);margin-bottom:.2rem; }
.timeline-item .tl-meta  { font-size:.78rem;color:var(--text-secondary); }

/* ── Utility ───────────────────────────────────────────────── */
.text-teal    { color:var(--teal-500) !important; }
.text-coral   { color:var(--coral-500) !important; }
.text-gold    { color:var(--gold-500) !important; }
.text-muted   { color:var(--text-secondary) !important; }
.text-sm      { font-size:.825rem !important; }
.text-xs      { font-size:.72rem !important; }
.text-display { font-family:var(--font-display) !important; }
.bg-teal-soft  { background:var(--teal-50) !important; }
.bg-coral-soft { background:rgba(255,92,56,.06) !important; }
.bg-gold-soft  { background:rgba(240,180,41,.08) !important; }
.bg-surface    { background:var(--bg-surface) !important; }
.bg-card       { background:var(--bg-card) !important; }
.border-subtle { border-color:var(--border-subtle) !important; }
.rounded-cn    { border-radius:var(--radius-lg) !important; }
.gradient-text { background:linear-gradient(135deg,var(--teal-500) 0%,var(--teal-700) 50%,var(--coral-500) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── Notifications dropdown ────────────────────────────────── */
.notifications-dropdown { border-radius:var(--radius-lg) !important; }
.notifications-dropdown > div { background:var(--white) !important; border-bottom:1px solid var(--border-subtle) !important; }
.notifications-dropdown > div:last-child { border-bottom:none !important; }

/* ── Profile section ───────────────────────────────────────── */
.profile-section { background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;margin-bottom:1.25rem;box-shadow:var(--shadow-xs); }
.profile-section h5 { font-family:var(--font-display);font-size:.95rem;font-weight:700;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:.5rem;color:var(--teal-600); }

/* ── Footer ────────────────────────────────────────────────── */
footer { background:var(--gray-800);border-top:1px solid rgba(255,255,255,.06);padding:4rem 0 2rem; }
.footer-logo { font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--white);margin-bottom:.75rem; }
.footer-logo span { color:var(--teal-400); }
footer h6 { font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-200);margin-bottom:1rem; }
footer a  { color:var(--gray-300);font-size:.875rem;display:block;margin-bottom:.5rem;transition:color var(--transition); }
footer a:hover { color:var(--teal-300); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08);margin-top:3rem;padding-top:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem; }
.footer-bottom p { font-size:.8rem;color:var(--gray-400);margin:0; }

/* ── Sidebar toggle button: mobile/tablet only ────────────────── */
.dash-sidebar-toggle { display: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:991.98px) {
  .dash-sidebar { transform:translateX(-100%);z-index:200; }
  .dash-sidebar.open { transform:translateX(0); }
  .dash-main { margin-left:0; }
  .dash-sidebar-toggle { display: inline-flex; }
}
@media(max-width:575.98px) {
  .section-title { font-size:1.75rem; }
  .hero h1 { font-size:2.2rem; }
  .auth-card { padding:1.75rem 1.25rem; }
  .dash-content { padding:1.25rem; }
  .cn-modal { border-radius:var(--radius-lg); }
}