/* ============================================
   MODALS
   Auth modal, settings, import modal, popups
   ============================================ */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000;
    animation: fadeIn 0.2s ease;
    cursor: pointer;
}

/* Modal Content */
.modal-content {
    background: var(--popup-bg);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    cursor: default;
}

.modal-content h3 {
    margin: 0 0 8px 0;
    color: var(--accent-color);
}

.modal-hint {
    color: var(--text-muted);
    font-size: 0.85em;
    margin-bottom: 16px;
}

.modal-code-sample {
    font-family: monospace;
    font-size: 0.85em;
    color: var(--text-muted);
    background: var(--bg-secondary, rgba(255,255,255,0.05));
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 16px;
    white-space: pre;
}

/* Import Modal */
.import-textarea {
    width: 100%;
    height: 200px;
    padding: 12px 14px 12px 12px;
    border-radius: 8px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-family: monospace;
    font-size: 0.9em;
    resize: vertical;
    box-sizing: border-box;
}

.import-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.import-status {
    color: var(--accent-color);
    font-size: 0.85em;
    min-height: 20px;
    margin: 8px 0;
}

.import-replace-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 15px 0;
    padding: 10px 12px;
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--warning-color);
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 6px;
}

/* Import sources that no longer work through a URL. Informational rather than a
   warning: nothing the user did is wrong, the upstream site blocks automated
   access, so this states the fact and points at the export-and-paste route. */
.modal-hint--warning {
    margin: -8px 0 16px 0;
    padding: 10px 12px;
    color: var(--text-primary);
    background: var(--info-bg, #4a90d91a);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
}

/* --- Public profile banner ---

   The art runs the full height of the profile header rather than sitting above it: the avatar,
   name and badges are laid over the image, and it dissolves into the modal background just
   before the "My Color Identity" / "My Signature Card" cards begin. Anchored `center top`
   because card art frames its subject near the top, and with no visible bottom edge there is
   nothing for a user to align -- which is what let the per-user position control go away. */
.profile-banner {
    position: relative;
    width: 100%;
    height: 480px;
    background-image: var(--profile-banner-art, none);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Sits over the art. Nearly clear at the top so the image keeps its colour, then accelerating
   so the last third is indistinguishable from the modal itself. */
.profile-banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 34%,
        color-mix(in srgb, var(--popup-bg) 30%, transparent) 55%,
        color-mix(in srgb, var(--popup-bg) 70%, transparent) 76%,
        color-mix(in srgb, var(--popup-bg) 92%, transparent) 90%,
        var(--popup-bg) 100%
    );
}

.profile-modal-body {
    padding: 0 32px 32px 32px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
}

/* Only pulled up when there is art to be pulled up over -- a profile with no banner keeps its
   original spacing rather than opening with 300px of empty modal. */
.profile-modal-body--with-banner {
    margin-top: -300px;
}

/* Legibility scrim for the header text, which now sits on top of arbitrary card art.
   Built from `--popup-bg` via color-mix so it darkens on dark themes and lightens on light
   ones automatically: profile themes are user-chosen, so a hardcoded black wash would wreck
   the light ones. The ellipse keeps the wash centred on the text and off the art's edges. */
/* Named for the public profile specifically: a plain `.profile-header` already exists further
   down for the settings modal, and it is a horizontal flex row. Reusing that name laid the
   avatar, username and badges out side by side and overflowed the page. */
.public-profile-header {
    text-align: center;
    position: relative;
}

.public-profile-header::before {
    content: "";
    position: absolute;
    inset: -24px -8% 0 -8%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 62% 58% at 50% 46%,
        color-mix(in srgb, var(--popup-bg) 78%, transparent) 0%,
        color-mix(in srgb, var(--popup-bg) 58%, transparent) 45%,
        transparent 78%
    );
}

/* The settings preview shows the same treatment at a size that fits inside the form. */
.profile-banner--preview {
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--input-border);
}

/* Phones get a shorter banner and a smaller pull-up: 480px of art would push the profile's
   actual content off the screen before the reader saw any of it. */
