* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:#f6f7fb; color:#222; }
.container { max-width: 960px; padding: 16px; margin: 0 auto; }
.site-header { background:#101827; color:white; }
.site-header .brand { color:white; text-decoration:none; font-weight:700; font-size:18px; margin-right:16px; }
.site-header nav a { color:#d7e2ff; text-decoration:none; margin-right:12px; }
.site-header nav a:hover { text-decoration: underline; }
.site-footer { padding: 24px 0; text-align:center; color:#666; }

h1 { font-size: 28px; margin: 12px 0 8px; }
h2 { font-size: 22px; margin-top: 24px; }
h3 { font-size: 18px; margin: 10px 0; }
p { line-height: 1.5; }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { background:white; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.row { display:flex; align-items:center; justify-content: space-between; gap: 8px; }
.list { list-style: none; padding: 0; margin: 0; }
.list .row { background:white; padding: 10px 12px; border-radius: 10px; margin: 6px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }

.btn { background:#4f46e5; color:white; border:none; border-radius: 10px; padding: 8px 14px; text-decoration:none; cursor:pointer; display:inline-block; }
.btn:hover { filter: brightness(0.95); }
.btn.small { padding: 6px 10px; font-size: 14px; }
.pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size: 12px; }

.form { background:white; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); max-width: 560px; }
.form label { display:block; margin: 8px 0; font-weight:600; }
.form input[type=text], .form input[type=password], .form input[type=email], .form input[type=number], .form input[type=url], .form textarea, .form select {
    width:100%; padding:10px; border:1px solid #ddd; border-radius:8px; font: inherit;
}
.form .checkbox { font-weight: normal; }

.flash { border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.flash.success { background:#ecfdf5; color:#065f46; }
.flash.error { background:#fef2f2; color:#991b1b; }
.flash.info { background:#eff6ff; color:#1e40af; }

.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; background:black; }
.video-wrapper iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-player { width: 100%; max-height: 70vh; border-radius: 12px; }

.module { margin: 12px 0; }
.certificate { background:white; border-radius:16px; padding:24px; text-align:center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); margin-top: 18px; }

/* === Alice additions (2025-10-24) — appearance-only, calm === */
:root{
  --primary:#4f46e5;
  --bg:#f6f7fb;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
}

/* Light card borders and consistent radius */
.card{ border:1px solid var(--border); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.05); }

/* Muted helper */
.muted{ color:var(--muted); font-size:14px; }

/* Ghost button variant for quiet CTAs */
.btn.ghost{ background:transparent; color:var(--primary); border:1px solid #c7c9ff; }
.btn.small{ padding:6px 10px; font-size:14px; } /* keep small btn consistent */

/* Progress bar pattern (use: <div class="progress"><span style="width:58%"></span></div>) */
.progress{ height:8px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.progress>span{ display:block; height:100%; background:linear-gradient(90deg,var(--primary),#7c3aed); }