/* Creator Panel Styles
 * Follows the rpg.actor book-like aesthetic: serif fonts, no rounded corners,
 * parchment tones, gold accents.
 */

/* =========================================================================
   LAYOUT
   ========================================================================= */

.creator-panel {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    min-height: calc(100vh - 120px);
}

/* Add spacing when jam banner is present (immediately before creator panel) */
.jam-banner + main.creator-panel {
    padding-top: calc(1rem + 15px);
}

.creator-loading {
    padding: 4rem 0;
    text-align: center;
}

/* =========================================================================
   GATE (access denied / not logged in)
   ========================================================================= */

.creator-gate {
    padding: 4rem 0;
    text-align: center;
}

.gate-message h1 {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.gate-message p {
    color: var(--ink-light);
    margin-bottom: 1.5rem;
}

.gate-login-btn {
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 2rem;
    background: var(--accent);
    color: var(--parchment);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.gate-login-btn:hover {
    background: var(--accent-dark);
}

/* =========================================================================
   BANNER (status messages)
   ========================================================================= */

.creator-banner {
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem;
    border: 1px solid;
    font-size: 0.95rem;
    line-height: 1.4;
    word-break: break-word;
}

.banner-success {
    background: #f0f8e8;
    border-color: #4a7c1b;
    color: #2d5a0e;
}

.banner-error {
    background: #fdf0f0;
    border-color: #a33;
    color: #722;
}

.banner-info {
    background: var(--parchment);
    border-color: var(--gold);
    color: var(--ink);
}

/* =========================================================================
   PURCHASE VIEW
   ========================================================================= */

/* ---- Hero banner (dark section) ---- */

.purchase-hero {
    background: var(--ink);
    color: var(--parchment);
    text-align: center;
    padding: 1.15rem 1.5rem 1rem;
    position: relative;
    overflow: hidden;
    margin: -1.5rem -1rem 0;
    border-bottom: 3px solid var(--gold);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.purchase-hero-d20 {
    position: absolute;
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--gold);
    opacity: 0.06;
    pointer-events: none;
}

.purchase-hero h1 {
    font-size: 1.45rem;
    color: var(--gold);
    margin-bottom: 0.15rem;
    position: relative;
    letter-spacing: 0.03em;
}

.purchase-tagline {
    font-size: 0.95rem;
    color: var(--parchment);
    opacity: 0.7;
    font-style: italic;
    position: relative;
}

/* ---- Showcase: image left, features right ---- */

.purchase-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: center;
    margin: 2rem -3rem 1.5rem;
}

.showcase-image-wrap {
    border: 3px solid var(--ink);
    background: var(--parchment);
    padding: 3px;
    box-shadow: 0 2px 12px var(--shadow);
}

.showcase-image {
    display: block;
    width: 100%;
    height: auto;
}

.showcase-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---- Feature callouts ---- */

.feature-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 0.15rem;
}

.feature-item strong {
    display: block;
    font-size: 0.88rem;
    color: var(--ink);
    margin-bottom: 0.1rem;
}

.feature-item span {
    font-size: 0.8rem;
    color: var(--ink-light);
    line-height: 1.45;
}

.feature-item code {
    font-family: "Courier New", monospace;
    background: var(--parchment-dark);
    padding: 0.1em 0.3em;
    font-size: 0.88em;
}

/* ---- Pricing tiers ---- */

.purchase-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 520px;
    margin: 1.25rem auto 1rem;
    align-items: stretch;
}

.tier-card {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 1.35rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    gap: 0.25rem;
}

.tier-card .tier-btn {
    margin-top: auto;
}

.tier-card-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.tier-badge-wrap {
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translateX(-50%);
}

.tier-featured-badge {
    background: var(--accent);
    color: var(--parchment);
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.65rem;
    white-space: nowrap;
}

.tier-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--ink);
}

.tier-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    justify-content: center;
}

.tier-price-original {
    font-size: 1.1rem;
    color: var(--ink-light);
    text-decoration: line-through;
    opacity: 0.5;
}

.tier-price {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--ink);
    line-height: 1;
}

.tier-currency {
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--ink-light);
}

.tier-detail {
    font-size: 0.88rem;
    color: var(--ink);
}

.tier-note {
    font-size: 0.78rem;
    color: var(--ink-light);
    font-style: italic;
    margin-bottom: 0.2rem;
}

.tier-remaining {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: bold;
    letter-spacing: 0.02em;
}

.tier-btn {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    cursor: pointer;
    letter-spacing: 0.02em;
    width: 100%;
    margin-top: 0.35rem;
    transition: background 0.15s, color 0.15s;
}

.tier-btn:hover:not(:disabled) {
    background: var(--accent);
    color: var(--parchment);
}

.tier-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tier-btn-featured {
    background: var(--accent);
    color: var(--parchment);
    border-color: var(--accent);
}

.tier-btn-featured:hover:not(:disabled) {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* ---- Divider ---- */

.purchase-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 1.25rem 0 0.75rem;
}

.purchase-divider-line {
    display: block;
    width: 80px;
    height: 1px;
    background: var(--ink-light);
    opacity: 0.25;
}

.purchase-divider-diamond {
    font-size: 0.45rem;
    color: var(--gold);
    line-height: 1;
    opacity: 0.6;
}

/* Fine print row */

.purchase-fine-print {
    text-align: center;
    font-size: 0.76rem;
    color: var(--ink-light);
    letter-spacing: 0.02em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin-bottom: 1.5rem;
}

.fine-sep {
    opacity: 0.35;
}

.purchase-agree {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.agree-statement {
    font-size: 0.85rem;
    color: var(--ink);
    margin: 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.agree-statement a {
    color: var(--accent);
}

.agree-contact {
    font-size: 0.78rem;
    color: var(--ink-light);
    margin-top: 0.5rem;
}

.agree-contact a {
    color: var(--accent);
}

/* ---- Responsive ---- */

@media (max-width: 700px) {
    .purchase-hero {
        padding: 1.25rem 1rem 1rem;
    }

    .purchase-showcase {
        grid-template-columns: 1fr;
        margin: 1.5rem 0;
    }

    .purchase-tiers {
        grid-template-columns: 1fr;
        max-width: 280px;
    }

    .purchase-fine-print {
        flex-direction: column;
        gap: 0.15rem;
    }

    .fine-sep {
        display: none;
    }
}

/* ---- FAQ ---- */

.purchase-faq {
    max-width: 520px;
    margin: 0.5rem auto 2rem;
}

.purchase-faq .purchase-divider {
    margin-bottom: 0.75rem;
}

.faq-heading {
    font-size: 1.2rem;
    color: var(--ink);
    text-align: center;
    margin-bottom: 0.75rem;
    letter-spacing: 0.03em;
}

.faq-list {
    border: 2px solid var(--ink);
    background: var(--parchment);
}

.faq-item {
    border-bottom: 1px solid var(--parchment-dark);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:nth-child(even) {
    background: var(--parchment-dark);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    gap: 1rem;
}

.faq-question:hover {
    color: var(--accent);
}

.faq-arrow {
    font-size: 0.6rem;
    color: var(--ink-light);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.faq-item.open .faq-arrow {
    transform: rotate(90deg);
}

.faq-answer {
    display: none;
    font-size: 0.82rem;
    color: var(--ink-light);
    line-height: 1.5;
    padding: 0 0.85rem 0.6rem;
}

.faq-item.open .faq-answer {
    display: block;
}

/* =========================================================================
   DASHBOARD VIEW (post-purchase)
   ========================================================================= */

.dashboard-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-header h1 {
    font-size: 1.6rem;
    color: var(--accent);
}

.dashboard-stats {
    display: flex;
    gap: 0.5rem;
}

.stat-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ink-light);
    color: var(--ink-light);
}

.tier-badge {
    border-color: var(--gold);
    color: var(--gold);
}

.add-more-btn {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--gold);
    background: rgba(201, 162, 39, 0.1);
    color: var(--gold);
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 0.02em;
    transition: background 0.15s, border-color 0.15s;
}

.add-more-btn:hover {
    background: rgba(201, 162, 39, 0.25);
}

/* =========================================================================
   ADD SLOTS POPUP
   ========================================================================= */

.add-slots-modal {
    max-width: 360px;
}

.add-slots-desc {
    margin: 0 0 1.2rem;
    font-size: 0.9rem;
    color: var(--ink-light);
    text-align: center;
    line-height: 1.5;
}

.add-slots-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.add-slots-count {
    font-size: 3.2rem;
    font-weight: bold;
    color: var(--ink);
    min-width: 2.5ch;
    text-align: center;
    font-family: inherit;
    line-height: 1;
    letter-spacing: -0.02em;
}

.add-slots-steppers {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.1rem;
}

.add-slots-minus,
.add-slots-plus {
    font-family: inherit;
    font-size: 0.85rem;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid var(--ink-light);
    background: rgba(139, 69, 19, 0.06);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}

.add-slots-minus:hover:not(:disabled),
.add-slots-plus:hover:not(:disabled) {
    background: rgba(139, 69, 19, 0.15);
}

.add-slots-minus:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.add-slots-presets {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.2rem;
    border: 2px solid var(--ink-light);
    outline: 1px solid rgba(44, 36, 22, 0.12);
    outline-offset: 3px;
    width: fit-content;
}

.add-slots-preset {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-right: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.add-slots-preset:last-child {
    border-right: none;
}

.add-slots-preset:hover {
    color: var(--gold);
    background: rgba(201, 162, 39, 0.1);
}

.add-slots-preset.active {
    color: var(--gold);
    background: rgba(201, 162, 39, 0.15);
    font-weight: bold;
}

.add-slots-total {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 0.25rem;
}

.add-slots-actions {
    gap: 0.75rem;
}

.add-slots-cancel-btn {
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    background: transparent;
    border: 1px solid var(--ink-light);
    color: var(--ink-light);
}

.add-slots-cancel-btn:hover {
    background: rgba(44, 36, 22, 0.06);
    color: var(--ink);
    border-color: var(--ink);
}

.add-slots-buy-btn {
    font-size: 1.05rem;
    font-weight: bold;
    padding: 0.65rem 2rem;
    background: linear-gradient(180deg, rgba(56, 120, 56, 0.25) 0%, rgba(56, 120, 56, 0.12) 100%);
    border: 2px solid rgba(80, 160, 80, 0.7);
    color: #3d7a3d;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(56, 120, 56, 0.15);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 rgba(56, 120, 56, 0.15);
}

.add-slots-buy-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(56, 120, 56, 0.38) 0%, rgba(56, 120, 56, 0.20) 100%);
    color: #2d6a2d;
    box-shadow: 0 2px 8px rgba(56, 120, 56, 0.25);
}

