styles.css

:root{--bg:#0b0f16;--surface:#141b26;--surface-2:#1a2331;--text:#f4f7fb;--muted:#9aa7ba;--line:rgba(255,255,255,.09);--accent:#75d6bc;--accent-2:#a5a6ff;--danger:#ff7788;--shadow:0 12px 30px rgba(0,0,0,.2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;user-select:none}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.app-shell{max-width:1280px;min-height:100vh;margin:auto;padding:20px 28px 96px}.topbar{height:42px;display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:18px}.brand-mark{background:var(--accent);color:#08221b;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:16px}.header-actions{display:flex;gap:10px}.icon-button,.desk-button,.secondary-button,.small-button{background:var(--surface);border:1px solid var(--line);border-radius:12px;min-height:40px;padding:0 13px}.icon-button{font-size:21px;width:42px;padding:0}.desk-button{font-size:13px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 0 18px}.eyebrow,.card-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.page-head h1{font-size:32px;line-height:1;margin:5px 0 0}.clock-panel{min-height:143px;background:linear-gradient(120deg,#1b2a32,#151d2c 67%);border:1px solid var(--line);border-radius:23px;padding:24px 29px;margin-bottom:16px;position:relative;overflow:hidden}.clock-panel:after{content:"";position:absolute;width:210px;height:210px;border:25px solid rgba(117,214,188,.08);border-radius:50%;right:-49px;top:-78px}.greeting{color:var(--muted);font-size:14px;position:relative;z-index:1}.clock{font-size:56px;line-height:1.1;font-weight:730;letter-spacing:-.055em;position:relative;z-index:1}.date{font-size:16px;color:#d3dce8;position:relative;z-index:1}.dashboard-grid{display:grid;grid-template-columns:1.05fr 1.45fr 1fr;gap:16px;align-items:start}.card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:19px;box-shadow:var(--shadow)}.card h2{font-size:20px;margin:4px 0 2px}.weather{min-height:150px}.weather-main{display:flex;align-items:center;gap:14px;margin-top:10px}.weather-icon{font-size:41px}.temperature{font-size:38px;font-weight:720;letter-spacing:-.05em}.weather small,.subtle{color:var(--muted);font-size:13px}.todo-card{grid-row:span 2;min-height:328px}.card-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.counter{color:var(--accent);font-size:13px;font-weight:700}.add-task{display:flex;gap:8px;margin:15px 0}.add-task input{min-width:0;flex:1}.add-button{background:var(--accent);color:#08221b;border-radius:11px;min-height:43px;padding:0 14px;font-weight:750}.task-list{display:flex;flex-direction:column;gap:5px}.task{display:flex;align-items:center;gap:9px;padding:8px 4px;border-radius:10px;transition:.18s}.task.done{opacity:.5;order:2}.task.done .task-name{text-decoration:line-through}.check{width:24px;height:24px;flex:0 0 24px;border:1.5px solid #657186;background:transparent;border-radius:8px;padding:0}.done .check{background:var(--accent);border-color:var(--accent);color:#08221b}.task-details{min-width:0;flex:1}.task-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-meta{display:flex;gap:7px;color:var(--muted);font-size:11px;margin-top:2px}.priority{font-weight:700}.priority.high{color:#ff8b97}.priority.medium{color:#f7ca6a}.priority.low{color:#aab6c8}.task-actions{display:flex;gap:3px;opacity:.75}.round-action{width:30px;height:30px;background:transparent;color:var(--muted);font-size:16px;border-radius:8px}.class-card{min-height:160px}.class-time{font-size:16px;color:var(--accent);font-weight:650}.movie-card,.game-card{min-height:150px}.poster{height:50px;width:39px;border-radius:8px;background:linear-gradient(150deg,#d2b579,#493c42);display:grid;place-items:center;font-size:18px;float:right;margin-left:12px}.rating{color:#f6cf72;font-weight:700;margin-top:11px}.progress-track{height:7px;background:#0d131d;border-radius:99px;margin-top:13px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);border-radius:inherit}.edit-link{background:none;color:var(--accent);font-size:13px;padding:7px 0}.list-card{margin-top:16px}.class-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.class-item{background:var(--surface-2);border-radius:12px;padding:11px;font-size:13px}.empty{color:var(--muted);padding:15px 0;font-size:14px}.bottom-nav{position:fixed;z-index:5;left:50%;bottom:15px;transform:translateX(-50%);background:rgba(20,27,38,.94);border:1px solid var(--line);border-radius:17px;padding:6px;display:flex;gap:3px;box-shadow:0 10px 30px rgba(0,0,0,.3);backdrop-filter:blur(10px)}.nav-item{min-width:82px;height:50px;background:transparent;border-radius:12px;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.nav-item span{font-size:18px;line-height:14px}.nav-item.active{background:var(--surface-2);color:var(--text)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12px}input,textarea,select{width:100%;border:1px solid var(--line);border-radius:10px;background:#0e141e;color:var(--text);padding:11px 12px;min-height:41px}textarea{resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.primary-button{min-height:42px;padding:0 17px;background:var(--accent);border-radius:11px;color:#08221b;font-weight:750}.settings-group{margin:0 0 16px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}.settings-row:last-child{border-bottom:0}.settings-row strong{font-size:14px}.settings-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.switch{appearance:none;width:46px;height:27px;background:#3a4656;border-radius:99px;position:relative;cursor:pointer;flex:0 0 auto}.switch:checked{background:var(--accent)}.switch:after{content:"";position:absolute;width:21px;height:21px;background:white;border-radius:50%;top:3px;left:3px;transition:.18s}.switch:checked:after{left:22px}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:9;display:grid;place-items:center;padding:20px}.modal{width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.4)}.modal h2{margin:0 0 16px;font-size:22px}body.light{--bg:#edf1f6;--surface:#fff;--surface-2:#eef3f7;--text:#14202e;--muted:#627084;--line:rgba(20,32,46,.12);--shadow:0 9px 24px rgba(30,48,65,.08)}body.light input,body.light textarea,body.light select{background:#f7f9fc}body.night{--bg:#020408;--surface:#070a10;--surface-2:#0b1019;--text:#d9e1ee;--muted:#687386;--line:rgba(255,255,255,.05)}body.night .clock-panel{background:#05070c}body.night .dashboard-grid{grid-template-columns:1fr}body.night .card:not(.clock-panel),body.night .topbar{display:none}body.night .clock-panel{min-height:calc(100vh - 145px);display:flex;flex-direction:column;justify-content:center;text-align:center}body.night .clock{font-size:min(18vw,156px)}.desk-mode .topbar,.desk-mode .bottom-nav{display:none}.desk-mode .app-shell{padding-top:20px;padding-bottom:20px}.desk-mode .dashboard-grid{grid-template-columns:1fr 1.25fr 1fr}.desk-mode .todo-card{grid-row:span 2}@media(max-width:850px){.app-shell{padding:16px 16px 90px}.dashboard-grid{grid-template-columns:1fr 1fr}.todo-card{grid-row:auto}.class-list{grid-template-columns:1fr 1fr}.nav-item{min-width:61px}.desk-mode .dashboard-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px),(orientation:portrait){.clock{font-size:47px}.dashboard-grid,.desk-mode .dashboard-grid{grid-template-columns:1fr}.class-list{grid-template-columns:1fr}.bottom-nav{width:calc(100% - 20px);justify-content:space-between;bottom:8px}.nav-item{min-width:0;flex:1}.topbar{margin-bottom:10px}.form-grid{grid-template-columns:1fr}}
/* Ensure the initially hidden dialog layer never intercepts touch events. */
.modal-backdrop[hidden]{display:none}
.weather-details{display:flex;gap:8px;margin:4px 0 3px;color:var(--muted);font-size:12px}.weather-details span+span{padding-left:8px;border-left:1px solid var(--line)}.weather-loading .weather-icon{opacity:.58}.weather-loading small{color:var(--accent)}
.desk-exit{display:none;position:fixed;z-index:8;top:20px;right:28px;min-height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text);box-shadow:var(--shadow)}body.desk-mode .desk-exit{display:block}@media(max-width:850px){.desk-exit{top:16px;right:16px}}