:root { --ink:#172522; --muted:#6c7975; --line:#dfe7e2; --paper:#f7faf7; --card:#fff; --mint:#dcefe5; --green:#1d694b; --coral:#ec765f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
button, textarea, input { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1240px; margin:auto; padding:0 38px; }
.topbar { height:84px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--green); font-size:17px; }
nav { display:flex; gap:30px; margin-left:76px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; } nav a.active { color:var(--ink); font-weight:700; }
.avatar { margin-left:auto; border:0; border-radius:50%; background:#f0d7cd; color:#924c40; width:36px; height:36px; font-size:12px; font-weight:700; }
.hero { display:flex; justify-content:space-between; align-items:flex-end; padding:62px 0 42px; } .eyebrow { color:var(--green); text-transform:uppercase; letter-spacing:1.4px; font-size:10px; font-weight:700; margin:0 0 10px; }
h1,h2 { margin:0; letter-spacing:-.6px; } h1 { font-family:Fraunces,serif; font-size:45px; font-weight:600; line-height:1.1; } h2 { font-size:21px; }
.hero-copy { color:var(--muted); margin:12px 0 0; font-size:15px; } .week-chip { border-left:3px solid var(--coral); padding:5px 0 5px 15px; min-width:150px; } .week-chip span,.week-chip strong { display:block; } .week-chip span { color:var(--muted); font-size:11px; margin-bottom:4px; } .week-chip strong { font-size:13px; }
.workspace-grid { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(280px,.8fr); gap:22px; align-items:start; } .primary-column,.secondary-column { display:grid; gap:22px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:25px; box-shadow:0 4px 18px rgba(23,37,34,.025); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:23px; } .section-heading.compact { margin-bottom:8px; } .count-badge { display:inline-grid; place-items:center; font-size:11px; background:var(--mint); color:var(--green); border-radius:20px; min-width:24px; height:22px; vertical-align:3px; margin-left:5px; } .status-dot { color:var(--green); font-size:11px; } .status-dot:before { content:''; display:inline-block; width:7px; height:7px; background:#55ae7e; border-radius:50%; margin-right:6px; }
.import-tabs { display:flex; gap:23px; border-bottom:1px solid var(--line); margin-bottom:19px; } .tab { border:0; background:none; color:var(--muted); padding:0 0 10px; font-size:13px; } .tab.active { color:var(--ink); border-bottom:2px solid var(--green); font-weight:700; }
label { display:block; font-size:12px; font-weight:700; margin-bottom:8px; } textarea { width:100%; min-height:115px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:13px; color:var(--ink); outline:none; line-height:1.5; } textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #dcefe5; }
.input-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; } .input-footer span,.muted { color:var(--muted); font-size:11px; } .primary-btn { border:0; border-radius:8px; padding:11px 15px; color:#fff; background:var(--green); font-size:12px; font-weight:700; } .primary-btn span { font-size:17px; margin-left:8px; }
.text-btn,.icon-btn { border:0; background:none; color:var(--green); font-size:11px; font-weight:700; padding:4px 0; }.icon-btn { font-size:22px; line-height:15px; }.hidden { display:none!important; }.drop-zone { min-height:120px; border:1px dashed #b9c9c1; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--muted); cursor:pointer; gap:5px; }.drop-zone strong { color:var(--ink); font-size:13px; }.upload-icon { color:var(--green); font-size:25px; } #file-input { display:none; }.file-name { font-size:12px; color:var(--green); }
.message { font-size:12px; margin-top:12px; color:var(--green); min-height:15px; }.message.error { color:#ba4a39; }
.assignments-list { display:grid; gap:0; }.assignment { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:15px 0; border-top:1px solid var(--line); }.date-box { background:#f3f6f3; border-radius:8px; width:42px; height:42px; display:grid; place-items:center; line-height:1; text-align:center; }.date-box b { display:block; font-size:16px; }.date-box small { font-size:9px; text-transform:uppercase; color:var(--coral); font-weight:700; }.assignment strong { display:block; font-size:13px; }.assignment small { color:var(--muted); font-size:11px; display:block; margin-top:4px; }.assignment-actions { display:flex; gap:8px; align-items:center; }.pill { color:var(--green); background:var(--mint); border-radius:20px; padding:5px 8px; font-size:10px; font-weight:700; }.calendar-btn { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:7px; font-size:11px; padding:7px 9px; }.empty-state { text-align:center; padding:30px; color:var(--muted); border-top:1px solid var(--line); }.empty-state span { color:var(--green); font-size:27px; }.empty-state p { font-size:12px; }
.focus-card { background:#f0f6f1; border-color:#dcebe0; }.focus-card h2 { margin-bottom:18px; }.focus-task { display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid #d9e7dd; }.task-check { width:16px; height:16px; border:1.5px solid #9eb6a5; border-radius:50%; }.focus-task strong { display:block; font-size:12px; }.focus-task small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.task-time { margin-left:auto; color:var(--green); font-size:11px; font-weight:700; }.outline-btn { width:100%; border:1px solid #b8cdc0; color:var(--green); background:transparent; border-radius:8px; padding:9px; font-size:11px; font-weight:700; margin-top:9px; }.materials-card .muted { margin:0 0 14px; }.materials-list { border-top:1px solid var(--line); }.material-item { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; font-weight:500; margin:0; }.material-item input { accent-color:var(--green); }.material-item small { grid-column:2; color:var(--muted); font-size:10px; margin-top:-6px; }
footer { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; padding:45px 0 28px; }
@media (max-width:760px) { .app-shell { padding:0 18px; }.topbar { height:68px; } nav { margin-left:25px; gap:15px; } nav a:nth-child(2),nav a:nth-child(3) { display:none; }.hero { display:block; padding:40px 0 30px; }.hero h1 { font-size:36px; }.week-chip { margin-top:25px; }.workspace-grid { grid-template-columns:1fr; }.card { padding:20px; }.assignment { grid-template-columns:40px 1fr; }.assignment-actions { grid-column:2; }.text-btn { font-size:10px; } }

/* Quiet, platform-native visual language inspired by Google and Apple. */
:root { --ink:#1d3557; --muted:#53657a; --line:#d9e1ea; --paper:#f8f9fa; --card:#fff; --mint:#e7f0fb; --green:#0a66c2; --coral:#e63946; }
[data-theme="dark"] { --ink:#e8edf4; --muted:#b8c3d0; --line:#34465a; --paper:#101820; --card:#172433; --mint:#213a59; --green:#62a8ef; --coral:#ff7b86; }
body { font-family:'Rubik',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; letter-spacing:0; }
body:before { content:''; display:block; position:fixed; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#0a66c2,#e63946); z-index:10; }
.app-shell { max-width:1180px; padding:0 32px; }
.topbar { height:72px; border-bottom-color:transparent; }
.brand { font-size:18px; letter-spacing:-.2px; }
.brand-mark { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#0a66c2,#e63946); font-size:15px; }
nav { margin-left:64px; gap:28px; } nav a { font-size:13px; } nav a.active { color:#1a73e8; }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }.home-btn { color:#fff; background:#1d3557; text-decoration:none; border-radius:8px; padding:7px 12px; font-size:11px; font-weight:600; }.home-btn:hover { background:var(--coral); }.avatar { margin-left:0; background:#fce8e6; color:#c5221f; }
.static-user { color:var(--ink); font-size:12px; font-weight:600; white-space:nowrap; }
.hero { padding:56px 0 36px; } .eyebrow { color:var(--green); letter-spacing:1.2px; font-size:10px; }
h1 { font-family:inherit; font-size:44px; font-weight:600; letter-spacing:-1.8px; } h2 { color:var(--green); font-size:20px; letter-spacing:-.4px; }
.hero-copy { font-size:15px; color:#5f6368; } .week-chip { border-left-color:#1a73e8; }
.card { border-color:#dadce0; border-radius:12px; box-shadow:0 1px 2px rgba(60,64,67,.08); padding:24px; }
.status-dot { color:#188038; }.status-dot:before { background:#34a853; }
.tab.active { color:#1a73e8; border-bottom-color:#1a73e8; }
textarea { border-color:#dadce0; border-radius:8px; } textarea:focus { border-color:#1a73e8; box-shadow:0 0 0 2px #d2e3fc; }
.primary-btn { background:var(--green); border-radius:8px; padding:10px 17px; } .primary-btn:hover { background:#084f96; }
.text-btn,.icon-btn { color:#1a73e8; } .drop-zone { border-color:#bdc1c6; border-radius:8px; } .upload-icon { color:#1a73e8; }
.count-badge,.pill { background:#e8f0fe; color:#1967d2; }
.date-box { background:#f1f3f4; border-radius:8px; } .date-box small { color:#d93025; }
.calendar-btn,.outline-btn { border-color:#dadce0; border-radius:20px; } .calendar-btn:hover,.outline-btn:hover { background:#f8fafd; border-color:#1a73e8; color:#1967d2; }
.focus-card { background:#f8fafd; border-color:#d2e3fc; } .focus-task { border-top-color:#e8eaed; }
.task-check { border-color:#9aa0a6; } .task-time { color:#1967d2; }
.materials-list { border-top-color:#e8eaed; } .material-item { border-bottom-color:#e8eaed; } .material-item input { accent-color:#1a73e8; }
footer { color:#80868b; }
.theme-toggle { border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); padding:6px 9px; cursor:pointer; font-size:14px; }.theme-toggle:hover { border-color:var(--green); }
[data-theme="dark"] .hero-copy,[data-theme="dark"] .muted,[data-theme="dark"] footer { color:var(--muted); }
[data-theme="dark"] textarea,[data-theme="dark"] .calendar-btn { background:#1e3043; color:var(--ink); }
[data-theme="dark"] .date-box { background:#24384c; }
[data-theme="dark"] .focus-card { background:#152b40; border-color:#315a80; }
.modal { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:rgba(32,33,36,.35); z-index:5; }
.modal-card { position:relative; width:min(100%,390px); padding:32px; border-radius:16px; background:#fff; box-shadow:0 12px 40px rgba(32,33,36,.2); }
.modal-card h2 { margin-bottom:8px; }.modal-copy { color:var(--muted); font-size:12px; line-height:1.5; margin:0 0 23px; }
.account-mode { display:flex; gap:18px; border-bottom:1px solid var(--line); margin-bottom:18px; }.mode-btn { border:0; background:none; color:var(--muted); padding:0 0 9px; font-size:12px; }.mode-btn.active { color:#1a73e8; border-bottom:2px solid #1a73e8; font-weight:600; }
.modal-card label { margin-top:15px; }.modal-card input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px; outline:none; color:var(--ink); }.modal-card input:focus { border-color:#1a73e8; box-shadow:0 0 0 2px #d2e3fc; }.account-submit { width:100%; margin-top:22px; }.modal-close { position:absolute; top:14px; right:17px; border:0; background:transparent; color:var(--muted); font-size:25px; line-height:1; }.modal-close:hover { color:var(--ink); }