/* build 20261024-c7 - JEM Music Chords Combined additions.
   Plan chip, locked-feature badges, Plans/locked dialogs and the PRO-style
   song-sections-preview. Static CSS only (no runtime generation, no blur). */

/* ---------- Header plan entry (c4) ----------
   Free: one compact "Free / Upgrade" control at the top right of the header, inside the header's
   safe-area padding. Paid editions: no header control and no reserved space (html[data-plan-entry=none]).
   The logo stays centred; when the control is shown the logo is limited so the two never overlap. */
:root { --plan-entry-w: 84px; --plan-entry-h: 44px; }
#app-logo-wrap { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: var(--logo-h, 56px); }
html[data-plan-entry="free"] #app-logo-wrap { min-height: max(var(--logo-h, 56px), var(--plan-entry-h)); }
html[data-plan-entry="free"] #app-logo { max-width: min(62vw, 300px, calc(100% - 2 * (var(--plan-entry-w) + 8px))) !important; }
.plan-header { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 5; line-height: normal; }
.plan-header[hidden] { display: none !important; }
.plan-entry {
  width: var(--plan-entry-w); min-height: var(--plan-entry-h); padding: 4px 8px; box-sizing: border-box;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; border: 1px solid rgba(167, 139, 250, .55);
  background: linear-gradient(135deg, rgba(124, 58, 237, .92), rgba(91, 33, 182, .92)); color: #fff;
  box-shadow: 0 2px 10px rgba(91, 33, 182, .35);
  font-family: var(--font-ui, system-ui, sans-serif); text-align: center; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.plan-entry-tier { display: block; font-size: 10.5px; line-height: 1.2; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #e4dcff; }
.plan-entry-cta { display: block; font-size: 13.5px; line-height: 1.2; font-weight: 700; color: #fff; white-space: nowrap; }
.plan-entry.is-pending .plan-entry-tier { color: #ffd9a3; }
.plan-entry:active { transform: scale(.97); }
.plan-entry:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; }
@media (max-width: 359px) { :root { --plan-entry-w: 76px; } .plan-entry-cta { font-size: 12.5px; } }
/* Short landscape screens (header row only ~30px tall): the 44px entry sits at the right end of the
   search row instead, so the header does not grow and nothing overlaps. */
@media (max-height: 500px) and (orientation: landscape) {
  html[data-plan-entry="free"] #app-logo-wrap { min-height: var(--logo-h, 30px); margin-bottom: 6px !important; }
  html[data-plan-entry="free"] #app-logo { max-width: min(62vw, 300px) !important; }
  html[data-plan-entry="free"] .plan-header { top: calc(100% + 6px); transform: none; }
  html[data-plan-entry="free"] #search-section { margin-right: calc(var(--plan-entry-w) + 8px); }
}

/* Plan & account in the main menu (all editions) */
#plan-account-btn::before { display: none; }

/* ---------- Touch targets: Live Session / Plans controls at least 44px ---------- */
.live-button { min-height: 44px; }
.live-icon-button { width: 44px; height: 44px; min-width: 44px; }

/* ---------- Supported devices only (see device-gate.js; best effort, not a security control) ---------- */
html[data-device="unsupported"] .mobile-only.app-wrapper,
html[data-device="unsupported"] .app-wrapper { display: none !important; }
html[data-device="unsupported"] .desktop-warning { display: flex !important; }
html[data-device="supported"] .desktop-warning { display: none !important; }
html[data-device="supported"] .mobile-only.app-wrapper { display: flex !important; }
.desktop-warning p { max-width: 34rem; margin-left: auto; margin-right: auto; }

/* ---------- Locked features: tier label (badge only; the action itself is guarded in JS) ----------
   c4: the label is an IN-FLOW pill inside its own control (never positioned above the control's top
   edge, so containers with overflow:hidden cannot clip it). Line-height, height and padding are fixed in
   em-independent units so the full word (ascenders/descenders) is visible at every size, including
   larger system text. Contexts below only decide WHERE the pill sits. */
html[data-tier="free"] [data-min-tier="lite"]::after,
html[data-tier="free"] [data-min-tier="pro"]::after,
html[data-tier="free"] [data-min-tier="upgraded"]::after,
html[data-tier="lite"] [data-min-tier="pro"]::after,
html[data-tier="lite"] [data-min-tier="upgraded"]::after,
html[data-tier="pro"] [data-min-tier="upgraded"]::after,
html:not([data-tier]) [data-min-tier]::after {
  content: attr(data-min-tier);
  position: static; display: inline-flex; align-items: center; flex: 0 0 auto; align-self: center;
  box-sizing: border-box; min-height: 1.6em; padding: .15em .6em .15em 1.55em; margin: 0 0 0 8px;
  border-radius: 999px; pointer-events: none; vertical-align: middle;
  background: #0b0e1b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='8' rx='2' fill='%23cdd3ea'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='%23cdd3ea' stroke-width='2'/%3E%3C/svg%3E") no-repeat .55em 50% / .78em .78em;
  border: 1px solid #4a5285;
  color: #e3e7f7; font-family: var(--font-ui, system-ui, sans-serif); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap; overflow: visible; transform: none;
}
/* Tablet/desktop action rows: label on its own line under the action name, inside the button. */
html[data-tier] #primary-actions > button[data-min-tier], html[data-tier] #secondary-actions > button[data-min-tier] { position: relative; }
html[data-tier="free"] #primary-actions > button[data-min-tier], html[data-tier="lite"] #primary-actions > button[data-min-tier="pro"],
html[data-tier="lite"] #primary-actions > button[data-min-tier="upgraded"], html[data-tier="pro"] #primary-actions > button[data-min-tier="upgraded"],
html[data-tier="free"] #secondary-actions > button[data-min-tier], html[data-tier="lite"] #secondary-actions > button[data-min-tier="upgraded"],
html[data-tier="pro"] #secondary-actions > button[data-min-tier="upgraded"] {
  flex-direction: column; gap: 3px; line-height: 1.15; padding-top: 3px !important; padding-bottom: 3px !important; min-height: 44px !important; height: auto !important;
}
html[data-tier="free"] #primary-actions > button[data-min-tier]::before, html[data-tier="lite"] #primary-actions > button[data-min-tier="pro"]::before,
html[data-tier="lite"] #primary-actions > button[data-min-tier="upgraded"]::before, html[data-tier="pro"] #primary-actions > button[data-min-tier="upgraded"]::before { display: none; }
#primary-actions > button[data-min-tier]::after, #secondary-actions > button[data-min-tier]::after { margin: 0 !important; font-size: 10.5px !important; }
/* ⋮ song menu and More menu rows: label at the end of the row, vertically centred. */
.options-menu button[data-min-tier]::after { margin-left: auto !important; }
.options-menu button[data-min-tier] span:not(.text-lg) { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#mobile-more-menu button[data-min-tier] { display: inline-flex; align-items: center; justify-content: center; }
/* Radial menu (icon-only circles): label centred just below the circle, never above it. */
.mobile-circle-item[data-min-tier]::after {
  position: absolute !important; left: 50%; top: calc(100% - 7px); transform: translateX(-50%) !important; margin: 0 !important;
  font-size: 10px !important; min-height: 1.7em; padding: .15em .55em .15em 1.5em; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
/* Very narrow screen + large text: no room for words around the ring, so the label becomes a lock
   mark on the circle (the locked dialog still names the edition; aria-description too). */
.mobile-circle-menu.radial-compact .mobile-circle-item[data-min-tier]::after {
  content: "" !important; left: auto; right: -3px; top: -3px; transform: none !important; width: 20px; height: 20px;
  min-height: 0; padding: 0; background-position: center; background-size: 11px 11px;
}
/* Song key field: label at the right end of the field's label row. */
.song-key-field[data-min-tier] { position: relative; }
.song-key-field[data-min-tier]::after { position: absolute !important; top: 0; right: 0; margin: 0 !important; }
/* Add-view choice cards: label in the card's top-right corner, inside the padding. */
.add-view-choice-option[data-min-tier] { position: relative; }
.add-view-choice-option[data-min-tier]::after { position: absolute !important; top: 8px; right: 10px; margin: 0 !important; }
/* Search result actions: label under the icon text, inside the button. */
.search-result-action[data-min-tier] { flex-direction: column; justify-content: center; align-items: center; height: auto !important; min-height: 44px; gap: 2px; padding-top: 3px !important; padding-bottom: 3px !important; }
/* c7: icons sit in the middle of their box (the column layout above put them at the top). */
.search-result-action svg { display: block; flex-shrink: 0; }
.search-result-action[data-min-tier]::after { margin: 0 !important; font-size: 10px !important; }
/* Song toolbar: no badges (space is tight); locked controls are dimmed and explain on tap. */
.song-toolbar [data-min-tier]::after { content: none !important; display: none !important; }
html[data-tier="free"] #song-number-toggle, html[data-tier="free"] .transpose-group,
html[data-tier="lite"] .transpose-group,
html[data-tier="free"] #song-tempo-inline, html[data-tier="lite"] #song-tempo-inline, html[data-tier="pro"] #song-tempo-inline,
html[data-tier="free"] #song-view-toggle, html[data-tier="lite"] #song-view-toggle, html[data-tier="pro"] #song-view-toggle { opacity: .55; }
.song-key-field.is-tier-locked select { opacity: .5; }
#song-key-display[hidden] { display: none !important; }

/* ---------- Plans and locked dialogs ---------- */
/* Above every app layer (song view z-50, editors 9100-9850, menus 9999, live 9600). */
#plans-modal { z-index: 10040 !important; }
#locked-modal { z-index: 10050 !important; }
.plans-card, .locked-card {
  width: 100%; max-width: 760px; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 22px; border-radius: 20px; margin: auto; background: var(--c-surface, #161a2f); border: 1px solid var(--c-border, #2a3154); color: var(--c-text, #f1f3fb);
}
.locked-card { max-width: 440px; }
.locked-card h2, .plans-heading h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.plans-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.plans-current { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.plans-current-label { color: var(--c-text-3, #8f97b6); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.plans-current-tier { font-size: 22px; }
.plans-muted { color: var(--c-text-3, #8f97b6); font-size: 13px; line-height: 1.45; margin: 6px 0 0; overflow-wrap: anywhere; }
.plans-notice { min-height: 20px; margin: 10px 0; font-size: 13.5px; line-height: 1.45; color: var(--c-accent, #6fd6f2); }
.plans-notice.is-error { color: var(--c-danger, #f2777a); }
.plans-activation { display: grid; gap: 10px; margin: 6px 0 16px; }
.plans-activation input { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; }
.plans-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.plans-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.plans-tier { border: 1px solid var(--c-border, #2a3154); border-radius: 14px; padding: 12px; background: var(--c-surface-2, #1d2240); display: flex; flex-direction: column; gap: 8px; }
.plans-tier.is-current { border-color: var(--c-primary, #6a5cf0); box-shadow: inset 0 0 0 1px var(--c-primary, #6a5cf0); }
.plans-tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plans-tier-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.plans-price { font-size: 13px; color: var(--c-text-2, #bcc2da); white-space: nowrap; }
.plans-features { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--c-text-2, #bcc2da); flex: 1 1 auto; }
.plans-features .plans-includes { list-style: none; margin-left: -18px; color: var(--c-text-3, #8f97b6); }
.plans-due { margin: 0; font-weight: 600; font-size: 13.5px; }
.plans-owned { margin: 0; font-size: 13px; color: var(--c-success, #2fbf86); font-weight: 600; }
.plans-upgrade { min-height: 42px; border-radius: 10px; border: 1px solid var(--c-primary, #6a5cf0); background: var(--c-primary, #6a5cf0); color: #fff; font-weight: 600; font-size: 13.5px; touch-action: manipulation; }
.plans-help { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--c-text-2, #bcc2da); }
.plans-help a { color: var(--c-accent, #6fd6f2); text-decoration: underline; }
.plans-help p { margin: 0 0 8px; }
.plans-owner { font-size: 12px; opacity: .75; }
@media (max-width: 640px) {
  .plans-card, .locked-card { padding: 16px; max-height: calc(100dvh - 24px); }
}
@media (max-width: 520px) { .plans-tiers { grid-template-columns: 1fr; } }

/* ---------- PRO song-sections-preview (from Chords Pro v2.2.2), on this app's palette ---------- */
#songs-list .song-title-row {
  font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--c-text) !important;
  overflow-wrap: anywhere; margin: 0;
}
#songs-list .song-title-row .song-title { display: inline; -webkit-line-clamp: unset; overflow: visible; font-size: inherit !important; }
#songs-list .song-title-row { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#songs-list .song-key-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4; vertical-align: 1px; white-space: nowrap;
  color: var(--c-accent, #6fd6f2); background: rgba(111, 214, 242, 0.1); border: 1px solid rgba(111, 214, 242, 0.26);
}
#songs-list .song-sections-preview { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; }
#songs-list .song-sections-preview:empty { display: none; }
#songs-list .section-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--c-text-2, #bcc2da); white-space: nowrap; }
#songs-list .section-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
@media (min-width: 641px) {
  #songs-list .song-title-row { font-size: 17px !important; }
  #songs-list .section-indicator { font-size: 13px; }
}
@media (max-width: 360px) { #songs-list .song-title-row { font-size: 15px !important; } }

/* ---------- Plan & account, purchase and Cloud Backup dialogs (c3) ---------- */
#pay-modal { z-index: 10045 !important; }
#cloud-modal { z-index: 10042 !important; }
#confirm-modal { z-index: 10060 !important; }
.plans-card { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.plans-section { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--c-border, #2a3154); }
.plans-section[hidden] { display: none; }
.plans-section-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.plans-editions-title { margin-top: 16px; }
.plans-kind { margin: 4px 0 0; font-size: 13.5px; color: var(--c-text-2, #bcc2da); }
.plans-actions { margin-top: 8px; }
.plans-actions .live-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.plans-tier.is-focus { border-color: #d6a83a; box-shadow: inset 0 0 0 1px #d6a83a; }
.plans-upgrade { min-height: 44px; }
.plans-order { padding: 8px 0; }
.plans-order + .plans-order { border-top: 1px dashed var(--c-border, #2a3154); }
.plans-order-title { margin: 0; font-weight: 600; font-size: 14px; }
.plans-code summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: 14px; }
.link-code { font: 700 30px/1.2 var(--font-mono, ui-monospace, monospace); letter-spacing: .12em; text-align: center; margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--c-border, #2a3154); user-select: all; }
.pay-amount { font-size: 18px; font-weight: 700; margin: 4px 0; }
.pay-methods { display: grid; gap: 8px; margin: 12px 0; }
.pay-methods .live-button { min-height: 48px; font-size: 15px; }
.gcash-details { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0; font-size: 14px; }
.gcash-details dt { color: var(--c-text-3, #8f97b6); }
.gcash-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gcash-copy { min-height: 36px; min-width: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid #5b4b79; background: #302544; color: #f5f3ff; font-size: 12px; }
.gcash-qr { margin: 10px auto; text-align: center; }
.gcash-qr img { width: min(240px, 70vw); height: auto; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 8px; display: block; margin: 0 auto 6px; }
.gcash-form { display: grid; gap: 10px; margin-top: 10px; }
.gcash-form input[type="file"] { min-height: 44px; }
.confirm-body p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--c-text-2, #bcc2da); }
.cloud-state { font-size: 16px; font-weight: 700; margin: 0; }
.cloud-state.is-active { color: #8fe3c4; }
.cloud-state.is-expired { color: #ffd9a3; }
.cloud-status { margin: 10px 0 4px; }
.cloud-progress { margin: 10px 0; }
.cloud-progress-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cloud-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, #3c8fd6, #8b5cf6); transition: width .2s ease; }
.cloud-auto { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.cloud-auto input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.cloud-version { padding: 8px 0; border-top: 1px dashed var(--c-border, #2a3154); }
.cloud-version-title { margin: 0; font-weight: 600; font-size: 14px; }
.cloud-preview { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1px solid #3c8fd6; background: rgba(60, 143, 214, .08); }
.cloud-choice { border: 0; margin: 8px 0; padding: 0; }
.cloud-choice legend { font-size: 13.5px; font-weight: 600; padding: 0; }
.plans-notice:empty { min-height: 0; margin: 0; }
.plans-included { grid-column: 1 / -1; margin: 0; }

/* ---------- Touch targets (c3 audit): ~44px for list menus, song toolbar and main actions ---------- */
#songs-list .more-options-btn, #songs-list .delete-btn { width: 44px; height: 44px; min-width: 44px; }
#view-modal .song-toolbar button,
#view-modal .song-toolbar #transpose-up, #view-modal .song-toolbar #transpose-down,
#view-modal .song-toolbar #song-tempo-play, #view-modal .song-toolbar #song-tempo-settings {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; flex-basis: 44px !important;
}
#view-modal .song-toolbar .toolbar-group { gap: 2px !important; }
#view-modal .song-toolbar .toolbar-value { min-width: 40px !important; }
@media (max-width: 374px) {
  #view-modal .song-toolbar .song-view-control-row { gap: 6px !important; }
  #view-modal .song-toolbar .toolbar-value { min-width: 34px !important; }
}
#primary-actions > button, #secondary-actions > button, #mobile-more-btn, #mobile-more-menu button { min-height: 44px !important; }
@media (min-width: 641px) and (max-height: 500px) {
  #primary-actions > button, #secondary-actions > button { height: 44px; min-height: 44px !important; }
}
.plans-help a, .plans-muted a { display: inline-block; padding: 13px 2px; margin: -13px 0; }
#song-modal .section-btn { min-height: 44px !important; }
.live-tabs button { min-height: 44px; }
#search-input { min-height: 44px; }
.bpm-chip-btn { min-width: 44px !important; min-height: 44px !important; }
#bpm-tap-reset { min-height: 44px; min-width: 44px; padding: 0 10px; }
.bpm-range { height: 44px; background: transparent; touch-action: pan-y; }
.search-result-action { min-height: 44px !important; min-width: 44px !important; }
#add-view-choice-close, #create-grid-view-close, #grid-row-editor-close, #grid-section-copy-close, #songlink-close,
#bpm-close, #close-youtube-browser, #close-audiofile-section, #close-analysis-results { min-width: 44px !important; min-height: 44px !important; }
#bpm-modal select, #lineup-modal select, #song-modal select { min-height: 44px; }

/* ---------- Floating ⋮ menu (c4): sized to its content, inside the visible viewport ---------- */
.options-menu.menu-floating { width: max-content; min-width: 200px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.options-menu button { min-height: 46px; display: flex; align-items: center; gap: 12px; line-height: 1.25 !important; }
.options-menu button > .text-lg { width: 22px; flex: 0 0 22px; text-align: center; line-height: 1 !important; }

/* ---------- Install invitation (c4): small card at the bottom, above the safe area ---------- */
.install-invite {
  position: fixed; z-index: 10030; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  box-sizing: border-box; display: grid; grid-template-columns: 40px 1fr; gap: 10px 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--c-surface, #161a2f); border: 1px solid var(--c-border-strong, #3b4373);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); color: var(--c-text, #f1f3fb);
}
.install-invite[hidden] { display: none !important; }
.install-invite-icon { width: 40px; height: 40px; border-radius: 10px; }
.install-invite-text h2 { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.install-invite-text p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-text-2, #bcc2da); }
.install-invite-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.install-invite-actions .live-button { min-height: 44px; padding: 0 16px; }
.install-entry { margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
.install-entry[hidden] { display: none; }

/* ---------- Account step for Buy / Plan & account (c5): Create account, Sign in, Forgot password, Cancel ---------- */
.pay-step { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2, #bcc2da); }
.plans-actions.account-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plans-actions.account-choices .live-button { min-height: 48px; font-size: 15px; }
@media (max-width: 359px) { .plans-actions.account-choices { grid-template-columns: 1fr; } }
.plans-actions.account-minor { justify-content: space-between; margin-top: 4px; }
.live-button.live-link { background: transparent !important; border-color: transparent !important; text-decoration: underline; text-underline-offset: 3px; padding-left: 4px; padding-right: 4px; }
/* c7: GCash form - kept screenshot note and unsent details */
.gcash-file-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.gcash-unsent { margin-top: 10px; }