/* =====================================================================
   Browns Digital Studio — page-specific presentation layer
===================================================================== */

/* ---------- Dashboard (notes + checklist — stat/activity/status in studio.css) ---------- */
.dash-notes-card,.dash-checklist-card{border-radius:18px;margin-top:0}
.dash-notes-head,.dash-checklist-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 20px;border-bottom:1px solid var(--color-separator);
}
.dash-notes-head h2,.dash-checklist-head h2{font-size:15px;font-weight:600;margin:0}
.dash-notes-body{padding:12px 20px 16px}
.dash-notes-body textarea{
  width:100%;min-height:100px;border-radius:10px;border:1px solid var(--color-border-field);
  background:var(--color-bg-elevated);padding:10px 12px;font-size:14px;line-height:1.45;
  color:var(--color-label-primary);resize:vertical;
}
.dash-notes-preview{font-size:14px;line-height:1.5;color:var(--color-label-primary)}
.dash-notes-preview p{margin:0 0 8px}
.dash-notes-count{font-size:11px;color:var(--color-label-tertiary);text-align:right;padding:0 20px 12px}
.dash-checklist-progress{height:4px;background:var(--color-fill-secondary);border-radius:999px;margin:0 20px 12px;overflow:hidden}
.dash-checklist-progress i{display:block;height:100%;background:var(--color-tint);border-radius:999px;transition:width var(--motion-page-dur) var(--motion-spring)}
.dash-checklist-items{padding:4px 12px 16px}
.dash-check-item{
  display:flex;align-items:center;gap:10px;min-height:36px;padding:0 8px;font-size:14px;
  color:var(--color-label-primary);
}
.dash-check-item.done{color:var(--color-label-secondary);text-decoration:line-through;text-decoration-color:var(--color-label-tertiary)}
.dash-check-item svg.lucide{width:16px;height:16px;color:var(--color-success);flex:0 0 auto}
.dash-checklist-done-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success);
  font-size:12px;font-weight:600;margin:12px 20px;
}

@media (prefers-reduced-motion:reduce){
  .dash-stat{animation:none;opacity:1;transform:none}
}

/* ---------- All sites grid ---------- */
.projects-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;
}
.project-card{
  background:var(--color-bg-elevated);border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid var(--color-separator);transition:transform var(--motion-page-dur) var(--motion-spring),box-shadow var(--motion-page-dur) var(--motion-spring);
}
.project-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px color-mix(in srgb,var(--color-label-primary) 14%,transparent)}
.project-card .pc-thumb{height:140px;position:relative}
.project-card .pc-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 60%,var(--color-bg-elevated));pointer-events:none;
}
.project-card .pc-hover-actions{
  position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:10px;background:color-mix(in srgb,var(--color-label-primary) 55%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity var(--motion-hover);z-index:2;
}
.project-card:hover .pc-hover-actions{opacity:1}
.project-card .pc-hover-actions button{
  min-height:36px;padding:0 12px;border-radius:8px;border:none;
  background:color-mix(in srgb,var(--color-bg-elevated) 20%,transparent);color:#fff;
  font-size:13px;font-weight:500;cursor:pointer;
}
.project-card .pc-hover-actions button:hover{background:color-mix(in srgb,var(--color-bg-elevated) 35%,transparent)}
.project-card .pc-body{padding:12px 16px}
.project-card .pc-name{font-size:15px;font-weight:600}
.project-card .pc-meta{font-size:12px;color:var(--color-label-secondary);margin-top:2px}
.project-card.new{
  border:2px dashed var(--color-separator);min-height:220px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:transparent;box-shadow:none;
}
.project-card.new:hover{border-color:var(--color-tint);transform:none;box-shadow:none}
.project-card.new:hover .plus,.project-card.new:hover>span:not(.note){color:var(--color-tint)}
.project-card.new .plus svg.lucide{display:block}

/* ---------- Site builder hub ---------- */
.sb-hero.mesh{border-color:var(--color-separator)}
.sb-hero .btn svg.lucide{display:block}

@media (prefers-reduced-motion:reduce){
  .project-card:hover{transform:none}
}

/* ---------- Site builder ---------- */
.builder .lp-tabs{
  background:var(--color-fill-tertiary);border-radius:9px;padding:2px;height:32px;
  display:flex;gap:2px;margin-bottom:10px;
}
.builder .lp-tabs button{
  flex:1;min-height:28px;border-radius:7px;font-size:12px;font-weight:500;
  color:var(--color-label-secondary);border:none;background:transparent;
}
.builder .lp-tabs button.on{
  background:var(--color-bg-elevated);color:var(--color-label-primary);font-weight:600;
  box-shadow:0 1px 3px color-mix(in srgb,var(--color-label-primary) 12%,transparent);
}
.builder #lib-search,.builder .pp-search{
  min-height:32px;border-radius:8px;padding-left:32px;
  background:var(--color-fill-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23888' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 10px center no-repeat;
}
.builder .layer,.builder .pg-row{min-height:40px;border-radius:8px}
.builder .layer:hover,.builder .pg-row:hover{background:var(--color-fill-primary)}
.builder .layer .add-btn{opacity:0;transition:opacity 120ms var(--motion-hover)}
.builder .layer:hover .add-btn{opacity:1}
.builder .shared-tag{
  background:var(--color-fill-tertiary);border-radius:6px;padding:3px 8px;
  font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
}
.builder .panel-right{background:var(--color-bg-secondary);border-left:1px solid var(--color-separator)}
.builder .insp-group .field input,.builder .insp-group .field select,.builder .insp-group .field textarea{
  background:var(--color-fill-primary);border-radius:10px;min-height:40px;padding:0 12px;font-size:14px;
  border:none;box-shadow:inset 0 0 0 1px var(--color-separator),inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  transition:box-shadow var(--motion-micro),background var(--motion-micro);
}
.builder .insp-group .field input:hover,.builder .insp-group .field select:hover,.builder .insp-group .field textarea:hover{background:var(--color-fill-secondary)}
.builder .insp-group .field input:focus,.builder .insp-group .field select:focus,.builder .insp-group .field textarea:focus{
  outline:none;background:var(--color-bg-elevated);
  box-shadow:inset 0 0 0 2px var(--color-tint),0 0 0 3px color-mix(in srgb,var(--color-tint) 14%,transparent);
}
.builder .insp-group .field textarea{min-height:72px;padding:10px 12px;line-height:1.45;resize:vertical}
.builder .insp-group .field .seg,
.builder .insp-group .field .seg-multi{
  width:100%;
}
.builder .insp-group .field .seg-multi button{
  font-size:11.5px;padding:8px 4px;
}
.canvas-wrap{position:relative}

/* ---------- Publishing ---------- */
.pub-workflow-card,.pub-section-card{border-radius:16px;overflow:hidden}
.pub-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.pub-step-card{
  background:var(--color-fill-quaternary);border-radius:12px;padding:16px;position:relative;
}
.pub-step-ico{color:var(--color-tint);margin-bottom:8px}
.pub-step-ico svg.lucide{width:20px;height:20px}
.pub-step-num{
  position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  background:var(--color-fill-secondary);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--color-label-secondary);
}
.pub-step-card strong{display:block;font-size:14px;margin-bottom:4px}
.pub-step-card p{font-size:12px;color:var(--color-label-secondary);margin:0;line-height:1.4}
.pub-deploy-meta{font-size:13px;color:var(--color-label-secondary);margin:8px 0 0}
.pub-copy-row{
  display:flex;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;
  background:var(--color-fill-tertiary);border-radius:10px;
}
.pub-copy-row code{flex:1;font-family:var(--font-mono);font-size:13px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.pub-steps-grid{grid-template-columns:1fr}}

