:root{
  --bg:#f5f4f1; --card:#ffffff; --text:#2b2a28; --sub:#75726c;
  --accent:#c9622f; --accent2:#3f6b52; --border:#e7e3dc;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#1c1b19; --card:#26241f; --text:#efece6; --sub:#a39d92; --border:#3a372f; }
}
html{scroll-padding-top: env(safe-area-inset-top,0px); height:100%;}
*{box-sizing:border-box;}
body{margin:0; height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
.hidden{display:none !important;}
#app{display:flex; flex-direction:column; min-height:100%;}
header{padding:18px 20px 10px; display:flex; justify-content:space-between; align-items:center;}
header h1{margin:0; font-size:22px; font-weight:700;}
main{flex:1; overflow-y:auto; padding:12px 16px 90px; max-width:80vw; width:100%; margin:0 auto;}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px;}
.card h2{margin:0 0 10px; font-size:15px; color:var(--sub); text-transform:uppercase; letter-spacing:.04em;}
input[type=text], input[type=tel], input[type=date], input[type=url], input[type=password]{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:15px; margin-bottom:8px;
}
.row{display:flex; gap:8px;}
.row input{flex:1;}
button{background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer;}
button.secondary{background:transparent; color:var(--accent); border:1px solid var(--accent); padding:8px 10px;}
button.ghost{background:transparent; color:var(--sub); padding:4px 8px; font-weight:400;}
ul{list-style:none; margin:0; padding:0;}
li{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border);}
li:last-child{border-bottom:none;}
li.done span{text-decoration:line-through; color:var(--sub);}
li span{flex:1; font-size:15px;}
li small{color:var(--sub); font-size:12px;}
.checkbox{width:20px;height:20px;border-radius:6px;border:2px solid var(--accent2);flex-shrink:0;cursor:pointer;}
.checkbox.checked{background:var(--accent2);}
nav{position:fixed; bottom:0; left:0; right:0; background:var(--card); border-top:1px solid var(--border); display:flex; padding-bottom: env(safe-area-inset-bottom,0px);}
nav button{flex:1; background:none; color:var(--sub); border-radius:0; padding:12px 0 8px; font-size:11px; display:flex; flex-direction:column; align-items:center; gap:2px;}
nav button.active{color:var(--accent);}
nav button .ic{font-size:20px;}
.empty{color:var(--sub); font-size:14px; padding:8px 0;}
.drive-link{display:flex; align-items:center; gap:10px; padding:14px; background:var(--bg); border-radius:12px; text-decoration:none; color:var(--text); font-weight:600;}
.small-btn-row{display:flex; gap:8px; margin-top:6px;}
.login-screen{height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; max-width:80vw; width:100%; text-align:center;}
.login-card h1{margin:0 0 6px;}
.qty{display:flex; align-items:center; gap:6px; flex:none;}
.qty button{background:var(--bg); color:var(--text); border:1px solid var(--border); width:26px; height:26px; padding:0; border-radius:6px; font-size:16px; line-height:1;}
.qty span{min-width:16px; text-align:center; font-size:14px;}
.cal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.cal-header button{background:none; color:var(--accent); font-size:20px; padding:4px 10px;}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; color:var(--sub); font-size:12px; margin-bottom:4px; min-height: 2rem; background: #ededef; justify-content: center; align-content: center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-cell{aspect-ratio:2/1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:8px; font-size:13px; cursor:pointer; position:relative;}
.cal-cell.empty{cursor:default;}
.cal-cell.today{border:1px solid var(--accent);}
.cal-cell.selected{background:var(--accent); color:#fff;}
.cal-cell .dot{width:5px;height:5px;border-radius:50%;background:var(--accent2); margin-top:2px;}
.cal-cell.selected .dot{background:#fff;}
.login-card p{color:var(--sub); font-size:14px; margin-bottom:16px;}
.error{color:#c0392b; font-size:13px; min-height:18px;}
#course-input{margin-bottom: 0;}
@media only screen and (max-width: 767px){
  main{max-width:90vw; overflow-x: hidden;}
  .cal-cell{aspect-ratio:1;}
  .row{flex-wrap: wrap;}
  #course-input { flex-basis: 100%; }
  body{
    overflow: hidden;
    max-width: 100vw;
  }
}