:root { --saeng-primary:#003366; --saeng-white:#fff; --saeng-gray:#d8dee9; --saeng-bg:#f4f7fb; --saeng-text:#233044; }
.saeng-dashboard { max-width:1100px; margin:24px auto; padding:0 16px; color:var(--saeng-text); font-family:Segoe UI, Arial, sans-serif; }
.saeng-header { background:linear-gradient(135deg,#003366,#005aa3); color:#fff; padding:28px; border-radius:14px; margin-bottom:20px; }
.saeng-header h1 { margin:0 0 8px; }
.saeng-card, .saeng-course { background:#fff; border:1px solid #e7ebf0; border-radius:12px; padding:20px; margin-bottom:18px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.saeng-progress-bar { height:12px; background:var(--saeng-gray); border-radius:999px; overflow:hidden; margin:12px 0; }
.saeng-progress-fill { height:100%; background:var(--saeng-primary); width:0; transition:width .6s ease; }
.saeng-btn, .saeng-video-item { background:var(--saeng-primary); color:#fff; padding:10px 16px; border:0; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-block; margin:6px 6px 6px 0; }
.saeng-btn:hover, .saeng-video-item:hover { opacity:.9; color:#fff; }
.saeng-btn-secondary { background:#455a64; }
.saeng-video-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.saeng-video-wrap { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:12px; background:#000; }
.saeng-video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.saeng-error { border-left:4px solid #b00020; }
@media (max-width:768px) { .saeng-header { padding:20px; } .saeng-card, .saeng-course { padding:16px; } }