/* ---------- Health ---------- */
.health-hero{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;padding:4px 0}
.health-ring-lg{flex:0 0 auto;text-align:center}
.health-ring-lg svg.health-ring-anim .health-ring-arc{
  animation:health-ring-draw 800ms ease-out both;
}
@keyframes health-ring-draw{from{stroke-dashoffset:var(--ring-circ)}to{stroke-dashoffset:var(--ring-off)}}
.health-ring-label{font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-label-tertiary);margin-top:6px}
.health-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.health-chip{
  border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;
}
.health-chip.crit{background:color-mix(in srgb,var(--color-destructive) 12%,transparent);color:var(--color-destructive)}
.health-chip.warn{background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:var(--color-warning)}
.health-chip.neu{background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.health-find-filter{margin:0 0 16px;padding:0 4px}
.health-find-filter .tabs{margin-bottom:0;width:100%}
.health-row{
  min-height:56px;padding:0 20px;display:flex;align-items:center;gap:12px;
}
.health-row+.health-row{border-top:1px solid var(--color-separator)}
.health-row-ico{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.health-row-ico.crit{background:color-mix(in srgb,var(--color-destructive) 12%,transparent);color:var(--color-destructive)}
.health-row-ico.warn{background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:var(--color-warning)}
.health-page-badge{
  background:var(--color-fill-secondary);border-radius:5px;padding:2px 7px;
  font:500 11px var(--font-mono);color:var(--color-label-secondary);
}
.health-sev-badge{border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:0.04em}
.health-sev-badge.crit{background:color-mix(in srgb,var(--color-destructive) 12%,transparent);color:var(--color-destructive)}
.health-sev-badge.warn{background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:var(--color-warning)}
.health-row-action{margin-left:auto;font-size:13px;font-weight:500;color:var(--color-tint);background:none;border:none;cursor:pointer;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.health-ring-lg svg.health-ring-anim .health-ring-arc{animation:none}}

/* ---------- Account shortcuts ---------- */
.acct-shortcuts{margin-top:16px}
.acct-kb-table{width:100%}
.acct-kb-table td:last-child{text-align:right;white-space:nowrap}
.acct-kb-val kbd{
  font-size:11px;padding:3px 7px;border-radius:6px;margin-right:4px;
  background:var(--color-fill-tertiary);border:1px solid var(--color-separator);
}
.acct-kb-capture{
  min-width:200px;border:2px solid var(--color-tint);border-radius:8px;padding:6px 10px;
  background:var(--color-bg-elevated);font-size:13px;
}
.acct-kb-warn td{color:var(--color-destructive);font-size:12px;padding:4px 0}
.acct-kb-foot{justify-content:flex-start;gap:12px;margin-top:12px;flex-wrap:wrap}
.quick-publish-modal{max-width:420px;border-radius:20px}

/* ---------- Publishing (extended) ---------- */
.pub-section-card{padding:0!important}
.pub-section-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--color-separator);
}
.pub-section-body{padding:16px 20px 20px}
.pub-copy-row button{flex:0 0 auto;min-width:44px;min-height:44px}
.dom-input-row{
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:var(--color-fill-tertiary);border-radius:10px;border:1px solid var(--color-separator);
}
.dom-input-row .dom-globe{color:var(--color-label-tertiary);display:flex;flex:0 0 auto}
.dom-input-row input{flex:1;border:none;background:transparent;height:44px;font-size:14px;color:var(--color-label-primary)}
.dom-input-row input:focus{outline:none}
.dom-dns-panel{
  margin-top:12px;padding:14px 16px;border-radius:12px;
  background:var(--color-fill-quaternary);border:1px solid var(--color-separator);
}
.dom-dns-panel .dns-table{width:100%;margin-top:8px}

/* ---------- Revisions ---------- */
.rev-empty{padding:48px 24px;text-align:center}
.rev-empty > svg.lucide{width:32px;height:32px;color:var(--color-label-tertiary);margin:0 auto 12px;display:block;stroke-width:1.5}
.rev-empty .big{font-size:17px;font-weight:600;margin-bottom:6px}
.rev-empty .c-sub{margin-bottom:14px}
.rev-empty .btn{margin-top:4px}
.rev-empty .btn svg.lucide{width:14px;height:14px;margin:0;display:block;flex:0 0 auto}
.rev-list .rev-row{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:0 20px;
  transition:background var(--motion-hover);
}
.rev-list .rev-row:hover{background:var(--color-fill-quaternary)}
.rev-list .rev-row+.rev-row{border-top:1px solid var(--color-separator)}
.rev-row-ico{
  width:40px;height:40px;border-radius:10px;flex:0 0 auto;
  background:var(--color-fill-secondary);display:flex;align-items:center;justify-content:center;
  color:var(--color-label-secondary);
}
.rev-row-main{flex:1;min-width:0}
.rev-row-main strong{display:block;font-size:14px;font-weight:600}
.rev-row-main em{font-style:normal;font-size:12px;color:var(--color-label-tertiary)}
.rev-badge{
  border-radius:999px;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:0.05em;flex:0 0 auto;
}
.rev-badge.save{background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.rev-badge.staged{background:color-mix(in srgb,var(--color-warning) 14%,transparent);color:var(--color-warning)}
.rev-badge.restored{background:color-mix(in srgb,var(--color-tint) 14%,transparent);color:var(--color-tint)}
.rev-row time{font-size:12px;color:var(--color-label-tertiary);flex:0 0 auto}
.rev-row-actions{display:flex;gap:4px;flex:0 0 auto}
.rev-row-actions button{
  min-width:44px;min-height:44px;border-radius:8px;border:none;background:transparent;
  font-size:13px;font-weight:500;color:var(--color-tint);cursor:pointer;padding:0 12px;
}
.rev-row-actions button:hover{background:var(--color-fill-secondary)}
.rev-diff-sheet{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center}
.rev-diff-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--color-label-primary) 28%,transparent)}
.rev-diff-panel{
  position:relative;width:min(560px,100%);max-height:min(78vh,640px);overflow:auto;
  background:var(--color-bg-elevated);border-radius:20px 20px 0 0;padding:20px 22px 24px;
  box-shadow:var(--glass-shadow);animation:rev-sheet-in var(--motion-page-dur) var(--motion-spring) both;
}
@keyframes rev-sheet-in{from{transform:translateY(100%)}to{transform:none}}
.rev-diff-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.rev-diff-head h3{margin:0;font-size:17px;font-weight:600}
.rev-diff-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.rev-diff-stats span{font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px}
.rev-diff-add{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}
.rev-diff-rm{background:color-mix(in srgb,var(--color-destructive) 12%,transparent);color:var(--color-destructive)}
.rev-diff-chg{background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:var(--color-warning)}
.rev-diff-block{font-size:13px;padding:8px 0;border-bottom:1px solid var(--color-separator)}
.rev-diff-block:last-child{border:none}
@media (prefers-reduced-motion:reduce){.rev-diff-panel{animation:none}}