@media (max-width: 768px) {
    .profile-banner {
        height: 300px;
    }

    .profile-modal-body--with-banner {
        margin-top: -190px;
    }

    .public-profile-header::before {
        inset: -16px -4% 0 -4%;
    }
}

.import-file-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--input-bg);
    border: 1px dashed var(--input-border);
    border-radius: 8px;
    transition: all 0.2s;
    text-align: center;
}

.import-file-section.drag-over {
    border-color: var(--accent-color);
    background: var(--accent-bg);
    transform: scale(1.02);
    box-shadow: 0 0 15px var(--accent-glow);
}

.import-file-section:hover {
    border-color: var(--accent-color);
    background: var(--accent-bg);
}

.file-input-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 0.95em;
    cursor: pointer;
    font-weight: 500;
}

.file-input-label .ui-icon {
    color: var(--accent-color);
}

.file-input-hidden {
    display: none;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.cancel-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.cancel-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.confirm-btn {
    background: var(--accent-color);
    border: none;
    color: var(--button-primary-text, white);
    font-weight: bold;
}

.confirm-btn:hover {
    filter: brightness(1.1);
}

/* Auth Modal */
.auth-modal {
    max-width: 400px;
    width: 90%;
    padding: 32px;
    border-radius: 16px;
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
}

.auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.auth-header h2 {
    font-size: 1.8em;
    margin-bottom: 8px;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-subtitle {
    color: var(--text-muted);
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-color);
}

.auth-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1em;
    transition: all 0.2s;
}

.auth-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    border: none;
    cursor: pointer;
    margin-top: 16px;
    transition: transform 0.1s;
}

.auth-submit-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.auth-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-color);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.error-icon {
    font-size: 1.2em;
}

.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.form-group-checkbox {
    margin-bottom: 16px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
}

.checkbox-label span {
    color: var(--text-color);
    font-size: 0.9em;
    line-height: 1.4;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent !important;
    border: none;
    color: var(--text-color) !important;
    padding: 0 !important;
    font-size: 2em;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 100;
    opacity: 1;
}

.modal-close svg {
    stroke: currentColor !important;
    color: inherit !important;
}

.modal-close:hover {
    background: var(--accent-bg) !important;
    color: var(--text-color) !important;
}

.text-link {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    margin-left: 4px;
    transition: all 0.2s;
}

.text-link:hover {
    filter: brightness(1.2);
}

.text-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    border-top-color: var(--text-color);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9em;
}

/* ── Third-party sign-in ───────────────────────────────────────────────────
   Deliberately styled as secondary to the email form rather than as the hero
   action. Password sign-in is the only route that works for an account whose
   provider later revokes access, so it stays the primary path. */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider-border);
}

.auth-oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--ui-button-border);
    background: var(--ui-button-bg);
    color: var(--ui-button-text);
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-oauth-btn:hover:not(:disabled) {
    border-color: var(--ui-button-hover-border);
}

.auth-oauth-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Sized to match the text beside it rather than a fixed pixel box, so the
   marks stay aligned when the modal font scales. */
