:root{--bg:#f5f7f8;--panel:#fff;--panel2:#f8fafb;--ink:#17212b;--muted:#6c7785;--line:#e4e9ed;--accent:#367e83;--accent-soft:#e7f2f2;--danger:#c94b4b;--warn:#b77a1c;--success:#2f8a61;--shadow:0 10px 35px rgba(25,45,55,.07);--radius:18px;--sidebar:264px;--sidebar-collapsed:74px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--sidebar);background:rgba(255,255,255,.96);border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;transition:width .22s ease,transform .22s ease;overflow:hidden}.brand{height:54px;display:flex;align-items:center;gap:11px;padding:0 6px}.brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#367e83,#66aeb1);color:white;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:-.4px;box-shadow:0 7px 18px rgba(54,126,131,.25)}img.brand-mark{flex:none;background:none;border-radius:7px;object-fit:cover}.brand-text{display:flex;flex-direction:column;min-width:0;flex:1}.brand-text b{font-size:16px;white-space:nowrap}.icon-btn,.more-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);width:38px;height:38px;border-radius:12px;display:grid;place-items:center}.workspace{display:flex;align-items:center;gap:9px;padding:12px 8px;margin:12px 0;background:var(--panel2);border:1px solid var(--line);border-radius:15px}.avatar{width:30px;height:30px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800}.workspace div{min-width:0;flex:1}.workspace b,.workspace small{display:block;white-space:nowrap}.workspace small{font-size:11px;color:var(--muted)}.more-btn{border:0;background:transparent;width:28px}.nav{display:flex;flex-direction:column;gap:4px}.nav-item{position:relative;border:0;background:transparent;color:var(--muted);height:44px;border-radius:13px;display:flex;align-items:center;gap:12px;padding:0 12px;text-align:left;width:100%}.nav-item span{width:22px;text-align:center;font-size:18px}.nav-item b{font-weight:650;flex:1}.nav-item:hover{background:var(--panel2);color:var(--ink)}.nav-item.active{background:var(--accent-soft);color:var(--accent)}.nav-item em{font-style:normal;font-size:11px;background:#f2dddd;color:var(--danger);border-radius:99px;padding:3px 7px}.sidebar-bottom{margin-top:auto}.save-indicator{display:flex;align-items:center;gap:7px;padding:12px 8px;color:var(--muted);font-size:11px}.save-indicator i{width:7px;height:7px;border-radius:50%;background:#52a879}.main{margin-left:var(--sidebar);min-height:100vh;transition:margin .22s ease}.topbar{position:sticky;top:0;z-index:20;height:82px;padding:0 30px;background:rgba(245,247,248,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(228,233,237,.75);display:flex;align-items:center;justify-content:space-between}.top-left{display:flex;align-items:center;gap:13px}.eyebrow{display:block;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}.topbar h1{margin:1px 0 0;font-size:25px;letter-spacing:-.03em}.top-actions{display:flex;align-items:center;gap:9px}.search-btn{height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:0 10px 0 14px;color:var(--muted);display:flex;align-items:center;gap:8px}.search-btn kbd{border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:10px;background:var(--panel2)}.primary{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:11px 15px;font-weight:750;box-shadow:0 7px 17px rgba(54,126,131,.16)}.primary.small{padding:10px 13px}.content{max-width:1450px;margin:0 auto;padding:30px}.view{display:none}.view.active{display:block}.mobile-menu{display:none}.grid{display:grid;gap:18px}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.stat .label{color:var(--muted);font-size:12px;font-weight:700}.stat .num{font-size:30px;font-weight:800;letter-spacing:-.04em;margin-top:7px}.stat .sub{font-size:12px;color:var(--muted);margin-top:5px}.dashboard-grid{grid-template-columns:1.35fr .85fr;margin-top:18px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 20px;border-bottom:1px solid var(--line)}.card-head h2{font-size:16px;margin:0}.card-body{padding:18px 20px}.hero{background:linear-gradient(135deg,#e9f4f4,#f8fbfb 60%,#fff);border:1px solid #dceeee;border-radius:22px;padding:25px;display:flex;justify-content:space-between;gap:20px;align-items:center}.hero h2{font-size:29px;margin:4px 0 7px;letter-spacing:-.04em}.hero p{margin:0;color:var(--muted);max-width:650px}.hero-date{font-weight:750;color:var(--accent);white-space:nowrap}.section-gap{margin-top:18px}.mini-list{display:flex;flex-direction:column}.list-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}.row-main{min-width:0;flex:1}.row-main b,.row-main span{display:block}.row-main b{font-size:13px}.row-main span{font-size:11px;color:var(--muted);margin-top:3px}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:750;background:var(--panel2);color:var(--muted);white-space:nowrap}.pill.danger{background:#fbeaea;color:var(--danger)}.pill.warn{background:#fff4dc;color:var(--warn)}.pill.success{background:#e6f4ec;color:var(--success)}.empty{padding:30px 15px;text-align:center;color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}.toolbar .grow{flex:1}.input,.select,.textarea{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:10px 12px;outline:0}.input:focus,.select:focus,.textarea:focus{border-color:#8dbabd;box-shadow:0 0 0 3px var(--accent-soft)}.toolbar .input{min-width:220px}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);padding:3px;border-radius:11px}.seg button{border:0;background:transparent;border-radius:8px;padding:8px 11px;color:var(--muted);font-weight:650}.seg button.active{background:var(--accent-soft);color:var(--accent)}.calendar-wrap{overflow:auto}.calendar-head{display:grid;grid-template-columns:repeat(7,1fr);min-width:750px;border-bottom:1px solid var(--line)}.dow{padding:11px;text-align:center;color:var(--muted);font-size:11px;font-weight:750}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);min-width:750px}.day{min-height:125px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px;cursor:pointer}.day:nth-child(7n){border-right:0}.day:hover{background:var(--panel2)}.day.muted{background:var(--panel2);color:#a0a9b2}.day.today .day-num{background:var(--accent);color:white}.day-num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:750;margin-bottom:5px}.event{border:0;border-left:3px solid var(--accent);background:var(--accent-soft);padding:5px 6px;border-radius:7px;margin:4px 0;font-size:10px;text-align:left;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}.agenda{display:flex;flex-direction:column;gap:9px}.agenda-day{padding:14px 16px}.agenda-date{font-size:12px;font-weight:800;color:var(--accent);margin-bottom:8px}.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.task-card{border:1px solid var(--line);border-radius:16px;padding:15px;background:var(--panel);transition:.15s}.task-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.task-top{display:flex;align-items:flex-start;gap:10px}.task-check{width:20px;height:20px;margin-top:1px;accent-color:var(--accent)}.task-title{flex:1;font-weight:750;line-height:1.3}.task-title.done{text-decoration:line-through;color:var(--muted)}.task-meta{display:flex;flex-wrap:wrap;gap:6px;margin:11px 0 0 30px}.task-foot{display:flex;align-items:center;justify-content:space-between;margin:13px 0 0 30px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.subject-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;min-height:170px;position:relative;overflow:hidden;cursor:pointer}.subject-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--subject-color,var(--accent))}.subject-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.subject-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:800;margin-bottom:14px}.subject-card h3{margin:0 0 6px;font-size:15px}.subject-card p{margin:0;color:var(--muted);font-size:11px}.subject-card .count{position:absolute;bottom:16px;left:18px;font-size:11px;color:var(--muted)}.notebook{display:grid;grid-template-columns:245px 1fr;min-height:600px;overflow:hidden}.notebook-side{border-right:1px solid var(--line);padding:16px;background:var(--panel2)}.notebook-main{padding:22px}.note-item{padding:12px;border-radius:11px;margin-top:5px;cursor:pointer}.note-item:hover,.note-item.active{background:var(--accent-soft)}.note-item b{display:block;font-size:12px}.note-item span{display:block;color:var(--muted);font-size:10px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-editor-title{width:100%;border:0;outline:0;background:transparent;font-size:25px;font-weight:800;color:var(--ink);padding:5px 0}.note-editor{width:100%;min-height:470px;border:0;outline:0;resize:vertical;background:transparent;color:var(--ink);font-size:15px;line-height:1.75}.notebook-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-card{padding:20px}.settings-card h2{margin:0 0 8px;font-size:16px}.settings-card p{color:var(--muted);font-size:12px}.subject-edit{display:flex;gap:8px;align-items:center;margin-top:9px}.subject-edit input{flex:1}.modal-backdrop{position:fixed;inset:0;background:rgba(15,25,30,.38);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--panel);border-radius:22px;border:1px solid var(--line);box-shadow:0 25px 70px rgba(0,0,0,.18)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0;font-size:18px}.modal-body{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:750;color:var(--muted)}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}.ghost{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:10px 14px}.danger{border:0;background:#f9e5e5;color:var(--danger);border-radius:11px;padding:10px 14px;font-weight:700}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#17212b;color:#fff;border-radius:12px;padding:11px 15px;font-size:12px;z-index:150;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.hidden{display:none!important}.sidebar.collapsed{width:var(--sidebar-collapsed)}.sidebar.collapsed + .scrim + .main{margin-left:var(--sidebar-collapsed)}body.dark{--bg:#101619;--panel:#172023;--panel2:#1b272b;--ink:#edf4f4;--muted:#9aaeb1;--line:#2a3a3e;--accent-soft:#1d3638;--shadow:none}body.dark .topbar{background:rgba(16,22,25,.88)}body.dark .hero{background:linear-gradient(135deg,#183236,#172023)}body.dark .sidebar{background:rgba(23,32,35,.97)}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.subject-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.task-grid{grid-template-columns:1fr}}
@media(max-width:760px){:root{--sidebar:280px}.sidebar{transform:translateX(-102%);width:var(--sidebar);box-shadow:20px 0 50px rgba(0,0,0,.14)}.sidebar.mobile-open{transform:translateX(0)}.sidebar.collapsed{width:var(--sidebar)}.main,.sidebar.collapsed + .scrim + .main{margin-left:0}.scrim{display:none;position:fixed;z-index:40;inset:0;background:rgba(10,20,24,.4)}.scrim.show{display:block}.mobile-menu{display:grid}.topbar{height:72px;padding:0 16px}.top-actions .search-btn span,.top-actions .search-btn kbd{display:none}.topbar h1{font-size:21px}.content{padding:18px 14px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px}.stat .num{font-size:24px}.hero{padding:20px;display:block}.hero h2{font-size:24px}.hero-date{display:block;margin-top:12px}.subject-grid{grid-template-columns:1fr 1fr;gap:10px}.subject-card{min-height:150px;padding:15px}.notebook{grid-template-columns:1fr;min-height:0}.notebook-side{border-right:0;border-bottom:1px solid var(--line)}.notebook-main{padding:16px}.settings-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.toolbar .input{min-width:0;flex:1}.toolbar .select{flex:1}.calendar-head,.calendar-grid{min-width:680px}.day{min-height:100px}.day-num{width:25px;height:25px}.event{font-size:9px}.side-collapse{display:none}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr}.subject-grid{grid-template-columns:1fr}.top-actions .primary{display:none}.task-card{padding:13px}.card-head,.card-body{padding:15px}.notebook-main{min-height:500px}}
/* Spreadsheet-style task tracker */
.task-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.task-page-head h2{margin:4px 0 6px;font-size:25px;letter-spacing:-.035em}.task-page-head p{margin:0;color:var(--muted);font-size:12px}.task-sheet-tabs{display:flex;gap:6px;overflow-x:auto;padding:5px 2px 10px;margin-bottom:2px;scrollbar-width:thin}.sheet-tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:11px;padding:9px 12px;white-space:nowrap;font-size:12px;font-weight:700}.sheet-tab:hover{background:var(--panel2);color:var(--ink)}.sheet-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.sheet-tab span{font-size:10px;opacity:.75;margin-left:4px}.task-tools{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.task-sheet-card{overflow:hidden}.sheet-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}.sheet-caption b,.sheet-caption span{display:block}.sheet-caption span{font-size:10px;color:var(--muted);margin-top:3px}.sheet-scroll{overflow:auto;max-width:100%}.task-sheet{border-collapse:separate;border-spacing:0;width:100%;min-width:1250px;font-size:11px}.task-sheet th{position:sticky;top:0;z-index:3;background:var(--panel2);color:var(--muted);font-size:9px;letter-spacing:.055em;text-transform:uppercase;text-align:left;padding:11px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap}.task-sheet td{padding:10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:middle;background:var(--panel)}.task-sheet tbody tr:hover td{background:var(--panel2)}.task-sheet th:first-child,.task-sheet td:first-child{position:sticky;left:0;z-index:2;min-width:250px}.task-sheet th:first-child{z-index:4}.task-sheet tbody tr:hover td:first-child{background:var(--panel2)}.task-sheet .actions-col{width:45px}.sheet-task{display:flex;align-items:flex-start;gap:9px}.sheet-task b{display:block;font-size:12px;line-height:1.35}.sheet-task span{display:block;color:var(--muted);font-size:10px;margin-top:3px}.sheet-task .task-check{flex:none}.cell-pill{display:inline-flex;align-items:center;border-radius:7px;padding:4px 7px;background:var(--panel2);font-size:10px;font-weight:700;white-space:nowrap}.priority{border-radius:7px;padding:4px 7px;font-size:10px;font-weight:700}.priority.high{background:#fbe7e7;color:var(--danger)}.priority.medium{background:#fff2d9;color:var(--warn)}.priority.low{background:var(--accent-soft);color:var(--accent)}.cell-select{min-width:96px}select[data-field="type"]{min-width:134px}select[data-field="submission"]{min-width:120px}.sheet-task-main .cell-select{min-width:0}.sheet-status{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:7px;padding:6px 7px;font-size:10px;max-width:125px}.sheet-link{color:var(--accent);font-weight:750;text-decoration:none;white-space:nowrap}.sheet-link:hover{text-decoration:underline}.muted-cell{color:var(--muted)}.resource-cell{max-width:190px;white-space:normal;line-height:1.4;color:var(--muted)}.row-done td{opacity:.7}.row-done .sheet-task b{text-decoration:line-through}.cell-input,.cell-select,.cell-textarea{width:100%;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:7px;padding:6px 7px;font:inherit;font-size:11px;outline:0}.cell-input:hover,.cell-select:hover,.cell-textarea:hover{border-color:var(--line)}.cell-input:focus,.cell-select:focus,.cell-textarea:focus{border-color:#8dbabd;background:var(--panel);box-shadow:0 0 0 2px var(--accent-soft)}.cell-textarea{resize:vertical;min-height:60px}.sheet-task-main{flex:1;min-width:170px;display:flex;flex-direction:column;gap:3px}.sheet-task-main .task-name{font-weight:700;font-size:12px}.sheet-task-main .cell-select{font-size:10px;color:var(--muted)}.link-cell{display:flex;align-items:center;gap:4px;min-width:140px}.sheet-link-btn{color:var(--accent);text-decoration:none;font-weight:800;flex:none}.submission-cell{display:flex;flex-direction:column;gap:5px;min-width:140px}.task-sheet td.act{display:flex;gap:2px;align-items:center;justify-content:flex-end;white-space:nowrap}.mobile-details{display:inline-block;border:0;background:transparent;color:var(--accent);padding:0;margin-top:4px;font-size:10px;font-weight:750;cursor:pointer}.row-details{display:none;margin-top:9px;padding:10px;border:1px solid var(--line);background:var(--panel2);border-radius:9px;font-size:11px}.row-details.show{display:block}.row-details label{display:block;font-size:10px;font-weight:750;color:var(--muted);margin-bottom:5px}
@media(max-width:760px){.task-page-head{align-items:flex-start}.task-page-head h2{font-size:21px}.task-page-head .primary{white-space:nowrap}.task-tools .input{flex-basis:100%;min-width:100%}.task-sheet-tabs{margin-right:-14px;padding-right:14px}.sheet-caption{align-items:flex-start}.sheet-scroll{border-left:0;border-right:0}.task-sheet{min-width:1100px}.task-sheet th:first-child,.task-sheet td:first-child{position:static;min-width:210px}.sheet-task-main{min-width:150px}.mobile-details{display:inline-block;border:0;background:transparent;color:var(--accent);padding:0;margin-top:6px;font-size:10px;font-weight:750}.row-details{margin-top:9px;padding:10px;border:1px solid var(--line);background:var(--panel2);border-radius:9px;color:var(--muted);font-size:10px;line-height:1.65}.row-details.show{display:block}.row-details b{display:block;color:var(--ink);font-size:11px;margin-bottom:3px}}
@media(max-width:480px){.task-page-head{display:block}.task-page-head .primary{margin-top:12px}.sheet-caption{padding:12px}.task-sheet{font-size:10px}}
/* Auto-growing task cell + time input */
textarea.cell-input{resize:none;overflow:hidden;font-family:inherit;line-height:1.4;min-height:32px}
/* Calendar enhancements */
.color-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.swatch{width:24px;height:24px;border-radius:8px;border:2px solid transparent;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.swatch:hover{transform:translateY(-1px)}.swatch.active{border-color:var(--ink)}
.calendar-title{font-size:13px;color:var(--muted);margin-left:2px}.calendar-title b{color:var(--ink)}.calendar-search{min-width:180px}.calendar-check{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:650;white-space:nowrap}.calendar-card{overflow:hidden}.week-grid .day{min-height:260px}.calendar-item button{flex:none}@media(max-width:760px){.calendar-title{order:10;width:100%;margin:2px 0 0}.calendar-search{min-width:150px}.calendar-check{padding:8px 0}.week-grid .day{min-height:180px}}
/* Visible Firebase account authentication */
.auth-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:10px;padding:7px 12px;font-size:11px;font-weight:750;white-space:nowrap;cursor:pointer}
.auth-btn.full{width:100%;padding:10px 12px;text-align:center;margin:2px 0}
.auth-btn:hover{filter:brightness(.95)}
.auth-btn:active{transform:translateY(1px)}
.auth-backdrop{position:fixed;inset:0;background:rgba(15,25,30,.48);backdrop-filter:blur(5px);z-index:200;display:grid;place-items:center;padding:18px}
.auth-backdrop[hidden]{display:none}
.auth-modal{width:min(470px,100%);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.24);overflow:hidden}
.auth-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:22px 22px 12px}
.auth-modal-head h2{margin:3px 0 0;font-size:21px;letter-spacing:-.025em}
.auth-modal-body{padding:10px 22px 22px}
.google-auth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:12px;font-weight:750;cursor:pointer}
.google-auth-btn:hover{background:var(--panel2)}
.google-g{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:17px;background:#fff;border:1px solid #ddd;color:#4285f4}
.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:17px 0}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}
.auth-tabs{display:flex;gap:4px;background:var(--panel2);padding:4px;border-radius:11px;margin-bottom:15px}
.auth-tab{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:8px;font-weight:700;cursor:pointer}
.auth-tab.active{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.auth-form{display:flex;flex-direction:column;gap:11px}
.auth-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;font-weight:750}
.auth-form label[hidden]{display:none}
.auth-form input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:11px 12px;outline:0}
.auth-form input:focus{border-color:#8dbabd;box-shadow:0 0 0 3px var(--accent-soft)}
.auth-submit{width:100%;margin-top:2px}
.auth-forgot{border:0;background:none;color:var(--accent);font-size:11px;text-decoration:underline;cursor:pointer;align-self:center}
.auth-message{min-height:18px;color:var(--muted);font-size:11px;line-height:1.45;text-align:center}
.auth-message.error{color:var(--danger)}
.auth-message.success{color:var(--success)}
.auth-note{margin:14px 0 0;color:var(--muted);font-size:10px;line-height:1.5;text-align:center}
body.auth-open{overflow:hidden}
@media(max-width:480px){.auth-modal-head,.auth-modal-body{padding-left:16px;padding-right:16px}.auth-modal-head h2{font-size:19px}}
/* Notebook: search, pinning, rich text editor, attachments */
.note-item-row{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.note-item-row b{flex:1;min-width:0;font-size:12px}
.list-divider{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;padding:12px 4px 4px}
.pin-btn{border:0;background:transparent;color:var(--muted);font-size:14px;padding:2px 5px;border-radius:6px;line-height:1;flex:none}
.pin-btn:hover{background:var(--panel);color:var(--warn)}
.pin-btn.active{color:var(--warn)}
.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;margin:12px 0 10px}
.editor-toolbar button{border:0;background:transparent;color:var(--ink);width:30px;height:30px;border-radius:8px;font-size:12px;font-weight:700}
.editor-toolbar button:hover{background:var(--panel)}
.editor-toolbar .tb-sep{width:1px;align-self:stretch;background:var(--line);margin:4px 3px}
.note-editor{padding:4px 2px}
.note-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}
.note-editor:focus{outline:0}
.note-editor h2{font-size:20px;margin:16px 0 6px;letter-spacing:-.02em}
.note-editor h3{font-size:16px;margin:14px 0 6px}
.note-editor p{margin:0 0 10px}
.note-editor ul,.note-editor ol{margin:0 0 10px;padding-left:22px}
.note-editor blockquote{margin:10px 0;padding:9px 14px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;color:var(--muted)}
.note-editor a{color:var(--accent)}
/* Pasted/dropped images: a small thumbnail in the text (overrides any size the paste carried); click to view full size */
.note-editor img{width:auto!important;height:auto!important;max-width:min(220px,100%);max-height:160px;margin:4px 6px 4px 0;vertical-align:top;border:1px solid var(--line);border-radius:10px;background:var(--panel2);cursor:zoom-in;transition:box-shadow .15s ease}
.note-editor img:hover{box-shadow:0 0 0 3px var(--accent-soft)}
/* Highlighter: a small pop-over of light colours under the toolbar button */
.tb-pop{position:relative;display:inline-flex}
.hl-icon{display:inline-block;padding:0 3px;border-radius:4px;background:linear-gradient(transparent 55%,#ffe36e 55%);font-weight:800;line-height:1.2}
.editor-toolbar [data-menu-toggle][aria-expanded="true"]{background:var(--panel)}
.tb-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;display:flex;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(25,45,55,.14)}
.tb-menu[hidden]{display:none}
.editor-toolbar .hl-swatch{width:24px;height:24px;border-radius:50%;border:1px solid rgba(23,33,43,.14);padding:0}
.editor-toolbar .hl-swatch:hover{transform:scale(1.12)}
.editor-toolbar .hl-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.editor-toolbar .hl-none,.editor-toolbar .hl-none:hover{background:var(--panel) linear-gradient(135deg,transparent 45%,var(--danger) 45%,var(--danger) 55%,transparent 55%)}
/* Highlights are light, so keep highlighted text dark in dark mode */
body.dark .note-editor [style*="background-color"]:not([style*="transparent"]){color:#17212b}
/* Save as PDF */
.lesson-pdf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lesson-pdf:hover,.lesson-pdf:focus-visible{background:var(--panel2);border-color:var(--line);color:var(--ink)}
iframe.print-frame{position:fixed;right:0;bottom:0;width:0;height:0;border:0}
.note-editor img.img-missing{min-width:160px;min-height:60px;padding:8px;font-size:11px;color:var(--muted);cursor:default}
.image-viewer{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:56px 16px 24px;background:rgba(10,16,20,.86);backdrop-filter:blur(4px);cursor:zoom-out}
.image-viewer img{max-width:calc(100vw - 32px);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);border-radius:10px;box-shadow:0 25px 70px rgba(0,0,0,.45);background:#fff;cursor:default}
.image-viewer-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1}
.image-viewer-close:hover{background:rgba(255,255,255,.26)}
.image-viewer-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.attach-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.attach-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:12px;font-weight:750;color:var(--muted)}
.attach-add{font-size:11px;padding:7px 11px;cursor:pointer}
.attach-list{display:flex;flex-direction:column;gap:6px}
.attach-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2);border-radius:10px;padding:8px 10px;font-size:11px}
.attach-icon{font-size:15px;flex:none}
.attach-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650}
.attach-size{color:var(--muted);white-space:nowrap;flex:none}
.attach-local{flex:none;white-space:nowrap;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.attach-open,.attach-remove{border:0;background:transparent;color:var(--muted);width:24px;height:24px;border-radius:7px;flex:none}
.attach-open:hover{background:var(--panel);color:var(--accent)}
.attach-remove:hover{background:#fbe7e7;color:var(--danger)}
.attach-empty{color:var(--muted);font-size:11px;padding:6px 2px}
.note-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.note-card{cursor:pointer}
.note-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.note-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:10px}
.note-card.pinned{border-color:#f0dba8;background:linear-gradient(180deg,#fff9ec,var(--panel) 45%)}
body.dark .note-card.pinned{background:linear-gradient(180deg,#2a2410,var(--panel) 50%);border-color:#4a3f1a}
body.dark .attach-remove:hover{background:#3a2020}
@media(max-width:1050px){.note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.editor-toolbar button{width:27px;height:27px}.note-grid{grid-template-columns:1fr}}
@media(max-width:480px){.attach-chip{flex-wrap:wrap}}
/* Auth gate: the app stays hidden until Firebase confirms a signed-in user */
.auth-splash{display:none}body.auth-pending .app-shell,body.auth-pending #modalRoot{display:none}body.auth-pending .auth-splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--muted);font-size:13px;animation:splashIn .25s ease .3s both}@keyframes splashIn{from{opacity:0}}.auth-splash img{width:56px;height:56px;border-radius:13px;box-shadow:0 10px 26px rgba(54,126,131,.25);animation:splashPulse 1.4s ease-in-out infinite}@keyframes splashPulse{50%{opacity:.65;transform:scale(.95)}}@media(prefers-reduced-motion:reduce){.auth-splash img{animation:none}}
/* Sidebar collapse (desktop): icon-only rail with a toggle that stays visible in both states.
   --sidebar-collapsed is 74px so the logo, avatar and nav icons sit exactly centred (x = 37px)
   and do not move sideways while the sidebar animates. */
@media(min-width:761px){
.side-collapse{position:fixed;z-index:55;top:26px;left:calc(var(--sidebar) - 58px);width:38px;height:38px;padding:0;border-radius:12px;cursor:pointer;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease,border-radius .22s ease,background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.side-collapse svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease}
.side-collapse:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--accent);box-shadow:0 4px 12px rgba(25,45,55,.1)}
.side-collapse:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side-collapse.is-collapsed{top:30px;left:calc(var(--sidebar-collapsed) - 15px);width:30px;height:30px;border-radius:50%;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent);box-shadow:0 3px 10px rgba(54,126,131,.2)}
.side-collapse.is-collapsed svg{width:16px;height:16px;transform:rotate(180deg)}
.side-collapse.is-collapsed:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(54,126,131,.3)}
body.dark .side-collapse.is-collapsed:not(:hover){color:#7fc0c2;border-color:#3f7275}
.brand{padding-right:55px;transition:padding .22s ease}
.sidebar.collapsed .brand{padding-right:6px}
.brand-text{overflow:hidden}
.nav-item span{flex:none}
.nav-item b{white-space:nowrap;overflow:hidden}
.brand-text,.workspace div,.save-indicator span,.nav-item b,.nav-item em{transition:opacity .16s ease .12s}
.sidebar.collapsed .brand-text,.sidebar.collapsed .workspace div,.sidebar.collapsed .save-indicator span{opacity:0;visibility:hidden;transition:opacity .1s ease,visibility 0s linear .1s}
/* Labels only fade (not display:none) so screen readers still get each item's name */
.sidebar.collapsed .nav-item b{opacity:0;transition:opacity .1s ease}
.sidebar.collapsed .nav-item{overflow:hidden}
/* Overdue count becomes a small dot on the Tasks icon */
.sidebar.collapsed .nav-item em{position:absolute;top:10px;left:30px;width:8px;height:8px;padding:0;font-size:0;background:var(--danger);box-shadow:0 0 0 2px var(--panel);transition:none}
.sidebar.collapsed .workspace{gap:0;padding:12px 7px}
.save-indicator span{white-space:nowrap;overflow:hidden;min-width:0}
.sidebar.collapsed .save-indicator{justify-content:center;gap:0;padding:12px 0}
.sidebar.collapsed .save-indicator span{width:0}
.sidebar.collapsed .auth-btn.full{height:36px;padding:0;font-size:0;display:grid;place-items:center}
.sidebar.collapsed .auth-btn.full::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M14 17l5-5-5-5M19 12H9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M14 17l5-5-5-5M19 12H9'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Tooltips for the sidebar toggle and the collapsed rail (positioned by app.js) */
.side-tip{position:fixed;z-index:120;left:0;top:0;transform:translate(-4px,-50%);opacity:0;pointer-events:none;background:#17212b;color:#fff;font-size:12px;font-weight:650;padding:6px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity .12s ease,transform .12s ease}
.side-tip::before{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;background:inherit;transform:translateY(-50%) rotate(45deg);border-radius:1px}
.side-tip.show{opacity:1;transform:translate(0,-50%)}
body.dark .side-tip{background:#edf4f4;color:#101619}
@media(prefers-reduced-motion:reduce){.sidebar,.main,.side-collapse,.side-collapse svg,.brand,.side-tip{transition:none}}
/* Save buttons in the lesson notebook and note editor */
.notebook-top .grow{flex:1}.save-note-btn{min-width:74px;transition:background-color .15s ease}.save-note-btn.is-saved{background:var(--success);box-shadow:none}.save-note-btn:disabled{opacity:.75;cursor:progress}
/* Lesson header: title + "Last edited" lead; Pin and Delete are quiet secondary actions beside the title */
.notebook-main{container-type:inline-size}
.lesson-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "meta .";column-gap:16px;align-items:center;margin-bottom:12px}
.lesson-head .note-editor-title{grid-area:title;min-width:0}
.lesson-meta{grid-area:meta;color:var(--muted);font-size:11px;margin-top:5px}
.note-edited:not(:empty)+.note-save-status:not(:empty)::before{content:" · "}
/* Sync problem: amber instead of a pop-up; the sidebar indicator opens the details */
.note-save-status.warn{color:var(--warn)}
.save-indicator.warn{color:var(--warn);cursor:pointer;border-radius:10px}
.save-indicator.warn i{background:var(--warn)}
.save-indicator.warn:hover{background:var(--panel2)}
.save-indicator.warn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sync-help{margin:0 0 10px;font-size:13px;line-height:1.55}
.sync-help.muted{color:var(--muted);margin-top:12px}
.size-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.size-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;font-size:12px;border-top:1px solid var(--line)}
.size-list li:first-child{border-top:0}
.size-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.size-list b{flex:none}
.lesson-actions{grid-area:actions;display:flex;align-items:center;gap:4px}
.lesson-action{height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.lesson-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lesson-pin span{font-size:14px;line-height:1}
.lesson-pin:hover{background:var(--panel2);border-color:var(--line);color:var(--ink)}
.lesson-pin.active{background:#fff4dc;border-color:#f0dba8;color:var(--warn)}
body.dark .lesson-pin.active{background:#3a3013;border-color:#5a4a1f;color:#e8c874}
.lesson-delete{width:32px;padding:0}
.lesson-delete svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lesson-delete:hover,.lesson-delete:focus-visible{background:#fbeaea;border-color:#f2d0d0;color:var(--danger)}
body.dark .lesson-delete:hover,body.dark .lesson-delete:focus-visible{background:#3a2022;border-color:#5a2c30;color:#f08a8a}
/* Narrow notebook: actions move to their own row under "Last edited", with larger tap targets */
@container (max-width:440px){
  .lesson-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "meta" "actions"}
  .lesson-actions{margin-top:10px;gap:8px}
  .lesson-action{height:40px}.lesson-delete{width:40px}
}
/* Delete confirmation */
.modal-confirm{width:min(400px,100%)}
.confirm-text{margin:0 0 6px;font-weight:650}
.confirm-detail{margin:0;color:var(--muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.danger-solid{border:0;background:var(--danger);color:#fff;border-radius:11px;padding:10px 14px;font-weight:750;cursor:pointer;transition:filter .15s ease}
.danger-solid:hover{filter:brightness(.92)}
.modal-confirm .modal-foot button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.lesson-action,.danger-solid{transition:none}}
/* Notes popup uses the same header; let its actions wrap under "Last edited" on narrow screens too */
.note-modal .modal-body{container-type:inline-size}
/* Lesson footer: Close + Save at the bottom, matching the Notes popup footer */
.lesson-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
/* Event form time fields + clock time picker (one component for Start time and End time) */
.clock-field{width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:11px;padding:10px 12px;text-align:left;cursor:pointer;font-weight:650;transition:border-color .15s ease,box-shadow .15s ease}
.clock-field svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.clock-field-text{flex:1;font-variant-numeric:tabular-nums}
.clock-field.is-empty .clock-field-text{color:var(--muted);font-weight:500}
.clock-field:hover{border-color:#b9d6d8}
.clock-field:focus-visible,.clock-field[aria-expanded="true"]{outline:0;border-color:#8dbabd;box-shadow:0 0 0 3px var(--accent-soft)}
.clock-field-caret{transition:transform .15s ease}
.clock-field[aria-expanded="true"] .clock-field-caret{transform:rotate(180deg)}
.tp-layer{position:fixed;inset:0;z-index:130}
.tp{position:fixed;width:300px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(20,40,45,.2);padding:16px 18px 14px;animation:tpIn .14s ease-out}
@keyframes tpIn{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.tp-display{display:flex;align-items:baseline;justify-content:center;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.tp-part{border:0;background:transparent;color:var(--muted);font:inherit;padding:2px 8px;border-radius:12px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tp-part:hover{color:var(--ink)}
.tp-part.is-active{color:var(--accent);background:var(--accent-soft)}
.tp-part:focus-visible,.tp-ampm button:focus-visible,.tp-foot button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-colon{color:var(--muted)}
.tp-period{font-size:18px;font-weight:750;color:var(--muted);margin-left:8px}
.tp-hint{margin:4px 0 12px;text-align:center;font-size:12px;color:var(--muted)}
.tp-clock{--size:248px;position:relative;width:var(--size);height:var(--size);margin:0 auto;border-radius:50%;background:var(--panel2);border:1px solid var(--line);touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.tp-clock:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.tp-num{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;font-size:15px;font-weight:650;color:var(--ink);transform:rotate(var(--a)) translateY(calc(var(--size) / -2 + 26px)) rotate(calc(var(--a) * -1));transition:background-color .15s ease,color .15s ease;pointer-events:none;z-index:1}
.tp-num.is-selected{background:var(--accent);color:#fff;font-weight:800;box-shadow:0 0 0 3px var(--accent-soft)}
.tp-nums.is-entering .tp-num{animation:tpNums .16s ease-out}
@keyframes tpNums{from{opacity:0;scale:.85}}
.tp-hand{position:absolute;left:50%;bottom:50%;width:2px;height:calc(var(--size) / 2 - 26px);margin-left:-1px;background:var(--accent);transform-origin:50% 100%;transform:rotate(var(--angle,0deg));transition:transform .2s ease;pointer-events:none}
.tp-hand i{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);opacity:0}
.tp-hand.off-number i{opacity:1}
.tp-clock.is-dragging .tp-hand{transition:none}
.tp-center{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent)}
.tp-ampm{display:flex;width:max-content;margin:14px auto 0}
.tp-ampm button{min-width:64px;padding:8px 14px;cursor:pointer}
.tp .tp-ampm button.active{background:var(--accent);color:#fff;font-weight:800}
.tp-foot{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.tp-foot .grow{flex:1}
.tp-clear{border:0;background:none;color:var(--muted);font-size:12px;font-weight:650;padding:6px 2px;cursor:pointer;text-decoration:underline}
.tp-clear:hover{color:var(--danger)}
.tp-layer.is-sheet{background:rgba(15,25,30,.38);display:grid;place-items:center;padding:16px}
.tp-layer.is-sheet .tp{position:relative;width:min(340px,100%);max-height:calc(100dvh - 32px);overflow:auto}
.tp-layer.is-sheet .tp-clock{--size:min(72vw,280px)}
.tp-layer.is-sheet .tp-num{width:44px;height:44px;margin:-22px 0 0 -22px}
@media(prefers-reduced-motion:reduce){.tp,.tp-nums.is-entering .tp-num{animation:none}.tp-hand,.tp-num,.tp-part,.clock-field,.clock-field-caret{transition:none}}
/* Clock picker: −1/+1 nudge buttons and minute tick marks for exact minutes */
.tp-display{gap:2px}
.tp-step{align-self:center;width:32px;height:32px;margin:0 6px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--muted);font-size:18px;font-weight:700;line-height:1;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.tp-step:hover{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.tp-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tp-ticks{position:absolute;inset:0;opacity:0;transition:opacity .15s ease;pointer-events:none}
.tp-clock.is-minute .tp-ticks{opacity:1}
.tp-ticks i{position:absolute;left:50%;top:50%;width:2px;height:6px;margin:-3px 0 0 -1px;border-radius:1px;background:var(--muted);opacity:.35;transform:rotate(var(--a)) translateY(calc(var(--size) / -2 + 8px))}
.tp-layer.is-sheet .tp-step{width:40px;height:40px}
/* Compact clock field for the deadline Time column in the task sheet */
.task-sheet .clock-field{width:auto;min-width:112px;padding:6px 8px;gap:6px;font-size:12px;white-space:nowrap;border-color:transparent;background:transparent}
.task-sheet .clock-field svg{width:14px;height:14px}
.task-sheet .clock-field-caret{display:none}
.task-sheet .clock-field:hover{border-color:var(--line);background:var(--panel)}
.task-sheet .clock-field:hover,.task-sheet .clock-field:focus-visible{color:var(--accent)}
.task-sheet .clock-field:hover svg,.task-sheet .clock-field:focus-visible svg{color:var(--accent)}
.task-sheet .clock-field.is-empty:hover .clock-field-text{color:var(--accent)}
/* Notes: List / Grid view switcher and the two layouts (same notes, same search and sort) */
.notes-head{flex-wrap:wrap}
.notes-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notes-controls #notesSearch{min-width:170px}
.view-seg button{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.view-seg button span{font-size:14px;line-height:1}
.view-seg button b{font-weight:650}
.view-seg button:hover{color:var(--ink)}
.seg.view-seg button.active{background:var(--accent);color:#fff}
.view-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.notes-view{animation:notesIn .15s ease-out}
@keyframes notesIn{from{opacity:0}}
[data-general][role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note-pinned-badge{font-size:10px;font-weight:700;color:var(--warn)}
body.dark .note-pinned-badge{color:#e8c874}
.note-no-preview{font-style:italic;opacity:.7}
/* List view: compact rows for scanning */
.note-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.note-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .15s ease}
.note-row:last-child{border-bottom:0}
.note-row:hover{background:var(--panel2)}
.note-row.pinned{background:linear-gradient(90deg,#fff9ec,var(--panel) 40%)}
body.dark .note-row.pinned{background:linear-gradient(90deg,#2a2410,var(--panel) 45%)}
.note-row-icon{font-size:16px;line-height:1.3;flex:none}
.note-row-main{flex:1;min-width:0}
.note-row-title{font-weight:750;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-row-preview{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-row-meta{display:flex;align-items:center;gap:12px;margin-top:6px;color:var(--muted);font-size:11px}
.note-row .pin-btn{font-size:16px;padding:4px 6px}
/* Grid view: equal-height cards */
.note-grid.notes-view{grid-auto-rows:1fr}
.note-grid .note-card{display:flex;flex-direction:column;min-height:150px}
.note-grid .note-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 10px 26px rgba(25,45,55,.1);transform:translateY(-2px)}
.note-card-preview{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-grid .note-card-foot{margin-top:auto;padding-top:12px;gap:8px;flex-wrap:wrap}
/* Empty states */
.notes-empty{text-align:center;padding:40px 16px;color:var(--muted)}
.notes-empty-icon{font-size:34px;margin-bottom:8px}
.notes-empty h3{margin:0 0 6px;color:var(--ink);font-size:17px}
.notes-empty p{margin:0 0 16px;font-size:13px}
@media(max-width:600px){
  .notes-controls{width:100%}
  .notes-controls #notesSearch{flex:1 1 100%;min-width:0}
  .view-seg button b{display:none}
  .view-seg button{padding:8px 12px}
  .note-row-meta{flex-wrap:wrap;gap:4px 10px}
}
@media(prefers-reduced-motion:reduce){.notes-view{animation:none}.note-row,.view-seg button{transition:none}}
.note-doc-icon{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.note-card .task-title .note-doc-icon{margin-right:6px}
.note-row-icon{display:grid;place-items:center;padding-top:1px}
.note-row:hover .note-doc-icon,.note-card:hover .note-doc-icon{stroke:var(--accent)}
/* My Subjects overview: search / sort / List | Grid (list rows reuse the Notes list styles) */
.subjects-controls .input{min-width:200px}
.subject-row{align-items:center}
.subject-row-badge{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:var(--subject-color,var(--accent))}
.subject-row .pill{flex:none}
.subject-row-go{flex:none;color:var(--muted);font-size:20px;line-height:1;padding:0 2px;transition:transform .15s ease,color .15s ease}
.subject-row:hover .subject-row-go{color:var(--accent);transform:translateX(2px)}
.subject-row .note-row-meta{margin-top:3px}
[data-subject][role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){
  .subjects-controls .input{flex:1 1 100%;min-width:0}
  .subject-row .pill{display:none}
}
/* Export to device calendar */
.export-lead{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.55}
.export-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.export-summary div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel2)}
.export-summary b{display:block;font-size:22px;color:var(--ink)}
.export-summary span{font-size:12px;color:var(--muted)}
.export-check{font-size:13px;margin-bottom:12px}
.export-help{border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--muted);line-height:1.55}
.export-help summary{cursor:pointer;font-weight:650;color:var(--accent)}
.export-help ul{margin:8px 0;padding-left:18px}
.export-help p{margin:0}
@media(max-width:520px){
  .modal-foot{flex-wrap:wrap}
  .modal-foot #icsEvent{order:-1;flex:1 1 100%}
}
/* Formatting toolbar stays in view while scrolling a long lesson or note: under the sticky top bar on the
   page, at the top of the popup for general notes. The notebook clips instead of hiding overflow, since
   overflow:hidden would stop sticky from working. */
.notebook{overflow:hidden;overflow:clip}
.editor-toolbar{position:sticky;top:90px;z-index:15;box-shadow:0 4px 14px rgba(25,45,55,.06)}
.modal .editor-toolbar{top:0}
@media(max-width:760px){.editor-toolbar{top:80px}}
/* Editor toolbar: icons, alignment and table menus */
.tb-ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.align-menu{gap:2px;padding:6px}
.table-menu{flex-direction:column;gap:8px;padding:10px;width:max-content}
.tbl-grid{display:grid;grid-template-columns:repeat(6,20px);gap:3px}
.editor-toolbar .tbl-grid button{width:20px;height:20px;padding:0;border-radius:4px;border:1px solid var(--line);background:var(--panel2)}
.editor-toolbar .tbl-grid button.on{background:var(--accent-soft);border-color:var(--accent)}
.tbl-size{font-size:11px;font-weight:700;color:var(--muted);text-align:center}
.tbl-custom{display:flex;align-items:flex-end;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.tbl-custom label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:var(--muted)}
.tbl-custom input{width:58px;height:28px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);font:inherit;font-size:13px}
.tbl-custom>span{padding-bottom:6px;color:var(--muted);font-size:12px}
.editor-toolbar .tbl-custom button{width:auto;height:28px;padding:0 10px;border-radius:8px;font-size:11px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.tbl-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding-top:8px;border-top:1px solid var(--line)}
.editor-toolbar .tbl-actions button{width:auto;height:28px;padding:0 8px;border-radius:8px;font-size:11px;font-weight:700;text-align:left;white-space:nowrap}
.editor-toolbar .tbl-actions button:hover:not(:disabled){background:var(--panel2)}
.editor-toolbar .tbl-actions button:disabled{opacity:.4;cursor:default}
.editor-toolbar .tbl-actions .tbl-del{grid-column:1/-1;color:var(--danger)}
/* Tables in notes */
.note-editor table{width:100%;border-collapse:collapse;table-layout:fixed;margin:8px 0 12px}
.note-editor td,.note-editor th{border:1px solid var(--line);padding:6px 9px;vertical-align:top;overflow-wrap:anywhere}
.note-editor th{background:var(--panel2);font-weight:700}
/* Table resizing (see app.js): cursors over the borders, and a corner handle while hovering the table */
.note-editor[data-tbl-resize="col"],.note-editor[data-tbl-resize="col"] *,body[data-tbl-resizing="col"] *{cursor:col-resize!important}
.note-editor[data-tbl-resize="row"],.note-editor[data-tbl-resize="row"] *,body[data-tbl-resizing="row"] *{cursor:row-resize!important}
.note-editor[data-tbl-resize="corner"],.note-editor[data-tbl-resize="corner"] *,body[data-tbl-resizing="corner"] *{cursor:nwse-resize!important}
body[data-tbl-resizing]{user-select:none}
.note-editor[contenteditable="true"] tr:last-child>:last-child{position:relative}
.note-editor[contenteditable="true"] table:hover tr:last-child>:last-child::after{content:'';position:absolute;right:-5px;bottom:-5px;width:8px;height:8px;border:1px solid var(--accent);border-radius:2px;background:var(--panel)}
.note-editor td p:last-child,.note-editor th p:last-child{margin-bottom:0}

/* Tasks table: a real, always-visible horizontal scrollbar on the table's own scroller (not the page),
   rounded, with a teal thumb, plus soft fades at edges that have more columns beyond them. */
.sheet-scroll-wrap{position:relative}
.sheet-scroll{overflow-x:auto;overscroll-behavior-x:contain}
/* Long lists scroll inside the table (headers stay pinned), so the sideways scrollbar is always on screen
   instead of below the last row */
.sheet-scroll{overflow-y:auto;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px)}
.sheet-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sheet-scroll::-webkit-scrollbar{height:16px;background:var(--panel)}
.sheet-scroll::-webkit-scrollbar-track{margin:0 12px;border:3px solid var(--panel);border-radius:999px;background:var(--panel2);background-clip:padding-box;box-shadow:inset 0 0 0 1px var(--line)}
.sheet-scroll::-webkit-scrollbar-thumb{min-width:56px;border:3px solid transparent;border-radius:999px;background:var(--accent);background-clip:padding-box}
.sheet-scroll::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--accent) 80%,#000)}
.sheet-scroll::-webkit-scrollbar-thumb:active{background-color:color-mix(in srgb,var(--accent) 70%,#000)}
.sheet-scroll::-webkit-scrollbar-corner{background:var(--panel)}
/* Firefox has no scrollbar pseudo-elements; the standard properties give the same colours */
@supports not selector(::-webkit-scrollbar){.sheet-scroll{scrollbar-width:auto;scrollbar-color:var(--accent) var(--panel2)}}
.sheet-scroll-wrap::before,.sheet-scroll-wrap::after{content:"";position:absolute;top:0;bottom:var(--fade-bottom,0px);z-index:5;width:28px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.sheet-scroll-wrap::before{left:var(--fade-left,0px);background:linear-gradient(to right,rgba(25,45,55,.13),rgba(25,45,55,0))}
.sheet-scroll-wrap::after{right:0;background:linear-gradient(to left,rgba(25,45,55,.13),rgba(25,45,55,0))}
body.dark .sheet-scroll-wrap::before{background:linear-gradient(to right,rgba(0,0,0,.4),rgba(0,0,0,0))}
body.dark .sheet-scroll-wrap::after{background:linear-gradient(to left,rgba(0,0,0,.4),rgba(0,0,0,0))}
.sheet-scroll-wrap.more-left::before,.sheet-scroll-wrap.more-right::after{opacity:1}
@media(prefers-reduced-motion:reduce){.sheet-scroll-wrap::before,.sheet-scroll-wrap::after{transition:none}}
/* Subject professor: a small line under the subject name; an inline field in the notebook sidebar */
.subject-prof{margin:-2px 0 6px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subject-row .subject-prof{margin:2px 0 0}
.nb-prof{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:4px 8px;border:1px solid transparent;border-radius:9px;font-size:12px;color:var(--muted);cursor:text}
.nb-prof:hover{border-color:var(--line)}
.nb-prof:focus-within{border-color:#8dbabd;background:var(--panel);box-shadow:0 0 0 3px var(--accent-soft)}
.nb-prof input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-weight:600;padding:2px 0}
.nb-prof input::placeholder{color:var(--muted);font-weight:500}
.subject-edit{flex-wrap:wrap}
.subject-edit .subject-prof-input{flex:1 1 150px;font-size:13px}
/* Subject cards: "open tasks" sits in the normal flow at the bottom, so it lines up with the text above it
   (same left padding on every screen size) and moves down instead of overlapping when the text is longer. */
.subject-card{display:flex;flex-direction:column}
.subject-card .subject-icon{flex:none;align-self:flex-start}
/* Open tasks: a badge in the bottom-right corner, amber while any are open, apart from the lesson info */
.subject-card .count{position:static;align-self:flex-end;margin-top:auto;font-size:11px}
.subject-card .count.warn{color:var(--warn)}
.subject-card p{margin-bottom:12px}
/* Calendar: the month and year (or week range) is the heading of the page, so it reads large */
.calendar-title{margin-left:6px;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.calendar-title b{font-weight:800}
@media(max-width:760px){.calendar-title{margin:4px 0 0;font-size:22px}}
/* Heading / Normal text (T) buttons: the style the caret is in is highlighted */
.editor-toolbar button.is-active{background:var(--accent-soft);color:var(--accent)}
/* Calendar on phones: the month fits the screen (no sideways scroll), the week is a list of days and the toolbar sits in tidy rows */
.day-dow{display:none}
@media(max-width:760px){
.calendar-toolbar{gap:8px}
.calendar-toolbar .calendar-title{order:-1;width:100%;margin:0 0 2px}
.calendar-toolbar .seg{flex:1}.calendar-toolbar .seg button{flex:1;padding:8px 6px}
.calendar-toolbar [data-calstep],.calendar-toolbar [data-caltoday]{padding:10px 12px}
.calendar-toolbar .calendar-search{flex:1 1 55%;min-width:0;order:2}
.calendar-toolbar .calendar-check{padding:0 2px;margin-left:auto}
.calendar-toolbar [data-export-cal],.calendar-toolbar [data-add-event]{flex:none;white-space:nowrap;order:2}
.calendar-wrap{overflow:visible}
.calendar-head,.calendar-grid{min-width:0}
.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.dow{padding:9px 0;font-size:10px}
.day{min-height:78px;padding:4px 3px;min-width:0}
.day-num{width:24px;height:24px;margin:0 auto 3px;font-size:11px;border-radius:8px}
.event{font-size:9px;padding:2px 3px;margin:2px 0;border-left-width:2px;border-radius:4px}
.day .pill{display:block;padding:2px 0;font-size:9px;text-align:center;background:none}
/* Week: one row per day, with the weekday beside its events */
.is-week .calendar-head{display:none}
.calendar-grid.week-grid{grid-template-columns:1fr}
.week-grid .day{position:relative;min-height:60px;padding:8px 10px 3px 68px;border-right:0}
.week-grid .day-num{position:absolute;left:10px;top:8px;width:44px;height:auto;padding:5px 0;margin:0;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:16px;line-height:1.1}
.week-grid .day-dow{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.week-grid .day.today .day-dow{color:inherit;opacity:.85}
.week-grid .event{font-size:12px;padding:6px 8px;margin:0 0 5px;border-left-width:3px;border-radius:7px}
.week-grid .day .pill{text-align:left}
/* Agenda: keep the Edit button from squeezing the event text */
.agenda-day{padding:12px 14px}.calendar-item{gap:10px}.calendar-item .row-main span{overflow-wrap:anywhere}
}
/* Calendar on desktop: the title and the Export / Add event buttons share the top row, the view controls sit below,
   and the seven day columns stay equal width however long an event's title is */
@media(min-width:761px){
.calendar-toolbar .calendar-title{order:-3;flex:1 1 auto;margin-left:0}
.calendar-toolbar [data-export-cal],.calendar-toolbar [data-add-event]{order:-2}
.calendar-toolbar::before{content:"";order:-1;flex-basis:100%;height:0;margin-bottom:-4px}
.calendar-toolbar .calendar-search{flex:1 1 180px;min-width:160px;max-width:340px;margin-left:auto}
.calendar-head,.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.day{min-width:0}
}
@media(max-width:560px){.calendar-toolbar .seg{flex-basis:100%}.calendar-toolbar .calendar-search{flex-basis:100px}.calendar-toolbar [data-export-cal],.calendar-toolbar [data-add-event]{flex:1 1 40%}.calendar-toolbar .calendar-check{order:3;flex-basis:100%;margin-left:0}}
@media(max-width:400px){.dow{font-size:9px}.event{font-size:8px}}
/* Day list: a date's schedule, with an Edit button on each event */
.day-list{display:flex;flex-direction:column;gap:10px}
.day-item{display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 14px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:13px;background:var(--panel)}
.day-item[data-calendar-task]{border-left-width:1px;align-items:center;cursor:pointer}
.day-item .row-main b{font-size:14px;line-height:1.35}
.day-item .row-main span{font-size:12px;margin-top:4px}
.day-item-notes{margin:7px 0 0;font-size:12px;line-height:1.45;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.day-item-edit{flex:none;padding:7px 12px;font-size:13px;font-weight:650}
.day-item-go{flex:none;font-size:12px;font-weight:700;color:var(--accent)}
/* Notes page: compact header and a tidy board of note cards (titles only, no content previews) */
.notes-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:18px}
.notes-top-title{display:flex;align-items:center;gap:10px}
.notes-top-title h2{margin:0;font-size:18px;letter-spacing:-.02em}
.note-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.note-board .note-card{display:flex;flex-direction:column;min-height:118px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(25,45,55,.05);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.note-board .note-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 10px 26px rgba(25,45,55,.1);transform:translateY(-2px)}
.note-board .note-card.pinned{border-color:#f0dba8;background:linear-gradient(180deg,#fff9ec,var(--panel) 45%)}
body.dark .note-board .note-card.pinned{border-color:#4a3f1a;background:linear-gradient(180deg,#2a2410,var(--panel) 50%)}
.note-board .note-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note-card-title{flex:1;min-width:0;font-size:15px;font-weight:750;line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere}
.note-card-title .note-doc-icon{margin-right:7px}
.note-board .note-card-foot{justify-content:flex-start;flex-wrap:wrap;gap:4px 10px;margin-top:auto;padding-top:14px}
@media(max-width:760px){.notes-top-title h2{font-size:17px}.notes-controls .primary{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.note-board .note-card{transition:none}.note-board .note-card:hover{transform:none}}

/* Subject notebook: a subject-colored marker on the open lesson */
.note-item{position:relative;padding:10px 12px 10px 14px;border:1px solid transparent;transition:background-color .15s ease,border-color .15s ease}
.note-item:hover{background:var(--panel)}
.note-item.active{background:var(--panel);border-color:var(--line);box-shadow:0 2px 8px rgba(25,45,55,.06)}
.note-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--subject-color,var(--accent))}
.note-item-row b{font-size:13px;line-height:1.35}
.note-item small{display:block;margin-top:4px;font-size:10.5px;color:var(--muted)}

/* Writing space: a sheet of paper on a soft canvas, used by lesson notebooks and the general-note popup */
.notebook-main{background:color-mix(in srgb,var(--subject-color,var(--accent)) 6%,var(--panel2))}
.notebook-main>*{max-width:820px;margin-left:auto;margin-right:auto}
.notebook-top{margin-bottom:12px}
.note-sheet{position:relative;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--subject-color,var(--accent));border-radius:18px;box-shadow:0 1px 2px rgba(25,45,55,.04),0 14px 36px rgba(25,45,55,.08);padding:34px 44px 30px}
.note-sheet .note-editor-title{font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-.03em}
.note-sheet .note-editor-title::placeholder{color:color-mix(in srgb,var(--muted) 55%,transparent)}
.note-sheet .lesson-head{margin-bottom:6px}
.note-sheet .editor-toolbar{margin:16px -14px 18px;background:color-mix(in srgb,var(--panel2) 92%,transparent);backdrop-filter:blur(8px);border-radius:14px;box-shadow:0 6px 18px rgba(25,45,55,.07)}
.note-sheet .note-editor{min-height:max(360px,50vh);padding:0;font-size:16.5px;line-height:1.85;caret-color:var(--subject-color,var(--accent))}
.note-sheet .note-editor:empty:before{color:color-mix(in srgb,var(--muted) 65%,transparent);font-style:italic}
.note-sheet .note-editor h2{font-size:23px;margin:22px 0 8px}
.note-sheet .note-editor h3{font-size:18px;margin:18px 0 6px}
.note-sheet .attach-panel{margin-top:26px;border-top-style:dashed}
.notebook-main .lesson-foot{margin-top:16px;padding-top:0;border-top:0}
.note-modal{width:min(900px,100%)}
.note-modal .modal-body{background:var(--panel2);padding:22px}
.note-modal .note-sheet{gap:0}
@media(min-width:761px){.notebook-main{padding:28px 32px}}
@media(max-width:760px){
  .note-sheet{padding:22px 18px 20px;border-radius:14px}
  .note-sheet .note-editor-title{font-size:22px}
  .note-sheet .editor-toolbar{margin-left:-8px;margin-right:-8px}
  .note-modal .modal-body{padding:10px}
}

/* Subject cards: a colored cover with the subject's emoji on a raised tile */
.subject-card{--cpad:18px;padding-top:0}
.subject-card:before{display:none}
.subject-cover{flex:none;height:64px;margin:0 calc(-1*var(--cpad));background:radial-gradient(circle at 85% -20%,rgba(255,255,255,.35),transparent 55%),linear-gradient(135deg,var(--subject-color,var(--accent)),color-mix(in srgb,var(--subject-color,var(--accent)) 60%,#fff))}
.subject-card .subject-icon{width:54px;height:54px;margin:-27px 0 12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);box-shadow:0 6px 16px rgba(25,45,55,.12);font-size:27px;line-height:1}
.subject-card{transition:transform .15s ease,box-shadow .15s ease}
.subject-row-badge{width:36px;height:36px;font-size:19px;line-height:1;background:color-mix(in srgb,var(--subject-color,var(--accent)) 16%,var(--panel))}
.nb-emoji{margin-right:8px}
@media(max-width:760px){.subject-card{--cpad:15px;padding-top:0}.subject-cover{height:52px}.subject-card .subject-icon{width:46px;height:46px;margin-top:-23px;font-size:23px}}
@media(prefers-reduced-motion:reduce){.subject-card{transition:none}}

/* Settings › Subjects: icon picker */
.emoji-pick{position:relative;flex:none}
.emoji-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--panel2);font-size:20px;line-height:1;cursor:pointer;transition:border-color .15s ease}
.emoji-btn:hover,.emoji-btn[aria-expanded="true"]{border-color:var(--accent)}
.emoji-btn:focus-visible,.emoji-pop button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emoji-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:min(260px,calc(100vw - 48px));display:grid;grid-template-columns:repeat(6,1fr);gap:2px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(15,25,30,.16)}
.emoji-pop[hidden]{display:none}
.emoji-pop button{height:36px;border:0;border-radius:8px;background:transparent;font-size:19px;line-height:1;cursor:pointer}
.emoji-pop button:hover{background:var(--panel2)}
.emoji-pop .emoji-auto{grid-column:1/-1;height:30px;margin-bottom:4px;font-size:12px;font-weight:700;color:var(--muted);border:1px dashed var(--line)}

/* ---- Study: decks, deck editor, flip-card practice and quizzes ---- */
.ghost.small{padding:8px 12px;font-size:12px}
#view-study button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.lesson-cards svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lesson-cards{color:var(--accent)}
.lesson-cards:hover,.lesson-cards:focus-visible{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));color:var(--accent)}
/* Actions sit on the "Last edited" line so a long lesson title keeps the full width */
@container (min-width:441px){.note-sheet .lesson-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title title" "meta actions"}.note-sheet .lesson-actions{margin-top:6px}}
@container (max-width:520px){.lesson-cards span{display:none}}
.study-empty p{line-height:1.6}
.study-empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.study-guide{margin:0 0 16px;padding:0;overflow:hidden}
.study-guide summary{cursor:pointer;padding:14px 18px;font-weight:650;color:var(--accent)}
.study-guide[open] summary{border-bottom:1px solid var(--line)}
.study-guide-body{padding:14px 18px 16px;font-size:13px;line-height:1.55}
.study-guide-steps{margin:0 0 14px;padding-left:20px}
.study-guide-steps li{margin-bottom:4px}
.study-guide h4{margin:0 0 10px;font-size:14px}
.study-guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.study-guide-grid>div{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel2);display:flex;flex-direction:column;gap:6px;min-width:0}
.study-guide-grid p{margin:0;color:var(--muted)}
.study-guide-grid code{display:block;font-family:inherit;font-size:12.5px;background:var(--panel);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;overflow-wrap:anywhere}
.study-guide-grid span{font-size:12px;color:var(--accent)}
.study-guide-note{margin:12px 0 0;color:var(--muted)}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.deck-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(25,45,55,.05);overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.deck-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--subject-color,var(--accent))}
.deck-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,45,55,.1);border-color:color-mix(in srgb,var(--subject-color,var(--accent)) 35%,var(--line))}
.deck-open{border:0;background:transparent;font:inherit;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;padding:16px 16px 12px 20px;text-align:left;border-radius:0;color:var(--ink);font-weight:inherit}
.deck-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.deck-subject{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-emoji{width:26px;height:26px;flex:none;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--subject-color,var(--accent)) 15%,var(--panel));font-size:15px}
.deck-title{font-size:16px;line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere}
.deck-meta{font-size:11.5px;color:var(--muted)}
.deck-meta em{font-style:normal;font-weight:700;color:var(--warn)}
.deck-bar{display:block;height:6px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-top:4px}
.deck-bar i{display:block;height:100%;border-radius:inherit;background:var(--subject-color,var(--accent));transition:width .3s ease}
.deck-actions{display:flex;gap:8px;padding:0 16px 16px 20px}
.deck-actions button{flex:1}
.deck-page{padding:0;overflow:hidden;border-top:4px solid var(--subject-color,var(--accent))}
.deck-head{display:flex;flex-direction:column;gap:6px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.deck-title-input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:26px;font-weight:800;letter-spacing:-.03em;padding:2px 0}
.deck-title-input:focus-visible{box-shadow:0 2px 0 var(--accent)}
.deck-source{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:6px;font-size:12px;color:var(--muted)}
.deck-source .grow{flex:1}
.fc-list{display:flex;flex-direction:column}
.fc-row{display:flex;align-items:flex-start;gap:12px;padding:14px 24px;border-bottom:1px solid var(--line)}
.fc-row:focus-within{background:color-mix(in srgb,var(--subject-color,var(--accent)) 5%,var(--panel))}
.fc-num{flex:none;width:26px;height:26px;display:grid;place-items:center;margin-top:20px;border-radius:8px;background:var(--panel2);color:var(--muted);font-size:11px;font-weight:800}
.fc-fields{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px}
.fc-fields label{display:flex;flex-direction:column;gap:5px}
.fc-fields label>span{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fc-fields textarea{width:100%;min-height:42px;resize:none;overflow:hidden;font:inherit;font-size:13.5px;line-height:1.5}
.fc-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-top:22px}
.fc-dots{display:flex;gap:3px}
.fc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.fc-dots i.on{background:var(--subject-color,var(--accent))}
.fc-del{width:30px;height:30px;padding:0;font-size:18px;line-height:1}
.fc-del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.fc-empty{padding:30px 24px;text-align:center}
.fc-add{padding:16px 24px}
.study-bar{margin-bottom:10px}
.study-progress{height:6px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin-bottom:22px}
.study-progress i{display:block;height:100%;background:var(--accent);transition:width .25s ease}
.flip-wrap{max-width:720px;margin:0 auto}
.flipcard{display:block;width:100%;height:clamp(240px,42vh,380px);perspective:1400px;cursor:pointer;outline:0;border-radius:22px}
.flipcard:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.flipcard.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px 34px;text-align:center;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--subject-color,var(--accent));border-radius:22px;box-shadow:0 18px 44px rgba(25,45,55,.12);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:auto}
.flip-back{transform:rotateY(180deg);background:color-mix(in srgb,var(--subject-color,var(--accent)) 6%,var(--panel))}
.fc-kind{display:inline-block;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--subject-color,var(--accent)) 14%,var(--panel));color:var(--subject-color,var(--accent));font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.fc-text{font-size:clamp(18px,2.4vw,26px);font-weight:750;line-height:1.4;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;max-width:100%}
.flip-back .fc-text{font-weight:600;font-size:clamp(16px,2vw,21px)}
.flip-face small{color:var(--muted);font-size:11px}
.flip-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}
.flip-actions small{display:block;font-size:10px;font-weight:600;opacity:.75}
.flip-actions .primary small{display:inline;margin-left:6px}
.again-btn,.got-btn{border:0;font:inherit;font-weight:750;min-width:150px;padding:12px 18px;border-radius:14px;font-size:15px;color:#fff;box-shadow:0 7px 17px rgba(25,45,55,.12)}
.again-btn{background:var(--danger)}
.got-btn{background:var(--success)}
.again-btn:hover,.got-btn:hover{filter:brightness(1.07)}
.again-btn:focus-visible,.got-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.study-done{max-width:640px;margin:0 auto;padding:34px 30px;text-align:center}
.study-done h2{margin:10px 0 8px;font-size:23px;letter-spacing:-.02em}
.study-done p{color:var(--muted);line-height:1.6;margin:0 0 18px}
.study-done-icon{font-size:44px}
.study-done-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.quiz-score{width:118px;height:118px;margin:0 auto;border-radius:50%;display:grid;place-content:center;background:radial-gradient(closest-side,var(--panel) 78%,transparent 80%),conic-gradient(var(--subject-color,var(--accent)) calc(var(--pct)*1%),var(--panel2) 0)}
.quiz-score b{font-size:28px;line-height:1}
.quiz-score small{color:var(--muted);font-size:11px;margin-top:3px}
.quiz-review{text-align:left;margin:4px 0 20px;display:flex;flex-direction:column;gap:8px}
.quiz-review h3{margin:0 0 2px;font-size:14px}
.quiz-review-item{padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--danger);border-radius:10px;background:var(--panel2)}
.quiz-review-item small{color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.quiz-review-item p{margin:3px 0;color:var(--ink);font-size:13px;white-space:pre-line}
.quiz-review-item b{color:var(--success);font-size:13px;white-space:pre-line}
.quiz-card{max-width:720px;margin:0 auto;padding:28px 30px;border-top:5px solid var(--subject-color,var(--accent))}
.quiz-prompt{margin:12px 0 20px;font-size:clamp(17px,2.2vw,22px);font-weight:750;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 14px;text-align:left;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ink);font-weight:600;font-size:14px;line-height:1.45;transition:border-color .15s ease,background-color .15s ease}
.quiz-opt:hover:not(:disabled){border-color:var(--subject-color,var(--accent));background:color-mix(in srgb,var(--subject-color,var(--accent)) 6%,var(--panel))}
.quiz-opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#view-study .quiz-opt:disabled{cursor:default;opacity:1}
.quiz-key{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:var(--panel2);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--muted)}
.quiz-text{white-space:pre-line;overflow-wrap:anywhere}
.quiz-opt.right{border-color:var(--success);background:color-mix(in srgb,var(--success) 12%,var(--panel))}
.quiz-opt.right .quiz-key{background:var(--success);border-color:var(--success);color:#fff}
.quiz-opt.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--panel))}
.quiz-opt.wrong .quiz-key{background:var(--danger);border-color:var(--danger);color:#fff}
#view-study .quiz-opt.dim{opacity:.55}
.quiz-feedback{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-weight:750}
.quiz-feedback.ok{color:var(--success)}
.quiz-feedback.bad{color:var(--danger)}
.quiz-feedback small{margin-left:6px;opacity:.75;font-weight:600}
@media(max-width:760px){
  .fc-row{padding:12px 14px;gap:8px}
  .fc-fields{grid-template-columns:1fr}
  .fc-num{display:none}
  .deck-head{padding:18px 16px 14px}
  .deck-title-input{font-size:21px}
  .fc-add{padding:14px}
  .flip-face{padding:22px 18px}
  .again-btn,.got-btn{min-width:0;flex:1}
  .quiz-card{padding:20px 16px}
  .study-done{padding:26px 18px}
}
@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}.deck-card{transition:none}.deck-card:hover{transform:none}.deck-bar i,.study-progress i{transition:none}}
/* Row opened from the Calendar: brief highlight so it's easy to spot */
.task-sheet tbody tr.row-flash td{animation:rowFlash 2.2s ease}@keyframes rowFlash{0%,35%{background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}}@media(prefers-reduced-motion:reduce){.task-sheet tbody tr.row-flash td{animation-duration:3s;animation-timing-function:steps(1,end)}}
/* Jump to the top or end of a long note */
.note-jump{position:fixed;right:24px;bottom:24px;z-index:90}
.note-jump[hidden]{display:none}
.note-jump.in-modal{z-index:110}
.note-jump button{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent);box-shadow:var(--shadow);cursor:pointer;transition:background .15s ease}
.note-jump button:hover{background:var(--accent-soft)}
.note-jump svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.note-jump [data-jump="up"] svg{transform:rotate(180deg)}
@media(max-width:760px){.note-jump{right:14px;bottom:16px}.note-jump button{width:36px;height:36px}}
@media print{.note-jump{display:none!important}}