/* ============================ "My subjects" ============================
   Hộp khai môn + chọn môn (my-subjects.js). Dùng ở app.html và account.html — trang Account không
   nạp app.css nên file này tự đủ: chỉ dựa vào token trong shared.css. */

.ms-backdrop{
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(20,30,26,.42);
}
.ms-card{
  width:min(520px, 100%); max-height:min(88vh, 760px); display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 20px 16px;
}
.ms-card h2{margin:0 0 6px; font-size:1.08rem; font-family:var(--font-serif);}
.ms-sub{margin:0 0 12px; font-size:.8rem; color:var(--ink-soft); line-height:1.5;}
.ms-body{flex:1; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px;}
.ms-err{min-height:1.2em; margin:8px 0 0; font-size:.76rem; color:var(--danger);}
.ms-foot{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px;}

.ms-list{display:flex; flex-direction:column; gap:4px;}
.ms-row{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface);
}
.ms-row.is-on{border-color:var(--accent); background:var(--accent-soft);}
.ms-check{flex:1; min-width:0; display:flex; align-items:center; gap:9px; font-size:.84rem; cursor:pointer;}
.ms-check input{flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent);}
.ms-check span{min-width:0; overflow-wrap:anywhere;}
.ms-seg{flex:0 0 auto; display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden;}
.ms-seg button{
  padding:4px 11px; border:0; background:var(--surface); color:var(--ink-soft); font:inherit; font-size:.74rem; cursor:pointer;
}
.ms-seg button + button{border-left:1px solid var(--line-strong);}
.ms-seg button.is-on{background:var(--accent); color:#fff; font-weight:600;}
.ms-fixed{flex:0 0 auto; font-size:.7rem; color:var(--ink-faint);}

.ms-btn{
  padding:8px 14px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface);
  color:var(--ink); font:inherit; font-size:.82rem; cursor:pointer;
}
.ms-btn:hover{border-color:var(--ink-faint);}
.ms-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.ms-primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.ms-btn:disabled{opacity:.6; cursor:default;}

.ms-picks{display:flex; flex-direction:column; gap:6px;}
.ms-pickbtn{
  display:flex; justify-content:space-between; gap:10px; width:100%; text-align:left; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font:inherit; font-size:.86rem; cursor:pointer;
}
.ms-pickbtn:hover{border-color:var(--accent); background:var(--accent-soft);}

.ms-chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0; list-style:none;}
.ms-chips li{padding:5px 10px; border-radius:999px; background:var(--surface-3); font-size:.8rem;}