@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Great+Vibes&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root {
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --rose-50:#fff1f2; --rose-700:#be123c;
  --amber-50:#fffbeb; --amber-700:#b45309;
  --indigo-50:#eef2ff; --indigo-700:#4338ca;
  --sky-50:#f0f9ff; --sky-700:#0369a1;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: 'Inter','Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background: var(--slate-50); color: var(--slate-900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4,h5,h6,.font-display { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700; letter-spacing:-0.01em; color: var(--slate-900); }

/* ===== LAYOUT: SIDEBAR + MAIN ===== */
.app { min-height:100vh; display:flex; }
.sidebar { width:256px; background:#fff; border-right:1px solid var(--slate-200); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; }
.sidebar-brand { padding:20px; border-bottom:1px solid var(--slate-200); display:flex; align-items:center; gap:12px; }
.sidebar-brand .logo { width:36px; height:36px; border-radius:12px; background:var(--emerald-600); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; }
.sidebar-brand .name { font-family:'Plus Jakarta Sans'; font-weight:700; color:var(--slate-900); line-height:1.1; font-size:15px; }
.sidebar-brand .sub { font-size:12px; color:var(--slate-500); text-transform:capitalize; }
.sidebar-nav { flex:1; padding:12px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--slate-700); text-decoration:none; margin-bottom:2px; transition:all .15s; border:1px solid transparent; }
.nav-item:hover { background:var(--slate-100); color:var(--slate-900); }
.nav-item.active { background:var(--emerald-50); color:var(--emerald-800); border-color:var(--emerald-200); }
.nav-item i { font-size:16px; width:18px; display:inline-block; text-align:center; }
.sidebar-user { padding:12px; border-top:1px solid var(--slate-200); }
.user-btn { width:100%; display:flex; align-items:center; gap:12px; padding:8px; border-radius:8px; background:none; border:none; cursor:pointer; text-align:left; transition:background .15s; }
.user-btn:hover { background:var(--slate-100); }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--emerald-100); color:var(--emerald-800); font-weight:600; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-info { flex:1; overflow:hidden; }
.user-name { font-size:13px; font-weight:500; color:var(--slate-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.user-role { font-size:12px; color:var(--slate-500); margin:0; text-transform:capitalize; }
.logout-link { display:block; margin-top:6px; color:#dc2626; font-size:13px; padding:8px 12px; border-radius:8px; text-decoration:none; }
.logout-link:hover { background:#fee2e2; }

.main { flex:1; overflow-x:auto; }
.main-inner { padding:32px; max-width:1280px; margin:0 auto; }

/* ===== TYPOGRAPHY ===== */
.page-title { font-size:30px; font-weight:700; color:var(--slate-900); margin:0 0 4px; }
.page-subtitle { color:var(--slate-500); margin:0 0 24px; font-size:14px; }
.section-title { font-size:18px; font-weight:700; color:var(--slate-900); margin:24px 0 12px; }

/* ===== CARDS ===== */
.card { background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:24px; margin-bottom:16px; }
.card-lg { padding:32px; }
.card-body { padding:24px; }
.card-hd { padding:16px 24px; border-bottom:1px solid var(--slate-200); font-weight:600; color:var(--slate-900); }

/* Stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
.stat { background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:20px; }
.stat-label { font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--slate-500); font-weight:600; margin:0 0 8px; }
.stat-value { font-size:36px; font-weight:700; color:var(--slate-900); margin:0; font-family:'Plus Jakarta Sans'; line-height:1; }
.stat-sub { font-size:13px; color:var(--slate-500); margin-top:4px; }
.stat.tint-emerald { background:var(--emerald-50); }
.stat.tint-emerald .stat-value { color:var(--emerald-700); }
.stat.tint-indigo { background:var(--indigo-50); }
.stat.tint-indigo .stat-value { color:var(--indigo-700); }
.stat.tint-amber { background:var(--amber-50); }
.stat.tint-amber .stat-value { color:var(--amber-700); }
.stat.tint-rose { background:var(--rose-50); }
.stat.tint-rose .stat-value { color:var(--rose-700); }
.stat.tint-sky { background:var(--sky-50); }
.stat.tint-sky .stat-value { color:var(--sky-700); }

/* ===== FORMS ===== */
.form-row { display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; margin-bottom:16px; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
@media (max-width:768px) { .col-8,.col-6,.col-4,.col-3,.col-2 { grid-column: span 12; } }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:500; color:var(--slate-700); margin-bottom:6px; }
.form-control, .form-select { width:100%; padding:9px 12px; border:1px solid var(--slate-300); border-radius:8px; font-size:14px; background:#fff; color:var(--slate-900); font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { outline:none; border-color:var(--emerald-500); box-shadow:0 0 0 3px rgba(16,185,129,0.15); }
textarea.form-control { min-height:80px; resize:vertical; }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:8px; font-size:14px; font-weight:500; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:all .15s; font-family:inherit; line-height:1; }
.btn-primary { background:var(--emerald-700); color:#fff; }
.btn-primary:hover { background:var(--emerald-800); color:#fff; }
.btn-secondary { background:#fff; color:var(--slate-700); border-color:var(--slate-300); }
.btn-secondary:hover { background:var(--slate-100); }
.btn-danger { background:#dc2626; color:#fff; }
.btn-danger:hover { background:#b91c1c; }
.btn-outline { background:#fff; color:var(--slate-700); border-color:var(--slate-300); }
.btn-outline:hover { background:var(--slate-100); }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-lg { padding:12px 24px; font-size:15px; }
.btn-block { width:100%; justify-content:center; }

/* ===== TABLES ===== */
.tbl-wrap { overflow-x:auto; border:1px solid var(--slate-200); border-radius:12px; background:#fff; }
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; padding:12px 16px; background:var(--slate-50); font-size:12px; font-weight:600; color:var(--slate-600); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--slate-200); }
.tbl td { padding:12px 16px; border-bottom:1px solid var(--slate-100); font-size:14px; color:var(--slate-700); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:var(--slate-50); }

/* ===== BADGES ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.badge-emerald { background:var(--emerald-100); color:var(--emerald-800); }
.badge-indigo { background:var(--indigo-50); color:var(--indigo-700); }
.badge-amber { background:var(--amber-50); color:var(--amber-700); }
.badge-rose { background:var(--rose-50); color:var(--rose-700); }
.badge-sky { background:var(--sky-50); color:var(--sky-700); }
.badge-slate { background:var(--slate-100); color:var(--slate-700); }

/* ===== ALERTS ===== */
.alert { padding:12px 16px; border-radius:8px; margin-bottom:16px; display:flex; align-items:center; gap:10px; font-size:14px; border:1px solid transparent; }
.alert-success { background:var(--emerald-50); color:var(--emerald-800); border-color:var(--emerald-200); }
.alert-danger { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.alert-info { background:var(--sky-50); color:var(--sky-700); border-color:#bae6fd; }
.alert-warning { background:var(--amber-50); color:var(--amber-700); border-color:#fde68a; }

/* Toast (top-right) */
.toast-tr { position:fixed; top:24px; right:24px; background:#fff; border:1px solid var(--emerald-200); background:var(--emerald-50); color:var(--emerald-800); padding:12px 16px; border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.08); display:flex; align-items:center; gap:10px; z-index:1000; animation:slideIn .3s ease; }
@keyframes slideIn { from { transform:translateX(20px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ===== COURSE CARDS ===== */
.course-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.course-card { background:#fff; border:1px solid var(--slate-200); border-radius:12px; overflow:hidden; transition:box-shadow .2s, transform .2s; }
.course-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.06); transform:translateY(-2px); }
.course-cover { height:80px; background:linear-gradient(135deg, var(--emerald-500), var(--emerald-700)); }
.course-body { padding:20px; }
.course-title { font-size:16px; font-weight:600; color:var(--slate-900); margin:0 0 4px; }
.course-meta { font-size:12px; color:var(--slate-500); margin:0 0 12px; }
.course-desc { font-size:13px; color:var(--slate-600); margin:0 0 16px; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ===== LOGIN PAGE ===== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--emerald-50), var(--slate-50)); padding:20px; }
.login-card { max-width:420px; width:100%; background:#fff; border:1px solid var(--slate-200); border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.06); }
.login-header { padding:32px; text-align:center; border-bottom:1px solid var(--slate-100); }
.login-logo { width:56px; height:56px; border-radius:16px; background:var(--emerald-600); color:#fff; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:28px; }
.login-title { font-size:20px; margin:0 0 4px; font-weight:700; }
.login-sub { color:var(--slate-500); font-size:13px; }
.login-body { padding:32px; }
.login-demo { padding:16px; background:var(--slate-50); border-radius:8px; font-size:12px; color:var(--slate-600); margin-top:16px; }
.login-demo strong { color:var(--slate-800); }

/* ===== LANDING PAGE ===== */
.landing-hero { min-height:80vh; padding:80px 20px; background:linear-gradient(135deg, var(--emerald-50), #fff, var(--slate-50)); display:flex; align-items:center; }
.landing-container { max-width:1200px; margin:0 auto; }
.landing-title { font-size:52px; font-weight:800; color:var(--slate-900); line-height:1.1; margin:0 0 20px; letter-spacing:-0.02em; }
.landing-title .accent { color:var(--emerald-700); }
.landing-lead { font-size:18px; color:var(--slate-600); margin:0 0 32px; max-width:600px; line-height:1.6; }
.landing-features { padding:80px 20px; background:#fff; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; margin-top:40px; }
.feature-item { padding:24px; border:1px solid var(--slate-200); border-radius:12px; transition:box-shadow .2s; }
.feature-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.05); }
.feature-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; background:var(--emerald-50); color:var(--emerald-700); }
.feature-title { font-size:16px; font-weight:700; margin:0 0 8px; color:var(--slate-900); }
.feature-desc { font-size:14px; color:var(--slate-600); margin:0; line-height:1.5; }

/* Utility */
.text-muted { color:var(--slate-500) !important; }
.text-emerald { color:var(--emerald-700); }
.text-danger { color:#dc2626; }
.text-success { color:var(--emerald-700); }
.small { font-size:12px; }
.fw-bold { font-weight:700; }
.mb-1 { margin-bottom:4px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:16px; }
.mb-4 { margin-bottom:24px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:16px; }
.mt-4 { margin-top:24px; }
.mt-5 { margin-top:40px; }
.d-flex { display:flex; }
.justify-between { justify-content:space-between; }
.items-center { align-items:center; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.text-center { text-align:center; }
.text-end { text-align:right; }
.w-full { width:100%; }
.hidden { display:none; }

/* Mobile */
.mobile-top { display:none; }
@media (max-width:900px) {
  .sidebar { position:fixed; z-index:100; transform:translateX(-100%); transition:transform .3s; box-shadow:4px 0 24px rgba(0,0,0,.1); }
  .sidebar.open { transform:translateX(0); }
  .mobile-top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid var(--slate-200); position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,.04); }
  .main-inner { padding:16px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .stat { padding:14px; }
  .stat-value { font-size:26px; }
  .page-title { font-size:22px; }
  .page-subtitle { font-size:13px; }
  .card { padding:16px; }
  .card-body { padding:16px !important; }
  .form-row { gap:12px; }
  .btn { padding:9px 14px; font-size:13px; }
  .table-responsive { -webkit-overflow-scrolling:touch; }
  .table td, .table th { padding:8px 10px !important; font-size:13px !important; }
  h1, .page-title { font-size:22px !important; }
  h2 { font-size:19px !important; }
  h3, .section-title { font-size:16px !important; }
  h4, h5 { font-size:15px !important; }
}
@media (max-width:600px) {
  .stat-grid { grid-template-columns:1fr; }
  .main-inner { padding:12px; }
  .btn { font-size:12px; padding:8px 12px; }
  .form-control, .form-select { font-size:14px; padding:10px 12px; }
}
/* Sidebar backdrop on mobile */
.sidebar-backdrop { display:none; }
@media (max-width:900px) {
  .sidebar.open ~ .sidebar-backdrop,
  body:has(.sidebar.open) .sidebar-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:99; animation:fadeIn .2s; }
  @keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
}
/* Touch-friendly tap targets */
@media (hover: none) {
  .nav-item, .btn, .list-item, .form-control, .form-select { min-height:44px; }
  .btn-sm { min-height:36px; }
}
/* Table always scrollable on narrow */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* Form row collapses on small */
@media (max-width:768px) {
  .form-row { grid-template-columns:1fr !important; }
  .form-row > div { grid-column:span 1 !important; }
}

/* Certificate & Print (keep existing) */
.cert-page { width:1100px; margin:20px auto; background:#fff; box-shadow:0 8px 40px rgba(0,0,0,.15); }
.cert-inner { border:15px solid transparent; border-image: linear-gradient(45deg,#f59e0b,#ec4899,#6366f1,#10b981) 1; padding:60px; min-height:750px; background: radial-gradient(circle at top left, #fef3c7, transparent 50%), radial-gradient(circle at bottom right, #dbeafe, transparent 50%), #fff; text-align:center; }
.cert-title { font-family:'Cormorant Garamond',serif; font-size:3.5rem; color:var(--emerald-700); font-weight:700; margin-bottom:20px; }
.cert-name { font-family:'Great Vibes',cursive; font-size:4rem; color:var(--emerald-800); border-bottom:2px solid #f59e0b; display:inline-block; padding:10px 40px; margin:30px 0; }

.kop-surat { border-bottom:3px double #000; padding-bottom:15px; margin-bottom:25px; text-align:center; }
.kop-surat h2 { font-weight:bold; margin:0; text-transform:uppercase; }
.kop-surat h4 { font-weight:bold; margin:0; text-transform:uppercase; letter-spacing:1px; }
.kop-surat p { margin:2px 0; font-size:.9rem; }
.ttd-box { width:220px; margin:80px auto 0; text-align:center; display:block; }
.ttd-box .name { text-decoration:underline; font-weight:bold; }
.print-page { page-break-after: always; }

@media print {
  .no-print, .sidebar, .mobile-top { display:none !important; }
  body { background:#fff !important; }
  .main-inner { padding:0 !important; max-width:none !important; }
  .card { border:none !important; padding:0 !important; }
  table, th, td { border:1px solid #000 !important; }
  th, td { padding:6px 10px !important; }
}

/* Form inline */
.form-inline { display:flex; gap:8px; align-items:end; flex-wrap:wrap; }
.filter-bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }

/* ===== Bootstrap compat overrides ===== */
/* Override Bootstrap card/btn/badge with our emerald theme */
.card { background:#fff !important; border:1px solid var(--slate-200) !important; border-radius:12px !important; box-shadow:none !important; }
.card-body { padding:24px !important; }
.card-header { padding:16px 24px !important; background:#fff !important; border-bottom:1px solid var(--slate-200) !important; font-weight:600; }
.btn-brand, .btn-primary { background:var(--emerald-700) !important; color:#fff !important; border-color:var(--emerald-700) !important; }
.btn-brand:hover, .btn-primary:hover { background:var(--emerald-800) !important; border-color:var(--emerald-800) !important; }
.btn-warning { background:var(--amber-700) !important; color:#fff !important; border-color:var(--amber-700) !important; }
.btn-success { background:var(--emerald-600) !important; color:#fff !important; border-color:var(--emerald-600) !important; }
.btn-outline-primary { color:var(--emerald-700) !important; border-color:var(--emerald-700) !important; background:#fff !important; }
.btn-outline-primary:hover { background:var(--emerald-50) !important; color:var(--emerald-800) !important; }
.btn-outline-danger { color:#dc2626 !important; border-color:#fca5a5 !important; background:#fff !important; }
.btn-outline-danger:hover { background:#fee2e2 !important; }
.btn-outline-secondary { color:var(--slate-700) !important; border-color:var(--slate-300) !important; background:#fff !important; }
.btn-outline-warning { color:var(--amber-700) !important; border-color:#fde68a !important; background:#fff !important; }
.btn-outline-success { color:var(--emerald-700) !important; border-color:var(--emerald-200) !important; background:#fff !important; }
.form-control, .form-select { border-radius:8px !important; border-color:var(--slate-300) !important; }
.form-control:focus, .form-select:focus { border-color:var(--emerald-500) !important; box-shadow:0 0 0 3px rgba(16,185,129,0.15) !important; }
.badge.bg-primary, .bg-primary { background:var(--emerald-700) !important; }
.badge.bg-success, .bg-success { background:var(--emerald-600) !important; }
.badge.bg-info, .bg-info { background:var(--sky-700) !important; color:#fff; }
.badge.bg-warning, .bg-warning { background:#fbbf24 !important; color:var(--slate-900) !important; }
.badge.bg-secondary, .bg-secondary { background:var(--slate-500) !important; }
.badge.bg-danger, .bg-danger { background:#dc2626 !important; }
.badge { padding:4px 10px !important; border-radius:999px !important; font-size:11px !important; letter-spacing:0.5px; }
.table thead th, .table-light { background:var(--slate-50) !important; color:var(--slate-600) !important; font-size:12px !important; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; border-bottom:1px solid var(--slate-200) !important; }
.table tbody tr:hover td { background:var(--slate-50) !important; }
.table td, .table th { padding:12px 16px !important; border-color:var(--slate-100) !important; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active { background:var(--emerald-50) !important; color:var(--emerald-800) !important; border-color:var(--emerald-200) !important; }
.nav-tabs .nav-link { color:var(--slate-500); border:none; border-bottom:2px solid transparent; }
.nav-tabs .nav-link.active { color:var(--emerald-700) !important; background:transparent !important; border-bottom-color:var(--emerald-600) !important; }
.progress { border-radius:999px !important; }
.progress-bar { background:var(--emerald-600) !important; }
.alert-success { background:var(--emerald-50) !important; border-color:var(--emerald-200) !important; color:var(--emerald-800) !important; }
.alert-info { background:var(--sky-50) !important; border-color:#bae6fd !important; color:var(--sky-700) !important; }
.alert-warning { background:var(--amber-50) !important; border-color:#fde68a !important; color:var(--amber-700) !important; }
.alert-danger { background:#fef2f2 !important; border-color:#fecaca !important; color:#991b1b !important; }
.form-check-input:checked { background-color:var(--emerald-600) !important; border-color:var(--emerald-600) !important; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans', system-ui, sans-serif !important; letter-spacing:-0.01em; }
.btn { border-radius:8px !important; font-weight:500; }
.list-group-item { border-color:var(--slate-100); padding:12px 16px; }

/* Progress */
.progress { height:8px; background:var(--slate-100); border-radius:999px; overflow:hidden; }
.progress-bar { height:100%; background:var(--emerald-600); transition:width .3s; }

/* List group */
.list-group { border:1px solid var(--slate-200); border-radius:12px; overflow:hidden; background:#fff; }
.list-item { padding:12px 16px; border-bottom:1px solid var(--slate-100); display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:inherit; }
.list-item:last-child { border-bottom:none; }
.list-item:hover { background:var(--slate-50); }

/* Tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--slate-200); margin-bottom:24px; }
.tab { padding:10px 16px; color:var(--slate-500); text-decoration:none; font-size:14px; font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active { color:var(--emerald-700); border-color:var(--emerald-600); }
.tab:hover:not(.active) { color:var(--slate-700); }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1000; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:24px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.modal-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-close { background:none; border:none; font-size:24px; color:var(--slate-500); cursor:pointer; padding:0 8px; line-height:1; }
.modal-close:hover { color:var(--slate-900); }