.add-slots-buy-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* =========================================================================
   CREATE CHARACTER FORM
   ========================================================================= */

.create-character-section {
    margin-bottom: 1rem;
}

.dashboard-actions-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

.create-toggle,
.domains-toggle,
.gift-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: bold;
    color: #f4f1e8;
    padding: 0.75rem 1rem;
    min-height: 2.75rem;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    text-align: center;
    letter-spacing: 0.03em;
    transition: background 0.15s;
    box-sizing: border-box;
}

.create-toggle {
    background: rgba(56, 120, 56, 0.7);
    border-right: 1px solid rgba(255,255,255,0.12);
}

.create-toggle:hover {
    background: rgba(56, 120, 56, 0.85);
}

.create-toggle.open {
    background: rgba(56, 120, 56, 0.9);
}

.domains-toggle {
    background: rgba(90, 70, 50, 0.7);
    border-right: 1px solid rgba(255,255,255,0.12);
}

.domains-toggle:hover {
    background: rgba(90, 70, 50, 0.85);
}

.domains-toggle.open {
    background: rgba(90, 70, 50, 0.9);
}

.gift-toggle {
    background: rgba(46, 125, 50, 0.7);
}

.gift-toggle:hover {
    background: rgba(46, 125, 50, 0.85);
}

.gift-toggle.open {
    background: rgba(46, 125, 50, 0.9);
}

.create-panel {
    overflow: hidden;
    background: rgba(139, 69, 19, 0.04);
    border: 1px solid var(--ink-light);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

/* =========================================================================
   DOMAINS PANEL
   ========================================================================= */

.domains-panel {
    overflow: hidden;
    background: rgba(90, 70, 50, 0.04);
    border: 1px solid var(--ink-light);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}

.domains-intro {
    font-size: 0.88rem;
    color: var(--ink);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.domains-intro.domains-steps {
    margin-bottom: 0.65rem;
}

.domains-intro.domains-note {
    font-size: 0.82rem;
    color: var(--ink-light);
    margin: 0 0 0.75rem;
}

.domains-intro.domains-note code {
    font-family: "Courier New", monospace;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
}

.domains-intro strong {
    font-family: "Courier New", monospace;
}

/* "More Info" fold for DNS explanation */
.domains-more-info {
    margin: 0 0 0.75rem;
}

.domains-more-info summary {
    font-size: 0.82rem;
    color: var(--ink-light);
    cursor: pointer;
    user-select: none;
    list-style: none;
    padding: 0.2rem 0;
}

.domains-more-info summary::-webkit-details-marker {
    display: none;
}

.domains-more-info[open] summary {
    margin-bottom: 0.35rem;
}

.domains-more-info .domains-intro {
    margin-top: 0;
}

/* ── Inline DNS record display ── */

.dns-record-table {
    border: 1px solid var(--ink-light);
    margin-bottom: 0.75rem;
    font-family: "Courier New", monospace;
    font-size: 0.88rem;
}

.dns-record-header {
    display: grid;
    grid-template-columns: 5rem 3rem 1fr;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--ink-light);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light);
}

.dns-record-row {
    display: grid;
    grid-template-columns: 5rem 3rem 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--parchment);
}

.dns-record-row + .dns-record-row {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.dns-record-row code {
    font-family: inherit;
    background: rgba(0, 0, 0, 0.04);
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    white-space: nowrap;
}

/* ── Add domain form ── */

.add-domain-form {
    margin-bottom: 1rem;
}

.domain-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.domain-input-row input {
    flex: 1;
    font-family: "Courier New", monospace;
    font-size: 0.95rem;
    padding: 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    color: var(--ink);
}

.domain-input-row input:focus {
    outline: none;
    border-color: var(--gold);
}

.domain-add-btn {
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    background: rgba(90, 70, 50, 0.1);
    color: var(--ink);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.domain-add-btn:hover:not(:disabled) {
    background: rgba(90, 70, 50, 0.2);
}

.domain-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Domain cards list ── */

.domains-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.domains-empty {
    color: var(--ink-light);
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.domain-card {
    border: 1px solid var(--ink-light);
    background: var(--parchment);
}

.domain-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.6rem 0.75rem;
}

/* Row 1: status left, actions right */
.domain-card-status {
    font-size: 0.8rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    white-space: nowrap;
    font-weight: bold;
    order: 0;
}

.domain-card-status.verified {
    background: rgba(56, 120, 56, 0.15);
    color: #386838;
    border: 1px solid rgba(56, 120, 56, 0.3);
}

.domain-card-status.unverified {
    background: rgba(180, 120, 40, 0.15);
    color: #8a6620;
    border: 1px solid rgba(180, 120, 40, 0.3);
}

.domain-card-name {
    font-family: "Courier New", monospace;
    font-size: 0.95rem;
    color: var(--ink);
    flex: 1 1 100%;
    min-width: 0;
    word-break: break-all;
    order: -1;
}

.domain-card-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-left: auto;
    order: 1;
}

.domain-card-actions button {
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: rgba(139, 69, 19, 0.06);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s;
}

.domain-card-actions button:hover:not(:disabled) {
    background: rgba(139, 69, 19, 0.14);
}

.domain-card-actions button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.domain-card-actions .domain-remove-btn {
    color: #a33;
    border-color: rgba(170, 50, 50, 0.3);
}

.domain-card-actions .domain-remove-btn:hover:not(:disabled) {
    background: rgba(170, 50, 50, 0.1);
}

/* ── Per-domain DNS instructions (inline in card) ── */

.domain-card-dns {
    border-top: 1px solid var(--ink-light);
    padding: 0.65rem 0.75rem;
    background: rgba(139, 69, 19, 0.03);
}

.domain-card-dns-header {
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--accent-dark);
    margin-bottom: 0.5rem;
}

.domain-dns-records {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.domain-dns-record {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-family: "Courier New", monospace;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    padding: 0.3rem 0.5rem;
}

.domain-dns-record-label {
    font-family: inherit;
    font-weight: bold;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-light);
    min-width: 2.2rem;
}

.domain-dns-record-value {
    flex: 1;
    word-break: break-all;
    color: var(--ink);
}

.domain-dns-copy-btn {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--ink-light);
    color: var(--ink-light);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.domain-dns-copy-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--ink);
}

.domain-dns-copy-btn.copied {
    background: rgba(56, 120, 56, 0.15);
    color: #386838;
    border-color: rgba(56, 120, 56, 0.3);
}

.domain-card-dns-note {
    font-size: 0.76rem;
    color: var(--ink-light);
    margin-top: 0.4rem;
    line-height: 1.4;
    font-style: italic;
}

/* ── Verification result banner (in card) ── */

.domain-verify-result {
    border-top: 1px solid var(--ink-light);
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.domain-verify-result.success {
    background: rgba(56, 120, 56, 0.08);
    color: #386838;
}

.domain-verify-result.failure {
    background: rgba(180, 60, 60, 0.06);
    color: #8a3030;
}

/* Domain select in create form */
.domain-select {
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment-dark);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    max-width: 200px;
}

.domain-select:focus {
    outline: none;
    border-color: var(--gold);
}

/* Domain selector inside rename / clone popup */
.popup-domain-select {
    font-family: "Courier New", monospace;
    font-size: 0.88rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment-dark);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    appearance: auto;
}

.popup-domain-select:focus {
    outline: none;
    border-color: var(--gold);
}

/* Static domain label when creator has no custom domains */
.popup-domain-fixed {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    background: var(--parchment-dark);
    border: 1px solid var(--ink-light);
    color: var(--ink-light);
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    white-space: nowrap;
}

.create-character-section h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.4rem;
}

/* Reset h2 defaults when used as toggle buttons */
.dashboard-actions-row h2 {
    font-size: inherit;
    margin: 0;
    border: none;
    padding: 0;
}

