/* ============================================================
   AI Director LMS — theme (poster palette)
   Director Green #B8F135 on near-black · Kanit
   ============================================================ */
:root{
  --bg:#0A0A0A;
  --panel:#151515;
  --field:#1C1C1C;
  --line:rgba(255,255,255,.09);
  --green:#B8F135;
  --green-bright:#C9F95C;
  --green-dim:rgba(184,241,53,.12);
  --ink:#F4F4F4;
  --dim:#8C8C8C;
  --danger:#FF6B6B;
  --radius:14px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-bright)}

/* ---------- App topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 24px;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.85);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10;
}
.brand-logo{height:34px;display:block}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{color:var(--dim);font-size:15px}
.topnav a:hover{color:var(--ink)}
.logout-form{margin:0}
.link-btn{background:none;border:0;color:var(--dim);font:inherit;font-size:15px;cursor:pointer;padding:0}
.link-btn:hover{color:var(--ink)}

/* ---------- Main / layouts ---------- */
.main{width:100%}
.layout-app .main{max-width:var(--maxw);margin:0 auto;padding:40px 24px 80px}
.layout-auth .main{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  background:
    radial-gradient(60% 45% at 78% 8%, rgba(184,241,53,.10), transparent 60%),
    radial-gradient(50% 40% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    var(--bg);
}

/* ---------- Auth card ---------- */
.auth-brand{margin-bottom:26px}
.auth-brand img{height:40px;display:block}
.auth-card{
  width:100%;max-width:400px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
}
.auth-title{font-weight:300;font-size:26px;letter-spacing:.2px;margin:0 0 6px}
.auth-sub{color:var(--dim);font-size:14.5px;margin:0 0 22px}
.auth-links{display:flex;justify-content:space-between;margin-top:18px;font-size:14px}
.auth-alt{color:var(--dim);font-size:14px;margin-top:18px;text-align:center}

/* ---------- Fields ---------- */
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:13.5px;color:var(--dim);margin-bottom:7px}
input[type=text],input[type=email],input[type=tel],input[type=password]{
  width:100%;padding:12px 14px;background:var(--field);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:15px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-dim)}