/* ---------- Team ---------- */
.team-card-head{margin-bottom:4px}
.team-roster{
  margin-top:12px;border:1px solid var(--color-separator);border-radius:14px;
  overflow:visible;background:var(--color-bg-elevated);
}
.team-roster .team-member-row{padding:0 16px}
.team-invite{
  margin-top:18px;padding:16px 18px;border-radius:14px;
  background:var(--color-fill-quaternary);
  border:1px solid color-mix(in srgb,var(--color-separator) 85%,transparent);
}
.team-invite-kicker{
  margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-label-secondary);
}
.team-invite-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(148px,188px) auto;gap:10px;align-items:end;
}
@media(max-width:720px){.team-invite-row{grid-template-columns:1fr}.team-invite-btn{width:100%}}
.team-invite-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.team-invite-field label,
.team-invite-label{font-size:12px;font-weight:600;color:var(--color-label-secondary)}
.team-invite-field input{
  width:100%;height:44px;border-radius:10px;padding:0 12px;font-size:14px;
  background:var(--color-bg-elevated);border:1px solid var(--color-separator);color:var(--color-label-primary);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
}
.team-invite-field input:focus{
  outline:none;border-color:var(--color-tint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--color-tint) 14%,transparent);
}
.team-invite-role .bd-select{width:100%;max-width:none;flex:none}
.team-invite-role .bd-select-trigger{min-height:44px;border-radius:10px;background:var(--color-bg-elevated)}
.team-invite-btn{min-height:44px;padding:0 18px;border-radius:10px;white-space:nowrap;align-self:end}
.team-invite-hint{margin:10px 0 0}
.team-upgrade-note{margin-top:12px}
.team-invite-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.team-invite-modes.seg{max-width:200px;margin:0}
.team-invite-panel{margin-top:0}
.team-invite-row--link{grid-template-columns:minmax(148px,1fr) auto}
.team-link-out{margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--color-separator) 80%,transparent)}
.team-link-out label{display:block;font-size:12px;font-weight:600;color:var(--color-label-secondary);margin-bottom:8px}
.team-link-copy{display:flex;gap:8px;align-items:center}
.team-link-copy input{
  flex:1;min-width:0;height:40px;border-radius:10px;padding:0 12px;font-size:12.5px;font-family:var(--font-mono);
  background:var(--color-bg-elevated);border:1px solid var(--color-separator);color:var(--color-label-primary);
}
.team-member-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.team-member-row .lr-main{flex:1;min-width:0}
.team-member-row.link-invite .avatar.link{
  background:color-mix(in srgb,var(--color-tint) 12%,var(--color-fill-secondary));
  color:var(--color-tint);font-size:13px;font-weight:700;
}
.team-copy-link{white-space:nowrap;padding:0 10px!important;min-height:34px!important;height:34px!important}
.team-remove{
  width:34px;height:34px;min-width:34px;min-height:34px;border-radius:10px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-label-secondary);
  background:var(--color-fill-tertiary);
  border:1px solid var(--color-separator);
  transition:background .15s,color .15s,border-color .15s;
}
.team-remove svg.lucide{width:16px;height:16px}
.team-remove:hover{
  color:var(--color-destructive);
  background:color-mix(in srgb,var(--color-destructive) 10%,transparent);
  border-color:color-mix(in srgb,var(--color-destructive) 28%,var(--color-separator));
}
#team-list,
#team-list .rev-list{overflow:visible}
.team-member-row{position:relative;z-index:0;display:flex;align-items:center;gap:12px;min-height:60px;padding:0 16px}
.team-member-row:has(.bd-select.open){z-index:30}
.team-member-row .team-member-actions .bd-select--roles{flex:0 1 148px;min-width:128px;width:148px;max-width:168px}
.team-member-row+.team-member-row{border-top:1px solid var(--color-separator)}
.team-member-row.owner{background:color-mix(in srgb,var(--color-tint) 6%,transparent)}
.team-member-row .avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;
  background:var(--color-tint);color:#fff;
}
.team-member-row:not(.owner) .avatar:not(.link){background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.team-role-chip{
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;
  background:var(--color-fill-secondary);color:var(--color-label-secondary);
}
.team-role-chip.owner{background:color-mix(in srgb,var(--color-tint) 14%,transparent);color:var(--color-tint)}
.team-role-chip.pending{
  background:color-mix(in srgb,#d4a012 20%,transparent);
  color:#b8860b;
  flex:0 0 auto;
}
.team-member-row.pending-invite .team-role-chip.pending{margin-left:auto;margin-right:8px}
.team-member-row.pending-invite{align-items:center}
.team-member-row.pending-invite .team-remove{margin-left:0}
.perm-matrix{width:100%;margin-top:12px}
.perm-matrix td,.perm-matrix th{text-align:center;padding:10px 8px;font-size:13px}
.perm-matrix td:first-child,.perm-matrix th:first-child{text-align:left}
.perm-y,.perm-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}
.perm-y{background:color-mix(in srgb,var(--color-success) 12%,transparent);color:var(--color-success)}
.perm-n{background:var(--color-fill-tertiary);color:var(--color-label-tertiary)}

/* ---------- Settings ---------- */
.settings-tabs{
  display:flex;gap:2px;overflow-x:auto;padding:3px;margin-bottom:16px;
  background:var(--color-fill-secondary);border-radius:10px;
  border:1px solid color-mix(in srgb,var(--color-separator) 70%,transparent);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  scrollbar-width:none;
}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tabs button{
  flex:1;min-width:max-content;min-height:30px;border-radius:7px;border:none;
  background:transparent;font-size:12.5px;font-weight:500;color:var(--color-label-secondary);
  cursor:pointer;padding:5px 12px;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--motion-hover),color var(--motion-hover);
}
.settings-tabs button.on{background:var(--color-bg-elevated);color:var(--color-label-primary);font-weight:600;box-shadow:0 1px 2px color-mix(in srgb,var(--color-label-primary) 10%,transparent),0 2px 5px color-mix(in srgb,var(--color-label-primary) 5%,transparent)}
.settings-inline-save{
  display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--color-label-tertiary);min-height:20px;
}
.settings-inline-save.saved{color:var(--color-success)}
.brand-preview-strip{
  display:flex;gap:6px;height:48px;border-radius:12px;overflow:hidden;margin:12px 0 16px;
  border:1px solid var(--color-separator);
}
.brand-preview-strip span{flex:1}
.brand-preview-strip span:nth-child(1){background:var(--bp-accent,var(--color-tint))}
.brand-preview-strip span:nth-child(2){background:color-mix(in srgb,var(--bp-accent,var(--color-tint)) 70%,var(--color-bg-elevated))}
.brand-preview-strip span:nth-child(3){background:var(--color-fill-secondary)}
.brand-preview-strip span:nth-child(4){background:var(--color-bg-secondary)}
.danger-zone-card{
  border:1px solid color-mix(in srgb,var(--color-destructive) 35%,transparent)!important;
  background:color-mix(in srgb,var(--color-destructive) 4%,transparent)!important;
}
.danger-zone-card h2{color:var(--color-destructive)}
.dz-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-top:1px solid color-mix(in srgb,var(--color-destructive) 18%,transparent);
}
.dz-row:first-of-type{border-top:none;padding-top:4px}