.auth-oauth-btn svg {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

.auth-oauth-error {
    margin-bottom: 12px;
}

/* Settings Modal */
.settings-modal {
    max-width: 1100px;
    width: 90%;
    border-radius: 12px;
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    display: flex;
    overflow: hidden;
    height: 85vh;
    max-height: 1000px;
}

.settings-sidebar {
    width: 250px;
    background: var(--widget-bg);
    border-right: 1px solid var(--divider-border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
}

.settings-sidebar h3 {
    margin-bottom: 24px;
    padding-left: 12px;
    color: var(--text-muted);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-nav-item {
    text-align: left;
    background: transparent;
    border: none;
    padding: 12px;
    border-radius: 6px;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-nav-item:hover {
    background: var(--accent-bg);
}

.settings-nav-item.active {
    background: var(--button-bg);
    color: var(--accent-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.settings-header {
    flex: 0 0 auto;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--divider-border);
}

.settings-header h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
}

.settings-body {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

.settings-footer {
    flex: 0 0 auto;
    padding: 24px 32px;
    border-top: 1px solid var(--divider-border);
    display: flex;
    justify-content: flex-end;
}

.settings-section h2 {
    margin-bottom: 32px;
    font-size: 1.5em;
}

.settings-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.1em;
    color: var(--text-color);
    font-weight: 600;
}

.settings-separator {
    margin: 24px 0;
    border-bottom: 1px solid var(--divider-border);
}

.setting-group {
    margin-bottom: 16px;
}

/* ── Linked accounts ─────────────────────────────────────────────────────── */

.linked-account-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--divider-border);
    border-radius: 8px;
    background: var(--widget-bg);
}

/* Takes the slack so the button stays hard right at any width. */
.linked-account-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.linked-account-name {
    font-weight: 600;
    font-size: 14px;
}

/* An email address is the usual content and can be longer than the row. */
.linked-account-meta {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linked-account-row button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Profile Header */
.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--divider-border);
}

.large-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: white;
    font-size: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.profile-info h3 {
    margin: 0 0 4px 0;
    font-size: 1.4em;
}

.email-text {
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Settings Input */
.settings-input {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-color);
}

.settings-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--input-bg);
}

.help-text {
    font-size: 0.85em;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Avatar Styles */
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-img-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hidden-file-input {
    display: none;
}

.change-avatar-btn {
    font-size: 0.8em;
    color: var(--accent-color);
    cursor: pointer;
    text-decoration: none;
}

.change-avatar-btn:hover {
    color: var(--accent-hover);
}

/* Plan Card */
.plan-card {
    border: 1px solid var(--divider-border);
    border-radius: 12px;
    padding: 24px;
    background: var(--tab-bg);
}

.plan-card.pro-active {
    border-color: var(--accent-color);
    background: var(--accent-bg);
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.plan-price {
    font-size: 1.25em;
    font-weight: bold;
}

.plan-features {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
}

.plan-features li {
    margin-bottom: 12px;
    font-size: 1em;
}

.plan-actions {
    display: flex;
    justify-content: flex-end;
}

.upgrade-btn {
    background: var(--accent-gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.upgrade-btn:hover {
    transform: translateY(-1px);
}

.tags-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.playstyle-tag-toggle {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
}

/* Billing uses the same elevated, icon-led language as the shared PRO gate
   without behaving like an overlay inside Settings. */
.billing-settings-section {
    display: grid;
    gap: 16px;
}

.billing-pro-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--widget-bg) 88%, #05080d);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.36),
        0 0 30px color-mix(in srgb, var(--accent-color) 9%, transparent);
}

.billing-plan-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.billing-plan-heading {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
}

.billing-plan-heading .pro-gate-title,
.billing-plan-heading .pro-gate-description {
    justify-content: flex-start;
    text-align: left;
}

.billing-plan-heading .pro-gate-description {
    max-width: 58ch;
    margin-top: 6px;
}

.billing-plan-icon,
.billing-retention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.billing-plan-price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.billing-plan-price strong {
    color: var(--text-primary);
    font-size: 1.28rem;
    line-height: 1.15;
}

.billing-plan-price span,
.billing-management-note {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.billing-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-status-badge,
.billing-plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.billing-status-badge.positive {
    border-color: color-mix(in srgb, var(--success-color, #58a66a) 48%, var(--border-color));
    background: color-mix(in srgb, var(--success-color, #58a66a) 12%, transparent);
    color: var(--success-color, #58a66a);
}

.billing-status-badge.warning {
    border-color: color-mix(in srgb, var(--warning-color) 48%, var(--border-color));
    background: color-mix(in srgb, var(--warning-color) 12%, transparent);
    color: var(--warning-color);
}

.billing-seat-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-secondary) 48%, transparent);
}

.billing-seat-summary > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 13px 10px;
    text-align: center;
}

.billing-seat-summary > div + div {
    border-left: 1px solid var(--border-color);
}

.billing-seat-summary strong {
    color: var(--text-primary);
    font-size: 1.22rem;
}

.billing-seat-summary span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.billing-perks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 2px 0;
}

.billing-perks-grid .pro-gate-feature-item {
    min-width: 0;
    padding: 7px 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--bg-secondary) 34%, transparent);
}

.billing-plan-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 38px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.billing-manage-button,
.billing-management-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.billing-retention-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 72%, transparent);
}