.create-form .form-row {
    margin-bottom: 1rem;
}

.create-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
    color: var(--accent-dark);
    font-size: 0.95rem;
}

.create-form .optional {
    font-weight: normal;
    color: var(--ink-light);
    font-size: 0.85rem;
}

.input-with-suffix {
    display: flex;
    align-items: stretch;
}

.input-with-suffix input {
    flex: 1;
    font-family: "Courier New", monospace;
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--ink-light);
    border-right: none;
    background: var(--parchment);
}

.input-with-suffix input:focus {
    outline: none;
    border-color: var(--gold);
}

.create-form input[type="text"]:not(.input-with-suffix input) {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
}

.create-form input[type="text"]:not(.input-with-suffix input):focus {
    outline: none;
    border-color: var(--gold);
}

.form-hint {
    font-size: 0.8rem;
    color: var(--ink-light);
    margin-top: 0.25rem;
}

.form-error {
    padding: 0.5rem 0.75rem;
    background: #fdf0f0;
    border: 1px solid #a33;
    color: #722;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.create-btn {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 2rem;
    background: rgba(139, 69, 19, 0.06);
    color: var(--ink);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    align-self: flex-start;
}

.create-btn:hover:not(:disabled) {
    background: rgba(139, 69, 19, 0.12);
    border-color: var(--ink);
}

.create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.create-submit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.create-status {
    font-size: 0.85rem;
    color: var(--ink-light);
    font-style: italic;
}

/* =========================================================================
   GIFT PROVIDER CREDENTIALS SECTION
   ========================================================================= */

.provider-creds-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ink-light);
}

.provider-creds-section > h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.4rem;
}

/* Connected state */
.provider-creds-active {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(61, 122, 74, 0.08);
    border: 1px solid rgba(61, 122, 74, 0.35);
    border-left: 4px solid #3d7a4a;
    padding: 0.65rem 1rem;
}

.provider-creds-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4a8c1c;
    margin-right: 7px;
    flex-shrink: 0;
    vertical-align: middle;
}

.provider-creds-status {
    flex: 1;
    font-size: 0.9rem;
    color: var(--ink);
}

.provider-creds-remove-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    cursor: pointer;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.provider-creds-remove-btn:hover {
    background: rgba(160, 30, 20, 0.07);
    color: #a01e14;
    border-color: #a01e14;
}

/* Disconnected / connect panel */
.provider-connect-panel {
    border: 2px solid var(--ink-light);
    background: rgba(139, 69, 19, 0.06);
    padding: 1rem 1.25rem;
}

.provider-delivering-note {
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.provider-delivering-handle {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.provider-connect-body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.provider-connect-text {
    flex: 1;
    min-width: 0;
}

.provider-connect-lead {
    font-size: 0.92rem;
    color: var(--ink);
    margin: 0 0 0.35rem;
    line-height: 1.5;
}

.provider-creds-note {
    font-size: 0.8rem;
    color: var(--ink-light);
    line-height: 1.5;
    margin: 0;
}
.provider-creds-note code {
    font-family: "Courier New", monospace;
    background: rgba(0,0,0,0.04);
    padding: 0.05rem 0.25rem;
}

.provider-connect-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.provider-connect-btn {
    padding: 0.55rem 1.25rem;
    background: var(--accent-dark);
    color: var(--parchment);
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}
.provider-connect-btn:hover { filter: brightness(1.15); }
.provider-connect-btn:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 540px) {
    .provider-connect-body { flex-direction: column; gap: 0.75rem; }
    .provider-connect-action { align-items: stretch; width: 100%; }
    .provider-connect-btn { text-align: center; }
}

/* =========================================================================
   GIFT LINKS SECTION
   ========================================================================= */

.gift-section {
    margin-bottom: 2rem;
}

.gift-section > h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.4rem;
}

/* Create toggle (+ Create Gift Link) */
.gift-create-toggle {
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--accent-dark);
    padding: 0.4rem 0;
    margin: 0 0 0.75rem;
    user-select: none;
    transition: color 0.15s;
}

.gift-create-toggle:hover {
    color: #2e7d32;
}

.gift-create-toggle.open {
    color: #2e7d32;
}

/* Create panel (folding form) */
.gift-create-panel {
    background: rgba(46, 125, 50, 0.04);
    border: 1px solid var(--ink-light);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.gift-link-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gift-form-row-pair {
    display: flex;
    gap: 0.75rem;
}

.gift-form-row-pair .form-row {
    flex: 1;
}

.gift-item-select {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    font-family: inherit;
}

.gift-create-btn {
    background: rgba(46, 125, 50, 0.8);
    color: #f4f1e8;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: background 0.15s;
    margin-top: 0.25rem;
}

.gift-create-btn:hover {
    background: rgba(46, 125, 50, 0.95);
}

.gift-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gift-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border: 1px solid var(--ink-light);
    overflow: hidden;
}

.gift-mode-btn {
    flex: 1;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: transparent;
    border: none;
    color: var(--ink-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.gift-mode-btn.active {
    background: rgba(46, 125, 50, 0.12);
    color: var(--ink);
    font-weight: bold;
}

.gift-mode-btn:hover:not(.active) {
    background: rgba(46, 125, 50, 0.05);
}

.gift-link-form .form-row {
    margin-bottom: 0.5rem;
}

.gift-link-form label {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--accent-dark);
}

.gift-link-form input[type="text"],
.gift-link-form input[type="number"],
.gift-link-form textarea,
.gift-link-form select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.88rem;
    font-family: inherit;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    box-sizing: border-box;
}

.gift-link-form textarea {
    resize: vertical;
    min-height: 4.6rem;
}

.gift-form-row-triple {
    display: flex;
    gap: 0.75rem;
}

.gift-form-row-triple .form-row {
    flex: 1;
}

.gift-uploads {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.gift-upload-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gift-upload-label {
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--accent-dark);
    margin-bottom: 0.3rem;
    text-align: center;
}

.gift-upload-label .required {
    color: #a33;
    font-weight: bold;
}

.gift-upload-zone {
    width: 100%;
    aspect-ratio: 1;
    max-width: 120px;
    border: 2px dashed var(--ink-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.gift-upload-zone:hover {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.04);
}

.gift-upload-zone.has-image {
    border-style: solid;
    border-color: #2e7d32;
}

.gift-upload-zone.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--ink-light);
    background: rgba(0,0,0,0.02);
}

.gift-row-muted {
    opacity: 0.65;
}

.gift-upload-preview {
    image-rendering: pixelated;
}

.gift-upload-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--ink-light);
    font-size: 0.75rem;
    pointer-events: none;
}

.gift-upload-prompt svg {
    opacity: 0.5;
}

/* Channel editor */
.gift-channels-area {
    border: 1px solid var(--ink-light);
    padding: 0.5rem;
    background: rgba(0,0,0,0.02);
}

.gift-channels-hint {
    font-size: 0.75rem;
    color: var(--ink-light);
    margin-bottom: 0.35rem;
}

.gift-channels-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gift-channel-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gift-channel-name {
    font-size: 0.82rem;
    font-family: monospace;
    min-width: 3rem;
    color: var(--ink);
}

.gift-channel-color {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--ink-light);
    cursor: pointer;
    background: none;
}

.gift-channel-hex {
    width: 86px;
    height: 22px;
    padding: 0 0.35rem;
    font-size: 0.74rem;
    font-family: monospace;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink);
}

.gift-channel-hex.is-invalid {
    border-color: #a33;
    color: #a33;
}

.gift-channel-remove {
    background: none;
    border: none;
    color: #a33;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}

.gift-channel-remove:hover {
    color: #c44;
}

.gift-channels-add select {
    font-size: 0.78rem;
    font-family: inherit;
    border: 1px dashed var(--ink-light);
    background: transparent;
    color: var(--ink-light);
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    margin-top: 0.25rem;
}

/* Gift link cards (roster-style) */
.gift-links-empty {
    font-size: 0.85rem;
    color: var(--ink-light);
    font-style: italic;
    padding: 1rem 0;
}

.gift-links-section-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-light);
    padding: 0.5rem 0 0.4rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ink-light);
}

.gift-links-section-header:first-child {
    margin-top: 0;
}

.gift-link-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ink-light);
    margin-bottom: 0.75rem;
    background: var(--parchment);
}

.gift-link-card.expired {
    opacity: 0.5;
    border-style: dashed;
}

.gift-link-card.depleted {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--ink-light);
}

.gift-link-card.ceased {
    opacity: 0.6;
    border-style: dashed;
    border-color: rgba(156, 39, 176, 0.4);
}

/* Icon column */
.gift-link-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    border: 1px solid var(--ink-light);
    background: rgba(0,0,0,0.03);
}

.gift-link-icon-placeholder {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1px dashed var(--ink-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-light);
    font-size: 1.2rem;
}

/* Info column */
.gift-link-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gift-link-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gift-link-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--ink);
}

.gift-link-item-id {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--ink-light);
}

.gift-link-badge {
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    background: rgba(46, 125, 50, 0.15);
    color: #2e7d32;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-align: center;
}

.gift-link-badge.expired-badge {
    background: rgba(120, 60, 30, 0.15);
    color: #78503c;
}