/* ---------- Account ---------- */
.acct-profile-row{display:grid;gap:12px;margin-top:12px}
.acct-inline-hint{font-size:12px;color:var(--color-label-tertiary);min-height:18px;margin-top:4px}
.acct-inline-hint.saved{color:var(--color-success)}
.acct-plan-meters{display:grid;gap:14px;margin-top:14px}
.acct-meter label{display:flex;justify-content:space-between;font-size:13px;font-weight:500;margin-bottom:6px}
.acct-meter-bar{height:6px;border-radius:999px;background:var(--color-fill-secondary);overflow:hidden}
.acct-meter-bar i{display:block;height:100%;border-radius:999px;background:var(--color-tint);transition:width var(--motion-hover)}
.acct-pass-strength{margin-top:8px;height:4px;border-radius:999px;background:var(--color-fill-secondary);overflow:hidden}
.acct-pass-strength i{display:block;height:100%;border-radius:999px;transition:width var(--motion-hover),background var(--motion-hover)}
.acct-sessions{margin-top:12px}
.acct-session-row{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 0;
  border-bottom:1px solid var(--color-separator);
}
.acct-session-row:last-child{border:none}
.acct-session-ico{
  width:36px;height:36px;border-radius:10px;background:var(--color-fill-secondary);
  display:flex;align-items:center;justify-content:center;color:var(--color-label-secondary);flex:0 0 auto;
}
.acct-session-main{flex:1;min-width:0;font-size:13px}
.acct-session-main strong{display:block;font-weight:600}
.acct-session-main em{font-style:normal;font-size:12px;color:var(--color-label-tertiary)}

/* ---------- Activity log ---------- */
.activity-page-filters{margin-bottom:16px}
.activity-log-list .lr{padding:11px 12px;border-bottom:1px solid var(--color-separator)}
.activity-log-list .lr:last-child{border-bottom:none}
.activity-load-more{display:flex;justify-content:center;margin-top:16px}
/* ---------- Customize modal extensions ---------- */
.customize .cust-preset .hig-swatch-preview{height:96px;border-radius:10px}
.dash-notes-body textarea,.dash-notes-card textarea{
  width:100%;min-height:120px;border:none;border-radius:12px;padding:12px 14px;
  background:var(--color-fill-primary);color:var(--color-label-primary);font-size:14px;line-height:1.5;
  box-shadow:inset 0 0 0 1px var(--color-separator),inset 0 1px 2px color-mix(in srgb,var(--color-label-primary) 4%,transparent);
  resize:vertical;
}
.dash-notes-body textarea:focus{outline:none;background:var(--color-bg-elevated);box-shadow:inset 0 0 0 2px var(--color-tint),0 0 0 3px color-mix(in srgb,var(--color-tint) 14%,transparent)}
[data-theme="light"] .dash-stat-d,[data-theme="light"] .dp-sub{color:var(--color-label-secondary)}
.customize .cust-swatch{width:100px;height:100px;border-radius:14px}
.customize .cust-harmony{margin:0 0 12px}
.customize .cust-harmony span{display:block;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--color-label-tertiary);margin-bottom:8px}
.customize .cust-harmony-chips{display:flex;gap:8px;flex-wrap:wrap}
.customize .cust-harmony-chips button{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--color-separator);cursor:pointer;padding:0;
}
.customize .cust-acct-swatch{display:inline-flex;gap:4px;margin-right:8px;vertical-align:middle;align-items:center}
.customize .cust-acct-swatch i{
  width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:block;
  box-sizing:border-box;border:1px solid var(--color-separator);
}
.cust-acct-row.active .cust-acct-swatch i:first-child{
  box-shadow:0 0 0 2px var(--color-bg-elevated),0 0 0 3px var(--color-tint);
}
.customize .cust-io-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.customize .cust-io-row button{font-size:12px;font-weight:500;color:var(--color-tint);background:none;border:none;cursor:pointer;min-height:44px;padding:0 8px}

