/* Vadilator — account page. Loads after app.css and reuses its tokens.
   Same light palette as the tool: white panels on #fafafa, 4px radii,
   Chakra Petch for words, JetBrains Mono for anything that is a number. */

body.acc{overflow:auto;display:block;background:var(--panel-2)}
body.acc .bar{grid-template-columns:1fr auto}
body.acc .brand{text-decoration:none;color:var(--ink)}

/* ---------- signed-out gate ---------- */
.gate{display:grid;place-items:center;padding:64px 20px}
.gate__card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:28px;width:100%;max-width:400px}
.gate__form{margin:0}
.gate__lead{font:400 13px/1.6 var(--ui);color:var(--ink-3);margin-bottom:18px}
.gate__go{width:100%;margin-top:6px;height:40px;font-size:14px}

.fld{display:block;margin-bottom:14px}
.fld span{display:block;font:600 12px/1 var(--ui);color:var(--ink-2);margin-bottom:6px}
.fld input,.fld select{
  width:100%;height:40px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:0 12px;font:400 14px/1 var(--ui);outline:none;color:var(--ink);
}
.fld input[type=number]{font-family:var(--mono)}
.fld input:focus,.fld select:focus{border-color:var(--ui-accent)}
.fld--half{flex:1;min-width:0}
.tols{display:flex;gap:10px}

.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font:400 12px/1.5 var(--ui);color:var(--ink-3);cursor:pointer}
.consent input{margin:2px 0 0;accent-color:var(--ui-accent);width:16px;height:16px;flex:none}

.linky{display:block;width:100%;margin-top:12px;background:none;border:0;font:600 12px/1 var(--ui);color:var(--ink-3);cursor:pointer;text-align:center}
.linky:hover{color:var(--ui-accent-dark)}