.gift-link-badge.depleted-badge {
    background: rgba(100, 100, 100, 0.15);
    color: #666;
}

.gift-link-badge.ceased-badge {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

.gift-link-desc {
    font-size: 0.82rem;
    color: var(--ink-light);
    line-height: 1.3;
}

.gift-link-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--ink-light);
    flex-wrap: wrap;
}

/* Progress bar */
.gift-link-progress-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.gift-link-progress {
    flex: 1;
    height: 6px;
    background: rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 200px;
}

.gift-link-progress-fill {
    height: 100%;
    background: #2e7d32;
    transition: width 0.3s;
}

.gift-link-progress-text {
    font-size: 0.75rem;
    color: var(--ink-light);
    white-space: nowrap;
}

/* URL row */
.gift-link-url-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.2rem;
}

.gift-link-url {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ink-light);
    background: rgba(0,0,0,0.05);
    color: var(--ink);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    user-select: all;
}

.gift-link-copy-btn {
    background: rgba(90, 70, 50, 0.7);
    color: #f4f1e8;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}

.gift-link-copy-btn:hover {
    background: rgba(90, 70, 50, 0.9);
}

/* QR toggle button in URL row */
.gift-link-qr-btn {
    background: rgba(44, 36, 22, 0.12);
    color: var(--ink);
    border: 1px solid var(--ink-light);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.gift-link-qr-btn:hover,
.gift-link-qr-btn.active {
    background: rgba(44, 36, 22, 0.22);
    border-color: var(--ink);
}

/* QR code pop-down */
.gift-link-qr-wrap {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--ink-light);
    width: fit-content;
}

.gift-link-qr-img {
    display: block;
    image-rendering: pixelated;
}

.gift-qr-close {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink-light);
    cursor: pointer;
    padding: 0;
}

.gift-qr-close:hover {
    color: var(--ink);
}

.gift-qr-error {
    font-size: 0.75rem;
    color: #a33;
    padding: 0.25rem;
}

/* Inline gift link editor */
.gift-link-editor {
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(44, 36, 22, 0.04);
    border: 1px solid var(--ink-light);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gift-editor-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gift-editor-row label {
    font-size: 0.78rem;
    font-weight: bold;
    color: var(--accent-dark);
    min-width: 5.5rem;
    flex-shrink: 0;
}

.gift-editor-row-full {
    flex-direction: column;
    align-items: flex-start;
}

.gift-editor-row-full label {
    min-width: unset;
}

.gift-editor-input {
    font-size: 0.82rem;
    font-family: inherit;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
}

.gift-editor-qty {
    width: 5rem;
}

.gift-editor-date {
    flex: 1;
}

.gift-editor-textarea {
    width: 100%;
    font-size: 0.78rem;
    font-family: monospace;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    resize: vertical;
    box-sizing: border-box;
}

.gift-editor-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.gift-editor-save {
    background: rgba(46, 125, 50, 0.75);
    color: #f4f1e8;
    border: none;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}

.gift-editor-save:hover:not(:disabled) {
    background: rgba(46, 125, 50, 0.9);
}

.gift-editor-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.gift-editor-cancel {
    background: transparent;
    color: var(--ink-light);
    border: 1px solid var(--ink-light);
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.gift-editor-cancel:hover {
    background: rgba(0,0,0,0.04);
    color: var(--ink);
}

/* Editor — select dropdowns share input shell, but show native chevron */
.gift-editor-select {
    cursor: pointer;
    padding-right: 1.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-light) 50%),
                      linear-gradient(135deg, var(--ink-light) 50%, transparent 50%);
    background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Editor — file replacement zones laid out like the create modal but compact */
.gift-editor-uploads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    width: 100%;
}

.gift-editor-upload-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 76px;
}

.gift-editor-upload-label {
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--accent-dark);
    text-align: center;
    white-space: nowrap;
}

.gift-upload-zone.gift-editor-upload-zone {
    width: 76px;
    height: 76px;
    max-width: 76px;
    aspect-ratio: 1;
    padding: 0;
    border-width: 2px;
}

.gift-upload-zone.gift-editor-upload-zone .gift-upload-prompt {
    font-size: 0.65rem;
    text-align: center;
    line-height: 1.2;
    gap: 0.15rem;
    padding: 0.2rem;
}

.gift-upload-zone.gift-editor-upload-zone .gift-editor-upload-action {
    font-size: 0.6rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gift-upload-zone.gift-editor-upload-zone.is-current {
    border-style: dashed;
    border-color: var(--ink-light);
}

.gift-upload-zone.gift-editor-upload-zone.is-pending {
    border-style: solid;
    border-color: #2e7d32;
    box-shadow: 0 0 0 1px rgba(46, 125, 50, 0.2) inset;
}

.gift-editor-files-hint {
    font-size: 0.7rem;
    color: var(--ink-light);
    margin-top: 0.3rem;
    width: 100%;
    line-height: 1.35;
}

.gift-editor-apply-row {
    font-size: 0.78rem;
    color: var(--ink);
    padding: 0.2rem 0;
}

.gift-editor-apply-row label {
    font-weight: normal;
    color: var(--ink);
    display: flex;
    align-items: center;
}

/* Editor — pair layout for quantity/expiry and category/kind */
.gift-editor-row-pair {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    align-items: flex-end;
}

.gift-editor-row-pair .gift-editor-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gift-editor-row-pair .gift-editor-field label {
    font-size: 0.78rem;
    font-weight: bold;
    color: var(--accent-dark);
    min-width: unset;
}

.gift-editor-row-pair .gift-editor-input {
    width: 100%;
    box-sizing: border-box;
}

/* Editor — full-width inputs for description/context/title/reservations */
.gift-editor-row-full .gift-editor-input,
.gift-editor-row-full .gift-editor-textarea {
    width: 100%;
    box-sizing: border-box;
}

.gift-editor-row-full .gift-editor-textarea {
    min-height: 2.4rem;
    resize: vertical;
}

/* Editor — default-color channel rows */
.gift-editor-channels {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.gift-editor-channel-row {
    display: grid;
    grid-template-columns: auto 4rem 2rem 1fr;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.78rem;
    color: var(--ink);
    cursor: pointer;
}

.gift-editor-channel-row input[type="checkbox"] {
    margin: 0;
}

.gift-editor-channel-name {
    font-weight: bold;
    color: var(--accent-dark);
}

.gift-editor-channel-color {
    width: 2rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--ink-light);
    background: transparent;
    cursor: pointer;
}

.gift-editor-channel-color:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gift-editor-channel-hex {
    font-family: monospace;
    font-size: 0.78rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
}

.gift-editor-channel-hex.is-invalid {
    border-color: #a33;
    background: rgba(204, 55, 55, 0.08);
}

.gift-editor-channel-hex:disabled {
    opacity: 0.4;
}

/* Actions column */
.gift-link-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-self: center;
}

.gift-link-actions .gift-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.gift-link-actions .gift-btn:hover {
    background: rgba(0,0,0,0.04);
    border-color: var(--ink);
}

.gift-link-actions .gift-btn-delete {
    color: #a33;
    border-color: rgba(170, 51, 51, 0.3);
}

.gift-link-actions .gift-btn-delete:hover {
    background: rgba(170, 51, 51, 0.08);
    border-color: #a33;
}

/* Edit + QR paired row */
.gift-action-pair {
    display: flex;
    gap: 0.3rem;
}

.gift-link-actions .gift-btn-qr {
    color: #555;
    border-color: rgba(0,0,0,0.18);
    font-size: 0.72rem;
}

.gift-link-actions .gift-btn-qrclaim {
    background: rgba(22, 101, 136, 0.07);
    color: #16658a;
    border-color: rgba(22, 101, 136, 0.3);
    font-weight: 600;
}

.gift-link-actions .gift-btn-qrclaim:hover {
    background: rgba(22, 101, 136, 0.15);
    border-color: #16658a;
}

/* Inline quantity editor */
.gift-qty-editor {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gift-qty-editor input {
    width: 60px;
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
    font-family: inherit;
    border: 1px solid var(--ink-light);
    text-align: center;
    background: rgba(255,255,255,0.05);
    color: var(--ink);
}

.gift-qty-editor button {
    font-size: 0.72rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid #2e7d32;
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
    cursor: pointer;
    font-family: inherit;
}

.gift-qty-editor button:hover {
    background: rgba(46, 125, 50, 0.2);
}

/* Share column — sits between info and main actions */
.gift-link-share-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-self: center;
}

.gift-link-share-col .gift-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.gift-link-share-col .gift-btn:hover {
    background: rgba(0,0,0,0.04);
    border-color: var(--ink);
}

.gift-btn-share {
    background: rgba(22, 101, 136, 0.06) !important;
    color: #16658a !important;
    border-color: rgba(22, 101, 136, 0.3) !important;
}
.gift-btn-share:hover {
    background: rgba(22, 101, 136, 0.14) !important;
    border-color: #16658a !important;
}

.gift-btn-recipients {
    background: rgba(100, 60, 150, 0.06) !important;
    color: #5a3a8a !important;
    border-color: rgba(100, 60, 150, 0.3) !important;
}
.gift-btn-recipients:hover {
    background: rgba(100, 60, 150, 0.14) !important;
    border-color: #5a3a8a !important;
}
.gift-btn-recipients:disabled {
    opacity: 0.35;
    cursor: default !important;
    background: transparent !important;
    color: var(--ink-light) !important;
    border-color: var(--ink-light) !important;
}

