/* College Assignment Tracker - styles.css */
:root{
  --bg:#0b0b0d;
  --card:#141419;
  --muted:#8b8ca1;
  --text:#e9e9f1;
  --acc:#6ae3ff;
  --acc2:#9cff6a;
  --danger:#ff6a6a;
  --warn:#ffd46a;
  --ok:#77e68c;
  --border:#2a2a35;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  background: radial-gradient(1200px 800px at 70% -20%, #18203a55, transparent), var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{max-width:980px;margin:0 auto;padding:16px 16px 80px}

.appbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background:#0b0b0de6;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:10px 12px
}
.logo{width:34px;height:34px;border-radius:10px;background:#171725 url('icon-192.png') center/cover no-repeat;border:1px solid var(--border)}
.title{font-weight:800;letter-spacing:.2px}
.sub{color:var(--muted);font-weight:500;font-size:.9rem}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);cursor:pointer}
.tab.active{outline:2px solid var(--acc)}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}

.grid{display:grid;gap:10px}
.grid.cols-2{grid-template-columns:1fr 1fr}
@media (max-width:780px){.grid.cols-2{grid-template-columns:1fr}}

label{display:block;font-size:.9rem;color:var(--muted);margin:6px 0 4px}
input,select,textarea,button{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:#111114;color:var(--text);outline:none
}
input:focus,select:focus,textarea:focus{border-color:#3b3b55;box-shadow:0 0 0 3px #3b3b5525}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:linear-gradient(180deg,#1b1b22,#101015);color:var(--text);cursor:pointer
}
.btn.primary{border-color:#2e4a58;background:linear-gradient(180deg,#16303a,#0d171b)}
.btn.warn{border-color:#4a3f1c;background:linear-gradient(180deg,#3a2f12,#16130a)}
.btn.danger{border-color:#5a2e2e;background:linear-gradient(180deg,#3a1212,#160a0a)}

.kicker{font-size:.9rem;color:var(--muted);margin:8px 0}
.section-title{font-weight:800;margin:10px 0 6px}

.course-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#0f0f13}
.swatch{width:10px;height:10px;border-radius:50%}

.list{display:flex;flex-direction:column;gap:8px}
.item{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px;border:1px solid var(--border);border-radius:12px;background:#0f0f13
}
.item.done{opacity:.6}
.item .badge{font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}
.item .due{font-feature-settings:'tnum' 1; font-variant-numeric: tabular-nums; color:var(--muted)}

.footer{
  position:fixed;left:0;right:0;bottom:0;background:#0c0c0f;border-top:1px solid var(--border);
  display:flex;gap:8px;padding:10px 12px;backdrop-filter:saturate(140%) blur(10px)
}

.empty{color:var(--muted);text-align:center;padding:30px 10px;border:1px dashed var(--border);border-radius:12px}
hr{border:none;border-top:1px solid var(--border);margin:18px 0}
.small{font-size:.85rem;color:var(--muted)}
.hidden{display:none !important}