.billing-retention-icon {
    width: 34px;
    height: 34px;
}

.billing-retention-card h4 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.billing-retention-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ── Referral & win-back cards ──────────────────────────────────────────
   Siblings of .billing-pro-card and .billing-retention-card above, and
   deliberately built from the same primitives (--widget-bg mixes, the shared
   icon chip, the pill chips) so the Billing & Account tab reads as one surface
   rather than a styled card followed by a plain one. */

.billing-referral-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 14px;
    padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--widget-bg) 84%, #05080d);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.billing-referral-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.billing-referral-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 16%, transparent);
    color: var(--accent-color);
}

.billing-referral-header h4 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.billing-referral-headline {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.billing-referral-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.billing-referral-rules strong {
    color: var(--text-primary);
    font-weight: 600;
}

.billing-referral-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Banked days are the least intuitive number here, so they get their own
   emphasis rather than sitting in the run of body text. */
.billing-referral-note--banked {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--warning-color) 34%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning-color) 9%, transparent);
}

.billing-referral-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

.billing-referral-link-field {
    width: auto;
    flex: 1 1 16rem;
}

.billing-referral-link-input {
    width: 100%;
    height: 36px;
    flex: 0 0 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--widget-bg) 72%, transparent);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
}

.billing-referral-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.billing-referral-copy-btn:hover {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.billing-referral-code-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.billing-referral-code-hint code {
    padding: 2px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--widget-bg) 60%, transparent);
    border: 1px solid var(--border-color);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

/* Mirrors .billing-seat-summary's three-up grid rather than inventing a new
   stat layout. */
.billing-referral-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--border-color);
}

.billing-referral-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--widget-bg) 80%, transparent);
}

.billing-referral-stat strong {
    color: var(--text-primary);
    font-size: 1.28rem;
    line-height: 1.15;
}

.billing-referral-stat span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.billing-referral-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.billing-referral-list h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 2px;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.billing-referral-pending-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--widget-bg) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.billing-referral-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    font-size: 0.8rem;
}

.billing-referral-row:last-child {
    border-bottom: none;
}

.billing-referral-row-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.billing-referral-row-state {
    color: var(--text-muted);
}

.billing-referral-row-state.positive {
    color: var(--success-color, #58a66a);
}

.billing-referral-row-state.muted {
    opacity: 0.6;
}

.billing-referral-row-days {
    color: var(--success-color, #58a66a);
    font-weight: 700;
}

.billing-referral-footnote {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Win-back: same card shape, warning accent, because it is a time-bound offer
   rather than a standing feature. */
.billing-winback-card {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    gap: 12px;
    padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid color-mix(in srgb, var(--warning-color) 40%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--warning-color) 7%, var(--widget-bg));
}

.billing-winback-card .billing-referral-icon {
    background: color-mix(in srgb, var(--warning-color) 18%, transparent);
    color: var(--warning-color);
}

.billing-winback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-winback-accept {
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--warning-color) 52%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--warning-color) 16%, transparent);
    color: var(--warning-color);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.billing-winback-accept:hover:not(:disabled) {
    background: color-mix(in srgb, var(--warning-color) 24%, transparent);
}

.billing-winback-accept:disabled {
    opacity: 0.6;
    cursor: default;
}

.billing-winback-dismiss {
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}

.billing-winback-dismiss:hover {
    color: var(--text-primary);
}

.billing-pro-card--loading {
    min-height: 360px;
}

