#lc-app {
  --bg:#ffffff; --paper:#f6fafd;
  --blue-050:#eef6fc; --blue-100:#e2f0fb; --blue-200:#cbe6f8; --blue-300:#a9d5f0;
  --blue-700:#2c5f8a; --blue-800:#1c4266; --blue-900:#0e2740;
  --ink:#132538; --ink-soft:#4c6478;
  --chalk:#e2a63c; --chalk-dark:#b9791f; --good:#2f8f6b; --line:#d7e7f4;
  font-family:'Inter',system-ui,sans-serif; color:var(--ink);
}
#lc-app *{box-sizing:border-box;}
#lc-app .lc-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; margin:20px 0 40px;
}
#lc-app .lc-card{
  position:relative; border-radius:22px; overflow:hidden;
  background:linear-gradient(168deg,#fff 0%, var(--blue-050) 32%, var(--blue-200) 100%);
  border:1px solid var(--blue-200);
  box-shadow:0 1px 2px rgba(14,39,64,.04), 0 12px 28px -14px rgba(14,39,64,.18);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease;
}
#lc-app .lc-card:hover{ transform:translateY(-3px); }
#lc-app .lc-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--blue-300),var(--blue-700));
}
#lc-app .lc-top{display:flex; justify-content:space-between; gap:10px;}
#lc-app .lc-cat{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-700); background:var(--blue-100); border:1px solid var(--blue-200); padding:4px 9px; border-radius:999px;}
#lc-app .lc-level{font-size:10.5px; font-weight:700; color:#fff; background:var(--blue-800); padding:4px 9px; border-radius:999px;}
#lc-app h3{font-size:21px; color:var(--blue-900); margin:0; font-weight:700;}
#lc-app .lc-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.5; margin:0; min-height:38px;}
#lc-app .lc-meta{font-size:12.5px; color:var(--blue-800); font-weight:600;}
#lc-app .lc-instructor{font-size:12.5px; color:var(--ink-soft);}
#lc-app .lc-instructor a{color:var(--blue-700); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
#lc-app .lc-instructor a:hover{color:var(--blue-900);}
#lc-app .lc-seat-block{background:rgba(255,255,255,.6); border:1px solid var(--blue-200); border-radius:12px; padding:12px 14px 14px;}
#lc-app .lc-seat-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px;}
#lc-app .lc-avail{font-size:13px; font-weight:700; color:var(--blue-800);}
#lc-app .lc-avail.low{color:var(--chalk-dark);}
#lc-app .lc-avail.full{color:#b23a3a;}
#lc-app .lc-taken-text{font-size:11.5px; color:var(--ink-soft);}
#lc-app .lc-seat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:5px;}
#lc-app .lc-seat{aspect-ratio:1/1; border-radius:4px; background:var(--blue-100); border:1px solid var(--blue-300);}
#lc-app .lc-seat.taken{background:var(--blue-800); border-color:var(--blue-800);}
#lc-app .lc-reserve-btn{
  margin-top:auto; background:var(--blue-900); color:#fff; border:none; cursor:pointer;
  font-weight:700; font-size:14px; padding:12px 16px; border-radius:11px;
}
#lc-app .lc-reserve-btn:hover{background:var(--blue-800);}
#lc-app .lc-reserve-btn.added{background:var(--good);}
#lc-app .lc-reserve-btn:disabled{background:#c7d3dc; color:#7c8b98; cursor:not-allowed;}

/* modal for name/email */
#lc-app .lc-modal-overlay{
  position:fixed; inset:0; background:rgba(14,39,64,.4); display:none;
  align-items:center; justify-content:center; z-index:9999; padding:20px;
}
#lc-app .lc-modal-overlay.open{display:flex;}
#lc-app .lc-modal{
  background:#fff; border-radius:16px; padding:26px; max-width:360px; width:100%;
  box-shadow:0 20px 50px -10px rgba(14,39,64,.4);
}
#lc-app .lc-modal h4{margin:0 0 6px; font-size:18px; color:var(--blue-900);}
#lc-app .lc-modal p{margin:0 0 16px; font-size:13px; color:var(--ink-soft);}
#lc-app .lc-modal input{
  width:100%; padding:11px 12px; border:1px solid var(--blue-200); border-radius:9px;
  margin-bottom:10px; font-size:14px; font-family:inherit;
}
#lc-app .lc-modal-actions{display:flex; gap:10px; margin-top:6px;}
#lc-app .lc-modal-actions button{flex:1; padding:11px; border-radius:9px; border:none; font-weight:700; cursor:pointer;}
#lc-app .lc-modal-cancel{background:var(--blue-100); color:var(--blue-800);}
#lc-app .lc-modal-submit{background:var(--blue-900); color:#fff;}
#lc-app .lc-modal-error{color:#b23a3a; font-size:12.5px; margin:-4px 0 10px; display:none;}

/* toast */
#lc-app .lc-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--blue-900); color:#fff; padding:12px 20px; border-radius:999px;
  font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:all .3s ease; z-index:9999;
}
#lc-app .lc-toast.show{opacity:1; transform:translate(-50%,0);}