:root{--navy:#0F1E33;--navy2:#16304F;--teal:#00C9B1;--gold:#C9A227;--bg:#F4F6F8;--panel:#fff;--ink:#132233;--muted:#5E6B78;--line:#D7DEE5}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
button,.btn,input,select,textarea{font:inherit}
button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--navy);font-weight:600;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{border-color:var(--teal)}
button.primary{background:var(--navy);border-color:var(--navy);color:#fff}
button.primary:hover{background:#17324d}
button.big{min-height:56px;font-size:17px;padding:10px 22px}
button.wide{width:100%}
button:disabled{opacity:.6;cursor:wait}
input,select,textarea{width:100%;border:2px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
input[type=color]{padding:4px;height:48px}
input[type=checkbox]{width:22px;min-height:22px;height:22px;margin:0 8px 0 0}
input.big{height:58px;font-size:18px;text-align:center}
.muted{color:var(--muted)}.small{font-size:13.5px}.tiny{font-size:12.5px;color:var(--muted);margin-top:14px}
.err{color:#C62828;min-height:1.3em;margin:6px 0}
/* sign-in */
.gate{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 30px;background:linear-gradient(180deg,var(--navy) 0,var(--navy2) 300px,var(--bg) 300px)}
.gate[hidden]{display:none}
.gateBox{width:100%;max-width:440px;background:#fff;border-radius:20px;padding:30px 24px;box-shadow:0 20px 50px rgba(14,30,46,.25);text-align:center;display:flex;flex-direction:column;gap:12px}
.gateMark{width:76px;height:76px;margin:0 auto}
.eyebrow{margin:0;color:var(--teal);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.gateBox h1{margin:0;font-size:24px;color:var(--navy)}
.gateBox .muted{margin:0 0 4px}
.passRow{display:flex;gap:10px}.passRow input{flex:1;min-width:0}
.eye{flex:0 0 84px;min-height:58px}
#setupOnly,#setupOnly2{display:flex;flex-direction:column;gap:12px}
#setupOnly[hidden],#setupOnly2[hidden]{display:none}
/* app */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--navy);color:#fff;flex-wrap:wrap}
.bar .mark{width:40px;height:40px;flex:none}
.bar .title{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}.bar .title span{font-size:12.5px;color:#9FB3C8}
.bar nav{display:flex;gap:6px;flex-wrap:wrap}
.nav{background:transparent;border-color:transparent;color:#C9D6E2;min-height:40px}
.nav.on{background:rgba(0,201,177,.15);color:#fff;border-color:var(--teal)}
.view{max-width:1200px;margin:0 auto;padding:22px 16px 60px}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.head h1{margin:0;font-size:26px;color:var(--navy)}.head h1 small{font-size:15px;color:var(--muted);font-weight:500;margin-left:6px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.kpis div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.kpis b{display:block;font-size:22px;color:var(--navy)}.kpis span{font-size:13px;color:var(--muted)}
.list{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.list th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#EEF2F5;padding:10px 12px}
.list td{padding:12px;border-top:1px solid var(--line);vertical-align:middle}
.list td small{display:block;color:var(--muted);font-size:13px}
.list tbody tr[data-l]{cursor:pointer}.list tbody tr[data-l]:hover{background:#F2FBFA}
.empty{background:#fff;border:2px dashed var(--line);border-radius:14px;padding:24px;text-align:center}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:#E8EDF2;color:var(--navy);white-space:nowrap}
.chip.s-live,.chip.s-approved,.chip.r-ok{background:#DDF7F2;color:#00695C}
.chip.s-proof-sent,.chip.r-soon{background:#FFF3D6;color:#7A5600}
.chip.s-changes-asked,.chip.r-late{background:#FDE2E2;color:#A12020}
.chip.s-suspended,.chip.r-stop,.chip.r-off{background:#333;color:#fff}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#B8C2CC;margin-right:4px}.dot.on{background:var(--teal)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.panel h2{margin:0 0 12px;font-size:18px;color:var(--navy)}.panel h3{margin:16px 0 8px;font-size:15px}
dl{display:grid;grid-template-columns:130px 1fr;gap:6px 10px;margin:0}dt{color:var(--muted)}dd{margin:0}
.notes{white-space:pre-wrap;background:#F6F8FA;border-radius:10px;padding:10px;margin:12px 0 0}
.files,.drafts{list-style:none;margin:10px 0 0;padding:0}
.files li,.drafts li{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.files small,.drafts small{color:var(--muted);font-size:13px;width:100%}
.drafts .acts{margin-left:auto}
blockquote{margin:4px 0 0;width:100%;background:#FFF6F6;border-left:4px solid #E57373;padding:8px 10px;border-radius:6px;white-space:pre-wrap}
.upl{display:inline-flex;margin-top:12px;min-height:44px;align-items:center;padding:8px 16px;border:2px dashed var(--teal);border-radius:10px;color:var(--navy);font-weight:600;cursor:pointer}
.pub{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.tick{display:flex;align-items:center}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form2 label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.form2 .full,.form2 fieldset{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset legend{font-weight:700;color:var(--navy);padding:0 6px}
fieldset .grid3,fieldset .full,fieldset p{grid-column:1/-1}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.prev{position:sticky;top:76px}
.cardbox{border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18);margin-bottom:14px}
.cardbox svg{display:block;width:100%;height:auto}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;max-width:92vw;z-index:20;box-shadow:0 10px 30px rgba(0,0,0,.3)}
@media (max-width:860px){.cols,.studio{grid-template-columns:1fr}.prev{position:static}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.form2,fieldset{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}
  .list thead{display:none}.list td{display:block;border-top:0;padding:4px 12px}.list tr{display:block;border-top:1px solid var(--line);padding:8px 0}}

/* no-save passcode fields */
.secret{-webkit-text-security:disc;text-security:disc}
.secret.shown{-webkit-text-security:none;text-security:none}

/* v1.1.1 staff plan */
.staffbox{border:2px solid #C9A227;border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.staffbox legend{font-weight:700;padding:0 6px}
.staffbox p,.staffbox .full{grid-column:1/-1}
@media(max-width:640px){.staffbox{grid-template-columns:1fr}}
.staffbox[hidden]{display:none}

/* ---------- v1.2: ITS house look (navy #0F1E33, gold #C9A227, teal accents) ---------- */
.bar{border-bottom:3px solid var(--gold)}
.bar .who{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-size:13px;color:#fff}
.bar .who #who{font-weight:700;color:var(--gold)}
.link{background:none;border:0;min-height:0;padding:2px 0;color:#9FB3C8;font-weight:500;font-size:12.5px;text-decoration:underline}
.link:hover{color:#fff}
.nav{border-radius:999px}
.nav.on{background:rgba(201,162,39,.16);border-color:var(--gold);color:#fff}
.nav[hidden]{display:none}
button.primary{background:var(--navy);border-color:var(--gold);color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
button.primary:hover{background:var(--navy2)}
.head h1{position:relative;padding-bottom:6px}
.head h1::after{content:'';position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--teal))}
.panel{border-top:4px solid var(--navy);box-shadow:0 6px 18px rgba(15,30,51,.06)}
.panel.wide{grid-column:1/-1}
.panel.narrow{max-width:460px;margin:0 auto}
.panel h2 small{font-size:13px;color:var(--muted);font-weight:600;margin-left:6px}
.stack{display:flex;flex-direction:column;gap:12px}
.foot{text-align:center;color:var(--muted);font-size:12.5px;padding:0 16px 30px}
/* dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 18px}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:2px;min-height:118px;padding:14px;border-radius:16px;border:1px solid var(--line);border-left:5px solid var(--teal);background:#fff;color:var(--ink)}
.tile b{font-size:28px;line-height:1.1;color:var(--navy)}
.tile span{font-weight:700;font-size:14px;color:var(--navy)}
.tile small{font-weight:500;font-size:12.5px;color:var(--muted)}
.tile:hover{border-color:var(--gold);border-left-color:var(--gold)}
.tile.warn{border-left-color:#E0A100;background:#FFFBF0}
.tile.go{border-left-color:#00A88F;background:#F2FCFA}
.tile.bad{border-left-color:#C62828;background:#FFF4F4}.tile.bad b{color:#C62828}
.mini{list-style:none;margin:0;padding:0}
.mini li{padding:9px 6px;border-top:1px solid var(--line);cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 8px}
.mini li:hover{background:#F2FBFA}.mini small{width:100%;color:var(--muted);font-size:12.5px}
/* client page */
.engine{margin-top:14px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#F3F6FA,#FBF7EA);border:1px solid #E7DDB8;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.engine p{margin:0}
.pv{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rounds{margin:12px 0 0}
.warn{margin:12px 0;padding:12px 14px;border-radius:12px;background:#FFF3D6;border:1px solid #F0D68A;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inv .amt{margin-left:auto;font-size:17px;color:var(--navy)}
.upl2{position:relative}
.upl{margin-top:0}
.newinv{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}.newinv select{flex:1;min-width:220px;width:auto}
.chip.p-unpaid{background:#FDE2E2;color:#A12020}.chip.p-pop{background:#FFF3D6;color:#7A5600}.chip.p-paid{background:#DDF7F2;color:#00695C}.chip.p-cancelled{background:#E8EDF2;color:#5E6B78;text-decoration:line-through}
.gates{list-style:none;margin:8px 0;padding:0}
.gates li{padding:9px 12px;border-radius:10px;margin-bottom:6px;font-weight:600}
.gates li.ok{background:#E6F8F4;color:#00695C}.gates li.no{background:#FDECEC;color:#A12020}
.install{margin-top:16px;padding:14px;border-radius:14px;border:2px solid var(--gold);background:#FFFCF2}
.install h3{margin:0 0 6px}
.install .link{display:block;color:var(--navy);text-decoration:none;word-break:break-all;font-family:Consolas,monospace;font-size:13.5px;background:#fff;border:1px solid var(--line);padding:8px 10px;border-radius:8px}
/* sales / activity */
.recon{padding:14px 16px;border-radius:14px;margin:0 0 16px;border:1px solid}
.recon.good{background:#E6F8F4;border-color:#9EE0D2;color:#00594D}
.recon.bad{background:#FDECEC;border-color:#F2B3B3;color:#8E1B1B}
h2.sec{font-size:18px;color:var(--navy);margin:22px 0 10px}
.list tr.alert td{background:#FFF4F4}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pv{grid-template-columns:1fr}.bar .who{align-items:flex-start;width:100%}}
/* brand kit library */
input.search{text-align:left;margin:0 0 16px}
.kits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kitHead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.kitHead h2{margin:0}.kitHead p{margin:4px 0 0}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
.sw{display:inline-flex;align-items:center;gap:6px;font:12px Consolas,monospace;background:#F4F6F8;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px}
.sw i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block}
.swatches small{color:var(--muted);font-size:12px}
.kfiles{list-style:none;margin:10px 0 0;padding:0}
.kfiles li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.kfiles li>div{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.kfiles small{width:100%;color:var(--muted);font-size:12.5px}
.thumb{width:56px;height:56px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;flex:none}
.thumb.doc{display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#A12020;font-size:13px}
.kd{margin-top:10px}.kd button{min-height:36px;padding:4px 12px;font-size:13.5px}
@media (max-width:1000px){.kits{grid-template-columns:1fr}}
.bar nav .nav{padding:8px 12px}
.loglib{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.loglib>span{width:100%;font-weight:600}
.loglib button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border:2px solid #d8dde6;border-radius:12px;background:#fff;cursor:pointer;min-width:110px}
.loglib button:hover{border-color:#C9A227}
.loglib img{width:56px;height:56px;object-fit:contain}
.loglib small{font-size:12px}
.loglib .nologo{min-height:92px;justify-content:center}

/* v1.2 house library (No. 1) + grouped logo picker + second logo */
.kit.house{grid-column:1/-1;border-top-color:var(--gold)}
.kit .no{display:inline-block;background:var(--navy);color:var(--gold);border-radius:8px;padding:1px 8px;font-size:13px;margin-right:4px;vertical-align:middle}
.kit.house .sub{margin-top:14px;padding:14px;border-radius:14px;background:#F7F8FB;border:1px solid var(--line)}
.kit.house h3{margin:14px 0 6px;font-size:15px;color:var(--navy)}.kit.house h3 small{color:var(--muted)}
.hlogos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hlogos li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.hlogos .acts .btn{min-height:36px;padding:4px 12px;font-size:13.5px}
.loglib .lgroup{width:100%}.loglib .lgroup>b{display:block;font-size:13px;color:var(--navy);margin:4px 0}
.loglib .lrow{display:flex;flex-wrap:wrap;gap:8px}
.loglib.l2{border-top:1px dashed var(--line);padding-top:10px}
@media (max-width:860px){.hlogos{grid-template-columns:1fr 1fr}}

/* v1.2 send the card */
.send .btn.primary,.send a.primary{background:var(--navy);color:#fff;border-color:var(--gold)}
.qrbox{margin-top:12px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.qrbox[hidden]{display:none}.qrbox img{width:240px;height:240px;image-rendering:pixelated}
.sends{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--muted)}.sends li{padding:4px 0;border-top:1px dashed var(--line)}

/* v1.3: new-card chooser, staff, face styles, palettes, ITS styles, viewer */
.choose{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.tile.big{min-height:170px;padding:20px}.tile.big b{font-size:24px}
.free{background:#E6F8F4;color:#00594D;border-radius:12px;padding:12px 14px}
.faces,.palettes,.itsStyles{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.faces>span,.palettes>span:first-child,.itsStyles>span{width:100%;font-weight:600;color:var(--navy);font-size:14px}
.faces button,.itsStyles button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px;padding:8px 10px}
.faces button.on{border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.faces i,.itsStyles i{display:block;width:84px;height:54px;border-radius:6px;border:1px solid #c5ccd5;background:#fff;position:relative;overflow:hidden}
.pv-classic{background:linear-gradient(90deg,#0F1E33 0 32%,#C9A227 32% 35%,#fff 35%)!important}
.pv-plain{background:#0F1E33!important}
.pv-splitTB{background:linear-gradient(180deg,#fff 0 55%,#C9A227 55% 59%,#0F1E33 59%)!important}
.pv-splitLR{background:linear-gradient(90deg,#0B5D63 0 50%,#00C9B1 50% 52%,#fff 52%)!important}
.itsStyles{background:#FFFCF2;border:2px solid var(--gold);border-radius:12px;padding:10px}
.itsStyles[hidden]{display:none}.itsStyles b{font-size:12.5px;text-align:center}
.palettes button{gap:6px;min-height:40px}
.sw2{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.custom{margin:4px 0 -4px;color:var(--navy)}
.bigpick input[type=color]{height:56px;cursor:pointer;border-color:var(--navy)}
.viewer{position:fixed;inset:0;z-index:30;background:rgba(15,30,51,.86);display:flex;align-items:center;justify-content:center;padding:16px}
.vbox{width:min(980px,100%);background:#fff;border-radius:18px;padding:18px;border-top:5px solid var(--gold)}
.vbox h2{margin:0 0 12px;color:var(--navy)}.vbox h2 small{font-size:13px;color:var(--muted);font-weight:500}
.vflip{position:relative;perspective:1600px;cursor:pointer;margin-bottom:14px}
.vface{transition:transform .6s;backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.vface svg{display:block;width:100%;height:auto}
.vback{position:absolute;inset:0;transform:rotateY(180deg)}
.vflip.turned .vfront{transform:rotateY(180deg)}.vflip.turned .vback{transform:rotateY(360deg)}
@media (max-width:860px){.choose{grid-template-columns:1fr}}
.sw2.a0F1E33{background:#0F1E33}.sw2.aC9A227{background:#C9A227}.sw2.a0B5D63{background:#0B5D63}.sw2.a00C9B1{background:#00C9B1}.sw2.a111111{background:#111111}.sw2.aFFFFFF{background:#FFFFFF}
.tile.fam{border-left-color:#E0A100;background:#FFFBF0}