/* ---------- Credits & Paystack ---------- */
.su-credits{display:block;font-size:11px;color:var(--color-tint);margin-top:1px;font-style:normal;font-weight:500}
.credits-hub{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:18px;padding:16px 18px;border-radius:16px;
  background:var(--color-bg-elevated);border:1px solid var(--color-separator);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.credits-hub-main{display:flex;align-items:center;gap:14px;min-width:0}
.credits-hub-icon{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint);
}
.credits-hub-icon svg.lucide{width:20px;height:20px}
.credits-hub-kicker{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-label-tertiary);margin:0 0 2px}
.credits-hub-total{font-size:24px;font-weight:700;letter-spacing:-.03em;margin:0;line-height:1.1;color:var(--color-label-primary)}
.credits-hub-unit{font-size:14px;font-weight:500;color:var(--color-label-secondary)}
.credits-hub-sub{font-size:12.5px;color:var(--color-label-secondary);margin:4px 0 0;line-height:1.45}
.credits-hub-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.credits-pill{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:500;color:var(--color-label-secondary);
  background:var(--color-fill-secondary);
}
.credits-pill.muted{background:transparent;padding-left:0;color:var(--color-label-tertiary)}
.credits-pill .cl-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.credits-hub-actions{display:flex;gap:8px;flex-wrap:wrap}
.credits-balance-hero{padding:4px 0}
.credits-balance-big{font-size:32px;font-weight:700;letter-spacing:-.04em;margin:4px 0 8px;color:var(--color-label-primary)}
.credits-how-list{margin:10px 0 0;padding-left:18px;color:var(--color-label-secondary);font-size:13px;line-height:1.55}
.credits-how-list li+li{margin-top:6px}
.credits-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.credits-plan-card{
  padding:14px;border-radius:14px;border:1px solid var(--color-separator);background:var(--color-fill-quaternary);
}
.credits-plan-card.on{border-color:var(--color-tint);background:color-mix(in srgb,var(--color-tint) 8%,var(--color-bg-elevated))}
.cpc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.cpc-head strong{font-size:14px}
.cpc-head span{font-size:12px;font-weight:600;color:var(--color-tint)}
.cpc-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.credits-topup-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.credits-topup-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;border:1px solid var(--color-separator);background:var(--color-fill-quaternary);
}
.credits-topup-tag{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;
  background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint);
}
.credits-topup-right{display:flex;align-items:center;gap:10px}
.credits-topup-price{font-size:15px;font-weight:600;color:var(--color-label-primary)}
.credits-ledger .credits-ledger-row{min-height:52px}
@media(max-width:640px){
  .credits-hub{flex-direction:column;align-items:stretch}
  .credits-hub-actions .btn{flex:1}
}

/* ---------- Subscription (Apple-style) ---------- */
#sub-membership,#sub-credits,#sub-billing{scroll-margin-top:72px}
.sub-page-nav{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:4px;
  position:sticky;top:0;z-index:2;
  background:color-mix(in srgb,var(--color-bg) 88%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.sub-page-pill{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  font-size:13px;font-weight:500;color:var(--color-label-secondary);text-decoration:none;
  background:var(--color-fill-secondary);transition:background .15s,color .15s;
}
.sub-plan-section.collapsed{display:none}
.sub-plan-flag.locked{background:var(--color-fill-secondary);color:var(--color-label-tertiary)}
.sub-text-link{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  color:var(--color-tint);text-decoration:none;padding:6px 0;
}
.sub-text-link:hover{text-decoration:underline}
.sub-text-link svg.lucide{width:14px;height:14px}
.sub-checkout-note{display:block;font-size:11.5px;color:var(--color-tint);margin-top:2px}
.acct-membership{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding:16px 18px;border-radius:16px;
  background:var(--color-bg-elevated);border:1px solid var(--color-separator);
}
.acct-membership-kicker{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-label-tertiary);margin:0 0 4px}
.acct-membership-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acct-membership-row strong{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--color-label-primary)}
.acct-membership-sub{font-size:12.5px;color:var(--color-label-secondary);margin:4px 0 0;line-height:1.45}
.credits-guide{margin-bottom:28px}
.credits-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
@media(max-width:760px){.credits-guide-grid{grid-template-columns:1fr}}
.credits-guide-card{
  padding:16px 18px;border-radius:16px;border:1px solid var(--color-separator);
  background:var(--color-bg-elevated);
}
.credits-guide-ico{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;
}
.credits-guide-ico.plan{background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint)}
.credits-guide-ico.topup{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.credits-guide-ico.spend{background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.credits-guide-card h4{font-size:14px;font-weight:600;margin:0 0 6px;color:var(--color-label-primary)}
.credits-guide-card p{font-size:12.5px;line-height:1.5;color:var(--color-label-secondary);margin:0}
.credit-uses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.credit-use-card{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  border:1px solid var(--color-separator);background:var(--color-fill-quaternary);
}
.credit-use-card.soon{opacity:.88}
.credit-use-ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--color-bg-elevated);color:var(--color-label-secondary);
}
.credit-use-ico svg.lucide{width:17px;height:17px}
.credit-use-card strong{display:block;font-size:13.5px;font-weight:600;color:var(--color-label-primary);margin-bottom:3px}
.credit-use-card p{font-size:12px;line-height:1.45;color:var(--color-label-secondary);margin:0}
.credit-soon{
  display:inline-block;margin-left:4px;padding:2px 7px;border-radius:999px;font-size:9px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;
  background:var(--color-fill-secondary);color:var(--color-label-tertiary);
}
.sub-hero{
  display:flex;align-items:flex-start;gap:16px;padding:22px 24px;border-radius:20px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-tint) 10%,var(--color-bg-elevated)),var(--color-bg-elevated));
  border:1px solid color-mix(in srgb,var(--color-tint) 18%,var(--color-separator));
  margin-bottom:16px;
}
.sub-hero.draft{background:linear-gradient(145deg,var(--color-fill-quaternary),var(--color-bg-elevated));border-color:var(--color-separator)}
.sub-hero-icon{
  width:48px;height:48px;border-radius:14px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-tint) 14%,transparent);color:var(--color-tint);
}
.sub-hero-icon svg.lucide{width:22px;height:22px}
.sub-hero-text{min-width:0}
.sub-hero-kicker{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-label-tertiary);margin:0 0 4px}
.sub-hero-title{font-size:28px;font-weight:700;letter-spacing:-.04em;margin:0 0 6px;color:var(--color-label-primary)}
.sub-hero-sub{font-size:14px;line-height:1.45;color:var(--color-label-secondary);margin:0;max-width:52ch}

