/* Área do cliente — complementa site.css (mesmos tokens) */
.top-tag{font:300 italic 13px var(--f-display);letter-spacing:.3em;text-transform:uppercase;color:var(--neon);white-space:nowrap}
.top .top-back{padding:11px 16px;font-size:14px}
@media (max-width:640px){.top-tag{display:none}.top .top-back{padding:10px 12px;font-size:13px}}

/* Login */
.login{position:relative;overflow:hidden;isolation:isolate;min-height:calc(100vh - 140px);display:flex;align-items:center}
.login::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 70% at 85% 30%,rgba(42,131,214,.25),transparent 70%),radial-gradient(30% 40% at 0% 100%,rgba(86,200,255,.08),transparent 70%)}
.login-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:56px;width:100%}
.login-copy h1{font:900 italic clamp(34px,4.6vw,56px)/1.05 var(--f-display);letter-spacing:-.02em;margin:16px 0 24px}
.perks{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--muted)}
.perks li{display:flex;gap:12px;align-items:center}
.perks li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}
.login-card{padding:30px;border-radius:22px;border:1px solid rgba(86,200,255,.4);background:var(--surface);box-shadow:0 0 60px -28px var(--glow);display:grid;gap:14px;min-width:0}
.login-card h2{font:800 italic 30px var(--f-display);margin:0 0 4px}
.cf{display:grid;gap:8px}
.cf .lbl{margin:0}
.cf input,.sel select{width:100%;font:600 19px var(--f-mono);padding:13px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg)}
.cf input:focus,.sel select:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-soft)}
.hint{font-size:14px;color:var(--dim);margin-top:-4px}
.err{color:var(--bad);font-size:15px;min-height:22px;margin:0}
.help{font-size:14px;color:var(--muted)}
.help a{color:var(--neon);margin-left:4px}
@media (max-width:860px){.login-grid{grid-template-columns:1fr;gap:28px;padding-block:32px}.login{min-height:0}}

/* Saudação e resumo */
.hello{padding-block:40px 24px;border-bottom:1px solid var(--line);background:radial-gradient(60% 120% at 100% 0%,rgba(42,131,214,.22),transparent 70%)}
.hello-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hello h1{font:900 italic clamp(28px,4vw,46px) var(--f-display);letter-spacing:-.015em;margin-top:10px}
.hello .sub{color:var(--muted);margin-top:6px;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.tile{padding:18px;border-radius:16px;border:1px solid var(--line);background:var(--bg-2);display:grid;gap:4px;min-width:0}
.tile .tl{font:600 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile b{font:800 italic 26px var(--f-display);overflow-wrap:anywhere}
.tile small{font-size:14px;color:var(--muted)}
.tile.alert{border-color:color-mix(in srgb,var(--bad) 55%,transparent);box-shadow:0 0 30px -18px var(--bad)}
.tile.alert b{color:var(--bad)}
@media (max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tile{padding:14px}.tile b{font-size:20px}.tile .tl{font-size:11px;letter-spacing:.06em}}

/* Abas */
.tabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + 67px);z-index:30;background:var(--hdr);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tabs-row{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs-row::-webkit-scrollbar{display:none}
.tab{all:unset;cursor:pointer;white-space:nowrap;padding:16px 14px;font:600 15px var(--f-display);color:var(--muted);border-bottom:2px solid transparent}
.tab:hover{color:var(--fg)}
.tab[aria-selected="true"]{color:var(--neon);border-bottom-color:var(--neon);text-shadow:0 0 12px var(--glow)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}

.panes{padding-block:28px 40px}
.pane-tools{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.seg-chips{display:flex;border:1px solid var(--line-2);border-radius:11px;overflow:hidden}
.seg-chips button{all:unset;cursor:pointer;padding:10px 16px;font:600 14px var(--f-display);color:var(--muted);border-left:1px solid var(--line-2)}
.seg-chips button:first-child{border-left:0}
.seg-chips button[aria-pressed="true"]{background:var(--neon);color:var(--on-neon)}
.seg-chips button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sel{display:grid;gap:6px;min-width:220px}
.sel select{font:600 15px var(--f-body);padding:10px 12px}
.list{display:grid;gap:12px}

/* Cartões */
.card{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card h3{font:800 italic 22px var(--f-display);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:15px;color:var(--muted)}
.meta b{color:var(--fg);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:99px;font:600 13px var(--f-display);border:1px solid var(--pc,var(--line-2));color:var(--pc,var(--muted));background:color-mix(in srgb,var(--pc,transparent) 12%,transparent);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{--pc:var(--ok)}.pill.warn{--pc:var(--gold)}.pill.bad{--pc:var(--bad)}.pill.info{--pc:var(--neon)}.pill.off{--pc:var(--dim)}
.mono{font-family:var(--f-mono)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-block;padding:6px 11px;border-radius:9px;border:1px solid var(--line-2);font-size:14px;background:var(--bg-2)}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}

/* Fatura */
.fat{display:grid;grid-template-columns:auto 1fr auto;gap:14px 18px;align-items:center}
.fat .when{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);text-align:center;line-height:1}
.fat .when b{font:900 italic 24px var(--f-display)}
.fat .when small{font:600 11px var(--f-mono);color:var(--muted);text-transform:uppercase;margin-top:3px}
.fat .valor{font:800 italic 26px var(--f-display);text-align:right}
.fat .acts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.fat .acts .btn{padding:11px 16px;font-size:14px}
.fat details{grid-column:1/-1;border:0;background:none}
.fat summary{padding:0;font:600 14px var(--f-display);color:var(--neon)}
.fat summary::after{width:7px;height:7px;margin-right:2px}
.fat .itens{margin-top:10px;display:grid;gap:6px;font-size:14px;color:var(--muted)}
.fat .itens div{display:flex;justify-content:space-between;gap:12px}
.codebox{grid-column:1/-1;font:500 13px var(--f-mono);color:var(--muted);word-break:break-all;padding:10px 12px;border-radius:10px;border:1px dashed var(--line-2)}
@media (max-width:520px){.fat{grid-template-columns:auto 1fr}.fat .valor{grid-column:2;text-align:left;font-size:22px}.fat .acts .btn{flex:1 1 100%}}

/* Atendimento */
.os{margin-top:14px;padding:14px;border-radius:14px;border:1px dashed var(--line-2);background:var(--bg-2)}
.os .meta{margin-top:6px}
.os-t{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:700 15px var(--f-display)}

/* Estados */
.empty,.loading{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:18px}
.loading::before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--neon);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.retry{margin-top:12px}

.toast{position:fixed;z-index:95;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));padding:12px 18px;border-radius:12px;background:var(--fg);color:var(--bg);font:600 15px var(--f-body);box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:calc(100% - 32px)}

