*{box-sizing:border-box}
:root{color-scheme:light;--ink:#171923;--text:#343947;--muted:#687080;--line:#e0e4ec;--line-strong:#c9cfdb;--bg:#f4f6fa;--paper:#fff;--accent:#5141ce;--accent-dark:#3d2caf;--red:#b42318;--orange:#d76512;--amber:#a96b00;--green:#218452;--purple:#6554c0;--shadow:0 8px 26px #1b254014;--radius:14px}
html{min-width:320px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,"Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
:focus-visible{outline:3px solid #7668e880;outline-offset:2px}

/* Main shell and navigation */
.app-shell{display:flex;min-height:100vh}
.sidebar{position:sticky;top:0;display:flex;width:270px;height:100vh;flex:none;flex-direction:column;overflow-y:auto;padding:25px 17px 16px;border-right:1px solid #252a33;background:#20242b;color:#f7f8fb}
.brand{display:flex;align-items:center;gap:11px;padding:0 9px;font-size:20px;font-weight:800;letter-spacing:-.4px}
.brand-logo{display:block;width:116px;height:43px;flex:none;padding:3px 5px;border-radius:8px;background:#fff;object-fit:contain}
.brand-name{display:block;max-width:132px;color:#fff;font-size:14px;font-weight:800;line-height:1.25}
.brand-mark{display:grid;width:38px;height:38px;flex:none;place-items:center;border-radius:10px;background:var(--accent);color:#fff;font-weight:800}
.workspace{display:flex;align-items:center;gap:11px;margin:31px 0 27px;padding:13px;border:1px solid #424854;border-radius:11px;background:#292e37}
.workspace-mark{display:grid;width:38px;height:38px;flex:none;place-items:center;border-radius:9px;background:#e9e7ff;color:#4838b5;font-weight:850}
.workspace b,.workspace small,.user-meta b,.user-meta small{display:block}
.workspace b,.user-meta b{font-size:13px}
.workspace small,.user-meta small{margin-top:3px;color:#bdc3ce;font-size:11px}
.nav-caption{margin:0 0 8px;padding:0 12px;color:#a9b0bd;font-size:10px;font-weight:850;letter-spacing:1.1px}
.nav-link{position:relative;display:flex;min-height:45px;align-items:center;gap:12px;margin:3px 0;padding:0 13px;border-radius:9px;color:#d5d9e1;font-size:14px;font-weight:650;transition:background .18s,color .18s,transform .18s,box-shadow .18s}
.nav-link>span:first-of-type{flex:1}
.nav-link:not(.active):hover{transform:translateX(3px);background:#343a46;color:#fff}
.nav-link.active{background:#e9e7ff;color:#4032b0;font-weight:800;box-shadow:inset 3px 0 #7162e8}
.nav-link:first-letter{font-size:18px}
.management{margin-top:23px}
.badge-count{padding:2px 7px;border-radius:20px;background:#e9e7ff;color:#4032b0;font-size:11px;font-style:normal;font-weight:800}
.sidebar-bottom{margin-top:auto;padding-top:18px}
.user-chip{display:flex;align-items:center;gap:10px;padding:16px 2px 0;border-top:1px solid #424854}
.avatar{display:grid;width:39px;height:39px;flex:none;place-items:center;border-radius:50%;background:#e4e7ed;color:#242832;font-weight:850}
.user-meta{min-width:0;flex:1}
.user-meta b,.user-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-button{border:0;background:transparent;color:#e5e8ee;cursor:pointer;font-size:19px}
.icon-button:hover{color:#c4bcff}

/* Header, content and page titles */
.main{min-width:0;flex:1}
.topbar{position:sticky;top:0;z-index:10;display:flex;height:70px;align-items:center;justify-content:space-between;padding:0 clamp(18px,3.2vw,48px);border-bottom:1px solid var(--line);background:#ffffffed;backdrop-filter:blur(12px)}
.crumb{color:var(--muted);font-size:13px}
.crumb span{padding:0 10px;color:#a1a7b2}
.crumb b{color:var(--ink)}
.bell-link{position:relative;color:#292d38;font-size:22px}
.bell-link i{position:absolute;top:1px;right:-2px;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#d64040}
.content{width:100%;max-width:1540px;margin:0 auto;padding:clamp(22px,3vw,42px) clamp(14px,3.2vw,48px) 38px}
.welcome,.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin:0 0 25px}
.welcome h1,.page-heading h1{margin:0 0 7px;color:#171923;font-size:clamp(25px,2.2vw,33px);font-weight:850;letter-spacing:-.7px;line-height:1.2}
.welcome h1 span{color:var(--accent);font-size:18px}
.eyebrow{margin:0 0 8px;color:#4f5665;font-size:11px;font-weight:850;letter-spacing:1.1px}
.muted{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.text-link,.text-button{border:0;background:none;color:#4032b0;font-size:13px;font-weight:750;cursor:pointer}
.text-link:hover,.text-button:hover{color:#241578;text-decoration:underline;text-underline-offset:3px}

/* Buttons, cards, stats and notices */
.button{display:inline-flex;min-height:43px;align-items:center;justify-content:center;gap:8px;padding:0 17px;border:1px solid transparent;border-radius:9px;font-size:13px;font-weight:780;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}
.button:hover{transform:translateY(-1px)}
.button:active{transform:translateY(0) scale(.985)}
.button-primary{background:var(--accent);color:#fff;box-shadow:0 4px 11px #5141ce35}
.button-primary:hover{background:var(--accent-dark);box-shadow:0 7px 17px #5141ce45}
.button-soft{border-color:#d8d4fa;background:#f0efff;color:#4032b0}
.button-soft:hover{border-color:#aaa1ef;background:#e4e1ff}
.button-danger{width:100%;border-color:#efc3c0;background:#fff1f0;color:#a22620}
.button-danger:hover{border-color:#bd3028;background:#bd3028;color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0 0 25px}
.stats article{position:relative;min-height:137px;overflow:hidden;padding:19px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 2px 8px #1b253009;transition:transform .2s,border-color .2s,box-shadow .2s}
.stats article:hover{transform:translateY(-3px);border-color:#b9b5e8;box-shadow:var(--shadow)}
.stats article:before{position:absolute;inset:0 auto 0 0;width:4px;background:#4e6bd8;content:""}
.stats article:nth-child(2):before{background:#35a66f}.stats article:nth-child(3):before{background:#e15a4f}.stats article:nth-child(4):before{background:#8a62d5}
.stats article span,.stats article small{display:block;color:#4c5562;font-size:13px;font-weight:680}
.stats article b{display:block;margin:10px 0 4px;color:#202833;font-size:33px;font-weight:850;line-height:1.15}
.stats article small{color:#707887;font-size:11px;font-weight:550}
.red-text{color:#c13228!important}.green-text{color:#18844f!important}
.panel{position:relative;margin-bottom:20px;overflow:visible;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 2px 9px #1b253009;transition:border-color .2s,box-shadow .2s}
.panel:hover{border-color:#d2d4e4;box-shadow:0 6px 19px #20253a0d}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:21px 24px 17px;border-bottom:1px solid #edf0f4}
.panel-heading h2,.panel h2{margin:0 0 5px;color:#20242e;font-size:17px;font-weight:820}
.alert{margin:0 0 16px;padding:13px 16px;border:1px solid #d8dce5;border-radius:10px;background:#f7f8fb;color:#282d39;font-size:14px;font-weight:650}
.alert.error{border-color:#e8aaa5;background:#fff0ef;color:#9f1d16}
.alert.success{border-color:#a8d4ba;background:#eaf7ef;color:#17623e}
.empty{padding:36px 18px;color:#616a79;font-size:14px;text-align:center}

/* Tables and row actions */
.table-wrap{width:100%;overflow-x:auto;border-radius:inherit}
table{width:100%;border-collapse:collapse;text-align:left}
thead{background:#f4f5f8}
th{padding:14px 17px;border-bottom:1px solid var(--line);color:#4c5361;font-size:10px;font-weight:850;letter-spacing:.7px;white-space:nowrap}
td{padding:15px 17px;border-bottom:1px solid #e8ebf0;color:#414957;font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafaff}
td b,td small{display:block}
td b{color:#222733;font-size:13px;font-weight:780}
td small{max-width:520px;margin-top:5px;overflow-wrap:anywhere;color:#687080;font-size:12px;line-height:1.5;white-space:normal}
.notes-cell{min-width:220px;max-width:430px;overflow-wrap:anywhere;color:#4d5666;line-height:1.55}
.status{display:inline-flex;align-items:center;min-height:25px;padding:4px 10px;border:1px solid #d5dae4;border-radius:20px;background:#f3f4f7;color:#383e4b;font-size:11px;font-weight:780;white-space:nowrap}
.status.overdue{border-color:#7f1010;background:#8f1515;color:#fff}
.status.red{border-color:#a51c1c;background:#bb2525;color:#fff}
.status.orange{border-color:#f3bf91;background:#ffead5;color:#873f00}
.status.amber{border-color:#e9c98f;background:#fff2d6;color:#805000}
.status.green{border-color:#a8d4ba;background:#e3f4e9;color:#17623e}
.row-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.row-actions form{margin:0}
.row-actions form button{display:grid;width:35px;height:35px;place-items:center;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:#303746;font-size:17px;cursor:pointer;transition:all .18s}
.row-actions form button:hover{transform:translateY(-1px);border-color:#8d83e6;background:#f0efff;color:#3829a8;box-shadow:0 3px 9px #5141ce22}

/* Forms: create/edit reminder and account management popups */
.filter-row{display:flex;justify-content:flex-end;margin:-7px 0 15px}
.filter-row label,.form-card label,.inline-form label,.login-card label,.account-action-popover label{display:grid;gap:7px;color:#343b49;font-size:13px;font-weight:750}
.filter-row select,.form-card input,.form-card textarea,.form-card select,.inline-form input,.login-card input,.account-action-popover input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbd1dc;border-radius:9px;outline:none;background:#fff;color:#202633;font-size:14px}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus,.inline-form input:focus,.login-card input:focus,.filter-row select:focus,.account-action-popover input:focus{border-color:#776be0;box-shadow:0 0 0 3px #7668e822}
.form-details{position:relative;flex:none}
.form-details>summary{display:flex;list-style:none;cursor:pointer}
.form-details>summary::-webkit-details-marker,.account-actions-menu>summary::-webkit-details-marker{display:none}
.form-details[open]>summary{color:#fff;background:var(--accent);border-color:var(--accent)}
.form-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.form-card.compact{position:static;display:grid;width:min(620px,calc(100vw - 40px));grid-template-columns:1fr 1fr;gap:17px;margin:13px 0 0 auto;box-shadow:0 13px 34px #1c263718;animation:popup-in .18s ease-out both}
.form-card .full{grid-column:1/-1}
.form-card textarea{min-height:90px;resize:vertical}
.form-actions{display:flex;grid-column:1/-1;gap:10px;padding-top:2px}
.page-heading:has(.form-details[open]){margin-bottom:25px}
.row-actions .form-details>summary{display:inline-flex;min-height:35px;align-items:center;justify-content:center;padding:0 13px;border:1px solid #d8d4fa;border-radius:9px;background:#f0efff;color:#4032b0;font-size:12px;font-weight:780}
.row-actions .form-details>summary:hover{background:#e4e1ff}
.row-actions .form-card.compact{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:min(560px,calc(100vw - 34px));margin:0;box-shadow:0 18px 48px #17203330}
.row-actions .form-details[open]{position:static}
.row-actions .form-details[open] .form-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-height:min(88vh,780px);overflow-y:auto}
.row-actions .form-details[open]:before{position:fixed;z-index:29;inset:0;background:#12162266;content:"";animation:fade-in .16s ease-out both}
.row-actions .form-details[open] .form-card{animation:modal-in .18s ease-out both}
.table-wrap:has(.account-actions-menu[open]),.table-wrap:has(.form-details[open]){overflow:visible}
.account-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}
.account-actions>form{margin:0}
.account-actions-menu{position:relative}
.account-actions-menu>summary{display:inline-flex;min-height:36px;align-items:center;padding:0 11px;list-style:none;border:1px solid #d8d4fa;border-radius:8px;background:#f0efff;color:#4032b0;font-size:12px;font-weight:780;cursor:pointer}
.account-actions-menu>summary:hover{background:#e4e1ff}
.account-action-popover{position:absolute;z-index:35;top:calc(100% + 9px);right:0;display:grid;width:min(380px,calc(100vw - 32px));gap:17px;padding:19px;border:1px solid #d9deea;border-radius:13px;background:#fff;box-shadow:0 18px 48px #17203330;white-space:normal;animation:popup-in .18s ease-out both}
.account-actions-menu[open] .account-action-popover:before{position:fixed;z-index:-1;inset:0;background:#12162222;content:""}
.account-action-popover form{display:grid;gap:11px;margin:0}
.account-action-popover label{gap:8px;font-size:13px}
.account-action-popover input{min-height:46px}
.create-user{padding:21px 22px;margin-bottom:18px}
.create-user-heading{margin-bottom:18px}
.create-user h2{margin:0 0 5px}
.inline-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:start;gap:14px}
.inline-form>.button{align-self:end;margin-bottom:32px}
.inline-form label{min-width:0}
.field-hint{display:block;min-height:32px;color:#687080;font-size:11px;font-weight:500;line-height:1.45}

/* Login */
.login-wrap{display:grid;min-height:100vh;place-items:center;padding:24px;background:radial-gradient(ellipse at center,#e9e7ff 0,#f4f6fa 76%)}
.login-card{width:min(100%,470px);padding:42px;border:1px solid #e0e4ec;border-radius:18px;background:#fff;box-shadow:0 20px 65px #24157818}
.login-card .brand{justify-content:center;margin-bottom:28px;padding:0;color:#1a1d20}
.login-brand{flex-direction:column;gap:12px!important;text-align:center}
.login-brand .brand-logo{width:200px;height:70px}
.login-brand .brand-name{max-width:100%;color:#1d2430;font-size:18px}
.login-card .eyebrow{text-align:center}
.login-card h1{margin:0 0 8px;color:#191b1e;font-size:29px;font-weight:850;text-align:center}
.login-card>.muted{margin-bottom:24px;text-align:center}
.login-card label{margin-top:15px}
.wide-button{width:100%;margin-top:21px}
.hint{margin-top:18px;color:#687080;font-size:12px}
.center{text-align:center}

/* Calendar and urgency palette */
.calendar-panel{padding-bottom:16px}
.calendar-heading{padding-bottom:18px}
.calendar-nav{display:flex;align-items:center;gap:12px}
.calendar-nav b{min-width:76px;color:#252a35;font-size:15px;font-weight:850;text-align:center}
.calendar-nav a{display:grid;width:39px;height:39px;place-items:center;border:1px solid #d2d7e1;border-radius:9px;background:#f5f6fa;color:#4032b0;font-size:23px;line-height:1;transition:all .18s}
.calendar-nav a:hover{transform:translateY(-1px);border-color:#aaa1ef;background:#e9e7ff;box-shadow:0 4px 10px #5141ce20}
.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 22px}
.calendar-weekdays{border-bottom:1px solid var(--line)}
.calendar-weekdays span{padding:13px 5px;color:#4e5665;font-size:12px;font-weight:850;text-align:center}
.calendar-day,.calendar-empty{min-height:78px;border-right:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}
.calendar-day:nth-child(7n),.calendar-empty:nth-child(7n){border-right:0}
.calendar-day{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 14px;color:#303644;transition:transform .16s,filter .16s,box-shadow .16s}
.calendar-day:hover{z-index:2;transform:scale(1.035);filter:saturate(1.12);box-shadow:inset 0 0 0 2px #8e83e5}
.calendar-date{font-size:14px;font-weight:760}
.calendar-count{display:grid;min-width:29px;height:29px;place-items:center;border-radius:50%;background:#d9deea;color:#272d3a;font-size:13px;font-weight:850}
.calendar-day.overdue{background:#8f1515;color:#fff}
.calendar-day.overdue .calendar-count{background:#fff;color:#a01810;animation:urgent-pulse 1.8s ease-in-out infinite}
.calendar-day.red{background:#bc2929;color:#fff}
.calendar-day.red .calendar-count,.legend-red{background:#801616;color:#fff}
.calendar-day.red .calendar-count{animation:urgent-pulse 2.4s ease-in-out infinite}
.calendar-day.orange{background:#ffead5;color:#7b3900}
.calendar-day.orange .calendar-count,.legend-orange{background:#ed7819;color:#fff}
.calendar-day.amber{background:#fff1cd;color:#6f4b00}
.calendar-day.amber .calendar-count,.legend-amber{background:#d69b12;color:#fff}
.calendar-day.green{background:#e2f5e9;color:#155c37}
.calendar-day.green .calendar-count,.legend-green{background:#29945c;color:#fff}
.calendar-day.done{background:#efedff;color:#493bb8}
.calendar-day.done .calendar-count,.legend-done{background:#d5d0ff;color:#4032a8}
.calendar-day.overdue:hover{background:#701010}.calendar-day.red:hover{background:#a51d1d}.calendar-day.orange:hover{background:#ffdbb8}.calendar-day.amber:hover{background:#ffe6a6}.calendar-day.green:hover{background:#cef0db}
.calendar-day.is-today{box-shadow:inset 0 0 0 2px var(--accent)}
.calendar-day.is-today .calendar-date{font-weight:900}
.calendar-day.no-events .calendar-date{color:#7a8290}
.calendar-legend{display:flex;align-items:center;flex-wrap:wrap;gap:15px;padding:16px 24px 3px;color:#555d6b;font-size:11px}
.calendar-legend span{display:flex;align-items:center;gap:7px}
.calendar-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}

@keyframes popup-in{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-47%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes urgent-pulse{0%,100%{box-shadow:0 0 0 0 #b4231840}50%{box-shadow:0 0 0 6px #b4231800}}
@keyframes content-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.content>.welcome,.content>.stats,.content>.panel,.content>.page-heading{animation:content-enter .35s ease-out both}

@media(max-width:1100px){.sidebar{width:235px}.content{padding-right:27px;padding-left:27px}.topbar{padding-right:27px;padding-left:27px}.stats{gap:11px}.calendar-day,.calendar-empty{min-height:67px}.inline-form{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-form>.button{margin-bottom:32px}}
@media(max-width:760px){.sidebar{width:66px;padding:18px 8px}.sidebar .brand{justify-content:center;padding:0}.sidebar .brand-logo{width:46px;height:38px;padding:2px}.sidebar .brand-name,.workspace,.nav-caption,.nav-link span,.nav-link .badge-count,.user-meta,.user-chip form{display:none}.nav-link{justify-content:center;padding:0;font-size:0}.nav-link:first-letter{font-size:18px}.sidebar-bottom .avatar{margin:auto}.content{padding:24px 15px}.topbar{height:60px;padding:0 16px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stats article{min-height:112px;padding:14px}.stats article b{font-size:27px}.welcome{gap:12px}.welcome h1,.page-heading h1{font-size:25px}.welcome>.button{flex:none;min-height:40px;padding:0 11px;font-size:11px}.page-heading{gap:14px}.page-heading:has(.form-details){flex-wrap:wrap}.page-heading .form-details{margin-left:auto}.page-heading .form-details[open]{width:100%}.page-heading .form-details[open] .form-card{margin-left:auto}.calendar-grid{margin:0 10px}.calendar-day,.calendar-empty{min-height:58px}.calendar-day{padding:8px 6px}.calendar-count{min-width:23px;height:23px;font-size:10px}.calendar-weekdays span{font-size:10px}.calendar-legend{gap:10px;padding-left:12px}.table-wrap{border-radius:0}th,td{padding:11px 12px}.account-actions{gap:8px}.row-actions{gap:5px}}
@media(max-width:520px){.sidebar{display:flex;position:sticky;top:0;width:58px;height:100vh;padding:12px 5px 10px}.sidebar .brand{justify-content:center;padding:0}.sidebar .brand-logo{width:46px;height:37px;padding:2px}.sidebar .brand-name,.workspace,.nav-caption,.nav-link span,.nav-link .badge-count,.user-meta{display:none}.sidebar .nav-link{justify-content:center;min-height:43px;margin:3px 0;padding:0;font-size:0}.sidebar .nav-link:first-letter{font-size:18px}.sidebar .user-chip{flex-direction:column;gap:9px;padding:12px 0 0}.sidebar .user-chip form{display:block}.sidebar .icon-button{font-size:17px}.content{min-width:0;padding:20px 11px}.topbar{padding:0 12px}.crumb{font-size:10px}.crumb span{padding:0 5px}.stats article{padding:12px}.stats article b{font-size:24px}.welcome{align-items:flex-start}.welcome h1{font-size:22px}.welcome .muted{max-width:235px}.welcome>.button{width:auto;min-width:40px;padding:0 10px;font-size:11px}.page-heading{align-items:flex-start;flex-wrap:wrap}.page-heading>.form-details{width:100%;margin:0}.page-heading>.form-details:not([open]){width:auto;margin-left:auto}.page-heading .form-details[open] .form-card{width:100%;margin-top:11px}.button{padding:0 12px;font-size:12px}.form-card.compact{grid-template-columns:1fr;gap:13px;padding:16px}.form-card .full,.form-actions{grid-column:auto}.form-actions{flex-wrap:wrap}.login-card{padding:30px 23px}.login-card h1{font-size:25px}.calendar-day,.calendar-empty{min-height:48px}.calendar-day{padding:6px 4px}.calendar-date{font-size:11px}.calendar-count{min-width:19px;height:19px;font-size:9px}.calendar-heading{align-items:flex-start;gap:8px;padding:16px}.calendar-heading .muted{max-width:200px}.calendar-nav{gap:5px}.calendar-nav b{min-width:55px;font-size:13px}.calendar-nav a{width:31px;height:31px}.calendar-legend{font-size:10px}.inline-form{grid-template-columns:1fr}.inline-form>.button{margin:0}.field-hint{min-height:0}.create-user{padding:17px}.account-action-popover{position:fixed;top:50%;left:50%;right:auto;width:min(390px,calc(100vw - 28px));max-height:85vh;overflow:auto;transform:translate(-50%,-50%);animation:modal-in .18s ease-out both}.row-actions .form-card.compact{left:50%;right:auto;width:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Mobile navigation can expand over the page and collapse back to the icon rail. */
.menu-toggle{display:none}
.sidebar-menu-toggle{display:none}
.sidebar-backdrop{display:none}
@media(max-width:520px){
 .menu-toggle{display:grid;width:36px;height:36px;flex:none;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:#3930a8;font-size:19px;cursor:pointer}
 .sidebar-menu-toggle{display:flex;min-height:38px;align-items:center;justify-content:center;gap:6px;margin:9px 0 12px;border:1px solid #464d5a;border-radius:9px;background:#2c323c;color:#fff;font-size:17px;cursor:pointer}
 .sidebar-menu-toggle span{display:none}
 .topbar{justify-content:flex-start;gap:10px}
 .topbar .crumb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sidebar-backdrop{position:fixed;z-index:29;inset:0;display:none;border:0;background:#10131bcc}
 .app-shell.sidebar-open .sidebar-backdrop{display:block}
 .app-shell.sidebar-open .sidebar{position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(270px,84vw);height:100dvh;padding:22px 16px 15px;box-shadow:12px 0 35px #11182745;animation:drawer-in .2s ease-out both}
 .app-shell.sidebar-open .sidebar .brand{justify-content:flex-start;padding:0 5px}
 .app-shell.sidebar-open .sidebar .brand-logo{width:104px;height:40px}
 .app-shell.sidebar-open .sidebar .brand-name{display:block;max-width:125px}
 .app-shell.sidebar-open .sidebar-menu-toggle{align-self:flex-end;width:100%;justify-content:flex-start;padding:0 12px;background:#3932a0;border-color:#6258d7}
 .app-shell.sidebar-open .sidebar-menu-toggle span{display:inline;font-size:13px;font-weight:750}
 .app-shell.sidebar-open .sidebar .workspace{display:flex;margin:26px 0 22px}
 .app-shell.sidebar-open .sidebar .nav-caption{display:block}
 .app-shell.sidebar-open .sidebar .nav-link{justify-content:flex-start;padding:0 12px;font-size:14px}
 .app-shell.sidebar-open .sidebar .nav-link span{display:inline}
 .app-shell.sidebar-open .sidebar .nav-link .badge-count{display:inline-block}
 .app-shell.sidebar-open .sidebar .user-chip{flex-direction:row;gap:9px;padding:14px 0 0}
 .app-shell.sidebar-open .sidebar .user-meta{display:block;min-width:0;flex:1}
 .app-shell.sidebar-open .sidebar .user-chip form{display:block}
}
@keyframes drawer-in{from{transform:translateX(-18px);opacity:.8}to{transform:translateX(0);opacity:1}}

/* On phones, keep the sidebar fully hidden until the menu button opens it. */
@media(max-width:520px){
 .sidebar{display:none;width:min(270px,84vw)}
 .app-shell.sidebar-open .sidebar{display:flex;position:fixed;z-index:30;top:0;bottom:0;left:0;width:min(270px,84vw);height:100dvh;padding:22px 16px 15px;box-shadow:12px 0 35px #11182745}
 .sidebar-menu-toggle{display:none}
 .app-shell.sidebar-open .sidebar-menu-toggle{display:flex}
}