.billing-loading-line,
.billing-loading-grid {
    border-radius: 8px;
    background: linear-gradient(90deg, var(--widget-bg), var(--tab-bg), var(--widget-bg));
    background-size: 200% 100%;
    animation: billing-shimmer 1.4s linear infinite;
}

.billing-loading-line {
    width: 58%;
    height: 28px;
}

.billing-loading-line.short {
    width: 38%;
    height: 14px;
}

.billing-loading-grid {
    flex: 1;
    min-height: 220px;
}

@keyframes billing-shimmer {
    to { background-position: -200% 0; }
}

@media (max-width: 720px) {
    .billing-plan-header {
        flex-direction: column;
    }

    .billing-plan-price {
        align-items: flex-start;
        padding-left: 54px;
        text-align: left;
    }

    .billing-perks-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .billing-plan-heading {
        flex-direction: column;
    }

    .billing-plan-price {
        padding-left: 0;
    }

    .billing-seat-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-seat-summary > div + div {
        border-top: 1px solid var(--border-color);
        border-left: 0;
    }

    .billing-plan-actions {
        justify-content: stretch;
    }

    .billing-plan-actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* Commander Slot */
.commander-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    gap: 10px;
    padding: 12px;
    background: var(--warning-bg);
    border: 1px dashed var(--warning-color);
    border-radius: 8px;
    margin-bottom: 10px;
}

.commander-label {
    color: var(--warning-color);
    font-weight: bold;
    font-size: 0.9em;
}

.commander-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--accent-bg);
    border-radius: 6px;
}

.commander-name {
    color: var(--warning-color);
    font-weight: bold;
}

.clear-commander-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1em;
    padding: 4px 8px;
    border-radius: 4px;
}

.clear-commander-btn:hover {
    color: var(--danger-color);
    background: var(--danger-bg);
}

.no-commander {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
}

/* Markdown Content Styles */
.markdown-body {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.95em;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
    margin-top: 24px;
    margin-bottom: 16px;
    color: var(--accent-color);
    font-weight: 600;
}

.markdown-body h1 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--divider-border);
    padding-bottom: 8px;
}

.markdown-body h2 {
    font-size: 1.3em;
}

.markdown-body h3 {
    font-size: 1.1em;
}

.markdown-body p {
    margin-bottom: 16px;
}

.markdown-body ul,
.markdown-body ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.markdown-body li {
    margin-bottom: 8px;
}

.markdown-body a {
    color: var(--accent-color);
    text-decoration: none;
}

.markdown-body a:hover {
    color: var(--accent-hover);
}

.markdown-body blockquote {
    border-left: 4px solid var(--divider-border);
    padding-left: 16px;
    margin-left: 0;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .settings-modal {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        border: none;
    }

    .settings-sidebar {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--divider-border);
        padding: 12px;
        background: var(--popup-bg);
        /* Match modal bg */
        flex-shrink: 0;
    }

    .settings-sidebar h3 {
        display: none;
    }

    .settings-nav {
        flex-direction: row;
        width: 100%;
        gap: 8px;
    }

    .settings-nav-item {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        padding: 10px;
        min-width: auto;
        background: var(--button-bg);
    }

    .settings-nav-item.active {
        background: var(--accent-gradient);
        color: white;
    }

    .settings-content {
        width: 100%;
    }

    .settings-header {
        padding: 16px;
    }

    .settings-body {
        padding: 16px;
    }

    .settings-footer {
        padding: 16px;
    }
}

/* Payment Context Banners */
.payment-context-banner {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid var(--accent-glow);
    background: var(--accent-bg);
}

.payment-context-banner h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: var(--accent-color);
}

.payment-context-banner p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color);
    line-height: 1.4;
}

/* Referral welcome: `.referral-context` is a semantic hook only, deliberately
   carrying no colour of its own so the banner picks up the active theme's
   accent from the base rule above. An earlier version pinned it to the success
   green, which ignored the user's chosen theme. */