/* ── credit balance card with iCloud-style usage meter ── */
.credit-card{
  padding:20px 22px;border-radius:20px;margin-bottom:24px;
  background:var(--color-bg-elevated);border:1px solid var(--color-separator);
  box-shadow:var(--shadow-card,0 1px 3px rgba(0,0,0,.05));
}
.credit-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.credit-card-kicker{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-label-tertiary);margin:0 0 4px}
.credit-card-total{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1;margin:0;color:var(--color-label-primary)}
.credit-card-unit{font-size:15px;font-weight:500;color:var(--color-label-secondary);letter-spacing:0}
.credit-card-reset{
  flex:0 0 auto;font-size:12px;font-weight:600;color:var(--color-label-secondary);
  background:var(--color-fill-tertiary);padding:6px 11px;border-radius:999px;white-space:nowrap;
}
.credit-meter{
  display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px;
  background:var(--color-fill-tertiary);margin-bottom:14px;
}
.credit-meter-seg{height:100%;border-radius:999px;transition:width .5s var(--motion-spring,ease)}
.credit-meter-seg.plan{background:var(--color-tint)}
.credit-meter-seg.topup{background:color-mix(in srgb,var(--color-tint) 45%,var(--color-bg-elevated))}
.credit-legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.credit-legend-item{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--color-label-secondary)}
.credit-legend-item span{font-weight:600;color:var(--color-label-primary)}
.cl-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cl-dot.plan{background:var(--color-tint)}
.cl-dot.topup{background:color-mix(in srgb,var(--color-tint) 45%,var(--color-bg-elevated));box-shadow:inset 0 0 0 1px var(--color-separator)}
.cl-dot.used{background:var(--color-fill-tertiary);box-shadow:inset 0 0 0 1px var(--color-separator)}
.credit-empty p{font-size:13px;color:var(--color-label-secondary);margin:0;line-height:1.5}

/* ── section heads ── */
.sub-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.sub-sec-head--plans{align-items:flex-start;margin-bottom:0}
.sub-sec-head h3{font-size:21px;font-weight:700;letter-spacing:-.03em;margin:0}
.sub-sec-sub{font-size:13px;color:var(--color-label-secondary);margin:6px 0 0;line-height:1.5;max-width:48ch}

.sub-plan-section{margin-bottom:28px}
.sub-plan-intro{margin-bottom:18px}
.sub-plan-save-note{
  margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--color-success);
  letter-spacing:-.01em;
}

.sub-seg{
  display:inline-flex;padding:2px;border-radius:10px;background:var(--color-fill-tertiary);
  border:1px solid color-mix(in srgb,var(--color-separator) 80%,transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.sub-seg-btn{
  border:0;background:transparent;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--color-label-secondary);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap;
}
.sub-seg-btn.on{
  background:var(--color-bg-elevated);color:var(--color-label-primary);
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px color-mix(in srgb,var(--color-separator) 70%,transparent);
}

.sub-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
@media(max-width:900px){.sub-plan-grid{grid-template-columns:1fr}}
.sub-plan-tile{
  position:relative;text-align:left;padding:22px 20px 20px;border-radius:20px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--color-separator) 90%,transparent);
  background:var(--color-bg-elevated);
  display:flex;flex-direction:column;min-height:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .22s,box-shadow .22s,transform .22s,background .22s;
}
.sub-plan-tile:hover{
  border-color:color-mix(in srgb,var(--color-label-tertiary) 35%,var(--color-separator));
  transform:translateY(-1px);
  box-shadow:0 8px 24px color-mix(in srgb,var(--color-label-primary) 6%,transparent);
}
.sub-plan-tile.rec{
  border-color:color-mix(in srgb,var(--color-tint) 22%,var(--color-separator));
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-tint) 4%,var(--color-bg-elevated)),var(--color-bg-elevated));
}
.sub-plan-tile.sel{
  border-color:var(--color-tint);
  box-shadow:0 0 0 1px var(--color-tint),0 14px 36px color-mix(in srgb,var(--color-tint) 12%,transparent);
  transform:translateY(-2px);
}
.sub-plan-tile.current{
  background:color-mix(in srgb,var(--color-tint) 4%,var(--color-bg-elevated));
  border-color:color-mix(in srgb,var(--color-tint) 28%,var(--color-separator));
}
.sub-plan-tile.locked{opacity:.62;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.sub-plan-tile.locked:hover{border-color:var(--color-separator);transform:none;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* selected check — appears only on the chosen tile */
.sub-plan-check{
  position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-tint);color:#fff;opacity:0;transform:scale(.65);
  transition:opacity .2s,transform .2s var(--motion-spring,ease);
}
.sub-plan-check svg.lucide{width:13px;height:13px;stroke:#fff;stroke-width:3}
.sub-plan-tile.sel .sub-plan-check{opacity:1;transform:scale(1)}
.sub-plan-row{display:flex;gap:6px;min-height:20px;margin-bottom:8px}
.sub-plan-flag{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint);
}
.sub-plan-flag.current{background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.sub-plan-name{font-size:17px;font-weight:700;letter-spacing:-.025em;display:block;margin-bottom:6px;color:var(--color-label-primary)}
.sub-plan-price-row{display:flex;align-items:baseline;gap:3px;margin-bottom:2px}
.sub-plan-price{font-size:28px;font-weight:700;letter-spacing:-.04em;color:var(--color-label-primary);line-height:1}
.sub-plan-price-row em{font-style:normal;font-size:14px;font-weight:500;color:var(--color-label-tertiary)}
.sub-plan-mo{display:block;font-size:12px;font-weight:600;color:var(--color-label-secondary);margin:4px 0 14px}
.sub-plan-feats{margin:0;padding:0;list-style:none;display:grid;gap:8px;margin-top:auto}
.sub-plan-feats li{font-size:13px;color:var(--color-label-secondary);padding-left:20px;position:relative;line-height:1.4}
.sub-plan-feats li::before{
  content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;border-radius:50%;
  background:color-mix(in srgb,var(--color-tint) 10%,transparent);
}
.sub-plan-feats li::after{
  content:"";position:absolute;left:4px;top:.62em;width:6px;height:3px;
  border-left:1.5px solid var(--color-tint);border-bottom:1.5px solid var(--color-tint);
  transform:rotate(-45deg);
}

/* ── one-time top-up bundles ── */
.topup-sec{margin-bottom:32px}
.topup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.topup-grid{grid-template-columns:1fr}}
.topup-card{
  position:relative;text-align:left;padding:18px;border-radius:18px;cursor:pointer;
  border:1.5px solid var(--color-separator);background:var(--color-bg-elevated);
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.topup-card:hover{border-color:color-mix(in srgb,var(--color-tint) 40%,var(--color-separator));transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in srgb,var(--color-tint) 10%,transparent)}
.topup-card.best{border-color:color-mix(in srgb,var(--color-tint) 32%,var(--color-separator))}
.topup-tag{
  position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.03em;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--color-tint) 14%,transparent);color:var(--color-tint);
}
.topup-credits{font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--color-label-primary)}
.topup-unit{font-size:13px;font-weight:500;color:var(--color-label-secondary);margin-top:2px}
.topup-per{font-size:12px;color:var(--color-label-tertiary);margin-top:10px}
.topup-price{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-top:4px;color:var(--color-label-primary)}
.topup-buy{
  margin-top:14px;display:inline-flex;align-items:center;justify-content:center;
  height:34px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--color-fill-secondary);color:var(--color-label-primary);
  transition:background .15s,color .15s;
}
.topup-card:hover .topup-buy,.topup-card.best .topup-buy{background:var(--color-tint);color:#fff}

/* ── credit activity ledger ── */
.ledger-sec{margin-bottom:24px}
.ledger-list{
  border:1px solid var(--color-separator);border-radius:16px;overflow:hidden;
  background:var(--color-bg-elevated);
}
.ledger-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--color-separator)}
.ledger-row:last-child{border-bottom:none}
.ledger-ico{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--color-fill-secondary);color:var(--color-label-secondary);
}
.ledger-ico.grant{background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint)}
.ledger-ico.topup{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.ledger-ico.spend{background:var(--color-fill-secondary);color:var(--color-label-secondary)}
.ledger-ico svg.lucide{width:15px;height:15px}
.ledger-info{flex:1;min-width:0}
.ledger-info strong{display:block;font-size:13.5px;font-weight:500;color:var(--color-label-primary)}
.ledger-info span{font-size:11.5px;color:var(--color-label-tertiary)}
.ledger-delta{font-size:14px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-delta.pos{color:var(--color-success)}
.ledger-delta.neg{color:var(--color-label-secondary)}

.sub-checkout-bar{
  position:sticky;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--color-bg-elevated) 82%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--color-separator);box-shadow:0 8px 28px color-mix(in srgb,var(--color-label-primary) 10%,transparent);
  z-index:3;
}
.sub-checkout-bar[hidden]{display:none!important}
.sub-checkout-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sub-checkout-copy strong{font-size:15px;font-weight:700;letter-spacing:-.01em}
.sub-checkout-copy span{font-size:13px;color:var(--color-label-secondary)}
.sub-checkout-btn{min-width:180px;border-radius:999px;padding:11px 22px;font-weight:600}
@media(max-width:560px){.sub-checkout-bar{flex-direction:column;align-items:stretch}.sub-checkout-btn{width:100%}}