/* =========================================================================
   CLAIMANTS POPUP
   ========================================================================= */

.claimants-modal {
    min-width: 340px;
    max-width: 620px;
    width: 90vw;
}

.claimants-body {
    max-height: 55vh;
    overflow-y: auto;
    padding: 1rem;
}

.claimants-loading,
.claimants-empty {
    font-size: 0.9rem;
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 1rem 0;
}

.claimants-count {
    font-size: 0.8rem;
    color: var(--ink-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.claimants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}

.claimant-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    cursor: pointer;
    transition: background 0.12s;
}
.claimant-card:hover {
    background: rgba(44, 36, 22, 0.06);
    border-color: var(--ink);
}

.claimant-img-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid rgba(44, 36, 22, 0.15);
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.claimant-sprite {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    /* Sheet is 3 cols × 4 rows of 48×48 frames.
       background-size 300% 400% scales the sheet so 1 frame = container.
       background-position 50% 0% = column 1 (idle), row 0 (front-facing). */
    background-size: 300% 400%;
    background-position: 50% 0%;
    image-rendering: pixelated;
}

.claimant-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.claimant-placeholder {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink-light);
}

.claimant-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.claimant-handle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.claimant-ts {
    font-size: 0.7rem;
    color: var(--ink-light);
    white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 700px) {
    .gift-link-card {
        flex-wrap: wrap;
    }
    .gift-link-actions {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
    }
    .gift-form-row-triple {
        flex-direction: column;
    }
    .gift-uploads {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================================
   DASHBOARD TABS
   ========================================================================= */

.dashboard-tab-bar {
    display: flex;
    gap: 0;
    margin: 0 0 1.5rem;
    border-bottom: 2px solid var(--ink-light);
}

.dashboard-tab {
    padding: 0.6rem 1.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--ink-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.dashboard-tab:hover {
    color: var(--ink);
}

.dashboard-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.dashboard-tab-pane {
    /* no special styling needed; shown/hidden by JS */
}

/* =========================================================================
   CHARACTER ROSTER
   ========================================================================= */

.character-roster-section {
    padding-bottom: 50vh;
}

.character-roster-section h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.4rem;
}

.roster-empty {
    color: var(--ink-light);
    font-style: italic;
    padding: 1.5rem 0;
}

/* --- Character card: boxed --- */

.character-card {
    padding: 0.75rem 1rem;
    border: 1px solid var(--ink-light);
    margin-bottom: 0.75rem;
    background: var(--parchment);
}

.character-card.handed-off {
    opacity: 0.55;
    border-style: dashed;
}

.character-card.absorbed {
    opacity: 0.6;
    border-style: dashed;
    border-color: var(--accent-secondary, #7c6fa0);
}

/* Absorbed card overrides — reuses handoff box structure */
.absorbed-original-handle {
    text-decoration: line-through;
    opacity: 0.55;
    cursor: default;
}

.absorbed-details {
    border-color: rgba(124, 111, 160, 0.25);
}

.absorbed-target-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
}

.absorbed-target-link:hover {
    text-decoration: underline;
}

/* Player-deleted card — character data purged/deleted by the player */
.character-card.player-deleted {
    opacity: 0.45;
    border-style: dashed;
    border-color: var(--danger, #c0392b);
}

.player-deleted-sprite {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.sprite-deleted-overlay {
    color: var(--danger, #c0392b);
    opacity: 0.5;
}

.player-deleted-avatar .char-avatar-placeholder {
    opacity: 0.3;
}

.player-deleted-details {
    border-color: rgba(192, 57, 43, 0.2);
}

.player-deleted-label {
    color: var(--danger, #c0392b) !important;
}

.player-deleted-context {
    font-size: 0.8rem !important;
    font-style: italic;
}

.player-deleted-context a {
    color: var(--accent);
    text-decoration: none;
}

.player-deleted-context a:hover {
    text-decoration: underline;
}

/* Card inner: sprite | info | buttons */
.char-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Sprite column: sprite thumb + upload/download buttons */
.char-sprite-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 0.35rem;
}

/* Sprite: native resolution, no box */
.char-sprite-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.char-sprite-actions {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
}

.char-sprite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.2rem 0.4rem;
    background: var(--parchment);
    border: 1px solid var(--ink-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.6rem;
    color: var(--ink);
    transition: background 0.15s, border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.char-sprite-btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.char-sprite-btn:hover {
    background: var(--parchment-dark);
    border-color: var(--ink);
}

.char-sprite-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.sprite-initial {
    font-size: 1.8rem;
    color: var(--ink-light);
    opacity: 0.15;
    user-select: none;
    font-weight: bold;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sprite-thumb-canvas {
    display: block;
    image-rendering: pixelated;
    cursor: pointer;
    /* Native resolution — no width/height override, canvas dictates size */
}

.sprite-thumb-canvas.sprite-animating {
    cursor: default;
}

/* Info column: header row + systems row + meta row */
.char-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Header: avatar beside name/handle/campaign */
.char-header {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

/* Avatar — sized to match name/handle/campaign stack */
.char-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    cursor: pointer;
    align-self: center;
}

.char-avatar-wrap.has-avatar {
    cursor: pointer;
}

.char-avatar-placeholder {
    width: 52px;
    height: 52px;
    background: var(--parchment-dark);
    border: 1px dashed var(--ink-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.char-avatar-placeholder::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--ink-light);
    opacity: 0.5;
}

.char-avatar-wrap:hover .char-avatar-placeholder {
    border-color: var(--accent);
    background: rgba(139, 69, 19, 0.05);
}

.char-avatar-wrap:hover .char-avatar-placeholder::after {
    color: var(--accent);
    opacity: 1;
}

.char-avatar-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 1px solid var(--ink-light);
    display: block;
}

/* Identity: name, handle, campaign */
.char-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.char-display-name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.display-name-text {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--ink);
}

.display-name-text.name-empty {
    color: var(--ink-light);
    font-style: italic;
    font-weight: normal;
}

.char-handle-link {
    font-family: "Courier New", monospace;
    font-size: 0.82rem;
    color: var(--accent);
    text-decoration: none;
}

.char-handle-link:hover {
    text-decoration: underline;
}

.char-campaign-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.05rem;
}

.char-campaign-text {
    font-size: 0.8rem;
    color: var(--ink-light);
}

.campaign-empty {
    font-style: italic;
    opacity: 0.45;
    font-size: 0.75rem;
}

.character-card .system-badges {
    margin-top: 0.1rem;
}

/* Meta row: created date + JSON links */
.char-meta-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.15rem 0.5rem;
    margin-top: 0.05rem;
}

.char-meta {
    font-size: 0.68rem;
    color: var(--ink-light);
    opacity: 0.6;
}

.char-links {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.char-links-label {
    font-size: 0.63rem;
    color: var(--ink-light);
    opacity: 0.45;
    font-weight: 600;
    margin-right: 0.1rem;
}

.char-link {
    font-size: 0.63rem;
    color: var(--ink-light);
    text-decoration: none;
    opacity: 0.45;
}

.char-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.char-link-sep {
    font-size: 0.5rem;
    color: var(--ink-light);
    opacity: 0.25;
}

/* --- Actions: three columns --- */

.char-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    align-self: center;
}

.char-actions-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.char-btn {
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 1.3;
}

.char-btn:hover:not(:disabled) {
    background: var(--parchment-dark);
}

.char-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary large buttons — Edit Sheet & Edit Sprite */
.btn-edit {
    border-color: var(--accent);
    color: var(--parchment);
    background: var(--accent);
    font-weight: bold;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
}

.btn-edit:hover:not(:disabled) {
    background: var(--accent-dark);
    color: var(--parchment);
}

.btn-sprite {
    border-color: var(--gold);
    color: var(--ink);
    background: var(--parchment);
    font-weight: bold;
    font-size: 0.88rem;
    padding: 0.5rem 1rem;
}

.btn-sprite:hover:not(:disabled) {
    background: var(--gold);
    color: var(--ink);
}

.btn-avatar {
    border-color: var(--ink-light);
    color: var(--ink);
    background: var(--parchment);
    font-size: 0.78rem;
    padding: 0.35rem 1rem;
}

.btn-avatar:hover:not(:disabled) {
    background: var(--parchment-dark);
    border-color: var(--ink);
}

.btn-secondary {
    border-color: var(--ink-light);
    color: var(--ink-light);
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
}

.btn-secondary:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink);
}

.btn-delete {
    border-color: #a33;
    color: #a33;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
}

.btn-delete:hover:not(:disabled) {
    background: #a33;
    color: var(--parchment);
}

.btn-reclaim {
    border-color: #2a7d4f;
    color: #2a7d4f;
    font-size: 0.72rem;
    padding: 0.2rem 0.5rem;
}

.btn-reclaim:hover:not(:disabled) {
    background: #2a7d4f;
    color: var(--parchment);
}

.handle-reclaimed-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: #2a7d4f;
    border: 1px solid #2a7d4f;
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    margin-top: 0.15rem;
    opacity: 0.85;
}