.skip-signin-btn {
    width: 100%;
    padding: 10px;
    margin-top: 16px;
    border-radius: 8px;
    background: var(--accent-gradient);
    color: white;
    font-weight: bold;
    font-size: 0.95em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.skip-signin-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Notification item base padding */
.notification-item {
    padding: 1.5rem;
}

.notification-item .notification-body {
    padding: 1rem;
}

/* Profile Color Identity Glow */
.has-color-identity {
    box-shadow: 0 0 20px 2px var(--identity-color);
}

@media (max-width: 768px) {
    .notifications-modal {
        padding: 12px !important;
    }

    .notification-item {
        padding: 1rem;
    }

    .notification-item .notification-body {
        padding: 0.5rem;
    }
}

/* ---- User Profile: Games Stats ---- */
.profile-game-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.profile-game-stat {
    flex: 1;
    min-width: 140px;
    background: var(--accent-bg, rgba(88,166,255,0.06));
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
}

.profile-game-stat--muted {
    background: rgba(255,255,255,0.03);
    border-color: var(--border-color, #333);
}

.profile-game-stat__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 6px;
}

.profile-game-stat--muted .profile-game-stat__value {
    color: var(--text-muted, #888);
}

.profile-game-stat__label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color);
    margin-bottom: 2px;
}

.profile-game-stat__sub {
    font-size: 0.75rem;
    color: var(--text-muted, #888);
}

/* ============================================
   Stat Explanation Modal (Stats widgets "?")
   ============================================ */

.stat-explain-modal {
    max-width: 680px;
    max-height: 85vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stat-explain-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.stat-explain-heading h3 {
    margin: 0;
    color: var(--accent-color);
    font-size: 1.15em;
}

.stat-explain-subtitle {
    display: block;
    margin-top: 2px;
    font-size: 0.8em;
    color: var(--text-muted);
}

.stat-explain-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.stat-explain-close:hover,
.stat-explain-close:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.stat-explain-body {
    overflow-y: auto;
    padding: 16px 22px 20px;
}

.stat-explain-summary {
    margin: 0 0 12px;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--text-color);
    padding: 12px 14px;
    background: var(--accent-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.stat-explain-sections {
    display: flex;
    flex-direction: column;
}

.stat-explain-section {
    padding: 12px 2px;
    border-top: 1px solid var(--border-color);
}

.stat-explain-section:first-child {
    border-top: none;
}

.stat-explain-section.signal-absent {
    opacity: 0.72;
}

.stat-explain-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.stat-explain-section-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--accent-color);
}

.stat-explain-section-title {
    font-weight: 700;
    font-size: 0.9em;
    color: var(--text-color);
}

.stat-explain-floor {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--accent-bg);
    color: var(--accent-color);
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
}

.stat-explain-detail {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--text-secondary);
}

.stat-explain-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.stat-explain-card {
    position: relative;
    width: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: center;
}

.stat-explain-card.chip-clickable {
    cursor: pointer;
}

.stat-explain-card img {
    width: 100%;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-explain-card.chip-clickable:hover img,
.stat-explain-card.chip-clickable:focus-visible img {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    z-index: 2;
    position: relative;
}

.stat-explain-card.chip-clickable:hover .stat-explain-card-name {
    color: var(--accent-color);
}

.stat-explain-card-placeholder {
    width: 100%;
    aspect-ratio: 5 / 7;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--accent-bg);
}

.stat-explain-card-count {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
}

.stat-explain-card-name {
    width: 100%;
    font-size: 0.68em;
    line-height: 1.2;
    text-align: center;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.stat-explain-markers {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--text-secondary);
}

.stat-explain-footnote {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 0.78em;
    color: var(--text-muted);
}

.stat-explain-footnote a {
    color: var(--accent-color);
}