/* ── plan management card (subscribed) ── */
.plan-manage{
  padding:20px 22px;border-radius:20px;margin-bottom:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-tint) 9%,var(--color-bg-elevated)),var(--color-bg-elevated));
  border:1px solid color-mix(in srgb,var(--color-tint) 16%,var(--color-separator));
}
.plan-manage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.plan-manage-id{min-width:0}
.plan-manage-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 4px}
.plan-manage-title h2{font-size:26px;font-weight:700;letter-spacing:-.035em;margin:0;color:var(--color-label-primary)}
.plan-status{font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.plan-status.active{background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success)}
.plan-status.ending{background:color-mix(in srgb,var(--color-warning) 18%,transparent);color:var(--color-warning)}
.plan-manage-price{font-size:13.5px;color:var(--color-label-secondary);margin:0}
.plan-manage-icon{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-tint) 14%,transparent);color:var(--color-tint);
}
.plan-manage-icon svg.lucide{width:21px;height:21px}
.plan-manage-renew{font-size:12.5px;color:var(--color-label-tertiary);margin:14px 0 0}
.plan-notice{
  display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:12px;
  background:color-mix(in srgb,var(--color-warning) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--color-warning) 22%,transparent);
  font-size:12.5px;line-height:1.45;color:var(--color-label-secondary);
}
.plan-notice svg.lucide{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--color-warning)}
.plan-notice strong{color:var(--color-label-primary);font-weight:600}
.plan-manage-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.plan-cancel{color:var(--color-destructive)!important}
.plan-cancel:hover{background:color-mix(in srgb,var(--color-destructive) 12%,transparent)!important}

/* ── billing management ── */
.bill-manage-sec{margin-bottom:28px}
.bill-manage-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:760px){.bill-manage-grid{grid-template-columns:1fr}}
.bill-manage-pay{flex-wrap:wrap}
.bill-manage-pay .pay-card-info{flex:1;min-width:160px}
.bill-manage-meta{
  padding:14px 16px;border-radius:16px;border:1px solid var(--color-separator);
  background:var(--color-bg-elevated);display:flex;flex-direction:column;gap:10px;
}
.bill-meta-row{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.bill-meta-row span{color:var(--color-label-secondary)}
.bill-meta-row strong{color:var(--color-label-primary);font-weight:600;text-align:right}
.bill-manage-help{margin-bottom:16px;padding:0;background:transparent}
.bill-manage-help-btn{
  display:flex;gap:9px;align-items:flex-start;width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--color-separator);background:var(--color-fill-quaternary);
  font-size:12.5px;line-height:1.45;color:var(--color-label-secondary);cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
}
.bill-manage-help-btn:hover{background:var(--color-fill-tertiary);border-color:color-mix(in srgb,var(--color-tint) 25%,var(--color-separator))}
.bill-manage-help-btn strong{color:var(--color-tint);font-weight:600}
.bill-manage-help-btn svg.lucide{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--color-tint)}
.bill-info-card{
  padding:16px 18px;border-radius:16px;border:1px solid var(--color-separator);
  background:var(--color-bg-elevated);font-size:13.5px;line-height:1.55;color:var(--color-label-secondary);
}
.bill-info-card.bill-info-action{
  display:block;width:100%;text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.bill-info-card.bill-info-action:hover{
  border-color:color-mix(in srgb,var(--color-tint) 30%,var(--color-separator));
  box-shadow:0 6px 20px color-mix(in srgb,var(--color-label-primary) 6%,transparent);
  transform:translateY(-1px);
}
.bill-info-card strong{display:block;font-size:15px;font-weight:600;color:var(--color-label-primary);margin-bottom:6px}
.bill-info-card p{margin:0 0 12px}
.bill-info-link{
  display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--color-tint);
}
.bill-info-link svg.lucide{width:14px;height:14px}
.bill-info-support{font-size:12.5px;color:var(--color-label-tertiary);margin:10px 0 0}
.bill-info-card p:last-child{margin:0}
.bill-sec-nested{margin-top:8px}
.bill-sec-nested .sub-sec-head{margin-bottom:10px}
.bill-sec-nested h3{font-size:15px}

