/* Graphican account page: plan, Graphican AI minutes, what you have, checkout, payments, settings */
:root { --bg:#0b0b0f; --c1:#141419; --c2:#1c1c22; --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.16); --text:#f4f4f6; --mut:#a3a3ad; --dim:#6e6e78; --acc:#7b64ff; --acc2:#a497ff; --ok:#86efac; --warn:#facc15; --bad:#fca5a5; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:400 15px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; color:inherit; }
.ac-h { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; height:58px; padding:0 max(16px, env(safe-area-inset-left)); background:rgba(11,11,15,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.ac-logo { font:700 20px/1 'Inter Tight', Inter, sans-serif; letter-spacing:-.01em; text-decoration:none; }
.ac-h nav { display:flex; gap:4px; } .ac-h nav a { padding:9px 12px; border-radius:9px; font-size:13.5px; color:var(--mut); text-decoration:none; } .ac-h nav a:hover { color:#fff; background:rgba(255,255,255,.05); }
@media (max-width:420px) { .ac-h nav a:last-child { display:none; } }
.ac { max-width:760px; margin:0 auto; padding:20px 16px 64px; display:flex; flex-direction:column; gap:14px; }
.ac-load { color:var(--mut); text-align:center; padding:60px 0; }
.card { background:var(--c1); border:1px solid var(--line); border-radius:14px; padding:20px; }
.card h2 { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.hello { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; }
.hello h1 { margin:0; font:700 24px/1.2 'Inter Tight', Inter, sans-serif; letter-spacing:-.01em; }
.plan-line { margin:8px 0 0; color:var(--mut); }
.plan-line b { color:var(--text); }
.badge { display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; font-size:11.5px; font-weight:800; letter-spacing:.08em; background:var(--c2); border:1px solid var(--line2); color:var(--mut); vertical-align:3px; margin-left:8px; }
.badge.pro { background:var(--acc); border-color:var(--acc); color:#fff; }
.note { margin:14px 0 0; padding:11px 13px; border-radius:10px; font-size:13.5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.note.warn { background:rgba(250,204,21,.08); border:1px solid rgba(250,204,21,.3); color:#fde68a; }
.note.bad { background:rgba(255,59,92,.08); border:1px solid rgba(255,59,92,.3); color:var(--bad); }
.btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; border:1px solid var(--line2); background:var(--c2); font-size:13.5px; font-weight:700; letter-spacing:.03em; text-decoration:none; cursor:pointer; }
.btn:hover { border-color:rgba(164,151,255,.6); }
.btn.pri { background:var(--acc); border-color:var(--acc); color:#fff; } .btn.pri:hover { background:#6b52ff; }
.btn.sm { min-height:36px; padding:0 12px; font-size:12.5px; }
.btn.link { border:0; background:none; color:var(--acc2); padding:0 4px; }
.btn.danger { color:var(--bad); }
.btn:disabled { opacity:.55; cursor:default; }
/* Graphican AI minutes */
.usage .big { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.usage .big b { font:700 34px/1 'Inter Tight', Inter, sans-serif; letter-spacing:-.02em; }
.usage .big span { color:var(--mut); }
.bar { height:10px; border-radius:6px; background:var(--c2); overflow:hidden; margin:14px 0 8px; }
.bar i { display:block; height:100%; width:0; border-radius:6px; background:var(--acc); transition:width .9s cubic-bezier(.22,1,.36,1); }
.usage small { color:var(--dim); font-size:12.5px; }
/* entitlements */
.ents { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ents li { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.ents li:last-child { border-bottom:0; }
.ents i { flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; background:rgba(134,239,172,.14); color:var(--ok); }
.ents li.off { color:var(--dim); } .ents li.off i { background:var(--c2); color:var(--dim); }
.ents small { margin-left:auto; color:var(--dim); font-size:12px; }
/* subscription facts */
.facts { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin:0; }
.facts div { display:flex; flex-direction:column; gap:2px; } .facts dt { font-size:12px; color:var(--dim); } .facts dd { margin:0; font-weight:600; }
.facts .on { color:var(--ok); } .facts .off { color:var(--mut); }
/* plans */
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
@media (max-width:700px) { .plans { grid-template-columns:1fr; } .plans .best { order:-1; } }
.plan { position:relative; display:flex; flex-direction:column; gap:6px; padding:18px 16px 16px; border-radius:12px; border:1px solid var(--line2); background:var(--c2); }
.plan.best { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); }
.plan .tag { position:absolute; top:-10px; left:14px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--acc); color:#fff; }
.plan h3 { margin:0; font-size:12.5px; font-weight:800; letter-spacing:.12em; color:var(--acc2); }
.plan .price { font:700 28px/1 'Inter Tight', Inter, sans-serif; letter-spacing:-.02em; } .plan .per { color:var(--mut); font-size:13px; }
.plan .ai { font-weight:600; margin-top:6px; }
.plan ul { list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:5px; font-size:13px; color:var(--mut); flex:1; }
.plan li:before { content:"✓"; color:var(--acc2); font-weight:800; margin-right:7px; }
.plan .unit { font-size:11.5px; color:var(--dim); }
/* checkout */
.co-sum { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.co-sum h3 { margin:0; font-size:13px; letter-spacing:.12em; color:var(--acc2); }
.co-sum .price { font:700 30px/1.1 'Inter Tight', Inter, sans-serif; } .co-sum ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; font-size:13.5px; color:var(--mut); } .co-sum li:before { content:"✓"; color:var(--acc2); font-weight:800; margin-right:7px; }
.co-total { display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; font-size:14px; color:var(--mut); } .co-total b { font-size:20px; color:var(--text); }
.rows { display:grid; gap:6px; }
.row { display:flex; align-items:center; gap:10px; min-height:46px; padding:8px 12px; border-radius:10px; background:var(--c2); border:1px solid transparent; text-align:left; width:100%; }
.row span { flex:0 0 120px; font-size:12.5px; color:var(--mut); } .row b { flex:1; min-width:0; overflow-wrap:anywhere; } .row em { font-style:normal; font-size:12px; color:var(--acc2); font-weight:700; }
button.row { cursor:pointer; } button.row:hover { border-color:var(--line2); } button.row.ok em { color:var(--ok); }
.row.code { background:rgba(250,204,21,.08); border-color:rgba(250,204,21,.35); } .row.code b { font:700 20px/1 ui-monospace, Menlo, monospace; letter-spacing:.08em; color:#fde68a; }
.wait { display:flex; align-items:center; gap:10px; margin:16px 0 0; font-weight:700; letter-spacing:.04em; }
.wait i { width:10px; height:10px; border-radius:50%; background:var(--warn); animation:pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity:.3; } }
.co-hint { color:var(--mut); font-size:13.5px; margin:6px 0 0; }
.qr { display:block; width:220px; height:220px; margin:14px auto; border-radius:12px; background:#fff; padding:8px; image-rendering:pixelated; }
/* success */
.done { text-align:center; padding:12px 0 4px; }
.done .tick { width:64px; height:64px; margin:0 auto 12px; border-radius:50%; background:var(--acc); display:grid; place-items:center; animation:pop .45s cubic-bezier(.22,1.4,.36,1) both; }
.done .tick svg { width:30px; height:30px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30; animation:draw .4s .25s ease-out forwards; }
@keyframes pop { from { transform:scale(.4); opacity:0; } } @keyframes draw { to { stroke-dashoffset:0; } }
.done h3 { margin:0 0 6px; font:700 22px/1.2 'Inter Tight', Inter, sans-serif; letter-spacing:.02em; } .done p { margin:0; color:var(--mut); }
.done .btns { justify-content:center; }
.fail h3 { color:var(--bad); }
/* history */
.hist { display:grid; }
.hrow { display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px; }
.hrow:last-child { border-bottom:0; }
.hrow .d { color:var(--mut); font-size:13px; } .hrow .a { font-weight:700; text-align:right; }
.hrow .s { grid-column:2 / 4; justify-self:end; font-size:12px; font-weight:700; } .s.paid { color:var(--ok); } .s.pending { color:var(--warn); } .s.rejected, .s.expired, .s.cancelled { color:var(--dim); }
.hrow .acts { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.empty { color:var(--dim); font-size:13.5px; margin:0; }
/* settings */
.set { display:grid; gap:0; }
.set > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:12px 0; border-bottom:1px solid var(--line); }
.set > div:last-child { border-bottom:0; }
.set dt { font-size:12.5px; color:var(--dim); } .set dd { margin:2px 0 0; font-weight:600; overflow-wrap:anywhere; }
.inl { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.inl input { flex:1; min-width:160px; height:44px; padding:0 12px; border-radius:10px; border:1px solid var(--line2); background:var(--c2); color:#fff; font:inherit; }
.inl input:focus { outline:none; border-color:var(--acc); }
.msg { width:100%; font-size:13px; } .msg.bad { color:var(--bad); } .msg.ok { color:var(--ok); }
.free-note { color:var(--dim); font-size:13px; text-align:center; margin:4px 0 0; }
@media (prefers-reduced-motion:reduce) { .bar i, .done .tick, .done .tick svg { transition:none; animation:none; stroke-dashoffset:0; } }
/* Account UX follows the current homepage identity. API state and payment controls stay in account.js. */
@font-face { font-family:iBrand; font-display:swap; src:url(/assets/fonts/ibrand.otf) format('opentype'); }
:root { --bg:#0a0a10; --c1:#0f0f16; --c2:#16161f; --line:rgba(255,255,255,.09); --text:#f5f4fa; --mut:#a6a8b8; --dim:#a6a8b8; }
html { scroll-padding-top:144px; }
body { font-size:16px; line-height:1.6; }
.ac-h { height:76px; padding:0 clamp(18px,4vw,48px); background:rgba(10,10,16,.94); }
.ac-logo { font:400 26px/1 iBrand,'Inter Tight',sans-serif; letter-spacing:.01em; }
.ac-h nav a { font-size:14px; border-radius:12px; }
.ac-nav { max-width:1240px; margin:auto; padding:12px clamp(18px,4vw,48px); display:flex; gap:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ac-nav a { color:var(--mut); text-decoration:none; padding:8px 12px; border-radius:12px; font-size:14px; }
.ac-nav a:hover { color:var(--text); background:rgba(123,100,255,.12); }
.ac { max-width:1240px; padding:36px clamp(18px,4vw,48px) 64px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; }
.ac > * { min-width:0; }
.card { border-radius:16px; padding:26px; }
.card h2 { font:700 24px/1.2 'Inter Tight',Inter,sans-serif; letter-spacing:-.01em; text-transform:none; color:var(--text); margin-bottom:20px; }
.ac-overview, .ac-subscription, #plans, #pay, #settings, .ac-load, .ac > .free-note { grid-column:1 / -1; }
.ac-overview { background:transparent; border:0; padding:10px 0 12px; }
.ac-overview h1 { font-size:clamp(30px,4vw,48px); letter-spacing:-.025em; overflow-wrap:anywhere; }
.ac-kicker { font-size:12px; letter-spacing:.12em; color:var(--acc2); font-weight:600; margin:0 0 14px; }
.badge { border-radius:999px; font-size:12px; font-weight:600; height:28px; letter-spacing:.04em; vertical-align:middle; }
.badge.pro { background:rgba(123,100,255,.18); border-color:rgba(164,151,255,.35); color:#c9c0ff; }
.btn { min-height:46px; padding:10px 22px; border-radius:999px; background:transparent; font-size:14px; letter-spacing:0; font-weight:600; }
.btn.sm { font-size:14px; min-height:40px; }
.btn.pri { border-color:rgba(185,173,255,.62); background:radial-gradient(120% 190% at 50% 50%,rgba(16,13,34,.97) 34%,rgba(58,42,160,.72) 76%,rgba(123,100,255,.78) 100%); box-shadow:inset 0 0 16px rgba(123,100,255,.6),inset 0 -10px 22px -10px rgba(123,100,255,.55),0 0 30px -10px rgba(109,86,250,.95); }
.btn.pri:hover { background:radial-gradient(120% 190% at 50% 50%,rgba(22,18,48,.97) 26%,rgba(70,52,180,.8) 70%,rgba(143,123,255,.9) 100%); border-color:#a497ff; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--acc2); outline-offset:4px; }
.usage .big b { font-size:48px; }
.usage small,.facts dt,.set dt,.co-hint,.empty,.free-note { font-size:14px; }
.bar { height:8px; border-radius:999px; background:#1e1e2a; margin-top:24px; }
.bar i { border-radius:999px; background:linear-gradient(100deg,#6d56fa,#a497ff); }
.ents li { font-size:14px; gap:12px; padding:12px 0; }
.ents i { background:transparent; color:var(--acc2); font-size:16px; }
.ents small { font-size:12px; }
.facts { grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.plans { gap:20px; padding-top:12px; }
.plan { border-radius:16px; padding:26px 22px 22px; gap:10px; background:rgba(255,255,255,.025); }
.plan.best { border-color:rgba(164,151,255,.7); background:linear-gradient(165deg,rgba(109,86,250,.26),rgba(109,86,250,.04) 60%); box-shadow:0 0 70px -30px rgba(109,86,250,.9); }
.plan h3 { font:700 15px/1.2 'Inter Tight',Inter,sans-serif; letter-spacing:.06em; }
.plan .price { font-size:42px; margin-top:6px; }
.plan .tag { border-radius:999px; background:#34229e; border:1px solid rgba(164,151,255,.5); padding:4px 10px; top:-14px; }
.plan .per,.plan ul,.plan .unit { font-size:14px; }
.plan ul { gap:8px; margin:10px 0; }
.row,.inl input,.note { border-radius:12px; }
.row span { font-size:14px; }
.co-sum .price { font-size:40px; }
.co-sum h3 { font:700 15px/1.2 'Inter Tight',Inter,sans-serif; }
.co-sum ul { font-size:14px; }
.co-hint { line-height:1.7; }
.wait { font-size:14px; color:var(--acc2); }
.hrow { padding:18px 0; }
.hrow .d,.hrow .s { font-size:14px; }
.set dt { color:var(--mut); }
.set > div { padding:18px 0; }
.ac-signed-out { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:32px 64px; padding-top:54px; }
.ac-welcome h1 { font:700 clamp(32px,5vw,64px)/1.08 'Inter Tight',Inter,sans-serif; letter-spacing:-.025em; text-transform:uppercase; margin:0; overflow-wrap:anywhere; }
.ac-welcome > p:not(.ac-kicker) { max-width:420px; color:var(--mut); margin-top:24px; }
.ac-welcome ul { list-style:none; padding:0; margin:32px 0 0; display:grid; gap:16px; color:#c9c7d6; font-size:14px; }
.ac-welcome li:before { content:'✓'; color:var(--acc2); margin-right:12px; }
#signin { padding:32px; }
.ac-signed-out ~ * { margin:0; }
@media(max-width:800px) { .ac,.ac-signed-out { grid-template-columns:minmax(0,1fr); gap:20px; padding-top:30px; } .ac-welcome ul { display:none; } .ac-welcome > p:not(.ac-kicker) { margin-top:16px; } .ac-h { height:68px; } .ac-logo { font-size:22px; } .ac-nav { gap:0; } .ac-nav a { padding:8px; } .card,#signin { padding:22px; } .facts { grid-template-columns:1fr 1fr; } .plans { grid-template-columns:minmax(0,1fr); } .plans .best { order:0; margin-top:12px; } .row { flex-wrap:wrap; } .row span { flex-basis:100%; } .row.code b { font-size:18px; } .hrow { grid-template-columns:1fr auto; } .hrow .d { grid-column:1/-1; } .hrow .s { grid-column:1/-1; } }
body:has(.ac-signed-out) .ac-nav { display:none; }
@media(prefers-reduced-motion:reduce) { .wait i,.done .tick,.done .tick svg { animation:none; } .done .tick svg { stroke-dashoffset:0; } html { scroll-behavior:auto; } }

/* Approved UI preview: presentation only; account data and actions stay in account.js. */
.ac { gap:20px; }
.ac-overview h1 { font-size:clamp(28px,3.5vw,40px); line-height:1.12; }
.ac-overview .btns { gap:10px; }
.ac-signed-out { gap:36px 48px; background:radial-gradient(ellipse at 12% 55%,rgba(109,86,250,.1),transparent 56%); }
.ac-welcome h1 { font-size:clamp(32px,4.5vw,48px); line-height:1.03; letter-spacing:-.025em; }
.ac-welcome > p:not(.ac-kicker) { font-size:14px; line-height:1.8; }
#signin { padding:28px; }
.usage { background:radial-gradient(ellipse at 100% 0,rgba(109,86,250,.12),transparent 60%),var(--c1); }
.usage .big { gap:10px; }
.usage .big b { font-size:46px; letter-spacing:-.03em; }
.usage h2,.ac-entitlements h2 { font-size:20px; margin-bottom:22px; }
.badge.pro { background:#28203f; color:var(--acc2); border-color:rgba(123,100,255,.28); }
.btn.pri { box-shadow:inset 0 0 16px rgba(123,100,255,.45),0 0 26px -12px rgba(109,86,250,.95); }
.btn.sm { font-size:13px; }
.bar { height:6px; margin:22px 0 12px; }
.usage small { display:block; line-height:1.75; }
.ents { gap:0; }
.ents li { line-height:1.6; align-items:flex-start; }
.ents i { margin-top:2px; }
.ents small { flex-shrink:0; }
.facts dd { overflow-wrap:anywhere; }
.plans { grid-template-columns:minmax(0,1fr); gap:18px; }
.plan { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; padding:24px; background:var(--c1); }
.plan.best { background:linear-gradient(115deg,rgba(109,86,250,.14),var(--c1)); box-shadow:none; border-color:var(--acc); }
.plan h3 { grid-column:1; grid-row:1; align-self:center; font-size:15px; }
.plan .ai { grid-column:1; grid-row:2; margin:0; font-size:14px; color:var(--mut); }
.plan .price { grid-column:2; grid-row:1 / 3; align-self:center; margin:0; font-size:32px; text-align:right; }
.plan .per { grid-column:2; grid-row:3; text-align:right; font-size:12px; }
.plan ul { grid-column:1; grid-row:3; margin:5px 0 0; font-size:13px; line-height:1.6; }
.plan .btn { grid-column:2; grid-row:4; align-self:end; }
.plan .unit { grid-column:1; grid-row:4; align-self:end; font-size:12px; }
.plan .tag { font-size:11px; padding:4px 10px; top:-12px; }
.co-sum .price { font-size:32px; }
.co-total b { font:700 28px/1.2 'Inter Tight',Inter,sans-serif; }
.row { min-height:48px; padding:12px 14px; gap:12px; border:1px solid var(--line); }
.row span { flex-basis:110px; font-size:13px; }
.row b { font-size:14px; }
.row.code b { font-size:20px; }
.row em { font-size:12px; }
.wait { letter-spacing:.03em; line-height:1.6; }
.inl input { min-width:0; height:48px; padding:0 14px; }
.inl input:focus-visible { outline:2px solid var(--acc2); outline-offset:3px; }
.hrow { gap:8px 16px; }
.set > div { gap:12px; }
.set dd { margin-top:5px; }

@media(min-width:1001px) {
  body:has(.ac:not(.ac-signed-out)) { display:grid; grid-template-columns:220px minmax(0,1020px); justify-content:center; }
  body:has(.ac:not(.ac-signed-out)) .ac-h { grid-column:1 / -1; }
  body:has(.ac:not(.ac-signed-out)) .ac-nav { grid-column:1; grid-row:2; position:sticky; top:104px; align-self:start; flex-direction:column; gap:8px; margin:36px 0; padding:0 12px 0 24px; border:0; }
  body:has(.ac:not(.ac-signed-out)) .ac-nav a { padding:13px 14px; font-size:13px; border-radius:12px; }
  body:has(.ac:not(.ac-signed-out)) .ac { grid-column:2; grid-row:2; margin:0; width:100%; padding-left:24px; }
  body:has(#overview:target) .ac-nav a[href="#overview"],
  body:has(#plans:target) .ac-nav a[href="#plans"],
  body:has(#pay:target) .ac-nav a[href="#pay"],
  body:has(#settings:target) .ac-nav a[href="#settings"],
  body:not(:has(:target)) .ac-nav a[href="#overview"] { background:rgba(123,100,255,.12); color:var(--acc2); }
}
@media(min-width:701px) {
  #co > .card:has(> .co-sum) { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr); gap:0 24px; padding:0; background:transparent; border:0; }
  #co > .card > .co-sum { grid-column:2; grid-row:1 / 4; display:block; padding:22px 22px 12px; background:var(--c2); border:1px solid var(--line); border-bottom:0; border-radius:16px 16px 0 0; }
  #co > .card > .co-sum .price { margin:12px 0 8px; }
  #co > .card > .co-sum ul { margin-top:18px; gap:10px; line-height:1.6; }
  #co > .card > .co-total { grid-column:2; grid-row:4; align-self:start; padding:16px 22px 22px; background:var(--c2); border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; }
  #co > .card > .rows,#co > .card > .qr { grid-column:1; grid-row:1 / 3; }
  #co > .card > .wait { grid-column:1; grid-row:3; margin-top:18px; }
  #co > .card > .co-hint { grid-column:1; grid-row:4; margin:12px 0 0; }
  #co > .card > .btns { grid-column:1; grid-row:5; gap:12px; }
}
@media(max-width:1000px) {
  .ac-nav { gap:5px; padding-top:14px; padding-bottom:14px; }
  .ac-nav a { background:var(--c1); border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:13px; }
  .ac { padding-top:26px; }
}
@media(max-width:600px) {
  .ac,.ac-signed-out { grid-template-columns:minmax(0,1fr); padding:24px 18px 48px; gap:18px; }
  .card,#signin { padding:22px 18px; }
  .ac-welcome h1 { font-size:32px; letter-spacing:-.025em; }
  .ac-welcome > p:not(.ac-kicker) { margin-top:16px; }
  .ac-overview h1 { font-size:28px; }
  .ac-nav { padding-left:18px; padding-right:18px; }
  .ac-nav a { flex:1 1 calc(50% - 5px); text-align:center; }
  .usage .big b { font-size:40px; }
  .plan { padding:22px 16px; gap:8px 12px; }
  .plan .price { grid-row:1; font-size:28px; }
  .plan .per { grid-row:2; font-size:11px; }
  .plan .ai { font-size:12px; }
  .plan ul { grid-column:1 / -1; }
  .plan .unit { grid-column:1 / -1; grid-row:4; }
  .plan .btn { grid-column:1 / -1; grid-row:5; margin-top:7px; }
  .row { gap:5px 10px; }
  .row span { flex-basis:100%; }
  .row em { margin-left:auto; }
  .inl { flex-direction:column; }
  .inl input { flex:auto; width:100%; font-size:16px; }
  .hrow { font-size:13px; }
  .facts { gap:18px 12px; }
  .ents small { font-size:11px; }
  .btns .btn { flex:1 1 auto; }
}
@media(pointer:coarse) { .btn.sm,.ac-nav a { min-height:44px; } }


/* QPay: one button per bank app (phones cannot scan their own screen) */
.qp-apps{margin:4px 0 14px}.qp-apps>b{display:block;font-size:13px;margin-bottom:8px}
.qp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.qp-app{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:12px;text-decoration:none;color:inherit;font-size:12px;text-align:center;min-height:44px}
.qp-app img{width:36px;height:36px;border-radius:9px;object-fit:cover}
.qp-short{display:inline-block;margin-top:10px;font-weight:600;font-size:13px}