/* The "Not enough credits" sheet (resources/views/partials/credit-sheet.blade.php).
   Written against the shared tokens in site.css, which Browse aliases too, with fallbacks so it
   reads the same on a page that has neither. Above every other sheet on the site: it opens from
   inside the editor's export window and Studio's download dialogs. */
.cs-scrim{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(12px,4vw,40px);
  background:var(--scrim-a,rgba(14,15,16,.86));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow-y:auto}
.cs-scrim[hidden]{display:none}
.cs-card{width:min(500px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;display:grid;gap:14px;padding:clamp(16px,3vw,24px);
  border-radius:16px;background:var(--surface,#1D1E20);border:1px solid var(--hair,rgba(255,255,255,.12));
  color:var(--ink,#F2F3F5);font-family:var(--ui,'Instrument Sans',-apple-system,sans-serif);box-shadow:var(--shadow,0 24px 60px rgba(0,0,0,.6))}
.cs-head{display:flex;align-items:center;gap:12px}
.cs-title{font-family:var(--display,Georgia,serif);font-size:clamp(22px,3vw,27px);letter-spacing:-.01em;line-height:1.1}
.cs-x{margin-left:auto;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--hair,rgba(255,255,255,.12));
  background:transparent;color:var(--ink,#F2F3F5);font-size:20px;line-height:1;cursor:pointer}
.cs-body{display:grid;gap:14px}
.cs-p{margin:0;font-size:14px;line-height:1.5;color:var(--muted,rgba(255,255,255,.62))}
.cs-p b,.cs-strong{color:var(--ink,#F2F3F5);font-weight:600}
.cs-action{margin:0;font-size:15px;line-height:1.4;color:var(--ink,#F2F3F5);font-weight:600}
.cs-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.cs-table th{font-weight:500;color:var(--faint,rgba(255,255,255,.56));text-align:right;padding:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.cs-table th:first-child,.cs-table td:first-child{text-align:left}
.cs-table td{padding:7px 0;border-top:1px solid var(--hair,rgba(255,255,255,.12));text-align:right}
.cs-table td.cs-short{color:#E0574F;font-weight:600}
.cs-group{display:grid;gap:8px}
.cs-group-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--faint,rgba(255,255,255,.56))}
.cs-opts{display:grid;gap:6px}
.cs-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;border:1px solid var(--hair,rgba(255,255,255,.12));
  cursor:pointer;font-size:14px;font-variant-numeric:tabular-nums}
.cs-opt:has(input:checked){border-color:var(--accent,#3CCBB1);box-shadow:0 0 0 1px var(--accent,#3CCBB1) inset}
.cs-opt input{accent-color:var(--fill,#21AD96);margin:0;flex:none}
.cs-opt .cs-n{font-weight:600}
.cs-opt .cs-note{color:var(--faint,rgba(255,255,255,.56));font-size:12.5px}
.cs-opt .cs-price{margin-left:auto;font-weight:600}
.cs-opt.cs-under{opacity:.72}
.cs-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hair,rgba(255,255,255,.12));padding-top:12px}
.cs-total b{font-family:var(--display,Georgia,serif);font-size:26px;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cs-agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--muted,rgba(255,255,255,.62))}
.cs-agree input{width:16px;height:16px;flex:none;margin-top:2px}
.cs-agree a,.cs-p a{color:var(--accent,#3CCBB1)}
.cs-btns{display:flex;flex-wrap:wrap;gap:9px}
.cs-btn{flex:1 1 auto;min-height:46px;padding:0 20px;border-radius:13px;border:0;background:var(--fill,#21AD96);color:var(--on-fill,#04231E);
  font:600 15px/1 var(--ui,sans-serif);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.cs-btn[disabled]{opacity:.55;cursor:default}
.cs-btn.cs-ghost{background:transparent;border:1px solid var(--hair-2,rgba(255,255,255,.2));color:var(--ink,#F2F3F5);font-weight:500}
.cs-alt{display:grid;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--hair,rgba(255,255,255,.12))}
.cs-error{margin:0;color:#E0574F;font-size:13.5px;line-height:1.45}
.cs-pay{min-height:40px}
.cs-small{margin:0;font-size:12.5px;line-height:1.45;color:var(--faint,rgba(255,255,255,.56))}
.cs-wait{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted,rgba(255,255,255,.62))}
.cs-wait::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--hair-2,rgba(255,255,255,.2));
  border-top-color:var(--accent,#3CCBB1);animation:cs-spin .8s linear infinite;flex:none}
@keyframes cs-spin{to{transform:rotate(360deg)}}
.cs-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:125;max-width:min(520px,calc(100% - 32px));
  padding:12px 16px;border-radius:12px;background:var(--surface,#1D1E20);color:var(--ink,#F2F3F5);border:1px solid var(--accent,#3CCBB1);
  font:500 14px/1.45 var(--ui,sans-serif);box-shadow:var(--shadow,0 24px 60px rgba(0,0,0,.6))}
.cs-toast[hidden]{display:none}
/* A heads-up a page shows before anybody hits the wall (CreditSheet.headsUp). */
.cs-heads{margin:0;font-size:13px;line-height:1.45;color:var(--muted,rgba(255,255,255,.62))}
.cs-heads button{background:none;border:0;padding:0;font:inherit;color:var(--accent,#3CCBB1);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:480px){
  .cs-scrim{place-items:end center;padding:0}
  .cs-card{border-radius:18px 18px 0 0;max-height:92dvh;width:100%}
  .cs-btn{width:100%}
}
/* A bundle row: what it is and its per-credit price, its total, and how many of it. */
.cs-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px 9px 12px;border-radius:11px;
  border:1px solid var(--hair,rgba(255,255,255,.12));font-variant-numeric:tabular-nums}
.cs-row.cs-on{border-color:var(--accent,#3CCBB1);box-shadow:0 0 0 1px var(--accent,#3CCBB1) inset}
.cs-what{display:grid;gap:1px;min-width:0}
.cs-what .cs-n{font-weight:600;font-size:14px}
.cs-what .cs-note{font-size:12.5px;color:var(--faint,rgba(255,255,255,.56))}
.cs-row .cs-price{font-weight:600;font-size:14px}
.cs-step{display:flex;align-items:center;gap:2px}
.cs-step button{width:30px;height:30px;border-radius:50%;border:1px solid var(--hair-2,rgba(255,255,255,.2));background:transparent;
  color:var(--ink,#F2F3F5);font:500 16px/1 var(--ui,sans-serif);cursor:pointer}
.cs-step button[disabled]{opacity:.4;cursor:default}
.cs-count{min-width:22px;text-align:center;font-weight:600;font-size:14px}
.cs-pro{border-color:var(--accent,#3CCBB1)}
.cs-pro-t{font-size:15.5px}