/* =========================================================================
   HANDOFF DETAILS  (mirrors pending box style)
   ========================================================================= */

.char-handoff-details {
    padding: 0.75rem 1rem;
    background: rgba(100, 100, 100, 0.06);
    border: 1px solid rgba(100, 100, 100, 0.2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    align-self: flex-start;
}

.handoff-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.handoff-label {
    font-size: 0.7rem;
    color: var(--ink-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.handoff-email {
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.handoff-date {
    font-size: 0.72rem;
    color: var(--ink-light);
    opacity: 0.7;
}

.handoff-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.btn-view-sheet {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--ink-light);
    color: var(--ink-light);
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.btn-view-sheet:hover {
    background: var(--ink-light);
    color: var(--parchment);
}

/* =========================================================================
   PENDING HANDOFF DETAILS
   ========================================================================= */

.char-pending-details {
    padding: 0.75rem 1rem;
    background: rgba(184, 134, 11, 0.06);
    border: 1px solid rgba(184, 134, 11, 0.2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    align-self: flex-start;
}

.pending-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pending-label {
    font-size: 0.7rem;
    color: #b8860b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pending-email {
    font-size: 0.85rem;
    color: var(--ink);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-claim-link-box {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--parchment-dark);
    border: 1px solid var(--ink-light);
    padding: 0.2rem 0.4rem 0.2rem 0.5rem;
    border-radius: 3px;
    margin-top: 0.1rem;
}

.pending-claim-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.pending-copy-link-btn {
    background: var(--accent, #5a4a3a);
    color: var(--parchment);
    border: none;
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s;
}

.pending-copy-link-btn:hover {
    opacity: 0.8;
}

.pending-date {
    font-size: 0.72rem;
    color: var(--ink-light);
    opacity: 0.7;
}

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

.btn-cancel-handoff {
    background: transparent;
    border: 1px solid #b8860b;
    color: #b8860b;
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.15s, color 0.15s;
}

.btn-cancel-handoff:hover {
    background: #b8860b;
    color: var(--parchment);
}

.btn-cancel-handoff:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =========================================================================
   SECTION HEADERS
   ========================================================================= */

.roster-section-header {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--ink-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.roster-section-header:first-child {
    margin-top: 0;
}

/* =========================================================================
   FILTER / SEARCH BAR
   ========================================================================= */

.roster-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.roster-search {
    flex: 1;
    min-width: 140px;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    color: var(--ink);
}

.roster-search:focus {
    outline: none;
    border-color: var(--gold);
}

.roster-search::placeholder {
    color: var(--ink-light);
    opacity: 0.6;
}

.roster-campaign-filter,
.roster-sort {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--ink-light);
    background: var(--parchment);
    color: var(--ink);
    cursor: pointer;
}

.roster-campaign-filter:focus,
.roster-sort:focus {
    outline: none;
    border-color: var(--gold);
}

.roster-no-results {
    color: var(--ink-light);
    font-style: italic;
    text-align: center;
    padding: 1.5rem 0;
}

/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 768px) {
    .creator-panel {
        padding: 1rem;
    }

    .dashboard-header {
        flex-direction: column;
    }

    .create-toggle,
    .domains-toggle,
    .gift-toggle {
        font-size: 0.82rem;
        padding: 0.65rem 0.5rem;
        min-height: 2.5rem;
    }

    .create-panel,
    .domains-panel,
    .gift-panel {
        padding: 0.75rem 0.75rem;
    }

    .gift-form-row-pair {
        flex-direction: column;
        gap: 0.5rem;
    }

    .input-with-suffix {
        flex-direction: column;
    }

    .input-with-suffix input {
        border-right: 1px solid var(--ink-light);
        border-bottom: none;
    }

    .domain-select {
        max-width: none;
        border-top: none;
    }

    .domain-card-header {
        gap: 0.35rem 0.5rem;
    }

    .domain-input-row {
        flex-direction: column;
    }

    .dns-record-table {
        font-size: 0.8rem;
    }

    .dns-record-header,
    .dns-record-row {
        grid-template-columns: 4.5rem 2.5rem 1fr;
        gap: 0.3rem;
    }

    .domain-dns-record {
        flex-wrap: wrap;
        font-size: 0.76rem;
    }

    /* Character cards: sprite col beside info, actions below */
    .char-card-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Sprite col stays vertical: sprite thumb above upload above download */
    .char-sprite-col {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        flex-shrink: 0;
    }

    .char-sprite-actions {
        flex-direction: column;
        width: 100%;
    }

    /* Info takes remaining space beside sprite */
    .char-info {
        flex: 1;
        min-width: 0;
    }

    .char-avatar-wrap,
    .char-avatar-placeholder,
    .char-avatar-img {
        width: 40px;
        height: 40px;
    }

    .char-header {
        align-items: center;
    }

    /* Actions: full-width block below sprite+info */
    .char-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
    }

    .char-actions-col {
        display: contents;
    }

    .char-actions-col .char-btn {
        width: 100%;
    }

    /* Edit Sheet and Edit Sprite both span full width and are taller */
    .char-actions-col:first-child .btn-edit,
    .char-actions-col:first-child .btn-sprite {
        grid-column: 1 / -1;
        padding: 0.6rem 1rem;
        font-size: 0.92rem;
    }

    /* Handoff / pending details: full-width row below sprite+info */
    .char-handoff-details,
    .char-pending-details {
        width: 100%;
        align-self: stretch;
    }

    .char-meta-row {
        flex-wrap: wrap;
    }

    .roster-filter-bar {
        flex-direction: column;
    }

    .roster-search,
    .roster-campaign-filter,
    .roster-sort {
        width: 100%;
    }

}

@media (max-width: 480px) {
    .creator-panel {
        padding: 0.75rem;
    }

    .create-panel,
    .domains-panel,
    .gift-panel {
        padding: 0.6rem 0.5rem;
    }

    .create-toggle,
    .domains-toggle,
    .gift-toggle {
        font-size: 0.75rem;
        padding: 0.6rem 0.4rem;
        min-height: 2.4rem;
    }

    .create-form label {
        font-size: 0.88rem;
    }

    .create-form input[type="text"],
    .input-with-suffix input {
        font-size: 0.9rem;
        padding: 0.4rem;
    }

    .create-btn {
        width: 100%;
        text-align: center;
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .domains-intro {
        font-size: 0.82rem;
    }

    .dns-record-header,
    .dns-record-row {
        grid-template-columns: 3.5rem 2rem 1fr;
        padding: 0.25rem 0.4rem;
        font-size: 0.72rem;
        gap: 0.2rem;
    }

    .domain-input-row input {
        font-size: 0.85rem;
        padding: 0.4rem;
    }

    .domain-add-btn {
        font-size: 0.82rem;
        padding: 0.4rem 0.75rem;
    }

    /* Character cards tighter */
    .character-card {
        padding: 0.5rem 0.6rem;
    }

    .char-header {
        gap: 0.4rem;
    }

    .display-name-text {
        font-size: 0.95rem;
    }

    .char-handle-link {
        font-size: 0.75rem;
    }

    .char-btn {
        font-size: 0.72rem;
        padding: 0.25rem 0.4rem;
    }

    .btn-edit,
    .btn-sprite {
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
    }

    .char-meta-row {
        gap: 0.1rem 0.35rem;
    }

    .char-meta {
        font-size: 0.62rem;
    }

    .char-link,
    .char-links-label {
        font-size: 0.58rem;
    }
}

/* =========================================================================
   HANDOFF METHOD BUTTONS (popup)
   ========================================================================= */

.handoff-method-btn {
    flex: 1;
    min-width: 200px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--ink, #2c2416);
    background: rgba(44, 36, 22, 0.06);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    border-radius: 6px;
    white-space: nowrap;
}

.handoff-method-btn:hover {
    background: rgba(44, 36, 22, 0.12);
    border-color: var(--gold, #c9a227);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.handoff-method-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.handoff-method-btn:hover svg {
    opacity: 1;
}

.handoff-method-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #2c2416);
    line-height: 1.2;
}

.handoff-method-sub {
    font-size: 0.78rem;
    opacity: 0.55;
    color: var(--ink, #2c2416);
    line-height: 1.3;
}

/* =========================================================================
   SNAPSHOT TAB — DID/handle filter engine (@rpg.actor only)
   ========================================================================= */

#tab-snapshot {
    padding: 1.5rem 1rem;
}

.snapshot-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.snapshot-section h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink, #2c2416);
    margin: 0 0 0.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 0.35rem;
}

/* Collapsible groups */
.snapshot-group {
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.snapshot-group > summary {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink, #2c2416);
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,0.03);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.snapshot-group > summary::before {
    content: '▶';
    font-size: 0.65rem;
    transition: transform 0.15s;
    display: inline-block;
}

.snapshot-group[open] > summary::before {
    transform: rotate(90deg);
}

.snapshot-group-body {
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Individual filter row */
.snapshot-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.snapshot-row label {
    font-size: 0.82rem;
    color: var(--ink, #2c2416);
    min-width: 120px;
    flex-shrink: 0;
}

.snapshot-row label.snp-wide {
    min-width: 170px;
}

/* Axis/range groups inside stats */
.snapshot-axis-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.snapshot-axis-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.snapshot-axis-row label {
    font-size: 0.78rem;
    color: var(--ink-light, #6b5a3a);
    min-width: 90px;
    flex-shrink: 0;
    font-style: italic;
}

/* Input styles */
.snapshot-num {
    width: 68px;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    background: #fff;
    color: var(--ink, #2c2416);
}

.snapshot-text {
    flex: 1;
    min-width: 120px;
    max-width: 260px;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    background: #fff;
    color: var(--ink, #2c2416);
}

.snapshot-select-inline {
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    background: #fff;
    color: var(--ink, #2c2416);
}

.snapshot-colour {
    width: 44px;
    height: 30px;
    padding: 0.1rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    cursor: pointer;
}

.snapshot-dash {
    font-size: 0.82rem;
    color: var(--ink-light, #6b5a3a);
}

/* Actions bar */
.snapshot-actions-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0;
}

.snapshot-run-btn {
    padding: 0.55rem 1.4rem;
    background: var(--accent, #c9a227);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
}
.snapshot-run-btn:hover { background: var(--accent-dark, #a07d10); }
.snapshot-run-btn:disabled { opacity: 0.6; cursor: wait; }

.snapshot-reset-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--ink, #2c2416);
    font-size: 0.85rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.snapshot-reset-btn:hover { background: rgba(0,0,0,0.06); }

/* Results area */
.snapshot-results {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.snapshot-results-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.snapshot-count {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink, #2c2416);
    flex: 1;
}

.snapshot-format-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.snapshot-format-row label {
    font-size: 0.82rem;
    color: var(--ink-light, #6b5a3a);
}

.snapshot-copy-btn,
.snapshot-dl-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    background: transparent;
    color: var(--ink, #2c2416);
    cursor: pointer;
    transition: background 0.12s;
}
.snapshot-copy-btn:hover,
.snapshot-dl-btn:hover { background: rgba(0,0,0,0.07); }

.snapshot-output {
    width: 100%;
    box-sizing: border-box;
    min-height: 180px;
    max-height: 420px;
    padding: 0.55rem 0.65rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 6px;
    background: #fff;
    color: var(--ink, #2c2416);
    resize: vertical;
}

.snapshot-cache-note {
    font-size: 0.76rem;
    color: var(--ink-light, #6b5a3a);
    opacity: 0.75;
    font-style: italic;
}

/* Snapshot v2 — flags row, stats nav, axis grid, date grid, subsection label */

.snapshot-flags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.25rem 0;
}

.snapshot-flags-row label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--ink, #2c2416);
    cursor: pointer;
}

.snapshot-subsection-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-light, #6b5a3a);
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.snapshot-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1rem;
}

/* Stats sub-nav */
.snapshot-stats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.snp-sys-btn {
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 5px;
    background: transparent;
    color: var(--ink-light, #6b5a3a);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.snp-sys-btn:hover {
    background: rgba(0,0,0,0.06);
    color: var(--ink, #2c2416);
}

.snp-sys-btn.active {
    background: var(--accent, #c9a227);
    border-color: var(--accent, #c9a227);
    color: #fff;
}

/* Axis grid — 2-column */
.snapshot-axis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
    margin-top: 0.4rem;
}

.snapshot-axis-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.snapshot-axis-item > span:first-child {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-light, #6b5a3a);
    min-width: 52px;
    flex-shrink: 0;
}

/* =========================================================================
   CREATORS TAB — @rpg.actor account overview
   ========================================================================= */

.creators-section {
    padding: 1.5rem 1rem;
}

.creators-intro {
    margin: 0.25rem 0 0.75rem;
    color: var(--ink-light, #6b5a3a);
    font-size: 0.9rem;
}

.creators-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.creators-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.creators-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.creators-btn {
    padding: 0.38rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid var(--ink-light, #6b5a3a);
    background: var(--ink-light, #6b5a3a);
    color: #fff;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}
.creators-btn:hover { filter: brightness(1.12); }
.creators-btn:disabled { opacity: 0.55; cursor: default; }

.creators-btn-secondary {
    background: transparent;
    color: var(--ink-light, #6b5a3a);
}
.creators-btn-secondary:hover { background: rgba(0,0,0,0.06); filter: none; }

.creators-search {
    padding: 0.35rem 0.55rem;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 0;
    background: rgba(255,255,255,0.75);
    color: var(--ink, #2c2416);
    width: 180px;
}

.creators-filter {
    padding: 0.35rem 0.45rem;
    font-size: 0.82rem;
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 0;
    background: rgba(255,255,255,0.75);
    color: var(--ink, #2c2416);
}

.creators-count {
    font-size: 0.82rem;
    color: var(--ink-light, #6b5a3a);
    white-space: nowrap;
}

.creators-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 0;
    background: rgba(255,255,255,0.55);
}

.creators-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
}

.creators-table th,
.creators-table td {
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    text-align: left;
    font-size: 0.84rem;
    color: var(--ink, #2c2416);
}

/* Center numeric columns 2–6 (Slots, Used, Chars, Items, Domains) and 9 (Edit) */
.creators-table th:nth-child(2),
.creators-table td:nth-child(2),
.creators-table th:nth-child(3),
.creators-table td:nth-child(3),
.creators-table th:nth-child(4),
.creators-table td:nth-child(4),
.creators-table th:nth-child(5),
.creators-table td:nth-child(5),
.creators-table th:nth-child(6),
.creators-table td:nth-child(6),
.creators-table th:nth-child(7),
.creators-table td:nth-child(7),
.creators-table th:nth-child(9),
.creators-table td:nth-child(9) {
    text-align: center;
}

/* Keep text-heavy columns left aligned */
.creators-table th:nth-child(1),
.creators-table td:nth-child(1),
.creators-table th:nth-child(8),
.creators-table td:nth-child(8) {
    text-align: left;
}

.creators-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-light, #6b5a3a);
    background: rgba(0,0,0,0.03);
    white-space: nowrap;
}

.creators-th-sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease;
}
.creators-th-sortable:hover { background: rgba(0,0,0,0.06); }
.creators-th-sortable[data-sort-dir="asc"] {
    background: rgba(48, 140, 93, 0.14);
    color: #1f6a45;
}
.creators-th-sortable[data-sort-dir="desc"] {
    background: rgba(191, 143, 41, 0.16);
    color: #7b5c17;
}

.creators-table tbody tr:hover {
    background: rgba(0,0,0,0.025);
}

.creators-handle {
    font-weight: 700;
}

.creators-edit-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(0,0,0,0.2);
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    color: var(--ink-light, #6b5a3a);
    white-space: nowrap;
}
.creators-edit-btn:hover { background: rgba(0,0,0,0.06); }

.creators-status {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: lowercase;
}

.creators-status-ok {
    background: rgba(40, 167, 69, 0.14);
    color: #1f7a35;
}

.creators-status-pending {
    background: rgba(201, 162, 39, 0.14);
    color: #7a5f12;
}

.creators-empty {
    text-align: center;
    color: var(--ink-light, #6b5a3a);
    padding: 1rem;
}

.creators-provider { font-size: 0.82rem; }
.creators-provider-set { font-weight: 600; color: var(--ink, #2c2416); }
.creators-provider-none { color: var(--ink-light, #6b5a3a); opacity: 0.5; font-style: italic; }
.creators-joined { font-size: 0.8rem; color: var(--ink-light, #6b5a3a); white-space: nowrap; }

/* ── Creators modal ───────────────────────────────────────────────────── */
.creators-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.creators-modal {
    background: var(--paper, #f6efe3);
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    padding: 1.5rem 1.75rem;
    min-width: 320px;
    max-width: 440px;
    width: 90vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.creators-modal h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}

.creators-modal-sub {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--ink-light, #6b5a3a);
}

.creators-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.9rem 0 0.75rem;
}

.creators-modal-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-light, #6b5a3a);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.creators-modal-check {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--ink-light, #6b5a3a);
}

.creators-modal-input {
    padding: 0.38rem 0.55rem;
    font-size: 0.9rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(255,255,255,0.8);
    color: var(--ink, #2c2416);
    font-family: inherit;
}

.creators-modal-error {
    margin-bottom: 0.5rem;
}

.creators-modal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* =============================================================================
   BSKY UNLOCKS — admin tab UI
   ============================================================================= */

.unlock-section { margin-bottom: 2rem; }
.unlock-section > h2 {
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--ink-light);
    padding-bottom: 0.4rem;
}
.unlock-intro {
    font-size: 0.9rem;
    color: var(--ink-light);
    margin: 0 0 1rem;
    line-height: 1.45;
}

.unlock-create-toggle {
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--accent-dark);
    padding: 0.4rem 0;
    margin: 0 0 0.75rem;
    user-select: none;
    transition: color 0.15s;
}
.unlock-create-toggle:hover,
.unlock-create-toggle.open { color: #6a3fb8; }

.unlock-create-panel {
    background: rgba(106, 63, 184, 0.05);
    border: 1px solid var(--ink-light);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.unlock-form { display: flex; flex-direction: column; gap: 0.5rem; }
.unlock-form .form-row { margin-bottom: 0.5rem; }
.unlock-form label {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--accent-dark);
}
.unlock-form input[type="text"],
.unlock-form input[type="number"],
.unlock-form textarea,
.unlock-form select {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.88rem;
    font-family: inherit;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.05);
    color: var(--ink);
    box-sizing: border-box;
}
.unlock-form textarea { resize: vertical; min-height: 3.6rem; }

.unlock-form-row-pair { display: flex; gap: 0.75rem; }
.unlock-form-row-pair .form-row { flex: 1; }

.unlock-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    margin-top: 0.25rem;
}
.unlock-condition-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
}
.unlock-condition-chip input { margin: 0; }
.unlock-condition-chip:has(input:checked) {
    background: rgba(106, 63, 184, 0.14);
    border-color: #6a3fb8;
}

.unlock-create-btn {
    background: rgba(106, 63, 184, 0.85);
    color: #f4f1e8;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: background 0.15s;
    margin-top: 0.25rem;
    align-self: flex-start;
}
.unlock-create-btn:hover { background: rgba(106, 63, 184, 1); }
.unlock-create-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.unlock-rules-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.unlock-rules-empty {
    color: var(--ink-light);
    font-style: italic;
    padding: 0.75rem 0;
}
.unlock-rule-card {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 0.85rem;
    align-items: flex-start;
    border: 1px solid var(--ink-light);
    background: rgba(255,255,255,0.03);
    padding: 0.7rem 0.9rem;
}
.unlock-rule-card.disabled {
    opacity: 0.55;
    background: rgba(0,0,0,0.04);
}
.unlock-rule-icon {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--ink-light);
    object-fit: contain;
}
.unlock-rule-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-light);
    font-size: 1.4rem;
}
.unlock-rule-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.unlock-rule-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.unlock-rule-title { font-size: 1rem; color: var(--ink); }
.unlock-rule-cap {
    font-size: 0.8rem;
    color: var(--ink-light);
    background: rgba(0,0,0,0.06);
    padding: 0.05rem 0.4rem;
    border-radius: 2px;
}
.unlock-rule-conds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.unlock-cond-tag {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--ink-light);
    background: rgba(106, 63, 184, 0.1);
    color: var(--accent-dark);
}
.unlock-cond-tag.unlock-cond-like { background: rgba(220, 70, 110, 0.12); }
.unlock-cond-tag.unlock-cond-repost { background: rgba(70, 160, 90, 0.12); }
.unlock-cond-tag.unlock-cond-reply { background: rgba(70, 130, 200, 0.12); }
.unlock-rule-meta {
    font-size: 0.78rem;
    color: var(--ink-light);
    word-break: break-all;
}
.unlock-rule-meta a { color: inherit; text-decoration: underline dotted; }
.unlock-rule-meta code {
    background: rgba(0,0,0,0.06);
    padding: 0.05rem 0.3rem;
    font-size: 0.75rem;
}
.unlock-rule-note {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--ink-light);
}
.unlock-rule-actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
}
.unlock-rule-toggle,
.unlock-rule-delete {
    background: transparent;
    border: 1px solid var(--ink-light);
    color: var(--ink);
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.unlock-rule-toggle:hover { background: rgba(106, 63, 184, 0.14); color: #6a3fb8; }
.unlock-rule-delete:hover { background: rgba(180, 50, 60, 0.12); color: #b4323c; border-color: #b4323c; }

/* ── Unlocks: per-kind collapsible sections ───────────────────────────── */
.unlock-kind-block {
    border: 1px solid var(--ink-light);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: rgba(255,255,255,0.4);
    overflow: hidden;
}
.unlock-kind-block[open] {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.unlock-kind-summary {
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    transition: background 0.15s;
}
.unlock-kind-summary::-webkit-details-marker { display: none; }
.unlock-kind-summary:hover { background: rgba(106, 63, 184, 0.06); }
.unlock-kind-summary::after {
    content: '▸';
    margin-left: auto;
    color: var(--ink-light);
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.unlock-kind-block[open] > .unlock-kind-summary::after { transform: rotate(90deg); }
.unlock-kind-summary strong { color: #6a3fb8; font-weight: 600; }
.unlock-kind-desc {
    color: var(--ink-light);
    font-size: 0.8rem;
    font-weight: normal;
    margin-left: 0.35rem;
}
.unlock-kind-body {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--ink-faint, rgba(0,0,0,0.08));
    background: rgba(255,255,255,0.5);
}
.unlock-kind-body .unlock-form { margin-top: 0; }
.unlock-shared-fields {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--ink-faint, rgba(0,0,0,0.1));
}
.unlock-rules-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-faint, rgba(0,0,0,0.08));
    padding-bottom: 0.3rem;
}
.unlock-rule-card {
    border-left-width: 3px;
    border-left-color: var(--unlock-accent, #6a3fb8);
}
.unlock-rule-kind-badge {
    display: inline-block;
    background: var(--unlock-accent, #6a3fb8);
    color: #fff;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    margin-right: 0.45rem;
    vertical-align: 1px;
    font-weight: 600;
}

/* ── Unlocks: distinct kind colors on collapsibles ────────────────────── */
.unlock-kind-block[data-kind="bsky-replies"]    { --unlock-accent: #1d8cef; }
.unlock-kind-block[data-kind="bsky-content"]    { --unlock-accent: #0a4f9c; }
.unlock-kind-block[data-kind="bsky-followship"] { --unlock-accent: #7c3aed; }
.unlock-kind-block[data-kind="record-usage"]    { --unlock-accent: #a05c1f; }
.unlock-kind-block[data-kind="applied-labels"]  { --unlock-accent: #b03a7e; }
.unlock-kind-block[data-kind="pds-origin"]      { --unlock-accent: #0f766e; }
.unlock-kind-block[data-kind="handle-domain"]   { --unlock-accent: #16a34a; }
.unlock-kind-block[data-kind="timeboxed"]       { --unlock-accent: #d97706; }
.unlock-kind-block[data-kind="list-membership"] { --unlock-accent: #dc2626; }

.unlock-kind-block { border-left: 3px solid var(--unlock-accent, #6a3fb8); }
.unlock-kind-summary strong { color: var(--unlock-accent, #6a3fb8); }
.unlock-kind-summary:hover  { background: color-mix(in srgb, var(--unlock-accent, #6a3fb8) 8%, transparent); }
.unlock-kind-block[open]    { box-shadow: 0 1px 3px color-mix(in srgb, var(--unlock-accent, #6a3fb8) 20%, transparent); }

/* ── Item showcase preview ────────────────────────────────────────────── */
.unlock-item-showcase {
    margin-top: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--ink-faint, rgba(0,0,0,0.1));
    border-radius: 5px;
    background: rgba(255,255,255,0.7);
    display: flex;
    gap: 0.7rem;
    align-items: center;
}
.unlock-item-showcase[hidden] { display: none; }
.unlock-item-showcase-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: rgba(0,0,0,0.04);
    border-radius: 4px;
    image-rendering: pixelated;
}
.unlock-item-showcase-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.unlock-item-showcase-title { font-size: 0.95rem; }
.unlock-item-showcase-cat   { font-size: 0.75rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.04em; }
.unlock-item-showcase-desc  { font-size: 0.8rem; color: var(--ink-light); white-space: normal; }

/* ── Active / Prior list headers + sort selector ─────────────────────── */
.unlock-rules-section { margin-top: 1.5rem; }
.unlock-rules-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink-faint, rgba(0,0,0,0.08));
    padding-bottom: 0.3rem;
    margin-bottom: 0.5rem;
}
.unlock-rules-header .unlock-rules-heading {
    margin: 0;
    border: none;
    padding: 0;
}
.unlock-sort-label {
    font-size: 0.78rem;
    color: var(--ink-light);
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.unlock-sort-label select {
    font-size: 0.78rem;
    padding: 0.15rem 0.35rem;
    font-family: inherit;
}
.unlock-rule-card.disabled { opacity: 0.55; }

/* ── Per-kind Create button (scoped inside collapsible) ──────────────── */
.unlock-kind-block .unlock-create-btn {
    background: var(--unlock-accent, #6a3fb8);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--unlock-accent, #6a3fb8) 70%, #000);
}
.unlock-kind-block .unlock-create-btn:hover {
    background: color-mix(in srgb, var(--unlock-accent, #6a3fb8) 85%, #000);
}

/* ── How-it-works explainer ──────────────────────────────────────────── */
.unlock-help {
    margin: 0.25rem 0 0.85rem;
    border: 1px dashed var(--ink-faint, rgba(0,0,0,0.18));
    border-radius: 5px;
    background: rgba(255,255,255,0.4);
}
.unlock-help > summary {
    cursor: pointer;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    color: var(--ink-light);
    list-style: none;
}
.unlock-help > summary::-webkit-details-marker { display: none; }
.unlock-help > summary::before { content: 'ⓘ '; margin-right: 0.25rem; color: var(--accent, #6a3fb8); }
.unlock-help[open] > summary { border-bottom: 1px solid var(--ink-faint, rgba(0,0,0,0.1)); }
.unlock-help-list {
    margin: 0;
    padding: 0.55rem 0.85rem 0.65rem 1.6rem;
    font-size: 0.78rem;
    color: var(--ink-light);
    line-height: 1.45;
}
.unlock-help-list li { margin: 0.15rem 0; }
.unlock-help-list code { background: rgba(0,0,0,0.06); padding: 0.05rem 0.3rem; font-size: 0.72rem; }