/* Base CRM styles */

:root{--bg:#eef2f6;--card:#fff;--tx:#101828;--mu:#475467;--bd:#c9d1db;--ac:#1f4fbf;--ac2:#e6edfb;--rd:#b42318;--yl:#a15c07;--th:#f3f6f9;--zb:#e8eef5;--lb:#344054;--ib:#b8c2cf;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d1218;--card:#161e27;--tx:#f1f4f8;--mu:#b4c0ce;--bd:#33404e;--ac:#7aa2ff;--ac2:#17284d;--rd:#ff8a80;--yl:#ffc35a;--th:#1c2632;--zb:#222e3b;--lb:#d5dde6;--ib:#4a5868}}
:root[data-theme="dark"]{--bg:#0d1218;--card:#161e27;--tx:#f1f4f8;--mu:#b4c0ce;--bd:#33404e;--ac:#7aa2ff;--ac2:#17284d;--rd:#ff8a80;--yl:#ffc35a;--th:#1c2632;--zb:#222e3b;--lb:#d5dde6;--ib:#4a5868}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
h1{font-size:16px;margin:0}nav{display:flex;gap:4px;flex-wrap:wrap}
nav button,.btn{border:1px solid var(--bd);background:var(--card);color:var(--tx);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit}
nav button.on,.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.sm{padding:3px 8px;font-size:12px}.btn.dg{color:var(--rd)}
main{padding:16px;max-width:1200px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.kpi,.panel{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:12px}
.kpi b{display:block;font-size:22px}.kpi span{color:var(--mu);font-size:12px}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
input,select,textarea{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 9px;width:100%}
.bar input,.bar select{width:auto;flex:1;min-width:140px}
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--bd);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--bd);vertical-align:top}
th{font-size:12px;color:var(--mu);font-weight:600}tr.cl{cursor:pointer}tr.cl:hover{background:var(--ac2)}
.tag{display:inline-block;padding:1px 8px;border-radius:99px;background:var(--ac2);color:var(--ac);font-size:12px}
.kan{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.col{min-width:220px;flex:1;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:8px}
.col h3{font-size:13px;margin:2px 4px 8px;display:flex;justify-content:space-between}.col.over{outline:2px dashed var(--ac)}
.cd{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:8px;margin-bottom:8px;cursor:grab}
.cd small{color:var(--mu);display:block}
dialog{border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--tx);width:min(780px,94vw);max-height:92vh;padding:0}
dialog::backdrop{background:#0008}.dh{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center}
.db{padding:16px;overflow:auto;max-height:70vh}.df{padding:12px 16px;border-top:1px solid var(--bd);display:flex;gap:8px;justify-content:flex-end}
.f{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.f label{font-size:12px;color:var(--mu);display:block}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
#mx{display:none}
@media(max-width:600px){.s2,.s3,.s4{grid-column:span 6}header{padding:8px 10px;gap:6px}h1{font-size:15px}nav{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch}nav button{flex:none}#exp,#imp,#mod,#bk,#rs{display:none}header.mx #exp,header.mx #imp,header.mx #mod,header.mx #bk,header.mx #rs{display:inline-flex}#mx{display:inline-flex}.btn.sm{padding:7px 10px}main{padding:10px}}
h4{margin:16px 0 6px;font-size:13px}.it{padding:6px 0;border-bottom:1px solid var(--bd)}.it small{color:var(--mu)}
.late{color:var(--rd)}.row{display:flex;gap:6px;align-items:center}.row>*{flex:1}.row>button{flex:none}
.mu{color:var(--mu)}.empty{padding:24px;text-align:center;color:var(--mu)}

body{font-size:15px;line-height:1.5}
header{border-bottom:3px solid var(--ac)}h1{font-size:17px;color:var(--ac)}
nav button{font-weight:500}nav button:hover,.btn:hover{border-color:var(--ac)}nav button.on{font-weight:600}
.btn{border-color:var(--ib)}.btn.pri{font-weight:600}.btn.dg{border-color:var(--rd)}
.btn:focus-visible,nav button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
input,select,textarea{background:var(--card);border-color:var(--ib)}input::placeholder,textarea::placeholder{color:var(--mu);opacity:.85}
.f label,.lvl{font-size:13px;color:var(--lb);font-weight:600}
.kpi b{color:var(--ac)}.kpi span{font-size:13px}
.panel>b:first-child,.panel h4{color:var(--tx)}
th{background:var(--th);color:var(--lb);font-size:13px}tbody tr:nth-child(even),table tr:nth-child(even) td{background:var(--zb)}tr.cl:hover td{background:var(--ac2)}
td small.mu,.mu{color:var(--mu)}
.tag{font-weight:600}
.tag[data-e="Prospecção"]{background:#eef2f6;color:#344054}.tag[data-e="Contato feito"],.tag[data-e="Diagnóstico"]{background:#e6edfb;color:#1f4fbf}.tag[data-e="Proposta"],.tag[data-e="Negociação"]{background:#fff4e0;color:#8a4b00}.tag[data-e="Ganho"]{background:#e3f6e8;color:#13702f}.tag[data-e="Perdido"]{background:#fde8e6;color:#a1170d}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag[data-e="Prospecção"]{background:#26313d;color:#d5dde6}:root:not([data-theme="light"]) .tag[data-e="Contato feito"],:root:not([data-theme="light"]) .tag[data-e="Diagnóstico"]{background:#1b2b4d;color:#a9c1ff}:root:not([data-theme="light"]) .tag[data-e="Proposta"],:root:not([data-theme="light"]) .tag[data-e="Negociação"]{background:#3a2a10;color:#ffcf80}:root:not([data-theme="light"]) .tag[data-e="Ganho"]{background:#13331e;color:#8fe0a6}:root:not([data-theme="light"]) .tag[data-e="Perdido"]{background:#3d1714;color:#ffaaa3}}
.cd{background:var(--card);border-color:var(--ib)}.col{background:var(--th)}.col h3{color:var(--lb)}
.it{border-color:var(--bd)}.late{color:var(--rd);font-weight:600}
dialog{box-shadow:0 12px 40px #0006}.dh{background:var(--th)}.dh b{font-size:16px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri,:root:not([data-theme="light"]) nav button.on{color:#0d1218}}:root[data-theme="dark"] .btn.pri,:root[data-theme="dark"] nav button.on{color:#0d1218}
table tr:nth-child(odd) td{background:var(--card)}table tr:nth-child(even) td{background:var(--zb)}
td,th{border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}td:last-child,th:last-child{border-right:0}
th{border-bottom:2px solid var(--ib)}tr.cl:hover td{background:var(--ac2)!important}
label,.f label,.lvl,.lvh,th,h3,h4,.col h3,summary,summary b,.kpi span,.panel>b{font-weight:700}
label.mu,.row>label.mu{color:var(--lb)}.kpi span{color:var(--lb)}

/* Mobile layout */

#app-status{padding:10px 16px;background:var(--ac2);color:var(--tx);font-size:13px;border-bottom:1px solid var(--bd)}
#install-app{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;box-shadow:0 4px 18px #0003}
[hidden]{display:none!important}
@media(max-width:700px){
 body{font-size:16px;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
 header{padding:10px 12px;gap:10px;position:sticky;top:0}header h1{font-size:15px;width:100%;line-height:1.4}
 header>nav{order:3;width:100%;overflow-x:auto;display:flex;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:thin}
 nav button{min-height:44px;flex:none}header>.row{width:100%;flex-wrap:wrap;gap:8px}
 header>.row button{min-height:44px}#mx{display:inline-flex}#exp,#imp,#mod,#bk,#rs{display:none}
 header.mx #exp,header.mx #imp,header.mx #mod,header.mx #bk,header.mx #rs{display:inline-flex}
 #new{margin-left:auto}main{padding:12px;width:100%}
 input,select,textarea{font-size:16px;min-height:44px}.btn,.btn.sm{min-height:44px;padding:9px 12px;font-size:14px}
 .row{flex-wrap:wrap}.row>*{min-width:0}.bar{gap:8px}.bar input,.bar select{min-width:0;flex:1 1 100%;width:100%}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi b{font-size:21px}.kpi,.panel{min-width:0;overflow-wrap:anywhere}
 .f{grid-template-columns:1fr}.s2,.s3,.s4,.s6{grid-column:1}
 dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
 dialog[open]{display:flex;flex-direction:column}.dh{padding:10px 12px;gap:8px;flex:none}.dh>b{font-size:15px;min-width:0;overflow-wrap:anywhere}
 .db{max-height:none;flex:1;min-height:0;padding:12px;overflow-y:auto}.df{flex:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap}
 .kan{scroll-snap-type:x proximity}.col{min-width:82vw;scroll-snap-align:start}.cd{padding:14px;touch-action:pan-x pan-y}
 .it{padding:10px 0}.it.row>span{flex-basis:65%}.tw{max-width:100%;-webkit-overflow-scrolling:touch}
 #app-status{padding:10px 12px}#install-app{bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
}

/* Shared design */
/* Shared visual language for the CRM and account screens. */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f5f1;--card:#fff;--tx:#292e2b;--mu:#6e756f;--bd:#e1e4dd;
  --ac:#285fa6;--ac2:#eaf1fa;--rd:#a34637;--yl:#946825;--th:#f8f9f6;
  --zb:#fcfcfa;--lb:#4e5750;--ib:#cdd3cb;
  --radius:8px;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}
body{font-family:inherit;font-size:14px;line-height:1.55;letter-spacing:0;color:var(--tx);background:var(--bg)}
a{color:var(--ac);text-underline-offset:3px}
h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.3}
button,input,select,textarea{font-family:inherit}
button,.btn{transition:background .15s,border-color .15s}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.btn,nav button{border:1px solid var(--bd);border-radius:6px;background:var(--card);font-weight:500;box-shadow:none;padding:8px 13px;text-decoration:none;line-height:1.35}
.btn:hover{background:var(--th);border-color:var(--ib)}
.btn.pri,nav button.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.btn.pri:hover{background:#204c85;border-color:#204c85}
.btn.dg{color:var(--rd);border-color:#e7cbc5;background:var(--card)}
.btn.dg:hover{background:#fbf1ee}
.btn.sm{font-size:12px;padding:6px 10px;min-height:32px}
input,select,textarea{background:var(--card);border-color:var(--ib);border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.4}
input::placeholder,textarea::placeholder{color:#858c85;opacity:1}
input[type="checkbox"]{accent-color:var(--ac);width:17px;height:17px;min-height:17px;flex:none}
label,.f label,.lvl{font-size:12px;font-weight:600;color:var(--lb);margin-bottom:5px}
header{position:fixed;left:0;top:0;bottom:0;width:226px;height:100dvh;padding:28px 18px 18px;background:var(--card);border:0;border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:24px;z-index:5}
header h1{font-size:19px;margin:0;color:var(--tx);font-weight:650}
.brand{padding:0 10px 20px;border-bottom:1px solid var(--bd)}
.brand-label{display:block;font-size:11px;margin-top:5px;color:var(--mu);letter-spacing:.03em}
header nav{display:flex;flex-direction:column;gap:4px;flex-wrap:nowrap;overflow-y:auto;flex:1;min-height:0}
header nav button{border:0;background:transparent;text-align:left;padding:11px 12px;font-size:13px;font-weight:450;min-height:40px;color:var(--lb)}
header nav button:hover{background:var(--th)}
header nav button.on{background:var(--ac2);color:var(--ac);font-weight:650}
header>.row{display:flex;flex-wrap:wrap;gap:7px;flex:none!important;padding-top:16px;border-top:1px solid var(--bd);width:100%}
header>.row>.btn{font-size:12px;min-height:36px;flex:1 1 45%;text-align:center}
#new{order:-2;flex:1 1 100%!important;min-height:40px!important}
#team-accounts{order:-1;flex:1 1 100%!important}
#mx{display:inline-flex;align-items:center;justify-content:center}
#exp,#imp,#mod,#bk,#rs{display:none}
header.mx #exp,header.mx #imp,header.mx #mod,header.mx #bk,header.mx #rs{display:inline-flex}
#ncol{display:none;flex:1 1 100%!important}
header.mx #ncol{display:inline-flex}
.workspace{margin-left:226px;min-height:100dvh;padding:0 34px 48px}
#app-status{background:transparent;color:var(--mu);font-size:11px;border:0;padding:16px 0 4px;max-width:1250px;margin:0 auto}
#app-status::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac);margin-right:7px;vertical-align:middle}
#app-status[data-state="offline"]::before{background:var(--yl)}
.page-intro{max-width:1250px;margin:0 auto;padding:30px 0 24px;border-bottom:1px solid var(--bd)}
.eyebrow{margin:0 0 8px;color:var(--mu);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.page-intro h2{font-size:30px;font-weight:600;margin:0 0 6px}
.page-intro>p:last-child{margin:0;color:var(--mu);font-size:13px}
main#v{padding:25px 0;max-width:1250px;width:100%;margin:0 auto}
.grid{gap:14px;margin-bottom:24px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi,.panel{border:1px solid var(--bd);border-radius:var(--radius);padding:20px;background:var(--card);box-shadow:none}
.kpi b{font-size:29px;line-height:1.2;color:var(--tx);font-weight:550;font-variant-numeric:tabular-nums;margin-bottom:9px}
.kpi span{font-size:12px;font-weight:450;color:var(--mu)}
.panel>b:first-child,.panel h4,summary b{font-weight:600;color:var(--tx)}
.panel p{color:var(--mu)}
.bar{gap:10px;margin-bottom:20px}
.bar input{flex:2}
.bar select{font-size:13px}
.tw{border-color:var(--bd);border-radius:var(--radius)}
table{min-width:800px}
th{font-size:11px;font-weight:600;color:var(--mu);background:var(--th);padding:13px 16px;border-bottom:1px solid var(--bd);border-right:0;white-space:nowrap}
td{padding:15px 16px;font-size:13px;border-right:0;border-bottom:1px solid var(--bd)}
td b{font-weight:600}
table tr:nth-child(odd) td,table tr:nth-child(even) td{background:var(--card)}
tr.cl:hover td{background:var(--th)!important}
.tag{font-weight:500;font-size:11px;line-height:1.6;padding:2px 8px;border-radius:4px;color:var(--ac);background:var(--ac2)}
.tag[data-e="Prospecção"]{background:#f0f1ed;color:#5a655d}
.tag[data-e="Contato feito"],.tag[data-e="Diagnóstico"]{background:#e8f0fb;color:#3b6091}
.tag[data-e="Proposta"],.tag[data-e="Negociação"]{background:#f6f0e3;color:#876d38}
.tag[data-e="Ganho"]{background:#e9f1e7;color:#4b7041}
.tag[data-e="Perdido"]{background:#f8ebe7;color:#9b5c4d}
.kan{gap:16px;align-items:stretch}
.col{min-width:228px;background:#efefea;border:0;border-radius:var(--radius);padding:12px}
.col h3{font-size:12px;font-weight:600;color:var(--lb);margin:3px 4px 16px}
.cd{padding:16px;border:1px solid var(--bd);border-radius:6px;background:var(--card);margin-bottom:10px;box-shadow:0 1px 1px #172e1b04}
.cd>b{font-size:13px;font-weight:600}
.cd small{margin-top:7px;font-size:11px}
.it{padding:12px 0;border-color:var(--bd);font-size:13px}
.it:last-child{border-bottom:0}
.it small{font-size:11px}
.mu{color:var(--mu)}
.late{font-weight:500;color:var(--rd)}
.empty{padding:56px 24px;font-size:13px;color:var(--mu)}
dialog{width:min(880px,94vw);border:1px solid var(--bd);border-radius:10px;box-shadow:0 20px 70px #22352b26}
dialog::backdrop{background:#202f2959;backdrop-filter:blur(2px)}
.dh{background:var(--card);padding:18px 22px;border-bottom:1px solid var(--bd)}
.dh b{font-size:17px;font-weight:600}
.db{padding:22px;max-height:72vh}
.df{padding:16px 22px;background:var(--th)}
.f{gap:16px}
h4{font-size:13px;font-weight:600;margin:28px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--bd)}
summary{font-weight:500;cursor:pointer}
#install-app{position:static;right:auto;bottom:auto;font-size:12px;box-shadow:none;border-radius:6px}
@media(max-width:1000px) and (min-width:701px){header{width:202px;padding:24px 14px}.workspace{margin-left:202px;padding:0 24px 32px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 body{font-size:14px}
 header{position:sticky;width:100%;height:auto;bottom:auto;padding:16px 16px 0;gap:12px;border:0;border-bottom:1px solid var(--bd)}
 .brand{border:0;padding:0;display:flex;align-items:baseline;gap:10px}.brand h1{font-size:17px;width:auto}.brand-label{font-size:10px;margin:0}
 header nav{flex-direction:row;flex:none;order:3;overflow-x:auto;overflow-y:hidden;gap:4px;padding:0 0 9px;scrollbar-width:none}
 header nav button{padding:10px 12px;text-align:center;min-height:44px;border-radius:5px;font-size:12px}
 header>.row{border:0;padding:0;gap:6px;flex-wrap:wrap}
 header>.row>.btn{flex:none;font-size:11px;padding:8px 10px;min-height:36px}
 #new{flex:none!important;min-height:38px!important;order:-2;margin-left:0}
 #team-accounts{flex:none!important;order:0}
 #team-accounts{display:inline-flex;flex-basis:100%!important}
 #ncol{flex:none!important}
 #logout{margin-left:auto}
 .workspace{margin-left:0;padding:0 16px 28px;min-height:auto}
 #app-status{padding:12px 0 0;font-size:10px}
 .page-intro{padding:24px 0 18px}.page-intro h2{font-size:26px}.page-intro>p:last-child{font-size:12px}.eyebrow{font-size:10px}
 main#v{padding:20px 0}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
 .kpi,.panel{padding:16px}.kpi b{font-size:25px}.kpi span{font-size:11px}
 .bar{gap:8px;margin-bottom:16px}.bar input,.bar select{flex:1 1 100%;font-size:16px}
 input,select,textarea{font-size:16px;min-height:44px}
 input[type="checkbox"]{min-height:17px}
 .btn,.btn.sm{min-height:44px;font-size:12px}
 .row{gap:8px}.it.row>span{flex-basis:65%}
 .f{gap:14px}.f label{font-size:12px}
 dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;margin:0}
 .dh{padding:14px 16px}.dh b{font-size:16px}.db{padding:18px 16px;max-height:none}.df{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
 .col{min-width:82vw}.col h3{font-size:12px}.cd{padding:16px}
 .qa{flex-wrap:wrap}.qa .btn{font-size:11px}
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"]){color-scheme:dark;--bg:#191f28;--card:#222a35;--tx:#e8ebe5;--mu:#a5afbd;--bd:#394555;--ac:#9dbfe9;--ac2:#273950;--rd:#dfa497;--th:#283241;--zb:#242e3b;--lb:#c6ceda;--ib:#4b586b}
 :root:not([data-theme="light"]) .tag[data-e]{background:#273950;color:#bfd0e5}
 :root:not([data-theme="light"]) .tag[data-e="Perdido"]{background:#48332d;color:#e2b9aa}
 :root:not([data-theme="light"]) .col{background:#263140}
 :root:not([data-theme="light"]) .btn.pri{background:#376fae;border-color:#376fae;color:#fff}
 :root:not([data-theme="light"]) .btn.dg{background:var(--card);border-color:#6d4d44}
 :root:not([data-theme="light"]) header nav button.on{color:var(--tx);background:var(--ac2)}
}
:root[data-theme="dark"]{color-scheme:dark;--bg:#191f28;--card:#222a35;--tx:#e8ebe5;--mu:#a5afbd;--bd:#394555;--ac:#9dbfe9;--ac2:#273950;--rd:#dfa497;--th:#283241;--zb:#242e3b;--lb:#c6ceda;--ib:#4b586b}
:root[data-theme="dark"] header nav button.on{color:var(--tx);background:var(--ac2)}

.collaborator-form{display:flex;flex-wrap:wrap;gap:10px}.collaborator-form input{flex:1;min-width:200px}.collaborator-form button{flex:none}.access-options{margin-top:16px;font-size:12px}.access-options summary{color:var(--mu);padding:8px 0}.embedded-access{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px}.embedded-access>button{font-size:12px;min-height:36px;padding:8px 12px;border:1px solid var(--bd);border-radius:6px;background:var(--card);color:var(--tx);cursor:pointer}.permission-editor{flex-basis:100%;border:1px solid var(--bd);padding:16px;border-radius:6px}.permission-editor form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.permission-editor fieldset{border:1px solid var(--bd);border-radius:5px;padding:12px}.permission-editor legend{font-size:12px;font-weight:600}.permission-editor label{display:flex;gap:9px;align-items:start;margin:10px 0;font-weight:400}.permission-editor input[type=checkbox]{width:17px;height:17px;min-height:17px;flex:none}.permission-editor form>button{grid-column:1/-1;justify-self:start;padding:10px 16px;border:0;border-radius:5px;background:var(--ac);color:var(--card);cursor:pointer}.permission-feedback{grid-column:1/-1;font-size:12px}.permission-editor>select{margin:12px 0}.permission-editor>p{font-size:12px;color:var(--mu)}@media(max-width:700px){.collaborator-form input,.collaborator-form button{flex-basis:100%;width:100%}.permission-editor form{grid-template-columns:1fr}}

/* Account screens */
:is(.auth-page,.team-page) *{box-sizing:border-box}
:is(.auth-page,.team-page){margin:0;font-size:14px;line-height:1.6;background:var(--bg);color:var(--tx)}
.auth-page{padding:40px 24px;min-height:100dvh;display:grid;place-items:center}
:is(.auth-page,.team-page) .auth-layout{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;width:100%;min-height:620px;background:var(--card);border:1px solid var(--bd);border-radius:10px;overflow:hidden}
:is(.auth-page,.team-page) .auth-context{background:#eaf0f7;padding:42px 40px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--bd)}
:is(.auth-page,.team-page) .auth-brand{font-size:21px;font-weight:600;letter-spacing:-.03em}
:is(.auth-page,.team-page) .auth-brand span{display:block;font-size:11px;letter-spacing:.04em;font-weight:400;color:var(--mu);margin-top:4px}
:is(.auth-page,.team-page) .auth-note h1{font-size:30px;font-weight:500;line-height:1.4;margin:12px 0 24px;color:#304c70;letter-spacing:-.03em}
:is(.auth-page,.team-page) .auth-note>p:last-child{font-size:13px;color:var(--mu);line-height:1.9}
:is(.auth-page,.team-page) .auth-footer{font-size:11px;color:var(--mu);margin:0}
:is(.auth-page,.team-page) .card{padding:40px;background:var(--card);border-radius:8px;min-width:0}
:is(.auth-page,.team-page) .auth-layout>.card{border:0;border-radius:0;align-self:center;padding:48px 44px}
:is(.auth-page,.team-page) .card h2{font-size:24px;font-weight:550;margin:6px 0 12px}
:is(.auth-page,.team-page) .card>p{color:var(--mu);font-size:13px;margin:0 0 24px}
:is(.auth-page,.team-page) label{display:block;font-size:12px;font-weight:600;margin:18px 0;color:var(--lb)}
:is(.auth-page,.team-page) input,:is(.auth-page,.team-page) textarea{display:block;width:100%;font-size:16px;padding:12px;border:1px solid var(--ib);border-radius:6px;margin-top:7px;background:var(--card);color:var(--tx);min-height:46px}
:is(.auth-page,.team-page) button{min-height:46px;padding:12px 18px;font-size:13px;font-weight:600;border:1px solid var(--ac);border-radius:6px;background:var(--ac);color:white;cursor:pointer}
:is(.auth-page,.team-page) button:hover{background:#204c85}
:is(.auth-page,.team-page) button:disabled{opacity:.6;cursor:wait}
:is(.auth-page,.team-page) #auth button,:is(.auth-page,.team-page) #invite button{width:100%;margin-top:8px}
:is(.auth-page,.team-page) #message{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--rd);font-size:12px;margin:16px 0}
:is(.auth-page,.team-page) small,:is(.auth-page,.team-page) .muted{color:var(--mu);font-size:12px}
:is(.auth-page,.team-page) small{display:block;margin-top:30px;font-size:11px}
:is(.auth-page,.team-page) [hidden]{display:none!important}
.team-page{padding:0 32px 48px}
:is(.auth-page,.team-page) .team-top{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--bd);max-width:1180px;margin:auto;font-size:12px}
:is(.auth-page,.team-page) .team-brand{font-size:19px;font-weight:600;color:var(--tx);text-decoration:none}
:is(.auth-page,.team-page) .team-layout{max-width:1180px;margin:0 auto}
:is(.auth-page,.team-page) .team-heading{padding:36px 0 26px}
:is(.auth-page,.team-page) .team-heading h1{font-size:30px;font-weight:550;margin:6px 0 10px}
:is(.auth-page,.team-page) .team-heading>p:last-child{color:var(--mu);font-size:13px;margin:0}
:is(.auth-page,.team-page) .team-columns{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}
:is(.auth-page,.team-page) .team-columns>.card{border:1px solid var(--bd);padding:26px}
:is(.auth-page,.team-page) .team-columns h2{font-size:17px;margin:0 0 8px}
:is(.auth-page,.team-page) .roster-heading{padding-bottom:12px}
:is(.auth-page,.team-page) .roster-heading h2{margin-bottom:4px}
:is(.auth-page,.team-page) .member{border-top:1px solid var(--bd);padding:18px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px}
:is(.auth-page,.team-page) .member:first-child{margin-top:8px}
:is(.auth-page,.team-page) .member>span{flex:1;min-width:180px;line-height:1.8}
:is(.auth-page,.team-page) .member button{min-height:36px;padding:7px 10px;font-size:11px;background:var(--card);color:var(--lb);border-color:var(--bd);font-weight:500}
:is(.auth-page,.team-page) .member button:hover{background:var(--th)}
:is(.auth-page,.team-page) .member[data-active="false"]>span{color:var(--mu)}
:is(.auth-page,.team-page) textarea{font-size:12px;line-height:1.7}
:is(.auth-page,.team-page) a{text-underline-offset:3px}
@media(max-width:760px){.auth-page{padding:0;display:block}
:is(.auth-page,.team-page) .auth-layout{display:block;border:0;border-radius:0;min-height:100dvh}
:is(.auth-page,.team-page) .auth-context{padding:25px 24px;background:var(--bg);border:0;border-bottom:1px solid var(--bd)}
:is(.auth-page,.team-page) .auth-note,:is(.auth-page,.team-page) .auth-footer{display:none}
:is(.auth-page,.team-page) .auth-brand{font-size:20px}
:is(.auth-page,.team-page) .auth-layout>.card{padding:34px 24px}
:is(.auth-page,.team-page) .card h2{font-size:24px}
.team-page{padding:0 16px 32px}
:is(.auth-page,.team-page) .team-top{padding:20px 0}
:is(.auth-page,.team-page) .team-heading{padding:28px 0 22px}
:is(.auth-page,.team-page) .team-heading h1{font-size:27px}
:is(.auth-page,.team-page) .team-columns{grid-template-columns:1fr;gap:16px}
:is(.auth-page,.team-page) .team-columns>.card{padding:22px}
:is(.auth-page,.team-page) .member>span{flex-basis:100%}
:is(.auth-page,.team-page) .member button{min-height:44px;font-size:12px}}
@media(prefers-color-scheme:dark){:is(.auth-page,.team-page) .auth-context{background:#29374a}
:is(.auth-page,.team-page) .auth-note h1{color:#c3d5ed}
:is(.auth-page,.team-page) button{background:#376fae;color:white;border-color:#376fae}
:is(.auth-page,.team-page) button:hover{background:#2b598e}}
:is(.auth-page,.team-page) .field-hint{display:block;font-size:11px;line-height:1.5;font-weight:400;color:var(--mu);margin-top:7px}
:is(.auth-page,.team-page) input[aria-invalid="true"]{border-color:var(--rd)}
:is(.auth-page,.team-page) .permission-editor{flex:1 1 100%;border:1px solid var(--bd);border-radius:6px;padding:12px;margin-top:8px}
:is(.auth-page,.team-page) .permission-editor summary{font-size:12px;font-weight:600;cursor:pointer}
:is(.auth-page,.team-page) .permission-editor>p{margin:10px 0;font-size:11px}
:is(.auth-page,.team-page) .permission-editor select{width:100%;font-size:13px;margin:8px 0 14px}
:is(.auth-page,.team-page) .permission-editor fieldset{margin:0 0 14px;padding:12px;border:1px solid var(--bd);border-radius:5px}
:is(.auth-page,.team-page) .permission-editor legend{font-size:12px;font-weight:600;padding:0 5px}
:is(.auth-page,.team-page) .permission-editor label{display:flex;gap:9px;align-items:start;margin:10px 0;font-size:12px;font-weight:400}
:is(.auth-page,.team-page) .permission-editor input[type=checkbox]{display:inline-block;width:17px;min-height:17px;height:17px;margin:2px 0 0;flex:none;accent-color:var(--ac)}
:is(.auth-page,.team-page) .permission-feedback{font-size:12px;color:var(--ac)}
:is(.auth-page,.team-page) .team-links{display:flex;gap:20px;align-items:center}
:is(.auth-page,.team-page) .mail-card{max-width:620px;border:1px solid var(--bd)}
:is(.auth-page,.team-page) .mail-card select{display:block;width:100%;margin-top:7px;font-size:16px;min-height:46px}
:is(.auth-page,.team-page) .mail-card button{width:100%}
:is(.auth-page,.team-page) .permission-editor[hidden]{display:none!important}

.mfa-dialog {max-width:560px;width:calc(100% - 32px);padding:24px;border:1px solid #718075;border-radius:12px;background:var(--bg,#222a24);color:var(--text,#e8ece8)}
.mfa-dialog label {display:block;margin:16px 0}
.mfa-dialog input {display:block;width:100%;margin-top:8px}
.mfa-dialog button {margin:8px 8px 0 0;padding:10px}
.mfa-dialog pre,.mfa-secret {overflow-wrap:anywhere;white-space:pre-wrap}
.mfa-dialog::backdrop {background:#0008}

.auth-page #auth .password-toggle {width:auto;min-height:44px;margin:-10px 0 0;padding:8px 0;background:transparent;border:0;color:var(--ac);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.auth-page #auth .password-toggle:hover {background:transparent;color:var(--tx)}
.auth-page #auth .password-toggle:focus-visible {outline:2px solid var(--ac);outline-offset:3px}

.mfa-dialog .mfa-toggle {display:block;background:transparent;color:var(--tx);border:0;text-decoration:underline;margin-top:-8px;padding:8px 0}
.mfa-dialog .mfa-toggle[hidden],.mfa-dialog .mfa-resend[hidden] {display:none}

.mfa-dialog form {min-width:0;max-width:100%}
.mfa-dialog p {white-space:normal;overflow-wrap:anywhere}

/* Company identity */
.company-logo{display:block;width:144px;height:auto;background:transparent;border-radius:0;margin:0 0 14px;flex:none}
header .brand h1{font-size:17px;line-height:1.35}
.auth-brand .company-logo{width:160px;margin-bottom:18px}
@media(max-width:700px){header .brand{align-items:center;flex-wrap:wrap;gap:8px 12px}header .company-logo{width:62px;margin:0}header .brand h1{max-width:170px;font-size:16px}header .brand-label{flex-basis:100%}.auth-brand .company-logo{width:110px}}

.invite-permissions{margin-top:18px;border-top:1px solid var(--bd);padding-top:14px}
.invite-permissions summary{color:var(--ac);padding:8px 0}
.invite-permissions p{font-size:13px;color:var(--mu)}
.invite-permissions select{max-width:300px;margin:8px 0 16px}
.invite-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.invite-permission-grid fieldset{min-width:0;border:1px solid var(--bd);border-radius:6px;padding:12px}
.invite-permission-grid legend{font-size:13px;font-weight:600}
.invite-permission-grid label{display:flex;align-items:start;gap:9px;margin:10px 0;font-weight:400;font-size:13px}
.invite-permission-grid input[type=checkbox]{width:17px;height:17px;min-height:17px;flex:none;margin:0}
@media(max-width:700px){.invite-permission-grid{grid-template-columns:1fr}}