/* ── payment method ── */
.pay-sec{margin-bottom:24px}
.pay-card{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--color-separator);background:var(--color-bg-elevated);
}
.pay-card-ico{
  width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--color-fill-secondary);color:var(--color-label-secondary);
}
.pay-card-ico svg.lucide{width:18px;height:18px}
.pay-card-info{flex:1;min-width:0}
.pay-card-info strong{display:block;font-size:14px;font-weight:600;color:var(--color-label-primary)}
.pay-card-info span{font-size:12px;color:var(--color-label-secondary)}

/* ── billing history ── */
.bill-sec{margin-bottom:24px}
.sub-sec-note{font-size:12px;color:var(--color-label-tertiary)}
.bill-list{border:1px solid var(--color-separator);border-radius:16px;overflow:hidden;background:var(--color-bg-elevated)}
.bill-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--color-separator)}
.bill-row:last-child{border-bottom:none}
.bill-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
}
.bill-ico.sub{background:color-mix(in srgb,var(--color-tint) 12%,transparent);color:var(--color-tint)}
.bill-ico.topup{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}
.bill-ico svg.lucide{width:15px;height:15px}
.bill-info{flex:1;min-width:0}
.bill-info strong{display:block;font-size:13.5px;font-weight:500;color:var(--color-label-primary)}
.bill-info span{font-size:11.5px;color:var(--color-label-tertiary)}
.bill-amount{font-size:14px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--color-label-primary);white-space:nowrap}
.ledger-delta.zero{color:var(--color-label-tertiary);font-weight:600}

/* ---------- Apple-style checkout sheet ---------- */
body.bd-checkout-open{overflow:hidden}
.bd-checkout{
  position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.bd-checkout.show{opacity:1;pointer-events:auto}
.bd-checkout-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.42);backdrop-filter:blur(10px);
}
.bd-checkout-panel{
  position:relative;width:min(440px,100%);max-height:min(92vh,760px);display:flex;flex-direction:column;
  background:var(--color-bg-elevated);
  border-radius:22px 22px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.16),0 0 0 .5px color-mix(in srgb,var(--color-separator) 60%,transparent);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
@media(min-width:640px){
  .bd-checkout{align-items:center;padding:24px}
  .bd-checkout-panel{border-radius:24px;max-height:min(88vh,720px)}
}
.bd-checkout.show .bd-checkout-panel{transform:translateY(0)}
.bd-checkout-head{
  padding:24px 24px 10px;text-align:center;position:relative;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-fill-quaternary) 80%,transparent),transparent);
}
.bd-checkout-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--color-fill-tertiary);color:var(--color-label-secondary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.bd-checkout-close:hover{background:var(--color-fill-secondary)}
.bd-checkout-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.bd-checkout-kicker{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-label-tertiary);margin:0 0 6px}
.bd-checkout-head h2{font-size:24px;font-weight:700;letter-spacing:-.035em;margin:0 0 6px;color:var(--color-label-primary)}
.bd-checkout-sub{font-size:14px;color:var(--color-label-secondary);margin:0;line-height:1.45}
.bd-checkout-body{padding:6px 24px 18px;overflow:auto;flex:1}
.bd-checkout-card{
  padding:4px 16px;border-radius:16px;
  background:var(--color-fill-quaternary);
  border:1px solid color-mix(in srgb,var(--color-separator) 85%,transparent);
}
.bd-checkout-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--color-separator) 70%,transparent);font-size:14px}
.bd-checkout-row:last-of-type{border-bottom:none}
.bd-checkout-row span{color:var(--color-label-secondary)}
.bd-checkout-row strong{font-weight:600;color:var(--color-label-primary);letter-spacing:-.01em}
.bd-checkout-total{
  display:flex;justify-content:space-between;gap:12px;padding:14px 0 6px;margin-top:2px;
  border-top:1px solid color-mix(in srgb,var(--color-separator) 80%,transparent);
  font-size:15px;font-weight:700;letter-spacing:-.02em;
}
.bd-checkout-total strong{font-size:16px}
.bd-checkout-trust{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;
  font-size:12px;color:var(--color-label-tertiary);
}
.bd-checkout-trust svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.bd-checkout-foot{padding:14px 24px 24px;border-top:1px solid color-mix(in srgb,var(--color-separator) 70%,transparent)}
.bd-checkout-primary{
  width:100%;border:0;border-radius:14px;padding:15px 20px;font-size:16px;font-weight:600;cursor:pointer;
  background:var(--color-tint);color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-tint) 35%,transparent);
  transition:opacity .15s,transform .12s;
}
.bd-checkout-primary:hover:not(:disabled){transform:translateY(-1px)}
.bd-checkout-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.bd-checkout-body--frame{padding:0 0 16px}
.bd-checkout-body--frame .bd-checkout-frame{min-height:min(68vh,560px);border-radius:0;border-left:0;border-right:0}
.bd-checkout-body--frame .bd-checkout-frame iframe.bd-checkout-iframe{min-height:min(68vh,560px)}
.bd-checkout-pay-lead{font-size:13px;color:var(--color-label-secondary);margin:0 0 10px;text-align:center}
.bd-checkout-frame{
  min-height:420px;border-radius:14px;overflow:hidden;background:var(--color-fill-quaternary);
  border:1px solid var(--color-separator);
}
.bd-checkout-frame iframe.bd-checkout-iframe{width:100%;min-height:420px;border:0;display:block;background:#fff}
.bd-checkout-pay-hint{font-size:11.5px;color:var(--color-label-tertiary);text-align:center;margin:10px 0 0}
/* in-sheet success confirmation */
.bd-checkout-done{padding:24px 8px 8px;text-align:center}
.bd-checkout-done-mark{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--color-success) 16%,transparent);color:var(--color-success);
  animation:bdCheckPop .42s var(--motion-spring,cubic-bezier(.34,1.56,.64,1)) both;
}
.bd-checkout-done-mark svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bd-checkout-done-title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;color:var(--color-label-primary)}
.bd-checkout-done-sub{font-size:13.5px;color:var(--color-label-secondary);margin:0}
@keyframes bdCheckPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---------- Discord hub ---------- */
.discord-events{display:grid;gap:8px;margin:12px 0}
.discord-event{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;
  background:var(--color-fill-quaternary);cursor:pointer;
}
.discord-event input{width:18px;height:18px;accent-color:var(--color-tint);flex:0 0 auto}
.discord-event span{font-size:14px;font-weight:500}