:root{
  --base:#FAFAF7; --raised:#FFFFFF; --sunken:#F1F1ED; --divider:#E6E5E0;
  --txt:#15191C; --txt2:#4A5568; --muted:#8A8F94;
  --cyan:#00BCD4; --cyan6:#00ACC1; --cyan7:#008394; --cyan-sub:#E0F7FA;
  --navy:#0F1F3D; --navy7:#1F3661; --navy5:#4A5C84;
  --green:#1F7A3A; --gold:#9A7B12; --gold-sub:#FAEDCC; --red:#C0392B;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{
  background:#dfe3e8; background-image:radial-gradient(1100px 760px at 50% -8%, #eef1f4, #d4d9df 72%);
  color:var(--txt); font-family:"Open Sans","Segoe UI",system-ui,sans-serif;
  min-height:100%; display:flex; justify-content:center; align-items:flex-start;
}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
input,select{font-family:inherit;}
.hidden{display:none !important;}

/* phone frame — centered card on desktop, full-bleed on phones */
.app{
  width:100%; max-width:430px; min-height:100dvh; background:var(--base);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
@media(min-width:480px){
  body{padding:26px 16px 40px;}
  .app{min-height:0; height:min(880px, calc(100dvh - 66px)); border-radius:26px;
    box-shadow:0 26px 50px rgba(20,30,50,.24); border:1px solid #cfd4da;}
}

.screen{flex:1; display:flex; flex-direction:column; min-height:0; position:relative;}
.scrollwrap{flex:1; overflow:auto; -webkit-overflow-scrolling:touch;}
.scrollwrap::-webkit-scrollbar{width:0;}

/* header */
.hdr{display:flex; align-items:center; justify-content:space-between; padding:16px 14px 2px;}
.scr-title{font-family:"Montserrat",sans-serif; font-size:23px; font-weight:800; color:var(--navy);}
.gear{width:34px; height:34px; border-radius:9px; background:var(--sunken); display:flex; align-items:center; justify-content:center; color:var(--navy5); font-size:16px;}
.scr-sub{font-size:12px; color:var(--muted); padding:2px 15px 12px;}
.back{font-size:13px; color:var(--cyan7); font-weight:600; padding:14px 14px 6px; display:inline-flex; align-items:center; gap:3px;}

/* role tabs */
.roles{display:flex; gap:6px; padding:0 12px 10px;}
.roles button{flex:1; text-align:center; font-size:12.5px; font-weight:600; padding:9px 0; border-radius:10px; background:var(--raised); border:1px solid var(--divider); color:var(--txt2);}
.roles button.on{background:var(--navy); border-color:var(--navy); color:#fff;}
.roles button .c{display:block; font-size:9.5px; color:var(--muted); font-weight:600; margin-top:2px;}
.roles button.on .c{color:#9fb0cf;}

/* phase filter chips */
.phaserow{display:flex; gap:6px; padding:0 12px 9px; overflow-x:auto;}
.phaserow::-webkit-scrollbar{height:0;}
.pchip{font-size:12px; padding:7px 11px; border-radius:999px; background:var(--raised); border:1px solid var(--divider); color:var(--txt2); display:flex; gap:6px; align-items:center; white-space:nowrap; flex:none;}
.pchip.on{background:var(--cyan-sub); border-color:var(--cyan); color:var(--cyan7); font-weight:700;}
.pchip .i{width:15px; height:15px; border-radius:50%; border:1.2px solid currentColor; font-size:9px; display:flex; align-items:center; justify-content:center; opacity:.75; font-style:italic; font-weight:700;}

.sortbar{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:1px 14px 9px; font-size:12px; color:var(--muted);}
.sortbar .seg{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.sortbar b{color:var(--txt2);}
.sortbar select{font-size:12px; font-weight:700; color:var(--txt2); background:var(--raised); border:1px solid var(--divider); border-radius:7px; padding:4px 6px;}
.sortbar .pmtoggle{display:inline-flex; align-items:center; gap:5px; color:var(--txt2); font-weight:600;}
.sortbar .cnt{color:var(--cyan7); font-weight:700;}

/* list rows */
.list{padding:0 12px 90px;}
.row{display:flex; align-items:center; gap:11px; padding:12px 10px; background:var(--raised); border:1px solid var(--divider); border-radius:14px; margin-bottom:9px; text-align:left; width:100%;}
.av{width:46px; height:46px; border-radius:13px; flex:none; display:flex; align-items:center; justify-content:center; font-family:"Montserrat",sans-serif; font-weight:700; font-size:15px; color:#fff;}
.av.c0{background:var(--navy7);} .av.c1{background:var(--cyan6);} .av.c2{background:var(--navy5);} .av.c3{background:#C98F00;} .av.c4{background:#5a6b8a;}
.rm{flex:1; min-width:0;}
.rn{font-size:14.5px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.caps{display:flex; gap:4px;}
.cap{font-size:8.5px; font-weight:800; letter-spacing:.3px; padding:2px 5px; border-radius:4px; text-transform:uppercase;}
.cap.pm{background:var(--navy); color:#fff;}
.cap.crew{background:var(--cyan-sub); color:var(--cyan7); border:1px solid var(--cyan);}
.cap.pending{background:var(--gold-sub); color:var(--gold); border:1px solid #e3cf7a;}
.rmeta{display:flex; gap:5px; align-items:center; margin-top:5px; flex-wrap:wrap;}
.tt{font-size:10px; color:var(--cyan7); background:var(--cyan-sub); padding:2px 6px; border-radius:5px; font-weight:600;}
.st{font-size:11px; color:var(--muted);}
.payglance{font-size:11px; color:var(--gold); background:var(--gold-sub); font-weight:700; padding:3px 8px; border-radius:5px; margin-top:6px; display:inline-block;}
.call{width:44px; height:44px; border-radius:50%; background:var(--green); flex:none; display:flex; align-items:center; justify-content:center;}
.empty{text-align:center; color:var(--muted); font-size:13px; padding:40px 24px; line-height:1.6;}

.fab{position:absolute; right:16px; bottom:22px; width:56px; height:56px; border-radius:50%; background:var(--cyan); box-shadow:0 8px 20px rgba(0,188,212,.45); display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:300;}

/* detail */
.dhero{display:flex; gap:13px; align-items:center; padding:2px 15px 12px;}
.dhero .av{width:56px; height:56px; border-radius:15px; font-size:19px;}
.dname{font-family:"Montserrat",sans-serif; font-size:19px; font-weight:800; color:var(--navy);}
.dmeta{font-size:12.5px; color:var(--txt2); margin-top:3px;}
.capsrow{display:flex; gap:6px; margin-top:7px;} .capsrow .cap{font-size:9px; padding:3px 6px;}
.dact{display:flex; gap:9px; padding:0 15px 12px;}
.btn{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:13px 0; border-radius:12px; font-size:14.5px; font-weight:700;}
.btn.call2{background:var(--green); color:#fff;}
.btn.text2{background:var(--raised); border:1.5px solid var(--cyan); color:var(--cyan7);}
.block-lbl{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); padding:10px 16px 7px; display:flex; justify-content:space-between; align-items:center;}
.block-lbl .edit{color:var(--cyan7); text-transform:none; letter-spacing:0; font-weight:700; font-size:12px;}
.phasechips{display:flex; gap:6px; padding:0 15px 8px; flex-wrap:wrap;}
.pc2{font-size:11.5px; color:var(--cyan7); background:var(--cyan-sub); padding:6px 10px; border-radius:8px; font-weight:600;}

/* rate sheet */
.rates{margin:0 15px 11px; background:var(--raised); border:1px solid var(--divider); border-radius:14px; overflow:hidden;}
.rateline{display:flex; align-items:center; gap:11px; padding:13px 14px; border-bottom:1px solid var(--divider);}
.rateline:last-child{border-bottom:none;}
.rdot{width:9px; height:9px; border-radius:50%; flex:none;}
.rinfo{flex:1;}
.rname{font-size:13.5px; font-weight:700; color:var(--navy);}
.rdesc{font-size:11px; color:var(--muted); margin-top:2px;}
.rprice{font-family:"Montserrat",sans-serif; font-size:15px; font-weight:800; color:var(--navy); white-space:nowrap;}
.rprice small{font-size:10.5px; color:var(--muted); font-weight:600;}
.rateline.crew{background:var(--gold-sub);}
.rateline.crew .rname{color:var(--gold);}
.roomnote{font-size:11.5px; color:var(--txt2); line-height:1.45; padding:11px 14px; background:var(--sunken); border-top:1px solid var(--divider);}
.roomnote b{color:var(--gold);}

.crewcta{display:flex; align-items:center; gap:11px; margin:0 15px 11px; padding:13px 14px; background:var(--navy); border-radius:14px; width:calc(100% - 30px);}
.crewcta .ci{width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex:none;}
.crewcta .ct{flex:1; text-align:left;} .crewcta .ct b{color:#fff; font-size:13.5px; font-weight:700;} .crewcta .ct p{color:#aab6cc; font-size:11px; margin-top:2px;}
.crewcta .chev{color:#7e8ba6; font-size:22px;}

.notebox{margin:0 15px 14px; background:var(--raised); border:1px solid var(--divider); border-radius:13px; padding:12px;}
.notebox .nt{font-size:12.5px; color:var(--txt2); line-height:1.5;}
.notebox .nt.muted{color:var(--muted); font-style:italic;}
.privlabel{display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; color:var(--cyan7); background:var(--cyan-sub); padding:2px 7px; border-radius:5px; text-transform:uppercase; letter-spacing:.4px;}
.ratingrow{display:flex; gap:5px; padding:0 15px 6px;}
.star{font-size:19px; color:var(--divider);} .star.on{color:#E0A50F;}

/* crew sub-profile */
.crewhero{display:flex; gap:13px; align-items:center; padding:2px 15px 11px;}
.crewhero .av{width:52px; height:52px; border-radius:15px; background:var(--navy7); font-size:20px;}
.gate{display:flex; gap:10px; align-items:flex-start; margin:0 15px 13px; padding:12px 13px; background:var(--cyan-sub); border:1px solid #bfeef4; border-radius:13px;}
.gate svg{flex:none; margin-top:1px;}
.gate p{font-size:11.5px; color:var(--cyan7); line-height:1.45; font-weight:600;}
.ratemodel{margin:0 15px 13px; display:flex; gap:10px;}
.rmcard{flex:1; background:var(--raised); border:1px solid var(--divider); border-radius:12px; padding:12px; text-align:center;}
.rmcard .k{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600;}
.rmcard .v{font-family:"Montserrat",sans-serif; font-size:16px; font-weight:800; color:var(--navy); margin-top:4px;}
.rmcard .v small{font-size:10px; color:var(--muted); font-weight:600;}
.crewmember{display:flex; align-items:center; gap:11px; margin:0 15px 9px; padding:12px 13px; background:var(--raised); border:1px solid var(--divider); border-radius:13px;}
.cmav{width:42px; height:42px; border-radius:12px; background:var(--sunken); color:var(--navy5); font-family:"Montserrat",sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none;}
.cminfo{flex:1; min-width:0;} .cmname{font-size:13.5px; font-weight:700; color:var(--navy);}
.cmskills{font-size:11px; color:var(--muted); margin-top:3px;}
.cmrate{font-family:"Montserrat",sans-serif; font-size:13.5px; font-weight:800; color:var(--navy); text-align:right; white-space:nowrap;}
.cmrate small{font-size:10px; color:var(--muted); font-weight:600; display:block;}
.cmlock{width:28px; height:28px; border-radius:8px; background:var(--sunken); display:flex; align-items:center; justify-content:center; flex:none; color:var(--muted);}
.cmedit{width:28px; height:28px; border-radius:8px; background:var(--cyan-sub); display:flex; align-items:center; justify-content:center; flex:none; color:var(--cyan7); font-size:14px;}
.footnote{font-size:11.5px; color:var(--txt2); line-height:1.5; margin:6px 15px 16px; padding:12px 13px; background:var(--sunken); border-radius:12px;}
.footnote b{color:var(--navy);}

/* forms */
.field{margin:0 15px 11px;}
.field label{font-size:11px; color:var(--txt2); font-weight:700; display:block; margin-bottom:6px;}
.inp{background:var(--raised); border:1px solid var(--divider); border-radius:12px; padding:12px 13px; font-size:14px; color:var(--navy); font-weight:600; width:100%;}
.inp:focus{outline:none; border-color:var(--cyan);}
.inp[disabled]{background:var(--sunken); color:var(--muted);}
select.inp{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F94' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center;}
.row2{display:flex; gap:10px; margin:0 15px 11px;} .row2 .field{flex:1; margin:0;}
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:0 15px 8px;}
.chip{font-size:12.5px; padding:9px 13px; border-radius:999px; background:var(--raised); border:1px solid var(--divider); color:var(--txt2); display:inline-flex; align-items:center; gap:6px;}
.chip.on{background:var(--cyan-sub); border-color:var(--cyan); color:var(--cyan7); font-weight:700;}

/* rate tier toggle cards (worker + admin form) */
.tier{margin:0 15px 11px; background:var(--raised); border:1px solid var(--divider); border-radius:15px; overflow:hidden;}
.tier.on{border-color:var(--cyan);} .tier.gold.on{border-color:#d9c267;}
.tierhead{display:flex; align-items:center; gap:11px; padding:14px;}
.ticon{width:36px; height:36px; border-radius:11px; background:var(--sunken); display:flex; align-items:center; justify-content:center; flex:none; color:var(--navy5);}
.tier.on .ticon{background:var(--cyan-sub); color:var(--cyan7);}
.tier.gold.on .ticon{background:var(--gold-sub); color:var(--gold);}
.tinfo{flex:1;} .tname{font-size:14px; font-weight:700; color:var(--navy);} .tdesc{font-size:11px; color:var(--muted); margin-top:2px;}
.sw{width:44px; height:26px; border-radius:13px; background:var(--divider); flex:none; position:relative; transition:.18s;}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.18s;}
.sw.on{background:var(--cyan);} .sw.on::after{left:21px;}
.sw.gold.on{background:var(--gold);}
.sw[disabled]{opacity:.5;}
.tierbody{border-top:1px dashed var(--divider); padding:12px 14px; background:var(--sunken);}
.tieroff{padding:11px 14px; font-size:11.5px; color:var(--muted); border-top:1px dashed var(--divider); background:var(--sunken);}
.rateinp{display:flex; align-items:center; gap:10px;}
.rateinp .lab{font-size:12px; color:var(--txt2); flex:1;}
.moneybox{background:var(--raised); border:1px solid var(--cyan); border-radius:10px; padding:7px 11px; display:inline-flex; align-items:center; gap:2px; font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px; color:var(--navy);}
.moneybox.gold{border-color:var(--gold);}
.moneybox input{width:64px; border:none; outline:none; font:inherit; color:var(--navy); background:transparent;}
.moneybox small{font-size:10px; color:var(--muted); font-weight:600;}
.lockedrate{font-size:11.5px; color:var(--muted); font-style:italic;}
.seg{display:flex; gap:6px; margin-top:10px;}
.seg button{flex:1; text-align:center; font-size:11px; font-weight:600; padding:9px 4px; border-radius:9px; background:var(--raised); border:1px solid var(--divider); color:var(--txt2); line-height:1.3;}
.seg button.on{background:var(--gold-sub); border-color:var(--gold); color:var(--gold); font-weight:700;}
.seg small{display:block; color:var(--muted); font-weight:500;}

/* crew builder rows */
.cmrow{display:flex; align-items:center; gap:11px; margin:0 15px 9px; padding:12px 13px; background:var(--raised); border:1px solid var(--divider); border-radius:13px;}
.addrow{display:flex; align-items:center; justify-content:center; gap:7px; margin:2px 15px 14px; padding:12px; border:1.5px dashed var(--cyan); border-radius:13px; color:var(--cyan7); font-size:13.5px; font-weight:700; width:calc(100% - 30px);}

/* visibility / privacy card */
.privacy{margin:6px 15px 14px; background:var(--cyan-sub); border:1px solid #bfeef4; border-radius:15px; overflow:hidden;}
.privhead{display:flex; align-items:flex-start; gap:10px; padding:14px;}
.privhead svg{flex:none; margin-top:1px;}
.privhead .pt2 b{font-size:13px; color:var(--cyan7); font-weight:800; display:block;}
.privhead .pt2 p{font-size:11px; color:#3a7b85; line-height:1.45; margin-top:3px;}
.privrow{display:flex; align-items:center; gap:11px; padding:13px 14px; border-top:1px solid #bfeef4;}
.privrow .pl{flex:1; font-size:12.5px; color:var(--cyan7); font-weight:700;}
.privrow .pl span{display:block; font-size:10.5px; color:#3a7b85; font-weight:400; margin-top:2px;}

/* invite link box */
.invitebox{margin:4px 15px 14px; background:var(--navy); border-radius:14px; padding:14px;}
.invitebox b{color:#fff; font-size:13px; display:block; margin-bottom:4px;}
.invitebox p{color:#aab6cc; font-size:11px; line-height:1.45; margin-bottom:9px;}
.invitebox .linkrow{display:flex; gap:8px;}
.invitebox input{flex:1; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:9px; padding:9px 10px; color:#dfe6f2; font-size:11px;}
.invitebox button{background:var(--cyan); color:#fff; font-weight:700; font-size:12.5px; padding:0 14px; border-radius:9px;}

/* step dots / save bar (worker wizard) */
.stepdots{display:flex; gap:5px;}
.stepdots i{width:7px; height:7px; border-radius:50%; background:var(--divider);}
.stepdots i.on{background:var(--cyan); width:18px; border-radius:4px;}
.persp{display:flex; align-items:center; gap:9px; margin:14px 14px 12px; padding:11px 12px; background:var(--navy); border-radius:13px;}
.persp .pi{width:32px; height:32px; border-radius:10px; background:rgba(255,255,255,.13); display:flex; align-items:center; justify-content:center; flex:none;}
.persp .pt b{color:#fff; font-size:12.5px; font-weight:700; display:block;}
.persp .pt span{color:#9fb0cf; font-size:10.5px;}
.savebar{padding:11px 14px; border-top:1px solid var(--divider); background:var(--base); display:flex; gap:10px;}
.savebar .next{flex:1; text-align:center; background:var(--cyan); color:#fff; font-weight:700; font-size:14.5px; padding:14px 0; border-radius:13px;}
.savebar .prev{width:52px; text-align:center; background:var(--raised); border:1px solid var(--divider); color:var(--navy5); font-weight:700; font-size:19px; padding:14px 0; border-radius:13px;}
.savebar .danger{background:var(--raised); border:1px solid #e7c4be; color:var(--red); flex:none; padding:14px 16px; border-radius:13px; font-weight:700; font-size:13px;}

/* login */
.login{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:30px 26px; gap:6px; text-align:center;}
.login .logo{font-family:"Montserrat",sans-serif; font-weight:900; color:var(--navy); font-size:26px; letter-spacing:-.5px;}
.login .logo span{color:var(--cyan);}
.login .tagline{color:var(--muted); font-size:12.5px; margin-bottom:22px;}
.login form{width:100%; max-width:300px; display:flex; flex-direction:column; gap:11px;}
.login .inp{text-align:center; letter-spacing:2px;}
.login .go{background:var(--cyan); color:#fff; font-weight:700; font-size:15px; padding:13px; border-radius:12px;}
.login .err{color:var(--red); font-size:12px; min-height:16px;}

/* popover + toast */
.pop{position:fixed; inset:0; background:rgba(15,31,61,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50; padding:0;}
@media(min-width:480px){ .pop{align-items:center; padding:20px;} }
.popcard{background:var(--raised); border-radius:18px 18px 0 0; width:100%; max-width:430px; max-height:86dvh; overflow:auto; padding:18px 16px 26px;}
@media(min-width:480px){ .popcard{border-radius:18px;} }
.popcard h3{font-family:"Montserrat",sans-serif; font-size:17px; color:var(--navy); margin-bottom:4px;}
.popcard .pp{font-size:13px; color:var(--txt2); line-height:1.55; margin-bottom:14px;}
.popclose{display:block; margin:6px auto 0; background:var(--sunken); color:var(--navy5); font-weight:700; font-size:14px; padding:12px 0; border-radius:12px; width:100%;}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; font-size:13px; font-weight:600; padding:12px 18px; border-radius:11px; box-shadow:0 8px 22px rgba(15,31,61,.35); opacity:0; transition:.25s; z-index:60; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.tabbar{display:flex; border-top:1px solid var(--divider); padding:9px 0 12px; background:var(--base);}
.tabbar button{flex:1; text-align:center; font-size:9.5px; color:var(--muted);}
.tabbar button.on{color:var(--cyan7); font-weight:700;}
.tabbar .ic{font-size:16px; display:block; margin-bottom:2px;}

.svg-call{width:18px;height:18px;fill:#fff;}
.center-spin{flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px;}