input::placeholder{color:#5a5a5a}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;width:100%;padding:12px 18px;border:0;border-radius:10px;
  font:inherit;font-weight:500;font-size:15.5px;cursor:pointer;text-align:center;
  transition:background .15s,transform .05s;
}
.btn-green{background:var(--green);color:#0A0A0A}
.btn-green:hover{background:var(--green-bright)}
.btn-green:active{transform:translateY(1px)}

/* ---------- Alerts ---------- */
.alert{border-radius:10px;padding:11px 14px;font-size:14px;margin-bottom:14px;border:1px solid transparent}
.alert-error{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.35);color:#ffb3b3}
.alert-ok{background:var(--green-dim);border-color:rgba(184,241,53,.4);color:#dff7a8}
.alert-info{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--ink)}
.flash-top{max-width:400px;width:100%;margin-left:auto;margin-right:auto}
.layout-app .flash-top{max-width:none}

/* ---------- App pages ---------- */
.page{max-width:820px}
.page-title{font-weight:300;font-size:30px;margin:0 0 8px}
.page-lead{color:var(--dim);margin:0 0 30px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:22px}
.card-title{font-weight:500;font-size:17px;margin:0 0 18px}
.form-narrow{max-width:420px}
.profile{margin:0;display:grid;gap:14px}
.profile div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.profile dt{color:var(--dim);font-size:14px;margin:0}
.profile dd{margin:0;font-size:15px}
.dim{color:var(--dim)}
.card-empty{text-align:center;padding:48px 26px}
.card-empty .rec{color:var(--green);font-size:12px;letter-spacing:2px;margin-bottom:14px}
.card-empty .card-title{font-weight:300;font-size:20px}

/* ---------- Footer ---------- */
.site-foot{text-align:center;color:#5a5a5a;font-size:12.5px;padding:26px 20px 34px;border-top:1px solid var(--line)}
.layout-auth .site-foot{border-top:0}
.rec-dot{color:var(--green);font-size:9px;vertical-align:middle;margin-right:4px}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .topbar{padding:14px 16px;gap:14px}
  .topnav{gap:16px}
  .brand-logo{height:28px}
  .auth-card{padding:28px 22px}
  .page-title{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ============================================================
   P2b — dashboard, courses, player
   ============================================================ */
.section-h{font-weight:400;font-size:15px;color:var(--dim);letter-spacing:.5px;margin:34px 0 16px}
.back-link{display:inline-block;color:var(--dim);font-size:14px;margin-bottom:16px}
.back-link:hover{color:var(--ink)}

/* continue watching */
.continue-card{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(120deg, rgba(184,241,53,.10), var(--panel) 60%);
  border:1px solid rgba(184,241,53,.25);border-radius:var(--radius);padding:22px 24px;margin-bottom:8px}
.continue-card:hover{border-color:rgba(184,241,53,.5)}
.continue-label{color:var(--green);font-size:12px;letter-spacing:1.5px}
.continue-title{color:var(--ink);font-size:19px;font-weight:400;margin-top:6px}
.continue-course{color:var(--dim);font-size:14px;margin-top:3px}
.continue-play{flex:none;width:46px;height:46px;border-radius:50%;background:var(--green);color:#0A0A0A;
  display:flex;align-items:center;justify-content:center;font-size:16px;padding-left:3px}

/* course grid */
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.course-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .1s}
.course-card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-2px)}
.course-cover{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#1a1a1a}
.course-cover-blank{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1c1c1c,#111)}
.course-cover-blank span{color:var(--green);font-weight:600;font-size:30px;letter-spacing:1px;opacity:.5}
.course-body{padding:16px 18px}
.course-title{font-size:16px;color:var(--ink)}
.course-sub{font-size:13px;color:var(--dim);margin-top:3px}

/* progress bar */
.progress-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.progress-bar{flex:1;height:6px;background:var(--field);border-radius:99px;overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--green);border-radius:99px}
.progress-bar.big{height:8px}
.progress-pct{font-size:13px;color:var(--dim);white-space:nowrap}

/* course detail */
.course-desc{color:var(--dim);line-height:1.7;margin:0 0 24px;max-width:720px}
.course-progress-head{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px;margin-bottom:26px;flex-wrap:wrap}
.course-progress-head .progress-bar{min-width:180px}
.notice-lock{color:var(--dim);font-size:14px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:24px}

/* lesson list */
.lesson-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.module-h{background:rgba(255,255,255,.03);color:var(--dim);font-size:13px;letter-spacing:.5px;padding:12px 20px;border-bottom:1px solid var(--line)}
.lesson-row{display:flex;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line);color:var(--ink);transition:background .12s}
.lesson-row:last-child{border-bottom:0}
a.lesson-row:hover{background:rgba(255,255,255,.04)}
.lesson-row.locked{color:var(--dim);cursor:default}
.lesson-idx{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim)}
.lesson-idx.done{background:var(--green);border-color:var(--green);color:#0A0A0A}
.lesson-name{flex:1;font-size:15px}
.tag-preview{display:inline-block;font-size:11px;color:var(--green);border:1px solid rgba(184,241,53,.4);border-radius:99px;padding:1px 8px;margin-left:8px;vertical-align:middle}
.lesson-state{flex:none;font-size:13px;color:var(--dim)}

/* player */
.player-wrap{max-width:960px;margin:0 auto}
.player-shell{background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.player-shell video{display:block;width:100%;height:auto;background:#000}
.lesson-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:22px 0 14px;flex-wrap:wrap}
.lesson-head h1{font-weight:300;font-size:24px;margin:0}
.lesson-actions{display:flex;align-items:center;gap:12px}
.badge-done{color:var(--green);font-size:14px;border:1px solid rgba(184,241,53,.4);border-radius:999px;padding:4px 12px}
.btn-inline{width:auto;padding:9px 16px;font-size:14px}
.lock-box{max-width:600px;margin:0 auto;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:44px 26px}
.lock-tag{color:var(--green);font-size:12px;letter-spacing:2px;margin-bottom:12px}
.lesson-desc{color:var(--dim);margin-top:16px;line-height:1.7}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.btn-nav{color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:14px;transition:border-color .15s}
.btn-nav:hover{border-color:rgba(255,255,255,.25)}
.btn-nav.next{color:var(--green)}

@media (max-width:520px){
  .course-progress-head{gap:12px}
  .lesson-head h1{font-size:20px}
}