@font-face{font-family:Manrope;src:url('fonts/Manrope-Variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:light;--bg:#fafafa;--surface:#fff;--card:#f7f8f8;--ink:#2b2e35;--muted:#626a70;--border:#e0e3e3;--accent:#4e5757;--button:#fff;font-family:Manrope,system-ui,sans-serif;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}main{max-width:76rem;margin:auto;padding:max(1.2rem,env(safe-area-inset-top)) max(1.2rem,env(safe-area-inset-right)) max(1.2rem,env(safe-area-inset-bottom)) max(1.2rem,env(safe-area-inset-left))}
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0 1.4rem;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.4rem;letter-spacing:-.05em}.brand img{border-radius:14px}.brand small{display:block;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a{color:var(--accent);text-underline-offset:.2em}button,input,select,textarea{font:inherit}button{min-height:44px;padding:.7rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:var(--card)}button:active{transform:translateY(1px)}button:disabled{opacity:.55;cursor:default}form>button{background:var(--accent);color:var(--button);border-color:transparent}form>button:hover{filter:brightness(.9);background:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
section{margin:2.2rem 0;padding:0 0 2rem;border-bottom:1px solid var(--border);scroll-margin-top:1.5rem}form,.card{display:grid;gap:1rem;max-width:100%;min-width:0;overflow-wrap:anywhere}form{padding:0}.card{display:block;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.card:first-child{border-top:0;padding-top:0}.card>p{margin:.35rem 0}.card form{margin-top:1rem}label{display:grid;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--muted)}input,select,textarea{width:100%;min-width:0;min-height:44px;padding:.8rem;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}textarea{min-height:6rem;resize:vertical}
.grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}.row{display:flex;gap:.65rem;flex-wrap:wrap;align-items:center;margin:.5rem 0}.overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.stat{padding:1rem 0;border-bottom:1px solid var(--border)}.stat span{display:block;font-size:.75rem;color:var(--muted)}.stat strong{display:block;font-size:2rem;letter-spacing:-.06em;margin-top:.4rem}nav{display:flex;gap:.5rem;flex-wrap:wrap}nav a{padding:.65rem .75rem;text-decoration:none;font-size:.8rem;font-weight:600}nav a:hover{text-decoration:underline}
h1{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.055em;line-height:1.15;margin:1.8rem 0 1.3rem}h2{font-size:1.1rem;letter-spacing:-.035em;margin:0 0 1rem}h3{font-size:1rem;letter-spacing:-.02em;margin:1.8rem 0 .85rem}p{font-size:.88rem;line-height:1.65;margin:.6rem 0 1rem;color:var(--muted)}footer{padding:1.5rem 0;font-size:.75rem;color:var(--muted);line-height:1.8}#message:empty{display:none}#message{padding:1rem;border:1px solid var(--border);background:var(--surface);border-radius:16px;color:var(--ink)}[hidden]{display:none!important}
dialog:not([open]){display:none}dialog{width:min(30rem,90vw);padding:1.5rem;border:1px solid var(--border);border-radius:24px;background:var(--surface);color:var(--ink)}dialog::backdrop{background:#15181a99;backdrop-filter:blur(3px)}dialog form{padding:0;border:0;background:none}
@media(max-width:600px){header{align-items:flex-start}.brand{font-size:1.2rem}header .row{justify-content:flex-end;max-width:55%;margin:0}header button{font-size:.7rem;padding:.55rem .7rem}.overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}section{padding:0 0 1.5rem}main{padding-left:1rem;padding-right:1rem}form{padding:0}.card{padding:1.25rem 0 0}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

#content>section:last-child{border-bottom:0;margin-bottom:0}
.firebase-actions{gap:1rem 1.25rem}
.admin-tabs{gap:.25rem 1rem;border-bottom:1px solid var(--border)}.admin-tab{border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;padding:.8rem .25rem;color:var(--muted);font-weight:500}.admin-tab:hover{background:transparent;color:var(--ink)}.admin-tab[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink);font-weight:800}.admin [role="tabpanel"]{border-bottom:0;margin-bottom:0}

/* Visual Cost & Usage Dashboard */
.cost-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:1rem;margin:1.25rem 0}
.cost-kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.15rem 1.25rem;display:flex;flex-direction:column;justify-content:space-between;gap:.55rem;box-shadow:0 1px 2px rgba(21,24,26,.03)}
.cost-kpi-card.is-primary{background:linear-gradient(145deg,#ffffff 0%,#f3f6f6 100%);border-color:#cfd6d6}
.cost-kpi-label{font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cost-kpi-value{font-size:1.75rem;font-weight:800;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.cost-kpi-sub{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:.35rem .65rem;align-items:center}
.cost-panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.25rem;margin:1.15rem 0}
.cost-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem}
.cost-panel-head h3{margin:0;font-size:.95rem;font-weight:800}
.cost-panel-head span{font-size:.76rem;color:var(--muted)}
.cost-bar-svg{display:block;width:100%;height:12px;border-radius:999px;overflow:hidden;background:#eaeded}
.cost-bar-svg.is-tall{height:16px}
.token-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr));gap:.75rem;margin-top:1rem}
.token-legend-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.7rem .85rem;display:grid;gap:.2rem}
.token-legend-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;font-weight:700;color:var(--muted)}
.token-dot-wrap{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink)}
.token-dot{width:10px;height:10px;border-radius:999px;display:inline-block;flex-shrink:0}
.token-dot.c-in{background:#3b82f6}.token-dot.c-cache{background:#10b981}.token-dot.c-out{background:#6366f1}.token-dot.c-think{background:#f59e0b}.token-dot.c-multi{background:#ec4899}
.token-legend-val{font-size:1.05rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.token-legend-rate{font-size:.7rem;color:var(--muted)}

.group-cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1rem;margin:1rem 0 1.5rem}
.group-cost-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem;display:grid;gap:.75rem}
.group-cost-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.group-cost-title{font-weight:800;font-size:.98rem;color:var(--ink);display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.group-cost-price{text-align:right;font-variant-numeric:tabular-nums}
.group-cost-price strong{display:block;font-size:1.1rem;font-weight:800;color:var(--ink)}
.group-cost-price small{font-size:.73rem;color:var(--muted)}
.group-cost-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding-top:.5rem;border-top:1px solid var(--border);font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.group-cost-stats strong{display:block;font-size:.88rem;color:var(--ink);margin-top:.1rem}

.cost-toolbar{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:.75rem;margin:1rem 0 1.25rem;align-items:end}
@media(max-width:820px){.cost-toolbar{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cost-toolbar{grid-template-columns:1fr}}

.cost-account-list{display:grid;gap:1rem}
.cost-account-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.25rem;display:grid;gap:1rem;box-shadow:0 1px 2px rgba(21,24,26,.025)}
.cost-account-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.cost-account-id{display:grid;gap:.35rem;min-width:0}
.cost-account-email{font-size:1.05rem;font-weight:800;color:var(--ink);word-break:break-all}
.cost-badges{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:999px;font-size:.71rem;font-weight:700;background:var(--card);border:1px solid var(--border);color:var(--muted);font-variant-numeric:tabular-nums}
.badge.is-active{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.badge.is-pending{background:#fffbeb;border-color:#fde68a;color:#92400e}
.badge.is-group{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.cost-account-price{text-align:right;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.65rem .95rem;min-width:9.5rem;font-variant-numeric:tabular-nums}
.cost-account-price strong{display:block;font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.cost-account-price span{display:block;font-size:.76rem;color:var(--muted)}
.cost-account-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.85rem 1rem;font-variant-numeric:tabular-nums}
@media(max-width:720px){.cost-account-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cost-account-price{text-align:left;width:100%}}
.cost-metric-box span{display:block;font-size:.71rem;font-weight:600;color:var(--muted)}
.cost-metric-box strong{display:block;font-size:.98rem;font-weight:800;color:var(--ink);margin-top:.15rem}
.cost-metric-box small{display:block;font-size:.7rem;color:var(--muted);margin-top:.1rem}

.cost-task-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
.cost-task-table{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.cost-task-table th,.cost-task-table td{padding:.6rem .8rem;text-align:left;border-bottom:1px solid var(--border)}
.cost-task-table th{background:var(--card);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cost-task-table tr:last-child td{border-bottom:0}
.cost-task-table td.num,.cost-task-table th.num{text-align:right;white-space:nowrap}
.cost-task-name{font-weight:700;color:var(--ink);display:block}
.cost-task-code{font-size:.69rem;color:var(--muted)}
.cost-mini-bar{width:72px;height:7px;display:inline-block;vertical-align:middle;margin-right:.4rem;border-radius:999px;background:#eaeded;overflow:hidden}

.invite-cost-strip{display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center;margin:.55rem 0;padding:.55rem .75rem;background:var(--card);border:1px solid var(--border);border-radius:12px;font-size:.78rem;font-variant-numeric:tabular-nums}
.invite-cost-strip strong{color:var(--ink);font-weight:800}

.site-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.25rem 2rem;margin-top:3rem;padding:1.75rem 0 .75rem;border-top:1px solid var(--border)}
.footer-contact{display:grid;gap:.4rem}.footer-label{font-size:.75rem;color:var(--muted)}.footer-contact>a{font-size:1rem;font-weight:650;color:var(--ink);text-decoration:none}.footer-contact>a:hover{text-decoration:underline}.footer-contact>a span{margin-left:.25rem;color:var(--muted)}
.footer-links{display:flex;gap:.35rem 1.25rem;flex-wrap:wrap}.footer-links a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 0;min-height:44px;font-size:.82rem;font-weight:500;color:var(--muted);background:none;border:0;border-radius:0;text-decoration:none}.footer-links a:hover{color:var(--ink);text-decoration:underline}.footer-note{grid-column:1/-1;margin:0;font-size:.7rem;color:var(--muted)}
@media(max-width:600px){.site-footer{grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.4rem}.footer-links{gap:.25rem 1.25rem}.footer-note{grid-column:auto}.grid{gap:1.5rem}}