/* Shell rules (topbar, login card, buttons, pills) come from shell.css, which
   every page loads first. This file used to repeat them verbatim — so a fix in
   shell.css was silently overridden here by an identical-but-stale copy. Only
   genuine page overrides remain below. */
/* Sohbet — Billing UI (Phase 5). Dependency-free vanilla, brand palette mirrors
   dashboard.css / inbox.css (emerald/ink, warm-expert, Turkish). No external hosts. */
/* Tokens come from shell.css, which every page loads first. This file used to
   repeat the whole :root block verbatim; four copies meant four places to
   change and three chances to drift. */
input,select{font-family:inherit}

/* login (mirrors dashboard.css) */
#login{display:flex;align-items:center;justify-content:center;height:100vh;padding:18px}
input{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);background:var(--surface);outline:none}
input:focus{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-050)}

/* app shell */
#app{display:none;flex-direction:column;min-height:100vh}
/* topbar base now provided by shell.css (shared responsive app nav) */
.topbar .who{font-size:12.5px;color:#AEC2CE}
.navlink{font-size:13px}
.navlink a{color:#AEC2CE;text-decoration:none}
.navlink.on{color:#fff;font-weight:600;border-bottom:2px solid var(--emerald);padding-bottom:2px}
h2.sec{font-family:var(--fd);font-weight:500;font-size:18px;margin:26px 0 12px}

/* current plan header */
.curPlan{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.curPlan .badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.badge.trialing{background:var(--brass-050);color:var(--brass)}
.badge.active{background:var(--emerald-050);color:var(--emerald-700)}
.badge.past_due{background:#FDECEC;color:var(--b-critical)}
.badge.canceled{background:#EEF0F2;color:var(--text-3)}
.curPlan .planName{font-family:var(--fd);font-size:22px;font-weight:500;margin:8px 0 2px}
.curPlan .meta{font-size:12.5px;color:var(--text-2);line-height:1.7}
.curPlan .actions{margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end}

/* usage meter */
.meter{margin-top:6px}
.meter .track{height:12px;background:var(--surface-alt);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.meter .fill{height:100%;background:var(--emerald);border-radius:8px 0 0 8px;transition:width .4s}
.meter .fill.warn{background:var(--brass)}
.meter .fill.over{background:var(--b-critical)}
.meter .lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text-2);margin-top:7px}

/* plan cards */
.cycleToggle{display:inline-flex;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:3px;margin-bottom:16px}
.cycleToggle button{border:none;background:none;padding:7px 16px;font-size:13px;font-weight:500;color:var(--text-2);border-radius:7px;cursor:pointer}
.cycleToggle button.on{background:var(--emerald-050);color:var(--emerald-700);font-weight:600}
.cycleToggle .save{color:var(--brass);font-size:11px;font-weight:600;margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.plan.cur{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-050)}
.plan .pn{font-family:var(--fd);font-size:18px;font-weight:500}
.plan .pd{font-size:12.5px;color:var(--text-2);margin:4px 0 12px;min-height:34px}
.plan .price{font-family:var(--fd);font-size:28px;font-weight:600;color:var(--text)}
.plan .price small{font-size:13px;font-weight:400;color:var(--text-3);font-family:var(--fs)}
.plan .annualNote{font-size:11.5px;color:var(--emerald-700);margin-top:3px;min-height:16px}
.plan ul{list-style:none;padding:0;margin:14px 0;flex:1}
.plan li{font-size:12.5px;color:var(--text-2);padding:5px 0 5px 20px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:700}
.plan .curTag{font-size:11px;font-weight:600;color:var(--emerald-700);text-align:center;padding:9px}

/* coupon */
.couponRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.couponRow input{width:auto;flex:1;min-width:160px}
.couponMsg{font-size:12.5px;margin-top:8px}
.couponMsg.ok{color:var(--emerald-700)}
.couponMsg.bad{color:var(--b-critical)}

/* invoices + members table */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--text-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--text)}
.pill.paid{background:var(--emerald-050);color:var(--emerald-700)}
.pill.failed{background:#FDECEC;color:var(--b-critical)}

/* modal */
.modalBg{display:none;position:fixed;inset:0;background:rgba(8,26,38,.45);align-items:center;justify-content:center;padding:18px;z-index:20}
.modal{background:var(--surface);border-radius:14px;max-width:440px;width:100%;padding:22px}
.modal h3{font-family:var(--fd);font-weight:500;font-size:17px;margin:0 0 8px}
.modal p{font-size:13px;color:var(--text-2);line-height:1.6}

/* ---- fatura bilgileri (invoice identity) ---- */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 16px}
.bgrid .fw{grid-column:1 / -1}
.bgrid .fieldErr{font-size:12px;color:var(--b-critical);margin-top:4px;min-height:14px}
.bgrid input.bad,.bgrid select.bad{border-color:var(--b-critical)}
.bgrid select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--text);background:var(--surface);outline:none}
.bgrid select:focus{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-050)}
.bgrid .chk{display:flex;align-items:center;gap:8px;margin-top:14px}
.bgrid .chk input{width:auto}
.billBadge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.billBadge.ok{background:var(--emerald-050);color:var(--emerald-700)}
.billBadge.miss{background:#FDECEC;color:var(--b-critical)}
@media(max-width:640px){.bgrid{grid-template-columns:1fr}}