/* API dla developerów and Rozliczenia. */
.api-split{margin-top:0}
.api-steps .step{padding:12px 0}
.api-steps .step:first-child{border-top:0}
.job-side .note{margin:0}
.api-endpoints{margin-top:16px}
.ep-list{list-style:none;margin:0;padding:0}
.ep{display:grid;grid-template-columns:72px minmax(0,360px) minmax(0,1fr);gap:12px;align-items:center;padding:12px 24px;border-top:1px solid var(--line)}
.ep-m{justify-content:center;font-family:'DM Mono',ui-monospace,monospace}
.ep-m.get{background:var(--okb);border-color:var(--okb);color:var(--okt)}
.ep-m.post{background:var(--accs);border-color:var(--accs);color:var(--acc2)}
.ep-m.put{background:var(--wb);border-color:var(--wb);color:var(--wt)}
.ep-path{font-size:12.5px;overflow-wrap:anywhere;color:var(--ink)}
.ep-desc{font-size:13px}
.api-curl{margin-top:16px}
.api-curl .sub{margin:8px 0 14px;font-size:13px}
.api-curl .code{max-width:100%}
.api-auth-note{margin:0 0 16px}
.api-auth-note code{overflow-wrap:anywhere}
.api-keys{margin:0 0 16px;display:grid;gap:16px}
.api-keys>p,.api-webhooks>p,.api-keys h2,.api-webhooks h2,.api-keys .h3{margin:0}
.api-keys .row.sp-b .sub,.api-webhooks .row.sp-b .sub{margin-top:8px}
.api-webhooks h3+.hint{margin-top:4px}
.api-keys .sub{font-size:13px}
.api-key-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px) auto;gap:16px;align-items:end;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--ground)}
.api-key-form .account-field{margin:0}
.api-key-form fieldset{grid-column:1/-1;grid-row:2;border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.api-key-form legend{font-size:13px;font-weight:800;margin-bottom:8px}
.api-scope{flex:1 1 200px;max-width:280px;display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.api-scope span{display:grid;gap:2px}
.api-scope strong{font-family:'DM Mono',ui-monospace,monospace;font-size:12px}
.api-scope small{font-size:11px;color:var(--mut)}
.api-key-secret{display:grid;gap:10px;padding:18px;border-radius:14px;background:var(--okb);color:var(--okt)}
.api-key-secret code{display:block;padding:12px;border-radius:8px;background:#fff;overflow-wrap:anywhere;user-select:all;color:var(--ink)}
.api-key-list{list-style:none;margin:0;padding:0}
.api-key-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 0;border-top:1px solid var(--line)}
.api-key-row .sub,.webhook-delivery .sub{margin-top:2px}
.api-key-row .hint,.webhook-delivery .hint{margin-top:4px}
.api-key-row .mono{overflow-wrap:anywhere}
.api-webhooks{display:grid;gap:16px;margin:0 0 16px}
.api-webhooks .sub{font-size:13px}
.webhook-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--ground)}
.webhook-form .account-field{flex:1 1 320px;margin:0}
.webhook-form .hint{flex-basis:100%;margin:0}
.webhook-endpoint{padding:18px;border:1px solid var(--line);border-radius:14px;gap:12px}
.webhook-endpoint .hint{margin-top:2px}
.webhook-endpoint .sub{margin-top:6px;font-size:13px}
.webhook-deliveries{list-style:none;margin:8px 0 0;padding:0}
.webhook-delivery{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.webhook-delivery .mono{overflow-wrap:anywhere}

.bill-top{margin-top:0}
.bill-hero{flex:1 1 440px;position:relative;overflow:hidden;padding:32px}
.bill-hero>div:last-child{position:relative}
.bill-hero .flare{width:360px;height:360px;right:-120px;top:-150px;background:radial-gradient(circle,#6C5CFF 0%,rgba(108,92,255,0) 68%)}
.bill-hero .tag{color:#B9BAD3}
.bill-big{font-size:64px;font-weight:800;letter-spacing:-.05em;line-height:1;margin:12px 0 18px}
.bill-hero .bar{background:rgba(255,255,255,.14)}
.bill-sub{margin-top:24px;gap:28px}
.bill-sub b{font-size:20px}
.bill-split{flex:1 1 440px}
.split-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:#E7E7F1;margin-top:22px}
.split-bar i{display:block;height:100%}
.split-bar .l,.sw.l{background:var(--lime)}
.split-bar .r,.sw.r{background:var(--acc)}
.split-bar .s,.sw.s{background:var(--ink)}
.legend{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.legend li{display:flex;align-items:center;gap:10px;font-size:13px}
.legend b{margin-left:auto}
.legend .mut{width:40px;text-align:right}
.sw{width:12px;height:12px;border-radius:4px;flex:none}
.bill-how{flex:999 1 520px}
.bill-how .step{padding:12px 0}
.bill-how .hint{margin-top:12px}
.bill-topup{flex:1 1 300px;display:flex;flex-direction:column;gap:0}
.bill-topup>*{margin:0}
.bill-topup>*+*{margin-top:8px}
.bill-topup>.btn{margin-top:16px}
.bill-topup .sub{font-size:13px}
.bill-topup .btn{align-self:flex-start}
.topup-unavailable[aria-disabled="true"]{cursor:not-allowed;opacity:.6}
.topup-unavailable[aria-disabled="true"]:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.bill-tbl .num{text-align:right}
.bill-tbl td.mut{font-size:13px;white-space:nowrap}
.bill-empty,.missing{margin-top:16px}
#app>section.missing:first-child{margin-top:0}

/* Shared @lksrz/client account controls within the Splatmaker shell. */
.account-shell{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;min-width:0}
.workspace-name{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:var(--mut)}
.account-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:240px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(14,15,31,.16)}
.account-menu-email{overflow-wrap:anywhere;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.account-menu button{display:block;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--ink);font-weight:700}
.account-menu button:hover{background:var(--ground)}
.account-dialog{width:min(440px,calc(100vw - 32px));max-height:min(720px,calc(100dvh - 32px));padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 24px 80px rgba(14,15,31,.28);color:var(--ink)}
.account-dialog[open]{display:flex;flex-direction:column;gap:12px}
.account-dialog::backdrop{background:rgba(14,15,31,.58)}
.account-dialog h2{padding-right:30px;font-size:22px;letter-spacing:-.03em}
.account-dialog h2{margin:0}
.account-dialog .sub{margin:-4px 0 8px}
.account-dialog form{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.account-dialog form .sub{margin:-4px 0 8px}
.account-dialog .hint{margin:0}
.login-sent{display:flex;flex-wrap:wrap;gap:12px}
.login-sent .btn{flex:1 1 160px}
.login-sent h2,.login-sent .sub{flex-basis:100%}
.account-field{display:grid;gap:8px;margin:8px 0;font-size:13px;font-weight:700}
.account-dialog .account-field{margin:4px 0 0}
.account-msg{padding:12px;border-radius:10px;background:var(--accs);color:var(--ink2);font-size:13px}
.account-dialog-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border:0;border-radius:50%;background:var(--ground);color:var(--ink);font-size:24px;line-height:1}
.passkeys-list{list-style:none;margin:4px 0;padding:0;display:grid;gap:8px}
.passkeys-list:empty{display:none}
.passkeys-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.passkeys-list li>:first-child{flex:1 1 140px;min-width:0;overflow-wrap:anywhere}
.passkeys-list .hint{margin:0}
.passkey-meta{display:grid;gap:2px}
.passkey-row-actions{display:flex;gap:8px;margin-left:auto}
.turnstile-slot{min-height:0}
.access-state{max-width:600px;margin:48px auto;padding:40px}
.access-state .h1{margin-top:10px}
.access-state .sub{margin:12px 0 24px;line-height:1.6}
.access-actions{display:flex;flex-wrap:wrap;gap:10px}
.login-demo a{font-weight:600}
.storage-usage,.storage-sources{margin-top:16px}
.storage-total{display:flex;align-items:baseline;gap:8px;margin:16px 0 12px;font-size:16px;color:var(--mut)}
.storage-total strong{font-size:32px;line-height:1;letter-spacing:-.04em;color:var(--ink,inherit)}
.storage-usage>.sub{margin-top:10px}
.storage-sources>.h2+.sub{margin-top:8px}
.storage-list{list-style:none;margin:12px 0 0;padding:0}
.storage-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.storage-item-main{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.storage-item-main .hint{margin-top:2px}
.storage-item-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px}
.storage-item-actions .badge{justify-self:start}
.storage-item-actions .btn{justify-content:center}
.storage-pages{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.storage-pages .btn{min-width:112px;justify-content:center;border-radius:999px}
.storage-pages .btn:disabled{opacity:.45;cursor:not-allowed}
.storage-pages .sub{min-width:72px;text-align:center;font-weight:600}
.storage-empty{margin-top:16px}
.storage-none{padding:24px 16px 8px;min-height:240px}
.missing-actions{justify-content:center;gap:10px}
@media (max-width:640px){
  .storage-item{grid-template-columns:1fr;gap:12px}
  .storage-item-actions{justify-content:flex-start}
  .storage-pages{gap:8px}
  .storage-pages .btn{min-width:0;flex:1}
}

@media (max-width:900px){
  .api-key-form{grid-template-columns:1fr}
  .api-key-form fieldset{grid-row:auto}
  .top{flex-wrap:wrap;height:auto;min-height:56px;padding:8px 0}
  .top .crumb{display:none}
  .account-shell{flex:1 1 0}
  .workspace-name{max-width:none;min-width:0}
  .account-shell .btn{height:36px;padding:0 12px;font-size:12px}
  .access-state{margin:28px auto;padding:28px 20px}
  .ep{grid-template-columns:64px minmax(0,1fr);padding:12px 18px}
  .api-key-row>.grow{flex-basis:100%}
  .api-key-row>.badge{margin-right:auto}
  .webhook-delivery>.grow{flex-basis:100%}
  .ep-desc{grid-column:1/-1}
  .bill-hero{padding:24px}
  .bill-big{font-size:48px}
  .bill-tbl thead{display:none}
  .bill-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 16px;border-top:1px solid var(--line)}
  .bill-tbl td{padding:0;border:0}
  .bill-tbl td:nth-child(2){grid-column:1}
  .bill-tbl td:nth-child(3){grid-column:1}
  .bill-tbl td.num{grid-column:2;grid-row:1}
  .bill-topup .btn{align-self:stretch}
}