:root { --ink:#183234; --muted:#617375; --paper:#f5f3eb; --surface:#fffdfa; --line:#d8ded5; --teal:#1f766e; --lime:#d8ed8c; --coral:#f38e6d; --shadow:0 12px 30px rgba(20,54,53,.08); --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
[data-theme="dark"] { --ink:#e6f0e8; --muted:#aabbb1; --paper:#152525; --surface:#1d3130; --line:#36504d; --teal:#62b8ac; --lime:#b5dc76; --coral:#ffae8d; --shadow:0 12px 30px rgba(0,0,0,.25); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 var(--sans); } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(1.7rem, 3vw, 2.45rem); line-height:1.15; letter-spacing:0; margin-bottom:.4rem; } h2 { font-size:1rem; margin-bottom:.35rem; } p { color:var(--muted); } small { color:var(--muted); display:block; } label,fieldset { display:grid; gap:.35rem; color:var(--muted); font-size:.82rem; font-weight:700; } input,textarea,select { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:4px; padding:.7rem .75rem; } textarea { min-height:5rem; resize:vertical; } input:focus,textarea:focus,select:focus { outline:3px solid color-mix(in srgb, var(--teal) 24%, transparent); border-color:var(--teal); } fieldset { border:0; padding:0; margin:0; } legend { margin-bottom:.5rem; color:var(--ink); } .sidebar { position:fixed; inset:0 auto 0 0; width:244px; display:flex; flex-direction:column; padding:1.5rem 1rem; background:var(--ink); color:#f8fbf3; z-index:5; } .brand { display:flex; align-items:center; gap:.65rem; font-size:1.28rem; font-weight:800; margin:0 .55rem 2rem; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--ink); border-radius:5px; font-size:.9rem; overflow:hidden; }.brand-mark img { width:30px; height:30px; object-fit:contain; display:block; } nav { display:grid; gap:.25rem; } nav a,.sidebar-bottom a,.nav-button { display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem; color:#c8d8d0; border-radius:4px; font-weight:600; } nav a:hover,.sidebar-bottom a:hover,.nav-button:hover { background:rgba(255,255,255,.1); color:white; } nav i,.sidebar-bottom i { width:1rem; text-align:center; } .sidebar-bottom { margin-top:auto; display:grid; gap:.2rem; } .sidebar-bottom b { display:grid; place-items:center; margin-left:auto; width:20px; height:20px; background:var(--coral); color:var(--ink); border-radius:50%; font-size:.7rem; } .nav-button { width:100%; border:0; background:none; font:inherit; } .main-shell { margin-left:244px; min-height:100vh; } .topbar { height:68px; padding:0 3vw; display:flex; justify-content:flex-end; align-items:center; gap:1rem; border-bottom:1px solid var(--line); }.role-label { margin-right:auto; color:var(--muted); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; }.page-content { max-width:1280px; padding:2.5rem 3vw 4rem; margin:auto; }.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; }.eyebrow,.metric-label { display:block; color:var(--teal); font:700 .71rem var(--mono); letter-spacing:0; text-transform:uppercase; margin-bottom:.55rem; }.overview-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.55rem; }
.overview-eyebrow-row .eyebrow { margin-bottom:0; }
.overview-role-inline { display:none; color:var(--teal); font:700 .71rem var(--mono); letter-spacing:0; text-transform:uppercase; white-space:nowrap; }.button { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; border:1px solid transparent; border-radius:4px; padding:.7rem .9rem; font-weight:800; white-space:nowrap; }.button.primary { background:var(--teal); color:white; }.button.primary:hover { filter:brightness(1.08); }.button.secondary { color:var(--ink); background:transparent; border-color:var(--line); }.button.danger { background:#b74635; color:white; }.button.small { padding:.45rem .65rem; font-size:.78rem; }.icon-button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:var(--surface); }.mobile-menu { display:none; }.text-button { padding:0; border:0; background:transparent; color:var(--teal); font-weight:800; }.overview-grid,.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.25rem; }.feature-panel,.metrics-grid article,.group-tile,.form-tile { background:var(--surface); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }.feature-panel { min-height:176px; padding:1.25rem; display:flex; flex-direction:column; }.feature-panel strong { font-size:2.2rem; line-height:1; margin-bottom:auto; text-transform:capitalize; }.feature-panel a { color:var(--teal); font-weight:800; font-size:.85rem; }.welcome-panel { background:var(--lime); color:#17302e; border-color:transparent; }.welcome-panel p { color:#315755; max-width:22rem; }.split-section,.admin-grid,.builder-layout { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.section-heading a { color:var(--teal); font-weight:800; font-size:.85rem; }.list-surface,.table-surface,.profile-surface { background:var(--surface); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }.list-row,.notification-row { display:flex; align-items:center; gap:.85rem; padding:1rem; border-bottom:1px solid var(--line); }.list-row:last-child,.notification-row:last-child { border-bottom:0; }.list-row strong,.notification-row strong { display:block; }.list-row > :nth-child(2),.notification-row > :nth-child(2) { min-width:0; flex:1; }.event-dot,.task-mark,.tile-icon { display:grid; flex:0 0 auto; place-items:center; width:34px; height:34px; border-radius:4px; }.task-mark,.tile-icon { background:color-mix(in srgb, var(--teal) 13%, var(--surface)); color:var(--teal); }.event-dot { width:12px; height:12px; }.chip { display:inline-flex; gap:.35rem; align-items:center; padding:.24rem .45rem; border:1px solid var(--line); border-radius:99px; color:var(--muted); font:700 .67rem var(--mono); text-transform:uppercase; }.chip.success { color:#136b51; background:#def5d6; border-color:#b9dfac; }.chip.draft { color:#8a5a12; background:#f7e7c2; border-color:#e2c27a; }.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }.group-tile,.form-tile { padding:1.1rem; display:flex; flex-direction:column; gap:.85rem; }.group-tile > div:nth-child(2) { flex:1; }.group-tile footer { display:flex; align-items:center; gap:.65rem; border-top:1px solid var(--line); padding-top:.75rem; color:var(--muted); font-size:.8rem; }.calendar-list { display:grid; gap:.8rem; }.event-card { display:flex; align-items:stretch; gap:1rem; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--event-color); border-radius:7px; padding:1rem; box-shadow:var(--shadow); }.event-date { min-width:4.25rem; border-right:1px solid var(--line); text-align:center; padding:.1rem .9rem .1rem 0; }.event-date span { display:block; font-size:1.65rem; font-weight:800; line-height:1; }.event-date small { font:700 .65rem var(--mono); }.event-content { flex:1; }.event-content p { margin-bottom:.3rem; }.event-title { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }.event-title h2 { margin:0; }.rsvp { display:flex; align-items:center; gap:.35rem; }.builder-fields { display:grid; gap:.7rem; }.field-preview { display:flex; gap:1rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:5px; }.field-preview > span { display:grid; place-items:center; width:25px; height:25px; color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,var(--surface)); border-radius:50%; font:700 .75rem var(--mono); }.field-preview small { text-transform:capitalize; }.field-preview p { font-size:.8rem; margin:.25rem 0 0; }.builder-add { align-self:start; position:sticky; top:1rem; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.builder-add form,.stacked-form { display:grid; gap:1rem; }.response-form { max-width:760px; display:grid; gap:1.5rem; }.response-form fieldset { padding:1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.required { color:#b74635; margin-left:.35rem; font-size:.75rem; }.assignment-list { overflow:hidden; }.assignment-row { display:flex; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid var(--line); }.assignment-row:last-child { border-bottom:0; }.assignment-copy { flex:1; }.assignment-copy p { margin-bottom:.3rem; }.inline-upload { display:flex; align-items:center; gap:.5rem; }.inline-upload input { width:190px; padding:.4rem; }.attendance-actions { display:grid; gap:.7rem; margin-bottom:1.5rem; }.attendance-card { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.9rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.attendance-controls { display:flex; flex-wrap:wrap; gap:.55rem; align-items:flex-start; width:100%; min-width:0; max-width:100%; }.attendance-controls .absence-reason { flex:1 1 240px; min-width:12rem; max-width:28rem; }.table-surface { overflow:auto; padding:1rem; }.table-surface table { width:100%; border-collapse:collapse; min-width:620px; }.table-surface th { text-align:left; color:var(--muted); font:700 .7rem var(--mono); text-transform:uppercase; padding:.6rem; }.table-surface td { border-top:1px solid var(--line); padding:.75rem .6rem; vertical-align:middle; }.table-surface td small { margin-top:.15rem; }.table-surface form { display:flex; align-items:center; gap:.45rem; }.table-surface select { min-width:100px; padding:.35rem; }.notification-row { align-items:flex-start; }.notification-row p { margin:.15rem 0 0; }.notification-row small { white-space:nowrap; }.profile-surface { max-width:580px; display:flex; gap:1.25rem; padding:1.25rem; }.profile-surface form { flex:1; display:grid; gap:1rem; }.avatar { display:grid; flex:0 0 70px; place-items:center; width:70px; height:70px; background:var(--lime); color:#16312f; border-radius:50%; font-size:1.7rem; font-weight:800; overflow:hidden; }.avatar img { width:100%; height:100%; object-fit:cover; }.metrics-grid { grid-template-columns:repeat(4,1fr); }.metrics-grid article { padding:1rem; }.metrics-grid strong { display:block; font-size:1.8rem; }.metrics-grid span { color:var(--muted); font-size:.82rem; text-transform:capitalize; }.admin-grid { margin-bottom:1.5rem; }.admin-grid .list-surface { padding:1rem; }.auth-shell { min-height:100vh; display:grid; place-items:center; padding:1rem; background:#183234 url("forest.webp") center / cover no-repeat fixed; }.auth-panel { width:min(930px,100%); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }.auth-intro { position:relative; min-height:520px; padding:3rem; color:#f7fff3; background:#183234; }.auth-intro h1 { max-width:440px; font-size:clamp(2rem,4vw,3.4rem); margin-top:5rem; }.auth-intro p { color:#c6d5cd; max-width:360px; }.auth-mark { position:absolute; bottom:2rem; right:2rem; display:grid; place-items:center; width:70px; height:70px; background:var(--lime); color:#183234; transform:rotate(12deg); border-radius:5px; font-size:2rem; overflow:hidden; }.auth-mark img { width:36px; height:36px; object-fit:contain; display:block; }.auth-form { padding:3rem; display:flex; flex-direction:column; justify-content:center; }.auth-brand { color:var(--ink); margin:0 0 3rem; }.auth-form form { display:grid; gap:1rem; margin-top:1.5rem; }.auth-links { display:flex; justify-content:space-between; gap:.75rem; margin-top:1.25rem; color:var(--teal); font-weight:800; font-size:.82rem; }.toast-stack { position:fixed; top:1rem; right:1rem; z-index:40; display:grid; gap:.65rem; width:min(420px, calc(100vw - 2rem)); pointer-events:none; }.toast { display:flex; align-items:center; gap:.7rem; position:relative; margin:0; padding:.8rem 1rem; width:100%; max-width:none; pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:5px; box-shadow:var(--shadow); }.toast-error { border-left-color:#b74635; }.toast-warning { border-left-color:#b78225; }.toast button { margin-left:auto; border:0; color:inherit; background:none; }.empty-state { padding:1.5rem; text-align:center; }.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }.check-label { display:flex; align-items:center; gap:.5rem; font-weight:600; }.check-label input { width:auto; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem; } dialog { width:min(610px,calc(100% - 2rem)); border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); padding:1.5rem; }dialog::backdrop { background:rgba(15,36,35,.56); } dialog form { display:grid; gap:1rem; } #confirm-dialog { width:min(420px,calc(100% - 2rem)); }
@media (max-width: 850px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }.sidebar.is-open { transform:translateX(0); }.main-shell { margin-left:0; }.mobile-menu { display:grid; margin-right:auto; }.role-label { display:none; }.page-content { padding:1.5rem 1rem 3rem; }.overview-grid { grid-template-columns:1fr 1fr; }.overview-grid .welcome-panel { display:none; }.overview-role-inline { display:inline-flex; }.metrics-grid { grid-template-columns:1fr 1fr; }.split-section,.admin-grid,.builder-layout { grid-template-columns:1fr; gap:1.25rem; }.builder-add { position:static; }.auth-panel { grid-template-columns:1fr; }.auth-intro { min-height:260px; padding:2rem; }.auth-intro h1 { margin-top:1.5rem; }.auth-form { padding:2rem; }.auth-mark { width:50px; height:50px; font-size:1.35rem; }.auth-mark img { width:26px; height:26px; }.page-heading { align-items:flex-start; }.attendance-controls { flex-direction:column; align-items:stretch; }.attendance-controls .button,.attendance-controls .absence-reason { width:100%; max-width:none; min-width:0; flex:0 0 auto; } }
@media (max-width: 520px) { .overview-grid { grid-template-columns:1fr 1fr; gap:.75rem; }.overview-grid .feature-panel { min-height:0; padding:1rem; }.overview-grid .feature-panel strong { font-size:1.7rem; }.metrics-grid,.form-grid,.check-grid { grid-template-columns:1fr; }.page-heading { flex-direction:column; }.page-heading > .button { width:100%; }.event-card { align-items:flex-start; }.event-date { min-width:3.2rem; }.rsvp { margin-left:auto; }.inline-upload { align-items:stretch; flex-direction:column; }.inline-upload input { width:100%; }.assignment-row { align-items:flex-start; flex-wrap:wrap; }.assignment-copy { min-width:calc(100% - 55px); }.profile-surface { align-items:flex-start; flex-direction:column; }.notification-row small { display:none; } }