.cl-foot{border-top:1px solid var(--line);background:var(--bg-2)}
.cl-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:18px;font-size:14px;color:var(--dim)}
.cl-foot b{color:var(--muted)}
.demo-flag{display:inline-block;margin-left:8px;font:600 11px var(--f-mono);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:6px;padding:2px 6px;vertical-align:4px;font-style:normal;letter-spacing:.04em}

/* Seletor de serviço */
.svc-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.svc-pick:empty{display:none}
.svc{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;min-width:220px;flex:0 1 auto;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--bg-2);transition:border-color .15s,box-shadow .2s}
.svc:hover{border-color:var(--neon)}
.svc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.svc[aria-pressed="true"]{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon) inset,0 0 28px -12px var(--glow);background:linear-gradient(180deg,var(--neon-soft),var(--bg-2))}
.svc .svc-n{font:800 italic 17px var(--f-display);display:flex;align-items:center;gap:8px}
.svc .svc-n i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--dim)}
.svc .svc-n i.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}.svc .svc-n i.warn{background:var(--gold)}.svc .svc-n i.off{background:var(--dim)}
.svc small{font:500 13px var(--f-mono);color:var(--muted)}
@media (max-width:520px){.svc{flex:1 1 100%;min-width:0}}
/* Composição da mensalidade */
.breakdown{margin-top:16px;display:grid;gap:8px;max-width:520px}
.breakdown div{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--muted);padding-bottom:8px;border-bottom:1px dashed var(--line)}
.breakdown div b{color:var(--fg);font-weight:600}
.breakdown .tot{border-bottom:0;padding-top:2px;color:var(--fg);font:800 italic 20px var(--f-display)}
.breakdown .incl{color:var(--ok);font-weight:600}
.card .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.card .acts .btn{padding:11px 16px;font-size:14px}
/* Diagnóstico */
.diag{margin-top:28px;padding:20px;border-radius:18px;border:1px dashed var(--gold);display:grid;gap:12px}
.diag h3{font:800 italic 20px var(--f-display);margin:0}
.diag textarea{width:100%;min-height:320px;font:12px/1.45 var(--f-mono);padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg)}
.guide-link{margin-top:16px}
.guide-link a{color:var(--neon);font-weight:600}