/* Obligo — design tokens + components (light theme; override tokens under [data-theme=dark] later) */
:root{
--navy:#13294B;--navy-d:#0D1E38;--bg:#F4F6F9;--card:#FFFFFF;--line:#D5DCE6;
--text:#1B2433;--text-2:#46526A;--field:#67748A;--tint:#E8EDF5;
--amber:#F2A93B;--amber-h:#E6952A;
--over-bg:#FCE3E0;--over:#9F1C1C;--soon-bg:#FFF1C2;--soon:#6E5200;--ok-bg:#E2F2E8;--ok:#1C5E37;
--err:#B42318;--err-bg:#FDECEA;--glow:#F7C97F;--focus:#1D4ED8;
--r:12px;--sh:0 1px 2px rgba(19,41,75,.06),0 4px 14px rgba(19,41,75,.07);
--font:'Source Sans 3','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--text);font-size:18px;line-height:1.4;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;padding:0}
a{color:inherit;text-decoration:none}

/* ---------- canvas board ---------- */
.board{display:flex;align-items:flex-start;gap:56px;padding:56px;background:#E4E9F0;font-family:var(--font);color:var(--text)}
.shot{display:flex;flex-direction:column;gap:14px;flex:none}
.cap{font-size:18px;font-weight:700;color:var(--navy);display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.cap small{font-size:17px;font-weight:400;color:var(--text-2)}
.phone{width:390px;height:844px;position:relative;overflow:hidden;background:var(--bg);border-radius:32px;box-shadow:0 0 0 1px #C3CCD9,0 20px 44px rgba(13,30,56,.16);display:flex;flex-direction:column;flex:none}

/* ---------- icons (stroke icons as masks; colour = currentColor) ---------- */
.ic{display:inline-block;width:24px;height:24px;flex:none;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic.s{width:20px;height:20px}.ic.m{width:28px;height:28px}.ic.l{width:36px;height:36px}.ic.xl{width:56px;height:56px}
.i-truck{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>")}
.i-wrench{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>")}
.i-user{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='5'/><path d='M20 21a8 8 0 0 0-16 0'/></svg>")}
.i-users{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>")}
.i-file{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/><path d='M14 2v4a2 2 0 0 0 2 2h4'/><path d='M10 9H8'/><path d='M16 13H8'/><path d='M16 17H8'/></svg>")}
.i-home{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/><path d='M3 10a2 2 0 0 1 .71-1.53l7-6a2 2 0 0 1 2.58 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>")}
.i-grid{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='14' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/></svg>")}
.i-lock{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>")}
.i-menu{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>")}
.i-plus{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
.i-minus{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>")}
.i-check{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
.i-alert{--i:url("data:image/svg+xml,<svg 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'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>")}
.i-clock{--i:url("data:image/svg+xml,<svg 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'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>")}
.i-okc{--i:url("data:image/svg+xml,<svg 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'><circle cx='12' cy='12' r='10'/><path d='m8.5 12 2.5 2.5 4.5-5'/></svg>")}
.i-cr{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>")}
.i-cl{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>")}
.i-cd{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")}
.i-cu{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m18 15-6-6-6 6'/></svg>")}
.i-search{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>")}
.i-bell{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.27 21a2 2 0 0 0 3.46 0'/><path d='M3.26 15.33A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.41 13.96 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.41 5.96-2.74 7.33'/></svg>")}
.i-mail{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>")}
.i-msg{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>")}
.i-phone{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2'/><path d='M12 18h.01'/></svg>")}
.i-globe{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/><path d='M2 12h20'/></svg>")}
.i-cal{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>")}
.i-repeat{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4'/><path d='M3 11v-1a4 4 0 0 1 4-4h14'/><path d='m7 22-4-4 4-4'/><path d='M21 13v1a4 4 0 0 1-4 4H3'/></svg>")}
.i-more{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='5' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='12' cy='19' r='2'/></svg>")}
.i-x{--i:url("data:image/svg+xml,<svg 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'><path d='M18 6 6 18M6 6l12 12'/></svg>")}
.i-list{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h.01M3 18h.01M3 6h.01M8 12h13M8 18h13M8 6h13'/></svg>")}
.i-history{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/><path d='M12 7v5l4 2'/></svg>")}
.i-card{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/></svg>")}
.i-sliders{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7h-9M14 17H5'/><circle cx='17' cy='17' r='3'/><circle cx='7' cy='7' r='3'/></svg>")}
.i-logout{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5'/><path d='M21 12H9'/></svg>")}
.i-wifioff{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h.01'/><path d='M8.5 16.43a5 5 0 0 1 7 0'/><path d='M2 8.82a15 15 0 0 1 4.17-2.65'/><path d='M10.66 5c4.01-.36 8.14.9 11.34 3.76'/><path d='M16.85 11.25a10 10 0 0 1 2.22 1.68'/><path d='M5 13a10 10 0 0 1 5.24-2.76'/><path d='m2 2 20 20'/></svg>")}
.i-download{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='m7 10 5 5 5-5'/><path d='M12 15V3'/></svg>")}
.i-share{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v13'/><path d='m16 6-4-4-4 4'/><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/></svg>")}
.i-plussq{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='M8 12h8M12 8v8'/></svg>")}
.i-pencil{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/></svg>")}
.i-archive{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='5' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/><path d='M10 12h4'/></svg>")}
.i-undo{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14 4 9l5-5'/><path d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/></svg>")}
.i-filter{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.46V19l4 2v-8.54z'/></svg>")}
.i-info{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>")}
.i-shield{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>")}
.i-key{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/><path d='m21 2-9.6 9.6'/><circle cx='7.5' cy='15.5' r='5.5'/></svg>")}
.i-send{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.54 21.69a.5.5 0 0 0 .94-.03l6.5-19a.5.5 0 0 0-.64-.63l-19 6.5a.5.5 0 0 0-.02.93l7.93 3.18a2 2 0 0 1 1.11 1.11z'/><path d='m21.85 2.15-10.94 10.94'/></svg>")}
.i-cake{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8'/><path d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1'/><path d='M2 21h20'/><path d='M7 8v3M12 8v3M17 8v3'/><path d='M7 4h.01M12 4h.01M17 4h.01'/></svg>")}
.i-eye{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/><circle cx='12' cy='12' r='3'/></svg>")}
.i-building{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/></svg>")}
.i-arrowr{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>")}
.i-bookmark{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/></svg>")}
.i-copy{--i:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='14' height='14' rx='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>")}

/* ---------- app chrome ---------- */
.top{background:var(--navy);color:#fff;padding:20px 16px 22px;display:flex;flex-direction:column;gap:2px;flex:none}
.top .hello{font-size:26px;font-weight:700;line-height:1.2}
.top .org{font-size:17px;color:#C9D4E5}
.bar{min-height:64px;padding:0 8px;display:flex;align-items:center;gap:4px;background:var(--navy);color:#fff;flex:none}
.bar h1{font-size:22px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:8px}
.bar.light{background:var(--card);color:var(--navy);border-bottom:1px solid var(--line)}
.ibtn{width:48px;height:48px;border:0;background:transparent;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:inherit;cursor:pointer;flex:none;padding:0}
.ibtn.ring{border:1.5px solid var(--line);background:var(--card);color:var(--navy)}
.scr{flex:1;min-height:0;overflow:hidden;padding:16px 16px 120px;display:flex;flex-direction:column;gap:16px}

.tabbar{position:absolute;left:0;right:0;bottom:0;height:92px;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding:6px 4px 20px;z-index:3}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:64px;border-radius:12px;color:var(--text-2);font-size:17px;font-weight:600;line-height:1.1;text-align:center}
.tab .pill{width:56px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.tab.on{color:var(--navy);font-weight:700}
.tab.on .pill{background:var(--tint)}
.fabwrap{display:flex;justify-content:center}
.fab{width:68px;height:68px;border-radius:999px;background:var(--amber);color:var(--navy);border:0;box-shadow:0 0 0 6px var(--card),0 8px 18px rgba(13,30,56,.28);margin-top:-30px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fab .ic{width:34px;height:34px}
.fab.dis{background:#E3E8EF;color:#5E6A7E}

/* ---------- dashboard ---------- */
.counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ctr{border-radius:12px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px;border:0;text-align:left;cursor:pointer;min-height:96px}
.ctr b{font-size:34px;line-height:1.05;font-weight:700}
.ctr span{font-size:17px;font-weight:700;display:flex;align-items:center;gap:5px;line-height:1.15}
.ctr .ic{width:20px;height:20px}
.ctr.over{background:var(--over-bg);color:var(--over)}
.ctr.soon{background:var(--soon-bg);color:var(--soon)}
.ctr.ok{background:var(--ok-bg);color:var(--ok)}

.grp{display:flex;flex-direction:column;gap:8px}
.gh{display:flex;align-items:center;gap:10px;min-height:48px;width:100%;border:0;background:transparent;padding:0 4px;font-size:19px;font-weight:700;color:var(--text);text-align:left;cursor:pointer}
.gh .cnt{min-width:30px;height:28px;padding:0 9px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-size:16px;display:inline-flex;align-items:center;justify-content:center}
.gh .chev{margin-left:auto;color:var(--text-2)}
.gh.over>.ic:first-child{color:var(--over)}
.gh.soon>.ic:first-child{color:var(--soon)}
.gh.ok>.ic:first-child{color:var(--ok)}
.gh.closed{background:var(--card);border-radius:12px;padding:0 12px;min-height:60px;box-shadow:var(--sh)}

.row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:12px 10px 12px 12px;box-shadow:var(--sh);min-height:92px}
.mi{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.row .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.t{font-size:19px;font-weight:700;line-height:1.2}
.sub{font-size:17px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done{width:52px;height:52px;border-radius:999px;border:2px solid var(--field);background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;padding:0}
.done:hover{background:var(--tint)}
.done.lbl{width:auto;border-radius:12px;padding:0 16px 0 12px;gap:6px;height:48px;font-size:17px;font-weight:700}

/* ---------- status chip ---------- */
.st{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:999px;font-size:17px;font-weight:700;white-space:nowrap;align-self:flex-start;flex:none;line-height:1}
.st .ic{width:18px;height:18px}
.st.over{background:var(--over-bg);color:var(--over)}
.st.soon{background:var(--soon-bg);color:var(--soon)}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.none{background:var(--tint);color:var(--text-2)}
.st.big{height:46px;font-size:21px;padding:0 18px 0 14px;gap:8px}
.st.big .ic{width:24px;height:24px}

/* ---------- buttons ---------- */
.btn{min-height:48px;padding:0 20px;border-radius:12px;font-size:18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.1}
.btn.pri{background:var(--amber);color:var(--navy);font-weight:700}
.btn.pri:hover,.btn.pri.hov{background:var(--amber-h)}
.btn.cta{min-height:60px;width:100%;font-size:19px}
.btn.sec{background:var(--card);color:var(--navy);border-color:var(--navy);font-weight:700}
.btn.ghost{background:transparent;color:var(--navy);font-weight:700}
.btn.navy{background:var(--navy);color:#fff;font-weight:700}
.btn.danger{background:var(--card);color:var(--err);border-color:var(--err);font-weight:700}
.btn:disabled,.btn.dis{background:#E3E8EF;color:#5E6A7E;border-color:transparent;cursor:not-allowed}
.btn:focus-visible,.btn.fv{outline:3px solid var(--focus);outline-offset:3px}
.btn.full{width:100%}
.btn.sm{min-height:44px;font-size:17px;padding:0 14px}
.link{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;cursor:pointer;font-size:17px;min-height:44px;display:inline-flex;align-items:center}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.fc{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--field);background:var(--card);font-size:17px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.fc.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.fc .ic{width:20px;height:20px}
.subj{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 12px;border-radius:12px;background:var(--tint);color:var(--navy);font-size:17px;font-weight:700;align-self:flex-start;max-width:100%}
.subj .ibtn{width:36px;height:36px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{min-height:64px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;font-size:19px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px;padding:0 16px;text-align:left;cursor:pointer;box-shadow:var(--sh)}
.tile.on{border:2.5px solid var(--navy);background:var(--tint)}

/* ---------- fields ---------- */
.fld{display:flex;flex-direction:column;gap:8px}
.lbl{font-size:17px;font-weight:600;color:var(--text)}
.inp{height:56px;border:1.5px solid var(--field);border-radius:12px;background:var(--card);padding:0 16px;font-size:18px;width:100%;color:var(--text);outline:none}
.inp::placeholder{color:#626D81}
.inp.focus,.inp:focus{border:2px solid var(--navy);box-shadow:0 0 0 4px var(--glow)}
.inp.err{border:2px solid var(--err)}
textarea.inp{height:96px;padding:14px 16px;resize:none;line-height:1.4}
select.inp{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer}
.iw{position:relative;display:flex}
.iw>.ic{position:absolute;left:16px;top:16px;color:var(--text-2);pointer-events:none}
.iw>.ic.r{left:auto;right:16px}
.iw>.inp.li{padding-left:52px}
.help{font-size:17px;color:var(--text-2)}
.errmsg{display:flex;gap:8px;align-items:flex-start;background:var(--err-bg);color:var(--err);border-radius:10px;padding:10px 12px;font-size:17px;font-weight:600}
.errmsg .ic{width:20px;height:20px;margin-top:1px}

/* ---------- surfaces ---------- */
.card{background:var(--card);border-radius:12px;box-shadow:var(--sh);padding:16px;display:flex;flex-direction:column;gap:12px}
.list{background:var(--card);border-radius:12px;box-shadow:var(--sh);display:flex;flex-direction:column;overflow:hidden;flex:none}
.li{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px 10px 16px;border:0;border-top:1px solid var(--line);color:inherit;background:transparent;width:100%;text-align:left;font-size:18px;cursor:pointer}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.li .tt{font-weight:600;font-size:18px;line-height:1.25}
.li>.ic{color:var(--navy)}
.li .go{color:var(--text-2)}
.sect{font-size:17px;font-weight:700;color:var(--text-2);padding:6px 4px 0}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--tint);color:var(--navy);border-radius:12px;padding:12px 14px;font-size:17px;font-weight:600}
.note .ic{margin-top:1px}
.banner{display:flex;gap:10px;align-items:flex-start;background:#1B2433;color:#fff;padding:12px 16px;font-size:17px;font-weight:600;flex:none}
.scrim{position:absolute;inset:0;background:rgba(13,30,56,.52);z-index:4}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -8px 30px rgba(13,30,56,.22);padding:8px 16px 28px;display:flex;flex-direction:column;gap:16px;z-index:5}
.handle{width:44px;height:5px;border-radius:3px;background:#BCC5D3;align-self:center;flex:none}
.shh{display:flex;align-items:center;gap:8px}
.shh h2{flex:1;font-size:23px;font-weight:700;color:var(--navy);line-height:1.2}
.step{font-size:17px;color:var(--text-2);font-weight:600}
.toast{position:absolute;left:12px;right:12px;bottom:108px;background:var(--navy-d);color:#fff;border-radius:12px;padding:12px 6px 12px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 30px rgba(13,30,56,.35);font-size:17px;z-index:6;line-height:1.3}
.toast>.ic{color:#8EDBAA}
.toast .act{color:var(--amber);font-weight:700;background:none;border:0;min-height:48px;padding:0 12px;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex:none}
.av{width:44px;height:44px;border-radius:50%;background:var(--tint);color:var(--navy);font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;flex:none}
.av.navy{background:var(--navy);color:#fff}
.badge{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 10px;border-radius:999px;background:var(--tint);color:var(--navy);font-size:16px;font-weight:700;align-self:flex-start;white-space:nowrap}
.badge.navy{background:var(--navy);color:#fff}
.badge .ic{width:16px;height:16px}
.sk{background:linear-gradient(90deg,#DFE5EC 0,#ECF0F4 50%,#DFE5EC 100%);background-size:200% 100%;border-radius:8px;animation:sk 1.4s infinite linear}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:32px 16px}
.empty .art{width:96px;height:96px;border-radius:50%;background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.empty h3{font-size:22px;font-weight:700;color:var(--navy);line-height:1.25}
.empty p{color:var(--text-2);font-size:18px;max-width:300px}

/* tabs inside module */
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--navy);padding:0 8px;flex:none}
.tabs a{height:54px;display:flex;align-items:center;justify-content:center;color:#C9D4E5;font-weight:600;font-size:18px;border-bottom:4px solid transparent}
.tabs a.on{color:#fff;font-weight:700;border-bottom-color:var(--amber)}

/* switches, segmented, select-like */
.sw{position:relative;display:inline-flex;flex:none;width:58px;height:34px}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.sw .tr{width:58px;height:34px;border-radius:999px;background:#7C879A;position:relative}
.sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked+.tr{background:var(--navy)}
.sw input:checked+.tr::after{left:27px}
.trow{display:flex;align-items:center;gap:12px;min-height:64px}
.trow .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--tint);border-radius:12px;padding:4px;gap:4px}
.seg button{min-height:48px;border:0;border-radius:9px;background:transparent;font-size:17px;font-weight:600;color:var(--text-2);cursor:pointer}
.seg button.on{background:var(--card);color:var(--navy);font-weight:700;box-shadow:var(--sh)}

/* date wheel + calendar */
.wheel{position:relative;display:grid;grid-template-columns:1fr 1.7fr 1.1fr;height:200px;border-radius:14px;background:var(--bg);overflow:hidden;flex:none}
.wheel::before{content:"";position:absolute;left:8px;right:8px;top:80px;height:40px;border-radius:10px;background:var(--card);box-shadow:var(--sh)}
.wheel .col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.wheel .col span{height:40px;display:flex;align-items:center;font-size:19px;color:#5E6A7E}
.wheel .col span.far{opacity:.55}
.wheel .col span.sel{font-size:23px;font-weight:700;color:var(--text)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal .dow{font-size:16px;font-weight:700;color:var(--text-2);height:30px;display:flex;align-items:center;justify-content:center}
.cal button{height:46px;border:0;background:transparent;border-radius:10px;font-size:18px;cursor:pointer}
.cal button.sel{background:var(--navy);color:#fff;font-weight:700}
.cal button.today{box-shadow:inset 0 0 0 2px var(--field);font-weight:700}
.cal button.mute{color:#7C879A}

/* misc */
.dots{display:flex;gap:8px;justify-content:center;align-items:center}
.dots i{width:10px;height:10px;border-radius:5px;background:#B4BFCE;display:block}
.dots i.on{width:30px;background:var(--navy)}
.stepper{display:flex;align-items:center;justify-content:center;gap:28px}
.stepper button{width:68px;height:68px;border-radius:50%;border:2px solid var(--navy);background:var(--card);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.stepper output{font-size:60px;font-weight:700;min-width:90px;text-align:center;color:var(--navy);line-height:1}
.opt{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;min-height:140px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);box-shadow:var(--sh);cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt.on{border:2.5px solid var(--navy);background:#F2F5FA}
.opt .tick{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:2px solid var(--field);display:flex;align-items:center;justify-content:center;background:var(--card);color:transparent}
.opt.on .tick{background:var(--navy);border-color:var(--navy);color:#fff}
.opt .tick .ic{width:18px;height:18px}
.opt b{font-size:20px;color:var(--navy)}
.opt small{font-size:17px;color:var(--text-2);line-height:1.3}
.tl{display:flex;flex-direction:column}
.tli{display:flex;gap:14px;position:relative;padding-bottom:18px}
.tli::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:2px;background:var(--line)}
.tli:last-child{padding-bottom:0}
.tli:last-child::before{display:none}
.tli .dot{width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.tli .dot .ic{width:20px;height:20px}
.tli .dot.ok{background:var(--ok-bg);color:var(--ok)}
.tli .grow{display:flex;flex-direction:column;gap:2px;padding-top:7px;min-width:0}
.tli .tt{font-weight:700;font-size:18px;line-height:1.3}
.kv{display:flex;flex-direction:column;gap:2px}
.kv dt{font-size:17px;color:var(--text-2)}
.kv dd{font-size:18px;font-weight:600}
.menu{position:absolute;background:var(--card);border-radius:14px;box-shadow:0 14px 36px rgba(13,30,56,.28);padding:6px;display:flex;flex-direction:column;min-width:250px;z-index:7}
.menu button{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:0;background:transparent;border-radius:10px;font-size:18px;font-weight:600;text-align:left;cursor:pointer;color:var(--text)}
.menu button.on{background:var(--tint)}
.code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.code input{height:64px;text-align:center;font-size:28px;font-weight:700;border:1.5px solid var(--field);border-radius:12px;width:100%;padding:0;background:var(--card);outline:none}
.code input.focus{border:2px solid var(--navy);box-shadow:0 0 0 4px var(--glow)}
.prog{height:14px;border-radius:999px;background:var(--tint);overflow:hidden}
.prog i{display:block;height:100%;background:var(--navy);border-radius:999px}
.brand{display:flex;align-items:center;gap:10px;font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.brand .mark{width:36px;height:36px;border-radius:10px;background:var(--amber);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.brand .mark .ic{width:22px;height:22px}
.kbd{min-width:28px;height:28px;border-radius:7px;background:rgba(13,30,56,.12);border:1px solid rgba(13,30,56,.3);color:var(--navy);font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;line-height:1}

/* ---------- desktop ---------- */
.desk{width:1280px;display:flex;background:var(--bg);font-family:var(--font);color:var(--text);position:relative;overflow:hidden}
.side{width:264px;flex:none;background:var(--navy);color:#fff;display:flex;flex-direction:column;gap:4px;padding:20px 14px}
.side .brand{color:#fff;padding:4px 8px 14px;font-size:26px}
.side .add{justify-content:space-between;margin-bottom:14px;padding:0 12px 0 16px}
.side .sect{color:#A9B8CD;padding:14px 12px 4px}
.nav{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:10px;color:#D6DEEA;font-size:18px;font-weight:600}
.nav:hover{background:rgba(255,255,255,.07)}
.nav.on{background:rgba(255,255,255,.14);color:#fff;font-weight:700}
.nav .n{margin-left:auto;font-size:16px;font-weight:700;min-width:28px;height:26px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--over-bg);color:var(--over)}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.14)}
.side .me .av{background:rgba(255,255,255,.14);color:#fff}
.dmain{flex:1;min-width:0;padding:32px 40px 48px;display:flex;flex-direction:column;align-items:center}
.wrap{max-width:960px;width:100%;display:flex;flex-direction:column;gap:20px}
.drow{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 200px 140px;align-items:center;gap:16px;background:var(--card);border-radius:12px;padding:14px 16px;box-shadow:var(--sh);min-height:80px}
.drow .date{font-size:17px;color:var(--text-2)}
.dlg{position:absolute;background:var(--card);border-radius:20px;box-shadow:0 24px 60px rgba(13,30,56,.35);padding:24px 28px 28px;display:flex;flex-direction:column;gap:18px;z-index:5}