/* Ladderstep Consulting brand v2: navy leads, blue supports, red is the single accent.
   Fonts: Plus Jakarta Sans (headings), Inter (text), self-hosted so the app works offline. */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}

:root{
  --navy:#14213D;--blue:#1D3A8A;--red:#E63946;--red-shade:#B52434;--red-deep:#8A1F30;--white:#FFFFFF;
  --blue-bright:#4C7BFF;--red-bright:#FF3B5C;--blue-soft:#9DB6FF;
  --navy-700:#1B2B4D;--ink-muted:#5B6478;--paper:#F6F7FA;--line:#E2E5EC;--field:#8A93A6;
  --teal-deep:#0A5A68;--teal:#0B7285;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* pillar tones: main, deep (text), tint (background) */
.p-strategy{--pc:#2F5FE0;--pd:#1D3A8A;--pt:#EEF3FF}
.p-talent{--pc:#0B7285;--pd:#0A5A68;--pt:#E6F5F7}
.p-protection{--pc:#4338B8;--pd:#2E2790;--pt:#EFEEFF}
.p-growth{--pc:#B52434;--pd:#8A1F30;--pt:#FFF0F2}

*{box-sizing:border-box}html,body{margin:0}
[hidden]{display:none!important}
body{font:400 16px/1.5 var(--font-body);background:var(--paper);color:var(--navy);-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
b,.bold{font-weight:600}
.mute{color:var(--ink-muted)}.small{font-size:14px}.grow{flex:1}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.ic{flex:none;vertical-align:-4px}

/* ---- header, page heading */
header.top{position:sticky;top:0;z-index:30;background:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
header.top .brand{display:block;line-height:0;padding:2px 0}
header.top .brand img{height:30px;width:auto;display:block}
header.top button{background:none;border:0;color:var(--blue-soft);font-size:14px;font-weight:500;padding:8px 4px;min-height:44px}
.pagehead{max-width:720px;margin:0 auto;padding:20px 16px 4px}
.pagehead h1{font:800 30px/1.1 var(--font-head);letter-spacing:-.01em;margin:6px 0 0;color:var(--navy)}
.eyebrow{display:flex;align-items:center;font:700 12px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--red-shade)}
.eyebrow:before{content:"";width:26px;height:8px;background:var(--red);margin-right:10px;flex:none}
.backlink{background:none;border:0;color:var(--blue);font-weight:600;font-size:15px;padding:4px 0;margin:0 0 6px -4px;min-height:36px;display:inline-flex;align-items:center;gap:2px}
main{padding:12px 16px 130px;max-width:720px;margin:0 auto}

/* ---- headings inside pages */
h2{font:700 18px/1.25 var(--font-head);color:var(--navy);margin:24px 0 10px}
h2 .count{font:600 13px var(--font-body);color:var(--ink-muted);margin-left:6px}
.empty{color:var(--ink-muted);text-align:center;padding:28px 12px}

/* ---- cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:10px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
a.card{display:block;color:inherit;text-decoration:none}
.card.lead{border-left:4px solid var(--pc)}
.leadlink{display:block;color:inherit;text-decoration:none}
.meta{color:var(--ink-muted);font-size:14px;margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (hover:hover){a.card:hover,.card.lead:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,33,61,.09);border-color:var(--pc,var(--blue))}}

/* ---- status badges: a ladder from outline to solid, ending in Won */
.badge{display:inline-block;border-radius:4px;padding:2px 9px;font-size:12.5px;font-weight:600;line-height:1.6;white-space:nowrap;background:var(--paper);color:var(--navy);border:1px solid var(--line)}
.s-New{background:#fff;color:var(--blue);border-color:var(--blue)}
.s-Contacted{background:#E3EAFB;color:var(--blue);border-color:#E3EAFB}
.s-Proposal-Sent{background:var(--blue);color:#fff;border-color:var(--blue)}
.s-Negotiation{background:var(--navy);color:#fff;border-color:var(--navy)}
.s-On-Hold{background:var(--line);color:var(--ink-muted);border-color:var(--line)}
.s-Won{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep)}
.s-Lost{background:#FFF0F2;color:var(--red-deep);border-color:#FFB0BC}
/* service chip takes the pillar colour */
.svc{display:inline-block;background:var(--pt);color:var(--pd);border-radius:4px;padding:0 8px;font-size:13px;font-weight:600;line-height:1.55}
.due{font-size:14px}.due.over{color:var(--red-shade);font-weight:700}.due.today{color:var(--blue);font-weight:700}
.flag{display:inline-flex;align-items:center;gap:4px;color:var(--red-shade);font-size:13px;font-weight:600}

/* ---- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--red-shade);color:#fff;border-radius:6px;padding:12px 18px;font-weight:700;font-size:16px;min-height:48px;text-decoration:none;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--red-deep)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--navy);border:1px solid var(--field)}
.btn.sec:hover{background:var(--paper);border-color:var(--navy)}
.btn.block{width:100%}
button:disabled{opacity:.5;cursor:default}
.act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border-radius:6px;background:var(--paper);border:1px solid var(--line);color:var(--navy);text-decoration:none;font-weight:600;font-size:14px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.act:hover{background:#fff;border-color:var(--blue)}
.act .ic{color:var(--blue)}

/* ---- chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--field);background:#fff;border-radius:6px;padding:8px 13px;font-size:14px;font-weight:500;min-height:40px;cursor:pointer;color:var(--navy)}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}

/* ---- forms */
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--field);border-radius:6px;background:#fff;min-height:48px;font-size:16px}
input[type=checkbox]{width:auto;min-height:0}
textarea{min-height:96px;resize:vertical}
label{display:block;font-size:14px;font-weight:500;color:var(--ink-muted);margin:12px 0 4px}
.check{display:flex;gap:10px;align-items:center;color:var(--navy);font-size:16px}.check input{width:22px;height:22px;accent-color:var(--blue)}
.selbox{width:22px;height:22px;vertical-align:middle;accent-color:var(--blue)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{color:var(--red-shade);font-size:14px;font-weight:500;min-height:20px}

/* ---- numbers: large navy numerals, muted label */
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;color:var(--ink-muted);font-size:14px}
.stat b{display:block;font:800 30px/1.15 var(--font-head);color:var(--navy)}
.stat.red b{color:var(--red-shade)}.stat.amber b{color:var(--blue)}
.bar{height:8px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:var(--blue)}
a.att{display:block;color:inherit;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}a.att:last-child{border:0}

/* ---- timeline, tasks */
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:14px}.tl .it{margin:0 0 14px;position:relative}.tl .it:before{content:"";position:absolute;left:-19px;top:7px;width:8px;height:8px;background:var(--blue)}
.task{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}.task input{width:22px;height:22px;margin-top:2px;accent-color:var(--blue)}.task.done .t{text-decoration:line-through;color:var(--ink-muted)}

/* ---- board */
.board{display:flex;gap:12px;overflow-x:auto;align-items:flex-start;padding:2px 16px 10px;margin:0 -16px;scroll-snap-type:x proximity}
.col{flex:none;width:min(272px,82vw);background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:8px;padding:10px;scroll-snap-align:start}
.col h3{margin:2px 2px 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.kcard{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--pc);border-radius:6px;padding:10px;margin-bottom:8px;cursor:grab;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover){.kcard:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,33,61,.1)}}
.kcard a{color:var(--navy);text-decoration:none}.kcard .mv{margin-top:8px;min-height:44px;padding:6px 8px;font-size:15px}

/* ---- tables */
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:right;padding:8px 5px;border-bottom:1px solid var(--line)}th:first-child,td:first-child{text-align:left}th{color:var(--ink-muted);font-weight:600}
.scroll{overflow-x:auto}

/* ---- offline banner, toast, bulk bar */
#banner{position:sticky;top:0;z-index:35;background:var(--blue);color:#fff;text-align:center;font-size:14px;font-weight:500;padding:8px 12px;cursor:pointer}
#toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:6px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:70;max-width:90vw;box-shadow:0 8px 20px rgba(20,33,61,.3)}#toast.show{opacity:1}
.bulkbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;flex-wrap:wrap;z-index:45;box-shadow:0 -6px 16px rgba(20,33,61,.08)}
.bulkbar select{flex:1;min-width:130px;min-height:44px;padding:6px 8px}.bulkbar .btn{min-height:44px;padding:8px 16px}
body.selecting .launcher,body.selecting .fab{display:none}
body.selecting main{padding-bottom:160px}

/* ---- logo launcher (bottom centre) pops up the menu */
.launcher{position:fixed;z-index:60;left:50%;margin-left:-32px;bottom:calc(14px + env(safe-area-inset-bottom));width:64px;height:64px;padding:0;border:3px solid #fff;border-radius:16px;background:var(--navy);overflow:hidden;cursor:pointer;box-shadow:0 8px 22px rgba(20,33,61,.38);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.launcher img{display:block;width:100%;height:100%;transition:transform .45s var(--ease)}
.launcher:active{transform:scale(.96)}
body.menu-open .launcher{transform:translateY(-3px)}
body.menu-open .launcher img{transform:translate(2px,-2px) scale(1.06)}
.scrim{position:fixed;inset:0;z-index:50;background:rgba(20,33,61,.6);opacity:0;transition:opacity .25s var(--ease)}
body.menu-open .scrim{opacity:1}
.menu{position:fixed;z-index:55;left:50%;transform:translateX(-50%);bottom:calc(14px + 64px + 14px + env(safe-area-inset-bottom));width:min(280px,84vw);display:flex;flex-direction:column;gap:8px}
.menu a{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 18px;background:#fff;color:var(--navy);text-decoration:none;font-weight:600;font-size:17px;border-radius:8px;border-left:4px solid var(--line);box-shadow:0 8px 20px rgba(20,33,61,.22);opacity:0;transform:translateY(28px) scale(.96);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.menu a .ic{color:var(--blue)}
.menu a.on{background:var(--navy);color:#fff;border-left-color:var(--red)}
.menu a.on .ic{color:var(--blue-soft)}
body.menu-open .menu a{opacity:1;transform:none;transition:opacity .3s var(--ease) var(--d),transform .4s var(--ease) var(--d)}
.fab{position:fixed;right:16px;bottom:calc(22px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:8px;background:var(--red);color:#fff;box-shadow:0 6px 16px rgba(20,33,61,.3);text-decoration:none;display:flex;align-items:center;justify-content:center;z-index:40;transition:transform .2s var(--ease),background .2s var(--ease)}
.fab:hover{background:var(--red-shade);transform:translateY(-2px)}
body.menu-open .fab{z-index:40}

/* ---- loader: dotted route with a small plane */
.loading{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-muted);font-size:14px;padding:36px 0}
.loading .route{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 8;animation:dash 1.4s linear infinite}
.loading .pl{animation:bob 1.6s var(--ease) infinite alternate}
@keyframes dash{to{stroke-dashoffset:-18}}
@keyframes bob{from{transform:translate(0,2px)}to{transform:translate(2px,-3px)}}

/* ---- sign-in: navy hero with dotted grid, route and plane */
.loginpage{min-height:100vh;min-height:100dvh;background:var(--navy);background-image:radial-gradient(rgba(157,182,255,.28) 1px,transparent 1.6px);background-size:28px 28px;padding:max(28px,env(safe-area-inset-top)) 20px 28px;display:flex;flex-direction:column;align-items:center}
.hero{width:100%;max-width:420px;color:#fff}
.hero-logo{display:block;width:min(260px,76%);height:auto;margin:6px 0 0}
.hero-route{display:block;width:100%;height:auto;max-height:150px;margin:6px 0 -8px;overflow:visible}
.hero-route .route{fill:none;stroke:var(--blue-bright);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 9;animation:reveal 1.4s var(--ease) .2s both}
.hero-route .plane{animation:lift .9s var(--ease) .5s both}
.hero h1{font:800 clamp(34px,10vw,44px)/1.04 var(--font-head);letter-spacing:-.02em;margin:0 0 10px;color:#fff}
.hero p{margin:0;color:var(--blue-soft);font-size:17px;line-height:1.5}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lift{from{opacity:0;transform:translate(-36px,30px)}to{opacity:1;transform:none}}
.login{width:100%;max-width:420px;margin:22px 0 0;padding:20px;border-radius:8px}
.pillars{margin:20px 0 0;font:700 11px var(--font-body);letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:var(--blue-soft);text-align:center}

/* ---- v4: sheet, tour, sync chip, undo toast, handover, follow-up actions */
.sheetwrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheetbg{position:absolute;inset:0;background:rgba(20,33,61,.55)}
.sheet{position:relative;background:#fff;width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:12px 12px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(20,33,61,.3);animation:sheetup .25s var(--ease)}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet label:first-of-type{margin-top:12px}
.dupcard{border-color:#e6b800;background:#fff9e0;margin-top:10px}
.fab{border:0;cursor:pointer}
.sync{font-size:12.5px;font-weight:600;border-radius:999px;padding:3px 10px;margin-left:auto;margin-right:4px;white-space:nowrap;background:rgba(255,255,255,.14);color:#fff}
.sync.ok:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#5BD6A0;margin-right:6px}
.sync.wait{background:var(--blue-bright)}.sync.off{background:var(--red-shade)}
#toast.has-undo{pointer-events:auto}
#toast button{background:none;border:0;color:var(--blue-soft);font:700 15px var(--font-body);text-decoration:underline;padding:6px 4px;min-height:36px;cursor:pointer}
.hn{margin-top:6px;padding:6px 8px;background:var(--paper);border-left:3px solid var(--field);border-radius:4px}
.hn.mine,.handover.mine{background:#FFF9E0;border-left-color:#E6B800}
.handover{border-left:4px solid var(--field)}
.helptxt{margin:6px 0 0}
.colhelp{margin:2px 0 8px;font-size:13px}
.att .fu{margin-top:8px}.att .fu .act{min-height:40px;padding:0 10px;font-size:13.5px}
.att{padding:12px 0}.leadlink{display:block;color:inherit;text-decoration:none}
.snz{margin-top:6px}.snz[hidden]{display:none}
.empty b{display:block;font-size:18px;color:var(--navy);margin-bottom:6px}.empty .btn{margin-top:10px}
.bulkbar input{flex:1;min-width:150px;min-height:44px}.bulkbar input[hidden]{display:none}
td.over{text-align:left}
@media (min-width:900px){main,.pagehead{max-width:980px}.board{margin:0;padding-left:0;padding-right:0}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hero-route .route{clip-path:none}}

/* ======== v5: glass theme (professional, clean). Overrides earlier rules. ======== */
:root{
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.82);--glass-edge:rgba(255,255,255,.75);--glass-line:rgba(20,33,61,.08);
  --blur:saturate(160%) blur(18px);--r:16px;
  --shadow-s:0 1px 2px rgba(20,33,61,.05),0 6px 18px rgba(20,33,61,.07);
  --shadow-m:0 2px 4px rgba(20,33,61,.06),0 14px 34px rgba(20,33,61,.12);
}
body{background:#EEF1F8;min-height:100vh;position:relative}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(520px 420px at 8% -4%,rgba(76,123,255,.30),transparent 70%),
   radial-gradient(480px 420px at 100% 12%,rgba(230,57,70,.16),transparent 70%),
   radial-gradient(560px 520px at 80% 105%,rgba(29,58,138,.22),transparent 70%),
   radial-gradient(420px 380px at -5% 90%,rgba(11,114,133,.16),transparent 70%),
   linear-gradient(180deg,#F3F5FB,#E9EDF7)}
/* header */
header.top{background:rgba(20,33,61,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid rgba(255,255,255,.10);box-shadow:0 6px 24px rgba(20,33,61,.18)}
header.top button{color:#DCE5FF}
/* page heading */
.pagehead h1{font-size:32px;letter-spacing:-.02em}
.eyebrow:before{height:6px;border-radius:3px;width:22px}
/* surfaces */
.card,.stat,.col{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-radius:var(--r);box-shadow:var(--shadow-s)}
.card{padding:16px}
.card.lead{border-left:1px solid var(--glass-edge);position:relative;overflow:hidden}
.card.lead:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--pc)}
.card.lead>*{position:relative}
.col{border-top:1px solid var(--glass-edge);background:rgba(255,255,255,.5)}
.col h3{padding-bottom:6px}
.kcard{background:var(--glass-strong);border:1px solid var(--glass-edge);border-left:1px solid var(--glass-edge);border-radius:12px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;padding-left:14px}
.kcard:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--pc)}
.stat{padding:16px}.stat b{letter-spacing:-.02em}
@media (hover:hover){a.card:hover,.card.lead:hover{box-shadow:var(--shadow-m);border-color:#fff}}
.hn{background:rgba(255,255,255,.55);border-radius:10px;border-left-width:3px}
.hn.mine,.handover.mine{background:rgba(255,236,160,.55)}
.dupcard{background:rgba(255,244,196,.72)!important;border-color:rgba(230,184,0,.5)!important}
/* chips + buttons */
.chip{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-edge);border-radius:999px;padding:7px 15px;box-shadow:0 1px 2px rgba(20,33,61,.06);transition:background .2s var(--ease),transform .15s var(--ease)}
.chip:active{transform:scale(.97)}
.chip.on{background:linear-gradient(135deg,var(--navy),var(--blue));border-color:transparent;box-shadow:0 4px 12px rgba(29,58,138,.35)}
.btn{border-radius:12px;background:linear-gradient(135deg,#E63946,#B52434);box-shadow:0 6px 16px rgba(181,36,52,.30);transition:transform .15s var(--ease),box-shadow .2s var(--ease),filter .2s}
.btn:hover{background:linear-gradient(135deg,#E63946,#B52434);filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.sec,.btn.sec:hover{background:rgba(255,255,255,.72);color:var(--navy);border:1px solid var(--glass-edge);box-shadow:var(--shadow-s);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);filter:none}
.btn[disabled]{opacity:.55;box-shadow:none}
.act{background:rgba(255,255,255,.7);border:1px solid var(--glass-edge);border-radius:999px;padding:0 15px;box-shadow:0 1px 2px rgba(20,33,61,.06)}
.act:hover{background:#fff}
/* forms */
input,select,textarea{background:rgba(255,255,255,.78);border:1px solid rgba(20,33,61,.14);border-radius:12px;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-bright);background:#fff;box-shadow:0 0 0 4px rgba(76,123,255,.18)}
input[type=checkbox],input[type=radio]{box-shadow:none;min-height:0}
/* badges */
.badge{border-radius:999px;padding:1px 11px}
.svc{border-radius:999px;padding:0 10px}
/* floating pieces */
.fab{border-radius:18px;background:linear-gradient(135deg,#FF4B5C,#B52434);box-shadow:0 10px 26px rgba(181,36,52,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.fab:hover{background:linear-gradient(135deg,#FF4B5C,#B52434);filter:brightness(1.07)}
.launcher{border-radius:20px;border:2px solid rgba(255,255,255,.85);box-shadow:0 12px 30px rgba(20,33,61,.4)}
.scrim{background:rgba(20,33,61,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.menu a{background:rgba(255,255,255,.78);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-left-width:1px;border-radius:14px;box-shadow:var(--shadow-m)}
.menu a.on{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-color:transparent}
.bulkbar{background:var(--glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:1px solid var(--glass-edge);border-radius:18px 18px 0 0}
#toast{background:rgba(20,33,61,.86);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:var(--shadow-m)}
#banner{background:rgba(29,58,138,.88);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.sync{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18)}
/* sheets (quick add, tour) */
.sheetbg{background:rgba(20,33,61,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet{background:rgba(255,255,255,.86);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-edge);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -18px 50px rgba(20,33,61,.28)}
.sheet:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:rgba(20,33,61,.18);margin:-6px auto 12px}
@media (min-width:600px){.sheetwrap{align-items:center}.sheet{border-radius:24px;border-bottom:1px solid var(--glass-edge)}.sheet:before{display:none}}
/* misc */
.att{border-bottom:1px solid var(--glass-line)}
.task{border-bottom:1px solid var(--glass-line)}
table th,table td{border-bottom:1px solid var(--glass-line)}
.bar{border-radius:99px;background:rgba(20,33,61,.08)}.bar i{border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--blue-bright))}
.tl{border-left-color:rgba(20,33,61,.12)}.tl .it:before{border-radius:50%}
h2{letter-spacing:-.01em}
.empty{background:var(--glass);border:1px dashed rgba(20,33,61,.18);border-radius:var(--r);margin:8px 0}
@media (prefers-reduced-transparency:reduce),(not (backdrop-filter:blur(1px)) and (not (-webkit-backdrop-filter:blur(1px)))){
  .card,.stat,.col,.kcard,.sheet,.menu a,.bulkbar,.chip,.btn.sec,.act{background:#fff}header.top{background:var(--navy)}}
header.top button#lo{white-space:nowrap;font-size:13px;padding:8px 2px}
header.top .sync{margin-left:auto}
.att:last-child{border-bottom:0}
.chips{padding:4px 2px 12px}

/* ---- board: stack columns vertically on phones */
@media (max-width:699px){
  .board{flex-direction:column;align-items:stretch;overflow-x:visible;scroll-snap-type:none;padding-left:0;padding-right:0;margin:0}
  .col{width:auto;flex:none;scroll-snap-align:none}
}

/* ---- small phones: keep the header inside the screen, avoid iOS input zoom, bigger card links */
@media (max-width:420px){
  header.top{gap:6px;padding-left:12px;padding-right:12px}
  header.top .brand{min-width:0;flex:0 1 auto}
  header.top .brand img{height:24px;max-width:100%}
  header.top .sync{padding:3px 8px;font-size:12px;margin-right:0}
  header.top button#lo{max-width:110px;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
}
@media (max-width:699px){
  .kcard .mv{font-size:16px}
  .kcard a{display:inline-block;padding:8px 0}
}

@media (max-width:340px){header.top button#lo .nm{display:none}}