/* Google sign-in (2026-10-28): Google draws the button itself, this only places it */
.gsi{margin:0}
.gsi__btn{display:flex;justify-content:center;min-height:44px}
.gsi__note{font:400 11px/1.5 var(--ui);color:var(--ink-3);text-align:center;margin:10px 0 0}
.gsi__note a{color:inherit;text-decoration:underline}
.gsi__or{display:flex;align-items:center;gap:10px;margin:16px 0;font:600 11px/1 var(--ui);letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.gsi__or::before,.gsi__or::after{content:'';flex:1;height:1px;background:var(--line)}
.msg{border-radius:var(--r);padding:10px 12px;font:400 13px/1.5 var(--ui);margin-bottom:16px;border:1px solid var(--line)}
.msg--err{border-color:var(--accent);color:var(--accent);background:#fff5f6}
.msg--ok{border-color:var(--ok);color:var(--ok);background:#f2faf6}

/* ---------- signed-in ---------- */
.acc__app{max-width:1200px;margin:0 auto;padding:40px 24px 80px}
.acc__top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.eyebrow{font:600 11px/1 var(--ui);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3)}
.acc__h1{font:700 28px/1.15 var(--ui);margin-top:8px}
.acc__topright{display:flex;align-items:center;gap:10px}
.plan{border:1px solid var(--line);border-radius:3px;padding:4px 9px;font:600 11px/1.3 var(--ui);letter-spacing:1px;text-transform:uppercase;color:var(--ink-2);background:var(--panel)}
.plan--free{color:var(--ink-3)}
.plan--studio,.plan--agency{border-color:var(--ui-accent);color:var(--ui-accent-dark)}

.notice{background:var(--panel);border:1px solid var(--warn);border-radius:var(--r);padding:11px 14px;font:400 13px/1.5 var(--ui);color:var(--ink-2);margin-bottom:20px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.notice .linky{width:auto;margin:0;color:var(--warn);font-weight:600}

.acc__grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:20px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel__head .side__title{margin-bottom:0}

.usage{font:400 12px/1.5 var(--mono);color:var(--ink-3);margin-bottom:12px}

.clist{display:flex;flex-direction:column;gap:6px}
.cl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;cursor:pointer;transition:border-color .12s,background-color .12s}
.cl:hover{border-color:var(--ink)}
.cl.is-on{border-color:var(--ui-accent);background:var(--ui-accent-soft)}
.cl__n{font:600 13px/1.3 var(--ui)}
.cl__m{margin-top:3px;font:400 11px/1.4 var(--mono);color:var(--ink-3)}
.cl__dots{display:flex;gap:3px;margin-top:8px}
.cl__dot{width:14px;height:14px;border-radius:3px;border:1px solid var(--line-2)}

.swatches{display:flex;flex-direction:column;gap:6px;margin:18px 0 14px}
.sw{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.sw__chip{width:30px;height:30px;border-radius:3px;flex:none;border:1px solid var(--line-2)}
.sw__t{flex:1;min-width:0}
.sw__l{font:600 13px/1.3 var(--ui)}
.sw__h{font:400 11px/1.4 var(--mono);color:var(--ink-3);text-transform:uppercase}
.sw__x{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;padding:0 3px}
.sw__x:hover{color:var(--accent)}
.sw__src{font:600 10px/1.4 var(--ui);letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:1px 6px}

.addcol{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.addcol input[type=color]{width:36px;height:36px;flex:none;padding:0;border:1px solid var(--line);border-radius:var(--r);background:none;cursor:pointer}
.addcol input[type=text]{height:36px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 10px;font:400 13px/1 var(--ui);color:var(--ink);outline:none;min-width:0}
#new-hexval{width:96px;font-family:var(--mono);text-transform:uppercase}
#new-label{flex:1}
.addcol input:focus{border-color:var(--ui-accent)}

/* ---------- logos ---------- */
.logos__h{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.logos{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lg{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:9px 10px}
.lg__img{width:52px;height:34px;flex:none;border-radius:3px;object-fit:contain;border:1px solid var(--line);
  background-image:linear-gradient(var(--checker-a) 1px,transparent 1px),linear-gradient(90deg,var(--checker-a) 1px,transparent 1px);background-size:8px 8px}
.lg__t{flex:1;min-width:0}
.lg__l{font:600 13px/1.3 var(--ui)}
.lg__m{margin-top:3px;font:400 11px/1.4 var(--mono);color:var(--ink-3)}
.lg__x{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;padding:0 3px}
.lg__x:hover{color:var(--accent)}
.addlogo{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.addlogo .fld{margin-bottom:0;min-width:130px}
.addlogo .btn{height:40px}

/* ---------- people ---------- */
.panel--wide{margin-top:20px}
.mlist{display:flex;flex-direction:column;gap:6px}
.mb{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;flex-wrap:wrap}
.mb--pending{opacity:.72;border-style:dashed}
.mb__t{flex:1;min-width:180px}
.mb__n{font:600 13px/1.3 var(--ui)}
.mb__e{margin-top:2px;font:400 11px/1.4 var(--mono);color:var(--ink-3)}
.mb__role{height:32px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 9px;font:500 12px/1 var(--ui);color:var(--ink);cursor:pointer}
.mb__role:disabled{opacity:.6;cursor:default}
.mb__tag{font:600 10px/1.4 var(--ui);letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:2px 7px}
.mb__x{background:none;border:0;color:var(--ink-3);cursor:pointer;font:600 12px/1 var(--ui)}
.mb__x:hover{color:var(--accent)}

/* ---------- billing ---------- */
.plans{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.pl{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;min-width:240px}
.pl.is-on{border-color:var(--ui-accent)}
.pl__t{flex:1}
.pl__n{font:700 13px/1.3 var(--ui)}
.pl__m{margin-top:3px;font:400 11px/1.4 var(--mono);color:var(--ink-3)}

.invbox{border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.invbox summary{font:600 11px/1 var(--ui);letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);cursor:pointer;margin-bottom:14px}
.invgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}

.pays{display:flex;flex-direction:column;gap:6px;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.pay{display:flex;align-items:center;gap:14px;font:400 12px/1.4 var(--mono);color:var(--ink-2)}
.pay__d{min-width:96px;color:var(--ink-3)}
.pay__a{flex:1}
.pay__l{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--ui-accent-dark);text-decoration:none}
.pay__l:hover{text-decoration:underline}

/* ---------- copy decks ---------- */
.decks{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.deck{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:9px 11px}
.deck__t{flex:1;min-width:0}
.deck__n{font:600 13px/1.3 var(--ui)}
.deck__m{margin-top:3px;font:400 11px/1.4 var(--mono);color:var(--ink-3)}

/* ---------- AI usage ---------- */
.uses{display:flex;flex-direction:column;gap:5px;margin:6px 0 14px}
.use{display:flex;align-items:baseline;gap:14px;font:400 13px/1.5 var(--ui)}
.use__k{flex:1;color:var(--ink-2)}
.use__u{font-family:var(--mono);font-weight:600}
.use__ms{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:64px;text-align:right}

@media (max-width:820px){
  .acc__grid{grid-template-columns:1fr}
  .acc__app{padding:24px 16px 64px}
}