/* Tier legend rows inside stat explanation modals */
.stat-explain-tiers {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.stat-explain-tier-row {
    display: grid;
    grid-template-columns: 110px 70px 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.82em;
}

.stat-explain-tier-row.has-alt {
    grid-template-columns: 110px 70px 70px 1fr;
}

.stat-explain-tier-head {
    padding-bottom: 0;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-explain-tier-head .stat-explain-tier-range {
    color: var(--text-muted);
    font-weight: 700;
}

.stat-explain-reassurance {
    font-weight: 700;
}

.stat-explain-tiers + .stat-explain-detail {
    margin-top: 8px;
    font-size: 0.78em;
    color: var(--text-muted);
}

.stat-explain-tier-row.tier-active {
    background: var(--accent-bg);
    border: 1px solid var(--accent-color);
}

.stat-explain-tier-label {
    font-weight: 700;
    color: var(--text-color);
}

.stat-explain-tier-row.tier-active .stat-explain-tier-label {
    color: var(--accent-color);
}

.stat-explain-tier-range {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.stat-explain-tier-desc {
    color: var(--text-secondary);
}

/* --- Customise Tags modal --- */
.tag-customize-modal {
    max-width: 560px;
    /* Anchor for the close button, and room under the list for the pinned actions bar. */
    position: relative;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.tag-customize-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tag-customize-close:hover {
    background: var(--widget-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.tag-customize-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    overflow-y: auto;
    margin: 12px 0 0;
    padding-right: 6px;
}

.tag-customize-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tag-customize-row:hover {
    background: var(--widget-bg);
    border-color: var(--border-color);
}

/* A hidden group stays legible rather than disappearing: the reader is here to find it. */
.tag-customize-row.is-hidden .tag-customize-label {
    color: var(--text-muted);
}

/* The shared pill toggle, narrowed: its 80px-per-side default is sized for a settings
   form and would leave no room for the label in a list this dense. */
.tag-customize-toggle {
    flex: 0 0 auto;
    height: 28px;
}

.tag-customize-toggle .toggle-btn {
    min-width: 42px;
    padding: 2px 8px;
    font-size: 0.7rem;
}

.tag-customize-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Its own fixed column so the badges form a straight edge down the list rather than
   landing wherever each label happens to end. */
.tag-customize-flag {
    flex: 0 0 54px;
    display: flex;
    justify-content: flex-end;
}

.tag-customize-count {
    flex: 0 0 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 0.85em;
}

/* Marks the groups the size rule hid, so an unfamiliar 'off' state has a stated reason. */
.tag-customize-note {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 5px;
}

/* On a phone the four columns leave the tag name a few characters wide, which is the one
   thing in the row the reader is actually looking for. Two rows instead: the name gets the
   full width, and the controls that qualify it sit underneath. */
@media (max-width: 600px) {
    .tag-customize-row {
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-areas:
            "label label label"
            "toggle flag count";
        align-items: center;
        gap: 6px 10px;
        padding: 8px 10px;
    }

    .tag-customize-label {
        grid-area: label;
        white-space: normal;
        font-weight: 600;
    }

    .tag-customize-toggle {
        grid-area: toggle;
    }

    /* Sized to its badge rather than the fixed alignment column, which only earns its keep
       when the badges form a straight edge beside a name column. */
    .tag-customize-flag {
        grid-area: flag;
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .tag-customize-count {
        grid-area: count;
        flex: 1 1 auto;
        text-align: right;
    }
}

/* Pinned footer: Reset stays at the left edge where it was, Done sits bottom-right where
   the eye finishes. The top border keeps it distinct while the list scrolls under it. */
.tag-customize-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    background: inherit;
}

/* The title reads as a heading, not as a link. `.modal-content h3` paints every modal title
   in the accent colour; here it competes with the accent-filled On toggles down the list. */
.tag-customize-modal > h3 {
    color: var(--text-color);
}

/* An active "Off" gets a filled grey rather than the accent fill, so a glance down the column
   separates on from off by colour instead of by reading the word in each pill. "On" keeps the
   accent treatment it shares with every other toggle in the app. */
.tag-customize-toggle .toggle-btn.right.active {
    background: color-mix(in srgb, var(--text-muted) 42%, var(--widget-bg));
    color: var(--text-color);
    box-shadow: none;
}

.tag-customize-reset {
    display: inline-flex;
    align-items: center;
    /* The icon sat flush against the label before this. */
    gap: 8px;
}