/* Dashboard & Protected Pages Styles */

/* Flash Messages */
.flash-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flash {
    min-width: 300px;
    max-width: 500px;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.flash-success {
    background: rgba(10, 30, 20, 0.95);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #34d399;
}

.flash-error {
    background: rgba(30, 10, 10, 0.95);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: #f87171;
}

.flash-warning {
    background: rgba(30, 25, 10, 0.95);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.flash-info {
    background: rgba(15, 15, 35, 0.95);
    border: 1px solid rgba(233,201,126, 0.4);
    color: #e9c97e;
}

.flash-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.flash-close:hover {
    opacity: 1;
}

/* =============================================
   CONFIRM MODAL — Reusable
   ============================================= */
.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    padding: 1.5rem;
}

.confirm-modal-backdrop.visible {
    opacity: 1;
}

.confirm-modal {
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 2rem 2.2rem 1.6rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-modal-backdrop.visible .confirm-modal {
    transform: translateY(0) scale(1);
}

.confirm-modal-title {
    font-family: var(--heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

.confirm-modal-msg {
    font-size: 0.92rem;
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 1.4rem;
}

.confirm-modal-field {
    margin: 0 0 1.4rem;
}

.confirm-modal-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

.confirm-modal-input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.confirm-modal-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.confirm-modal-input:focus {
    outline: none;
    border-color: rgba(234,210,155, 0.6);
    background: rgba(255, 255, 255, 0.06);
}

.confirm-modal-error {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: #fca5a5;
    line-height: 1.4;
}

.confirm-modal-link {
    display: inline-block;
    margin: 0 0 1.2rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-bright, #ead29b);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

.confirm-modal-link:hover {
    text-decoration: underline;
}

.confirm-modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.confirm-modal-btn {
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-modal-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.confirm-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.confirm-modal-primary {
    background: var(--grad);
    color: #fff;
}

.confirm-modal-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(212,169,87, 0.35);
}

.confirm-modal-danger {
    background: #ef4444;
    color: #fff;
}

.confirm-modal-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
}

/* --- Upgrade (plan change) modal --- */
.pc-modal {
    max-width: 460px;
}

.pc-unlock {
    background: rgba(212, 169, 87, 0.06);
    border: 1px solid rgba(212, 169, 87, 0.18);
    border-radius: 12px;
    padding: 0.95rem 1.1rem;
    margin: 0 0 1.1rem;
}

.pc-unlock-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #d4a957);
    margin: 0 0 0.65rem;
}

.pc-unlock ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pc-unlock li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #fff;
}

.pc-unlock li svg {
    flex-shrink: 0;
}

.pc-billing {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.8rem 0.95rem;
    margin: 0 0 1.4rem;
}

.pc-billing strong {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 480px) {
    .confirm-modal {
        padding: 1.6rem 1.5rem 1.3rem;
    }
    .confirm-modal-actions {
        flex-direction: column-reverse;
    }
    .confirm-modal-btn {
        width: 100%;
    }
}

/* =============================================
   DASHBOARD — Premium UI
   ============================================= */
.dash {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 5rem 0 5rem;
    min-height: 100vh;
}

/* Animated background gradient blob */
.dash-bg {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 600px;
    background: rgba(212,169,87,0.06);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    /* GPU: was `animation: dashBgFloat 12s infinite` — continuously translating a
       1200x600 blur(60px) layer kept the dashboard compositor busy every frame.
       A static blur layer composites once and idles; the subtle 20px drift isn't
       worth the cost. */
}

.dash > *:not(.dash-bg) {
    position: relative;
    z-index: 1;
}

/* ---------- Hero ---------- */
.dash-hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3.5rem;
    animation: dashFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-signout {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-3);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    transition: all 0.2s;
}

/* Mobile-only dashboard elements hidden on desktop */
.dash-signout-mobile,
.dash-stat-studio-mobile,
.dash-action-signout-mobile { display: none; }

.dash-signout:hover {
    color: #f87171;
    border-color: rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.06);
}

@keyframes dashFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.dash-avatar {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #d4a957;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 32px rgba(212,169,87, 0.3);
}

.dash-avatar-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(212,169,87, 0.3);
    animation: dashRingPulse 3s ease-in-out infinite;
}

@keyframes dashRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

.dash-greet {
    flex: 1;
    min-width: 0;
}

.dash-greet-time {
    display: block;
    font-size: 0.95rem;
    color: var(--text-3);
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.dash-greet h1 {
    font-family: var(--heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 0.9rem;
    color: #ead29b;
}

.dash-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
}

.dash-badge svg {
    width: 11px;
    height: 11px;
}

.dash-badge-beta {
    background: rgba(212,169,87, 0.12);
    border: 1px solid rgba(212,169,87, 0.3);
    color: #e9c97e;
}

.dash-badge-pre {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: #6ee7b7;
}

.dash-badge-plan {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-2);
}

/* ---------- Stats row ---------- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
    animation: dashFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.dash-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-stat:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212,169,87, 0.2);
    transform: translateY(-2px);
}

.dash-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(212,169,87, 0.1);
    border: 1px solid rgba(212,169,87, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e9c97e;
    flex-shrink: 0;
}

.dash-stat-content {
    flex: 1;
    min-width: 0;
}

.dash-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.dash-stat-value {
    font-family: var(--heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Cards ---------- */
.dash-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 2rem 2.2rem;
    backdrop-filter: blur(12px);
    margin-bottom: 1.5rem;
}

.dash-card-head {
    margin-bottom: 2rem;
}

.dash-card-head h2 {
    font-family: var(--heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.dash-card-head p {
    color: var(--text-3);
    font-size: 0.88rem;
    margin: 0;
}

/* ---------- Journey timeline ---------- */
.dash-journey {
    position: relative;
    animation: dashFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.dash-journey-line {
    position: absolute;
    left: calc(2.2rem + 13px);
    top: 6.5rem;
    bottom: 2rem;
    width: 2px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.dash-journey-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--grad);
    border-radius: 2px;
    transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(212,169,87, 0.5);
}

.dash-journey-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dash-jstep {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    position: relative;
}

.dash-jstep-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-family: var(--heading);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.dash-jstep.done .dash-jstep-marker {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 18px rgba(212,169,87, 0.5);
}

.dash-jstep.active .dash-jstep-marker {
    background: rgba(212,169,87, 0.15);
    border-color: rgba(212,169,87, 0.5);
    color: #e9c97e;
}

.dash-jstep-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e9c97e;
    position: relative;
}
/* GPU: the pulse ring used an animated box-shadow, which forces a repaint every
   frame. A scale+opacity pseudo-element does the same look but is GPU-composited
   (no per-frame repaint). */
.dash-jstep-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(233,201,126, 0.5);
    animation: dashPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes dashPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3.2); opacity: 0; }
}

.dash-jstep-text {
    flex: 1;
    padding-top: 0.15rem;
}

.dash-jstep-text h3 {
    font-family: var(--heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.2rem;
}

.dash-jstep:not(.done):not(.active) .dash-jstep-text h3 {
    color: var(--text-2);
}

.dash-jstep-text p {
    font-size: 0.82rem;
    color: var(--text-3);
    margin: 0;
    line-height: 1.5;
}

.dash-jstep-btn {
    margin-top: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: rgba(212,169,87, 0.12);
    border: 1px solid rgba(212,169,87, 0.3);
    border-radius: 8px;
    color: var(--accent-bright);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.dash-jstep-btn:hover {
    background: rgba(212,169,87, 0.2);
    border-color: rgba(212,169,87, 0.55);
    color: var(--accent-2);
}

.dash-jstep-btn svg {
    flex-shrink: 0;
}

.dash-jstep-btn-muted {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-3);
}

.dash-jstep-btn-muted:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
    box-shadow: 0 6px 18px rgba(248, 113, 113, 0.15);
}

/* ---------- Quick actions ---------- */
.dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    animation: dashFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.dash-action {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.dash-action:hover {
    background: rgba(212,169,87, 0.08);
    border-color: rgba(212,169,87, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.dash-action:hover .dash-action-arrow {
    transform: translateX(4px);
    color: #e9c97e;
}

.dash-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(212,169,87, 0.1);
    border: 1px solid rgba(212,169,87, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e9c97e;
    flex-shrink: 0;
}

.dash-action-text {
    flex: 1;
    min-width: 0;
}

.dash-action-text h3 {
    font-family: var(--heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.2rem;
}

.dash-action-text p {
    font-size: 0.78rem;
    color: var(--text-3);
    margin: 0;
}

.dash-action-arrow {
    color: var(--text-3);
    transition: all 0.3s;
    flex-shrink: 0;
}

.dash-action-muted .dash-action-icon {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .dash {
        padding: 3rem 1.2rem 4rem;
    }
    .dash-hero {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        margin-bottom: 2.5rem;
    }
    .dash-greet h1 {
        font-size: 1.9rem;
    }
    .dash-badges {
        justify-content: center;
    }
    .dash-card {
        padding: 1.5rem 1.4rem;
    }
    .dash-journey-line {
        left: calc(1.4rem + 13px);
    }
}

/* ---------- Legacy classes (kept for non-dashboard pages) ---------- */
.btn-nav {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-nav-primary {
    background: var(--grad);
    color: #fff;
}

.btn-nav-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(212,169,87, 0.3);
}

.btn-nav-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-nav-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Pricing Page */
.pricing-page {
    min-height: 100vh;
    background: var(--bg);
    padding: 1rem 2rem;
}

.pricing-hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.pricing-hero h1 {
    font-family: var(--heading);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.pricing-hero p {
    font-size: 0.95rem;
    color: var(--text-2);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.75rem;
    position: relative;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.pricing-card .pricing-features {
    flex: 1;
}

.pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212,169,87, 0.5);
}

.pricing-card.popular {
    border: 2px solid #d4a957;
    box-shadow: 0 8px 30px rgba(212,169,87, 0.2);
}

.pricing-card.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-header h3 {
    font-family: var(--heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 1rem;
}

.pricing-price .currency {
    font-size: 1.2rem;
    color: var(--text-2);
}

.pricing-price .amount {
    font-family: var(--heading);
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0.2rem;
}

.pricing-price .period {
    color: var(--text-3);
    font-size: 1rem;
}

/* Beta tester: original price struck through next to the discounted amount. */
.pricing-price-strike {
    color: var(--text-3);
    text-decoration: line-through;
    font-size: 1.1rem;
    margin-right: 0.2rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    color: var(--text-2);
}

.pricing-features svg {
    flex-shrink: 0;
}

.pricing-features-includes {
    font-size: 0.8rem;
    color: var(--text-3);
    padding-bottom: 0.3rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    list-style: none;
}

.pricing-cta-note {
    font-size: 0.75rem;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 0.6rem;
}

.btn-pricing {
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-pricing-primary {
    background: var(--grad);
    color: #fff;
}

.btn-pricing-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(212,169,87, 0.3);
}

.btn-pricing-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-pricing-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

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

/* ===== REFERRAL CARD (on dashboard) ===== */
.dash-referral {
    margin-top: 1.5rem;
}

.dash-referral-row {
    display: flex;
    gap: 0.5rem;
    margin: 1.25rem 0 1rem;
}

.dash-referral-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: var(--text, #e4e4e7);
    font-family: 'DM Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.85rem;
    outline: none;
    min-width: 0;
}

.dash-referral-input:focus {
    border-color: rgba(212,169,87, 0.5);
    background: rgba(0, 0, 0, 0.45);
}

.dash-referral-copy {
    background: #d4a957;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.dash-referral-copy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212,169,87, 0.35);
}

.dash-referral-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}

.dash-referral-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-2, #a1a1aa);
    font-size: 0.85rem;
}

.dash-referral-stat strong {
    color: var(--text, #fff);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.dash-referral-stat-code code {
    background: rgba(212,169,87, 0.12);
    border: 1px solid rgba(212,169,87, 0.25);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    color: #ead29b;
    font-family: 'DM Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.85rem;
}

.dash-referral-future {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(212,169,87, 0.06);
    border-left: 2px solid rgba(212,169,87, 0.5);
    border-radius: 6px;
    color: var(--text-2, #a1a1aa);
    font-size: 0.8rem;
    line-height: 1.5;
}

.dash-referral-future svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #ead29b;
}

/* (account-promo-form moved to auth.css as .acct-promo-form) */

/* ===== DASHBOARD: REFERRAL REWARDS PENDING CARD ===== */
.dash-rewards-card {
    margin-top: 1.5rem;
    background: rgba(212,169,87, 0.05);
    border: 1px solid rgba(212,169,87, 0.25);
}

.dash-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.dash-reward-item {
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

.dash-reward-item-copy {
    color: var(--text-2, #a1a1aa);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.dash-reward-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dash-reward-btn {
    flex: 1;
    min-width: 140px;
    background: #d4a957;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.dash-reward-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212,169,87, 0.35);
}

.dash-reward-btn-alt {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(234,210,155, 0.35);
    color: #ead29b;
}

.dash-reward-btn-alt:hover:not(:disabled) {
    background: rgba(234,210,155, 0.15);
}

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

/* ===== DASHBOARD: PRO TRIAL UPGRADE CTA ===== */
.dash-upgrade-cta {
    margin-top: 1.5rem;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.dash-upgrade-cta-head h2 {
    color: #fbbf24;
}

.dash-upgrade-cta-head p {
    color: var(--text-2, #a1a1aa);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.dash-upgrade-cta-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.dash-upgrade-cta-btn {
    background: #f59e0b;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-upgrade-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.dash-upgrade-cta-dismiss {
    background: transparent;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    color: var(--text-2, #a1a1aa);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
}

.dash-upgrade-cta-dismiss:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text, #fff);
}

/* (account-refund moved to auth.css as .acct-card-muted) */

/* ===== FEEDBACK WIDGET — glass design =====
   Floating glass pill (auth only) + frosted modal. */

/* --- Floating pill (bottom-right, auth users only) --- */
.fb-pill {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    background: rgba(15, 17, 23, 0.82);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    color: #ead29b;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212,169,87, 0.06);
    opacity: 0;
    transform: translateY(8px);
    animation: fb-pill-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

@keyframes fb-pill-in {
    to { opacity: 1; transform: translateY(0); }
}

.fb-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212,169,87, 0.15);
    color: #f5e4bf;
}

.fb-pill svg { flex-shrink: 0; color: #ead29b; }

.fb-pill-out {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: all 0.2s ease !important;
}

@media (max-width: 480px) {
    .fb-pill { right: 0.75rem; bottom: 5rem; }
}

/* Hide the floating pill while the user is already on the /#feedbacks
 * page (Lini #79) — they can hit the "Send new feedback" button right
 * there. */
body:has(#section-feedbacks.active) #fb-pill { display: none; }

/* --- Modal backdrop --- */
.fb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(5, 7, 14, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fb-backdrop.fb-show { opacity: 1; }

/* --- Modal card --- */
.fb-card {
    width: 100%;
    max-width: 420px;
    padding: 1.5rem;
    background: rgba(15, 17, 23, 0.88);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
    color: #d4d4d8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    transform: translateY(10px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fb-backdrop.fb-show .fb-card {
    transform: translateY(0) scale(1);
}

/* --- Top row: icon + title + close --- */
.fb-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.fb-top-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212,169,87, 0.12);
    border-radius: 9px;
    flex-shrink: 0;
}

.fb-top h3 {
    margin: 0;
    font-family: var(--heading, 'Space Grotesk', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
}

.fb-close {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
    display: flex;
}

.fb-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.fb-sub {
    margin: 0 0 1rem;
    color: #71717a;
    font-size: 0.8rem;
    line-height: 1.45;
}

/* --- Category chips --- */
.fb-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.fb-chip {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: #a1a1aa;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.15s ease;
}

.fb-chip:hover { background: rgba(255, 255, 255, 0.07); color: #e4e4e7; }

.fb-chip-on {
    background: rgba(212,169,87, 0.14);
    border-color: rgba(212,169,87, 0.45);
    color: #ead29b;
    font-weight: 600;
}

.fb-chip-icon { font-size: 0.85rem; line-height: 1; }

/* --- Textarea --- */
.fb-ta {
    width: 100%;
    min-height: 110px;
    padding: 0.75rem 0.85rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #e4e4e7;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fb-ta::placeholder { color: rgba(255, 255, 255, 0.25); }
.fb-ta:focus { border-color: rgba(212,169,87, 0.5); background: rgba(0, 0, 0, 0.45); }

/* Honeypot */
.fb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Error */
.fb-err {
    color: #f87171;
    font-size: 0.8rem;
    margin: 0.6rem 0 0;
    padding: 0.4rem 0.65rem;
    background: rgba(239, 68, 68, 0.08);
    border-left: 2px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
}

/* --- Actions --- */
.fb-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.fb-act {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 9px;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s ease;
}

.fb-act:disabled { opacity: 0.55; cursor: not-allowed; }

.fb-act-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #a1a1aa;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fb-act-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #e4e4e7; }

.fb-act-send {
    background: #d4a957;
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(212,169,87, 0.5);
}

.fb-act-send:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(212,169,87, 0.6);
}

.fb-act-send svg { flex-shrink: 0; }

/* Spinner */
.fb-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fb-spin 0.6s linear infinite;
}

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

/* --- Success state --- */
.fb-done {
    padding: 2rem 1rem;
    text-align: center;
}

.fb-done-icon { margin-bottom: 0.75rem; }

.fb-done h3 {
    margin: 0 0 0.3rem;
    font-family: var(--heading, 'Space Grotesk', sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.fb-done p {
    margin: 0;
    color: #71717a;
    font-size: 0.85rem;
}

/* ===== PRICING PAGE: BILLING TOGGLE + BADGES ===== */

.pricing-toggle {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin: 0 auto 1.5rem;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
}

.pricing-toggle-btn {
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2, #a1a1aa);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-toggle-btn.active {
    background: #d4a957;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px -4px rgba(212,169,87, 0.5);
}

.pricing-toggle-badge {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* When the Annual toggle is active, the parent button background flips
   to gold (#d4a957). Light-green text on a green tint reads almost
   invisibly against that — drop to a high-contrast dark-on-white pill
   so the savings callout stays readable. */
.pricing-toggle-btn.active .pricing-toggle-badge {
    background: rgba(20, 16, 8, 0.85);
    color: #ffffff;
}


.pricing-tax {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    margin-top: -0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pricing-savings {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.5rem;
    text-align: center;
}

.pricing-first-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.pricing-discount-badge {
    color: #ead29b;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.pricing-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Single beta-tester discount banner between the toggle and the card grid
   (replaces the per-card note). Centres the .pricing-first-badge pill. */
.pricing-beta-banner {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

/* ---------- Plan comparison table ----------
   No outer card: the highlighted Pro column is the single focal element
   (an outlined gold band). A competing outer border made the Pro band look
   cramped on desktop and broke on horizontal scroll on mobile. */
.pricing-compare {
    max-width: 760px;
    margin: 4rem auto 1rem;
}
.pricing-compare-title {
    font-family: var(--heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 1.75rem;
}
.pricing-compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    /* Generous side padding so the highlighted Pro column sits comfortably
       inside the frame instead of cramping against its right border. */
    padding: 0.5rem 1.25rem;
}
.pricing-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
    table-layout: fixed;
}
/* Header */
.pricing-compare-table thead th {
    font-family: var(--heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 1rem 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-compare-table thead th:first-child { text-align: left; width: 31%; }
/* Feature-name column */
.pricing-compare-table tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: var(--text);
    padding: 0.9rem 0.75rem 0.9rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Value cells */
.pricing-compare-table tbody td {
    text-align: center;
    color: var(--text-2);
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pricing-compare-table tbody tr:last-child th[scope="row"],
.pricing-compare-table tbody tr:last-child td {
    border-bottom: none;
}
@media (hover: hover) {
    .pricing-compare-table tbody tr:hover th[scope="row"],
    .pricing-compare-table tbody tr:hover td {
        background: rgba(255, 255, 255, 0.025);
    }
}
/* Pro column: a self-contained outlined gold band, rounded top + bottom */
.pricing-compare-table .cmp-pro {
    background: rgba(212, 169, 87, 0.08);
    color: #fff;
    border-left: 1px solid rgba(212, 169, 87, 0.3);
    border-right: 1px solid rgba(212, 169, 87, 0.3);
}
.pricing-compare-table thead th.cmp-pro {
    color: #ead29b;
    border-top: 1px solid rgba(212, 169, 87, 0.3);
    border-bottom-color: rgba(212, 169, 87, 0.3);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.pricing-compare-table tbody tr:last-child .cmp-pro {
    border-bottom: 1px solid rgba(212, 169, 87, 0.3);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
@media (hover: hover) {
    .pricing-compare-table tbody tr:hover .cmp-pro {
        background: rgba(212, 169, 87, 0.13);
    }
}
.pricing-compare-table .cmp-yes { vertical-align: middle; }
.pricing-compare-table .cmp-no {
    color: var(--text-3);
    vertical-align: middle;
    opacity: 0.5;
}
/* Narrow screens: shrink to fit so all three plans (incl. Pro) stay visible
   without horizontal scroll. */
@media (max-width: 540px) {
    .pricing-compare-scroll { padding: 0.4rem 0.6rem; }
    .pricing-compare-table { font-size: 0.78rem; }
    .pricing-compare-table thead th { font-size: 0.9rem; padding: 0.7rem 0.35rem 0.6rem; }
    .pricing-compare-table thead th:first-child { width: 28%; }
    .pricing-compare-table tbody th[scope="row"] { padding: 0.7rem 0.35rem 0.7rem 0.15rem; }
    .pricing-compare-table tbody td { padding: 0.7rem 0.3rem; }
}

/* ============ PRODUCT DASHBOARD (sidebar shell) ============ */
/* The dashboard hides the marketing navbar and acts as a full app shell. */
body.dashboard-mode #navbar { display: none; }
/* The floating feedback launcher is redundant in the dashboard (the Tickets
   view replaces it) and would otherwise overlap the chat composer. */
body.dashboard-mode #fb-pill { display: none; }
.dash2 {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
}
.dash2-sidebar {
    width: 244px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding: 1.5rem 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.015);
}
.dash2-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.5rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--heading);
    font-weight: 700;
    font-size: 1.05rem;
}
.dash2-brand-accent { color: var(--accent, #d4a957); }
.dash2-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dash2-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad, linear-gradient(135deg, #d4a957, #b3863a));
    color: #fff; font-weight: 700; font-size: 0.85rem;
}
.dash2-user-meta { min-width: 0; }
.dash2-user-name { color: #fff; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash2-user-plan { color: var(--text-3); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.dash2-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dash2-nav-item {
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    background: transparent; border: none; border-radius: 9px;
    color: var(--text-2); font-family: inherit; font-size: 0.9rem; font-weight: 500;
    cursor: pointer; text-align: left;
    transition: background 0.15s, color 0.15s;
}
.dash2-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.dash2-nav-ico { display: inline-flex; }
.dash2-nav-label { flex: 1; }
@media (hover: hover) { .dash2-nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } }
.dash2-nav-item.active { background: rgba(212, 169, 87, 0.12); color: #ead29b; }
.dash2-nav-badge {
    width: 18px; height: 18px; padding: 0; flex-shrink: 0;
    border-radius: 50%; background: #d4a957; color: #1a1306;
    font-size: 0.68rem; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Class display rule otherwise overrides the [hidden] attribute. */
.dash2-nav-badge[hidden] { display: none; }
.dash2-nav-sep { height: 1px; background: var(--border); margin: 0.5rem 0.4rem; }
.dash2-signout {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    background: transparent; border: none; border-radius: 9px;
    color: var(--text-3); font-family: inherit; font-size: 0.9rem; cursor: pointer; text-align: left;
}
.dash2-signout svg { width: 18px; height: 18px; }
@media (hover: hover) { .dash2-signout:hover { background: rgba(224, 115, 79, 0.1); color: #e0734f; } }

.dash2-main {
    flex: 1; min-width: 0;
    padding: 2.25rem 2.5rem 3rem;
    max-width: 1080px;
    margin: 0 auto;
}
/* Bolumler arasi gecis animasyonu (view switch'te tetiklenir) */
.dash2-main.dash2-anim { animation: dash2ViewIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dash2ViewIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .dash2-main.dash2-anim { animation: none; } }
.dash2-view-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.75rem; flex-wrap: wrap;
}
.dash2-view-head h1 { font-family: var(--heading); font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0; }
.dash2-view-head p { color: var(--text-2); font-size: 0.92rem; margin: 0.4rem 0 0; }
.dash2-view-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.dash2-search {
    width: 220px; max-width: 50vw;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 9px;
    color: var(--text); font-size: 0.88rem; font-family: inherit; outline: none;
}
.dash2-search:focus { border-color: rgba(212, 169, 87, 0.5); }
.dash2-search::placeholder { color: var(--text-3); }
/* Replace the browser's default (emoji-ish) clear button with a small,
   crisp white X that matches the dark UI. */
.dash2-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    cursor: pointer;
    background-color: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dash2-search:hover::-webkit-search-cancel-button,
.dash2-search:focus::-webkit-search-cancel-button { background-color: #fff; }

/* Recent projects block on the overview */
.dash2-recent { margin-bottom: 1.5rem; }
.dash2-recent-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; }
.dash2-recent-head h2 { font-family: var(--heading); font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.dash2-recent-head button { background: transparent; border: none; color: #ead29b; font-size: 0.85rem; cursor: pointer; font-family: inherit; }
@media (hover: hover) { .dash2-recent-head button:hover { text-decoration: underline; } }

.dash2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dash2-stat {
    background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.1rem 1.25rem; text-align: left;
}
.dash2-stat-link { cursor: pointer; font-family: inherit; transition: border-color 0.15s, transform 0.15s; }
@media (hover: hover) { .dash2-stat-link:hover { border-color: rgba(212, 169, 87, 0.5); transform: translateY(-2px); } }
.dash2-stat-label { color: var(--text-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.dash2-stat-value { color: #fff; font-family: var(--heading); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.dash2-stat-bar { margin-top: 0.6rem; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dash2-stat-bar span { display: block; height: 100%; }

.dash2-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
.dash2-quick-right { margin-left: auto; }
.dash2-quick-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.1rem; border-radius: 10px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text);
    font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: all 0.15s;
}
/* Hover lifts slightly and warms up (gold border + faint gold wash) instead
   of darkening, matching the render-row action buttons. */
@media (hover: hover) { .dash2-quick-btn:not(.dash2-quick-primary):hover { transform: translateY(-1px); background: rgba(212, 169, 87, 0.08); border-color: rgba(212, 169, 87, 0.45); color: #fff; } }
.dash2-quick-primary { background: var(--grad, linear-gradient(135deg, #d4a957, #b3863a)); border-color: transparent; color: #fff; }
@media (hover: hover) { .dash2-quick-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(212, 169, 87, 0.5); } }

.dash2-card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.25rem; }
.dash2-card h2 { font-family: var(--heading); font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 0.3rem; }
.dash2-card-sub { color: var(--text-2); font-size: 0.88rem; margin: 0 0 1rem; }
.dash2-ref-row { display: flex; gap: 0.5rem; }
.dash2-ref-input { flex: 1; min-width: 0; padding: 0.6rem 0.8rem; background: #0e0e0e; border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 0.85rem; }
.dash2-ref-meta { margin-top: 0.85rem; color: var(--text-2); font-size: 0.85rem; }
.dash2-ref-meta strong { color: #fff; }
.dash2-ref-meta code { color: #ead29b; background: rgba(212, 169, 87, 0.1); padding: 1px 6px; border-radius: 5px; }
.dash2-rewards-list { display: flex; flex-direction: column; gap: 0.6rem; }
.dash2-reward-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; }
.dash2-reward-actions { display: flex; gap: 0.5rem; }
.dash2-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; border-color: rgba(212, 169, 87, 0.4); }
.dash2-upgrade-actions { display: flex; gap: 0.6rem; }

.dash2-loading { display: flex; justify-content: center; padding: 4rem 0; }
.dash2-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.1); border-top-color: var(--accent, #d4a957); border-radius: 50%; animation: spin 0.8s linear infinite; }
.dash2-empty { text-align: center; padding: 4rem 1rem; color: var(--text-3); }
.dash2-empty h2 { color: #fff; font-family: var(--heading); font-weight: 700; margin: 0 0 0.4rem; }
.dash2-empty p { color: var(--text-2); margin: 0; }

/* Projects grid */
.dash2-proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.dash2-proj-card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
@media (hover: hover) { .dash2-proj-card:hover { border-color: rgba(212, 169, 87, 0.5); transform: translateY(-3px); } }
.dash2-proj-thumb { aspect-ratio: 16 / 10; background: #0c0c0c; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dash2-proj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dash2-card-thumb-empty { color: #2a2a2a; }
.dash2-proj-body { padding: 0.8rem 0.9rem 0.4rem; }
.dash2-proj-name { color: #fff; font-weight: 600; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash2-proj-date { color: var(--text-3); font-size: 0.78rem; margin-top: 0.15rem; }
.dash2-proj-actions { display: flex; gap: 0.3rem; padding: 0.4rem 0.7rem 0.8rem; flex-wrap: wrap; }
.dash2-proj-actions button { background: transparent; border: none; color: var(--text-3); font-size: 0.78rem; cursor: pointer; padding: 0.2rem 0.35rem; border-radius: 5px; font-family: inherit; }
@media (hover: hover) { .dash2-proj-actions button:hover { color: #f5e3b6; background: rgba(212, 169, 87, 0.12); } }
.dash2-proj-actions button.danger { color: #c2603f; }
@media (hover: hover) { .dash2-proj-actions button.danger:hover { color: #e0734f; background: rgba(224, 115, 79, 0.12); } }

/* Renders list */
.dash2-render-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dash2-render-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.15s; }
.dash2-render-playable { cursor: pointer; }
@media (hover: hover) { .dash2-render-playable:hover { border-color: rgba(212, 169, 87, 0.45); } }
.dash2-render-playable .dash2-render-ico { color: #ead29b; }
.dash2-render-ico { color: var(--text-3); flex-shrink: 0; }
.dash2-render-info { flex: 1; min-width: 0; }
.dash2-render-name { color: #fff; font-weight: 600; font-size: 0.9rem; }
.dash2-render-name span { color: var(--text-3); font-weight: 400; font-size: 0.82rem; }
.dash2-render-meta { color: var(--text-3); font-size: 0.8rem; margin-top: 0.15rem; }
.dash2-render-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.dash2-render-actions a, .dash2-render-actions button { font-size: 0.82rem; cursor: pointer; text-decoration: none; background: transparent; border: none; font-family: inherit; padding: 0.25rem 0.5rem; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.dash2-render-actions a { color: #ead29b; }
.dash2-render-actions .muted { color: var(--text-3); opacity: 0.5; cursor: default; }
.dash2-render-actions .danger { color: #c2603f; }
@media (hover: hover) {
    .dash2-render-actions a:hover { color: #f5e3b6; background: rgba(212, 169, 87, 0.12); }
    .dash2-render-actions .danger:hover { color: #e0734f; background: rgba(224, 115, 79, 0.12); }
}

/* Tickets list */
.dash2-ticket-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dash2-ticket-row { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text-2); transition: border-color 0.15s; }
@media (hover: hover) { .dash2-ticket-row:hover { border-color: rgba(212, 169, 87, 0.4); } }
.dash2-ticket-main { flex: 1; min-width: 0; }
.dash2-ticket-subj { color: #fff; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.dash2-ticket-meta { color: var(--text-3); font-size: 0.8rem; margin-top: 0.2rem; }
.dash2-ticket-cat { text-transform: capitalize; color: var(--text-2); }

/* Responsive: sidebar collapses to a horizontal top bar */
@media (max-width: 860px) {
    .dash2 { flex-direction: column; }
    .dash2-sidebar {
        width: auto; height: auto; position: static;
        flex-direction: row; align-items: center; gap: 0.5rem;
        border-right: none; border-bottom: 1px solid var(--border);
        padding: 0.6rem 1rem; overflow-x: auto;
    }
    .dash2-brand { display: none; }
    .dash2-user { display: none; }
    .dash2-nav { flex-direction: row; gap: 0.25rem; }
    .dash2-nav-item { white-space: nowrap; padding: 0.5rem 0.7rem; }
    .dash2-nav-label { font-size: 0.85rem; }
    .dash2-nav-sep { display: none; }
    .dash2-signout { display: none; }
    .dash2-main { padding: 1.5rem 1.1rem 2.5rem; max-width: none; }
    .dash2-view-head h1 { font-size: 1.5rem; }
}

/* ---------- Plan & billing view ---------- */
.dash2-plan-top { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.dash2-usage-card, .dash2-plan-current { margin-bottom: 0; }
.dash2-usage-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.7rem; }
.dash2-usage-head span { color: var(--text-2); font-size: 0.9rem; }
.dash2-usage-head strong { color: #fff; font-family: var(--heading); font-size: 1.5rem; }
.dash2-usage-note { color: var(--text-3); font-size: 0.8rem; margin-top: 0.7rem; }
.dash2-usage-upsell { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.3rem; }
.dash2-usage-upsell p { margin: 0; color: var(--text-3); font-size: 0.82rem; line-height: 1.5; }
/* Upgrade CTA reuses the standard primary button (.dash2-quick-primary) for
   consistency; in the upsell column it stays content-width, left-aligned. */
.dash2-usage-upsell .dash2-quick-btn { align-self: flex-start; }
.dash2-plan-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dash2-plan-current-name { color: var(--text-2); font-size: 0.95rem; }
.dash2-plan-current-name strong { color: #fff; }
.dash2-plan-current-sub { color: var(--text-3); font-size: 0.82rem; margin-top: 0.3rem; }
/* Pricing reused inside the dashboard: drop its standalone page chrome. */
.pricing-page-compact { padding: 0 !important; min-height: 0 !important; }
.pricing-page-compact .pricing-grid { margin: 0 auto; }
.pricing-page-compact .pricing-toggle { margin-top: 0; }

/* ---------- Guide view (GuidePage embedded, tabs across the top) ---------- */
/* Guide is a single readable column, centered in the main area. Width matches
   the guide content (~720px) so the tabs and the body share the same left edge
   instead of the tabs drifting to one side. */
/* Match the other dashboard views: fill the main content width. */
.dash2-guide { max-width: 100%; margin: 0; }
.dash2-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.dash2-guide-head h1 { font-family: var(--heading); font-size: 1.9rem; font-weight: 700; color: #fff; margin: 0; }
/* guide.css caps the article text at 720px; inside the dashboard let it use
   the full content width like every other view. */
.dash2-guide-main .guide-title,
.dash2-guide-main .guide-lede,
.dash2-guide-main .guide-feature-body { max-width: none; }
.dash2-guide-head p { color: var(--text-2); font-size: 0.9rem; margin: 0.35rem 0 0; }
.dash2-guide-copy {
    display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0;
    padding: 0.55rem 0.9rem; border-radius: 9px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text-2);
    font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s;
}
@media (hover: hover) { .dash2-guide-copy:hover { transform: translateY(-1px); background: rgba(212, 169, 87, 0.08); color: #fff; border-color: rgba(212, 169, 87, 0.45); } }
.dash2-guide-copy.guide-copy-btn--ok { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.dash2-guide-copy.guide-copy-btn--err { color: #e0734f; border-color: rgba(224, 115, 79, 0.4); }
/* Compound selector (.guide-nav.dash2-guide-nav) beats guide.css's
   `.guide-nav { flex-direction: column }` which loads later in the body. */
.guide-nav.dash2-guide-nav {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding: 0 0 1rem; margin: 0 0 1.75rem;
    width: auto; height: auto; background: none; border-right: none;
}
.dash2-guide-nav .guide-nav-item {
    display: inline-flex; align-items: center;
    width: auto; margin: 0;
    padding: 0.5rem 0.9rem; border-radius: 8px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
    color: var(--text-2); font-size: 0.85rem; font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
@media (hover: hover) { .dash2-guide-nav .guide-nav-item:hover { background: rgba(212, 169, 87, 0.08); color: #fff; border-color: rgba(212, 169, 87, 0.4); } }
.dash2-guide-nav .guide-nav-item--active { background: rgba(212, 169, 87, 0.12); color: #ead29b; border-color: rgba(212, 169, 87, 0.4); }
.guide-main.dash2-guide-main { width: auto; max-width: none; padding: 0; }
.dash2-guide-main .guide-title { margin-top: 0; }

/* ---------- Account embedded in dashboard: align colors with the dash palette
   (the standalone account page uses a bluish "glass" palette + zinc greys that
   clash with the neutral/gold dashboard). Red/danger is intentionally kept. --- */
/* Fill the main content width to match the other dashboard views. */
#dash2-account-host .acct { max-width: 100%; margin: 0; padding: 0; }
#dash2-account-host .acct-hero { padding-top: 0; border-bottom-color: var(--border); }
#dash2-account-host .acct-card:not(.acct-card-danger) {
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-color: var(--border);
}
#dash2-account-host .acct-card-muted { background: rgba(255, 255, 255, 0.015); }
#dash2-account-host .acct-card p { color: var(--text-2); }
#dash2-account-host .acct-email { color: var(--text-3); }
#dash2-account-host .acct-section-head:not(.acct-section-head-danger),
#dash2-account-host .acct-section-head:not(.acct-section-head-danger) svg { color: var(--text-3); }
#dash2-account-host .acct-btn:not(.acct-btn-danger) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border-color: var(--border);
}
@media (hover: hover) {
    #dash2-account-host .acct-btn:not(.acct-btn-danger) { transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s; }
    #dash2-account-host .acct-btn:not(.acct-btn-danger):hover {
        transform: translateY(-1px);
        background: rgba(212, 169, 87, 0.08);
        border-color: rgba(212, 169, 87, 0.45);
        color: #fff;
    }
}
#dash2-account-host .acct-promo-form input[type="text"] {
    background: #0e0e0e; border-color: var(--border);
}

/* ============================================================
   Tickets — support chat. Kept consistent with the rest of the
   dashboard: flat cards, subtle borders, gold hover, no extra chrome.
   .fb-desk wraps both the dashboard Tickets host and the standalone
   feedbacks section so both look the same. In the dashboard the thread
   fills the content area with the composer docked at the bottom.
   ============================================================ */
.fb-desk .fb-page { max-width: 100%; }
/* Only the dashboard drops the page padding; the standalone section keeps
   its base top padding to clear the fixed navbar. */
#dash2-tickets-host .fb-page { padding: 0; }
.fb-desk .fb-page-hero { margin-bottom: 1.4rem; }
.fb-desk .fb-page-hero h1 { font-size: 1.9rem; letter-spacing: -0.02em; }
.fb-desk .fb-page-hero p { font-size: 0.92rem; }
/* New ticket action sits at the top of the list, beside the title, and uses
   the same primary button as "New project". */
.fb-desk .fb-page-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fb-desk .fb-page-hero-row .dash2-quick-btn { flex-shrink: 0; }
.fb-desk .fb-empty .dash2-quick-btn { align-self: center; margin-top: 0.5rem; }

/* ---- Ticket list (simple rows, dashboard style) ---- */
.fb-desk .fb-list { gap: 0.5rem; }
.fb-desk .fb-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}
@media (hover: hover) {
    .fb-desk .fb-row:hover { border-color: rgba(212, 169, 87, 0.45); transform: translateY(-1px); }
}
.fb-desk .fb-row:focus-visible { outline: none; border-color: rgba(212, 169, 87, 0.6); }
.fb-desk .fb-row.unread { border-color: rgba(212, 169, 87, 0.4); background: rgba(212, 169, 87, 0.04); }
.fb-desk .fb-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.fb-desk .fb-row-subject {
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fb-desk .fb-row-meta { color: var(--text-3); font-size: 0.8rem; }
.fb-desk .fb-status { flex-shrink: 0; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.fb-desk .fb-status-new { color: #ead29b; }
.fb-desk .fb-status-awaiting { color: var(--text-3); }
.fb-desk .fb-status-replied { color: #7fb98f; }
.fb-desk .fb-page-actions { margin-top: 1.4rem; }

/* ---- Thread (full-height chat) ---- */
/* In the dashboard the thread fills the content box so the composer docks at
   the bottom; .dash2-main reserves 2.25rem top + 3rem bottom of padding. */
#dash2-tickets-host .fb-page-thread {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 5.25rem);
}
.fb-desk .fb-thread-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.fb-desk .fb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.45rem 0.8rem 0.45rem 0.6rem;
}
.fb-desk .fb-back-btn svg { width: 16px; height: 16px; }
.fb-desk .fb-thread-ti { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-desk .fb-thread-title { font-family: var(--heading); font-size: 1rem; font-weight: 700; color: #fff; }
.fb-desk .fb-thread-sub { font-size: 0.78rem; color: var(--text-3); margin-top: 0.1rem; }
.fb-desk .fb-thread-url { color: #ead29b; text-decoration: none; }
.fb-desk .fb-thread-url:hover { text-decoration: underline; }

.fb-desk .fb-bubbles {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem 0.25rem;
    max-height: none;
    background: none;
    border: none;
    border-radius: 0;
}
.fb-desk .fb-bubble { max-width: 78%; }

/* composer docked at the bottom, grows with the message */
.fb-desk .fb-compose {
    flex-shrink: 0;
    margin: 0;
    padding: 0.9rem 0 0;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
}
.fb-desk .fb-compose-ta {
    flex: 1;
    min-width: 0;
    background: #0e0e0e;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.5;
    min-height: 44px;
    max-height: 200px;
    resize: none;
    overflow-y: hidden;
}
.fb-desk .fb-compose-ta:focus { border-color: rgba(212, 169, 87, 0.55); outline: none; box-shadow: none; }
.fb-desk .fb-compose-send {
    flex-shrink: 0;
    height: 44px;
    padding: 0 1.3rem;
    border: none;
    border-radius: 10px;
    background: #d4a957;
    color: #1a1306;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.fb-desk .fb-compose-send:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(212, 169, 87, 0.5); }
.fb-desk .fb-compose-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- New ticket composer: chat layout with topic chips above the bar ---- */
.fb-desk .fb-chat-empty {
    margin: auto;
    max-width: 420px;
    text-align: center;
    color: var(--text-3);
    font-size: 0.9rem;
    line-height: 1.6;
}
.fb-desk .fb-compose-new { flex-direction: column; align-items: stretch; gap: 0.7rem; }
.fb-desk .fb-compose-cats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fb-desk .fb-cat-chip {
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
@media (hover: hover) { .fb-desk .fb-cat-chip:hover { border-color: rgba(212, 169, 87, 0.45); color: #fff; } }
.fb-desk .fb-cat-chip.is-on { background: rgba(212, 169, 87, 0.14); border-color: rgba(212, 169, 87, 0.6); color: #ead29b; }
.fb-desk .fb-compose-row { display: flex; align-items: flex-end; gap: 0.6rem; }

/* Narrow screens stack the sidebar on top, so a viewport-height thread would
   overshoot; let it grow naturally instead. */
@media (max-width: 860px) {
    #dash2-tickets-host .fb-page-thread { height: auto; }
    .fb-desk .fb-bubbles { min-height: 45vh; }
}

/* ---------- Billing modal (placeholder) ---------- */
.dash2-modal-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    animation: fadeIn 0.15s ease-out;
}
.dash2-modal {
    width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
    background: #121212; border: 1px solid var(--border); border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.dash2-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.dash2-modal-title { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-family: var(--heading); font-weight: 700; font-size: 1.1rem; }
.dash2-modal-close { background: transparent; border: none; color: var(--text-3); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 0.3rem; }
@media (hover: hover) { .dash2-modal-close:hover { color: #fff; } }
.dash2-modal-intro { color: var(--text-2); font-size: 0.88rem; margin: 0 0 1rem; }
.dash2-modal-intro strong { color: #fff; }
.dash2-bill-rows { display: flex; flex-direction: column; }
.dash2-bill-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dash2-bill-row:last-child { border-bottom: none; }
.dash2-bill-label { color: var(--text-3); font-size: 0.85rem; }
.dash2-bill-val { color: #fff; font-size: 0.88rem; text-align: right; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.dash2-bill-link { background: transparent; border: none; color: #ead29b; font-size: 0.82rem; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; }
.dash2-bill-link.danger { color: #d98a6a; }
.dash2-bill-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.dash2-bill-actions .dash2-quick-btn { flex: 1 1 140px; justify-content: center; }
.dash2-bill-cancel { color: #d98a6a; border-color: rgba(217, 138, 106, 0.3); }
@media (hover: hover) { .dash2-bill-actions .dash2-bill-cancel:hover { transform: translateY(-1px); background: rgba(217, 138, 106, 0.1); border-color: rgba(217, 138, 106, 0.5); color: #e6a085; } }
.dash2-modal-foot { color: var(--text-3); font-size: 0.78rem; margin: 1rem 0 0; text-align: center; }

/* Render video player modal */
.dash2-video-modal {
    width: 100%; max-width: 880px;
    background: #0d0d0d; border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.dash2-video-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
.dash2-video-title { color: #fff; font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash2-video-modal video { display: block; width: 100%; max-height: 76vh; background: #000; }
@media (max-width: 860px) {
    .dash2-plan-top { grid-template-columns: 1fr; }
}

/* ---------- Studio coming soon ---------- */
.studio-coming-soon {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.studio-coming-soon-inner {
    text-align: center;
    max-width: 520px;
}

.studio-coming-soon-icon {
    margin-bottom: 1.5rem;
}

.studio-coming-soon-title {
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.studio-coming-soon-beta {
    color: var(--accent-bright, #e9c97e);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.studio-coming-soon-desc {
    color: var(--text-2);
    line-height: 1.7;
}

.studio-coming-soon-actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.studio-coming-soon-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

/* ---------- Studio Project Manager ---------- */

.studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem 0;
}

.studio-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.studio-new-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.studio-new-btn:hover { background: #b78d3a; }

.studio-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Secondary action button (Import Script JSON) — same shape as the
   primary "New Project" button but neutral colour so the primary stays
   the obvious next step for a fresh user. */
.studio-new-btn-secondary {
    background: transparent;
    color: #ddd;
    border: 1px solid #333;
}
.studio-new-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: #555;
}

.studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.studio-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.studio-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,169,87,0.1);
}

.studio-card-thumb {
    height: 150px;
    background: #0d0d1a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.studio-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.studio-card-thumb-empty {
    color: #333;
}

.studio-card-body {
    padding: 12px 14px;
}
.studio-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ddd;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.studio-card-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
}

.studio-card-actions {
    display: flex;
    gap: 4px;
    padding: 0 10px 10px;
}
.studio-card-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    background: transparent;
    color: rgba(255,255,255,0.4);
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
}
.studio-card-act:hover { border-color: rgba(255,255,255,0.2); color: #ccc; }
.studio-card-act-danger:hover { border-color: #ef4444; color: #ef4444; }

.studio-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.studio-empty svg { margin-bottom: 1rem; }
.studio-empty h2 { font-size: 1.1rem; color: rgba(255,255,255,0.3); margin-bottom: 0.5rem; }
.studio-empty p { font-size: 0.85rem; color: rgba(255,255,255,0.2); }

.studio-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}
.studio-loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Rendered Videos List ---------- */

.studio-videos {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.studio-video-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.studio-video-row:hover { border-color: rgba(255,255,255,0.12); }
.studio-video-icon { color: rgba(255,255,255,0.25); flex-shrink: 0; }
.studio-video-info { flex: 1; min-width: 0; }
.studio-video-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.studio-video-project {
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    font-size: 0.7rem;
}
.studio-video-meta {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-top: 2px;
}
.studio-video-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ---------- Compact modal (single-input prompts) ---------- */
.confirm-modal-compact .confirm-modal {
    max-width: 360px;
}

/* ---------- Feedbacks-as-stat clickable tile (Lini #79) ----------
 * Feedbacks lives in the .dash-stats grid now (was a .dash-action card).
 * Stat tiles aren't normally clickable; this variant adds the gold
 * hover lift so users see they can tap into /#feedbacks. */
.dash-stat-feedbacks {
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}
.dash-stat-feedbacks:hover {
    background: rgba(212, 169, 87, 0.08);
    border-color: rgba(212, 169, 87, 0.3);
    transform: translateY(-2px);
}

/* ---------- Read-only action card (Member since now lives here) ----------
 * Member since lost its stat-row slot to Feedbacks (Lini #79). It's a
 * read-only card now — the normal .dash-action hover lift would imply
 * clickability, so we flatten the hover state. */
.dash-action-readonly {
    cursor: default;
}
.dash-action-readonly:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
    transform: none;
    box-shadow: none;
}

/* ---------- Feedbacks dash-action badge (Lini #78 v2) ---------- */
.dash-action-fb-badge {
    display: inline-block;
    margin-left: 0.4rem;
    min-width: 18px;
    padding: 0.05rem 0.4rem;
    border-radius: 100px;
    background: #d4a957;
    color: #1a1306;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.45;
    vertical-align: 0.15em;
}

/* ---------- #feedbacks SPA page (list + thread) ---------- */
.fb-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 5rem 1.5rem 3rem;
}
.fb-page-hero {
    margin-bottom: 1.75rem;
}
.fb-page-hero h1 {
    font-family: var(--heading);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
    letter-spacing: -0.02em;
}
.fb-page-hero p {
    color: var(--text-2);
    font-size: 1rem;
    line-height: 1.55;
}
.fb-loading, .fb-thread-loading {
    text-align: center;
    color: var(--text-3);
    padding: 3rem 0;
    font-size: 0.95rem;
}
.fb-error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin: 1rem 0;
}
.fb-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.fb-empty-title {
    font-family: var(--heading);
    font-size: 1.1rem;
    color: var(--text-2);
}
.fb-empty-sub {
    color: var(--text-3);
    font-size: 0.92rem;
}
.fb-page-new {
    margin-top: 1rem;
    background: #d4a957;
    color: #1a1306;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.4rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}
.fb-page-new:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212, 169, 87, 0.25); }
.fb-page-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* List view */
.fb-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.fb-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.fb-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 169, 87, 0.25);
}
.fb-row:active { transform: scale(0.998); }
.fb-row.unread {
    border-color: rgba(212, 169, 87, 0.45);
    background: rgba(212, 169, 87, 0.045);
}
.fb-row-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.fb-cat {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-2);
}
.fb-cat-bug { background: rgba(239, 68, 68, 0.13); color: #f87171; }
.fb-cat-feature { background: rgba(96, 165, 250, 0.13); color: #93c5fd; }
.fb-cat-general { background: rgba(212, 169, 87, 0.13); color: #e9c97e; }
.fb-cat-other { background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.fb-date {
    font-size: 0.76rem;
    color: var(--text-3);
}
.fb-pill {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 100px;
    margin-left: auto;
}
.fb-pill-new {
    background: #d4a957;
    color: #1a1306;
    animation: fb-pulse 1.6s ease-in-out infinite;
}
.fb-pill-replied { background: rgba(255, 255, 255, 0.06); color: var(--text-3); }
.fb-pill-waiting { background: rgba(251, 191, 36, 0.13); color: #fcd34d; }
@keyframes fb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 169, 87, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(212, 169, 87, 0); }
}
.fb-row-snippet {
    color: var(--text-2);
    font-size: 0.92rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.fb-row-foot {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--text-3);
}

/* Thread view */
.fb-page-thread {
    max-width: 760px;
}
.fb-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-2);
    font-family: inherit;
    font-size: 0.86rem;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: border-color 0.15s, color 0.15s;
}
.fb-back-btn:hover {
    border-color: rgba(212, 169, 87, 0.35);
    color: #e9c97e;
}
.fb-thread-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.fb-thread-date {
    font-size: 0.82rem;
    color: var(--text-3);
}
.fb-thread-url {
    margin-left: auto;
    font-size: 0.82rem;
    color: #e9c97e;
    text-decoration: none;
    word-break: break-all;
}
.fb-thread-url:hover { text-decoration: underline; }

.fb-bubbles {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 0;
    max-height: 60vh;
    overflow-y: auto;
}
.fb-bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.55;
    word-break: break-word;
}
.fb-bubble-body { white-space: pre-wrap; }
.fb-bubble-user {
    align-self: flex-end;
    background: rgba(212, 169, 87, 0.13);
    border: 1px solid rgba(212, 169, 87, 0.22);
    border-bottom-right-radius: 4px;
    color: #f5e3b6;
}
.fb-bubble-admin {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom-left-radius: 4px;
    color: var(--text-2);
}
.fb-bubble-date {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-3);
}
.fb-compose {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.fb-compose-ta {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.55rem 0.9rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
    min-height: 44px;
    max-height: 200px;
    height: 44px;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.fb-compose-ta:focus { border-color: rgba(212, 169, 87, 0.55); }
.fb-compose-ta::placeholder { color: var(--text-3); }
.fb-compose-send {
    flex-shrink: 0;
    background: #d4a957;
    color: #1a1306;
    border: none;
    border-radius: 10px;
    padding: 0.7rem 1.6rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}
.fb-compose-send:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212, 169, 87, 0.25); }
.fb-compose-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 640px) {
    .fb-page { padding: 4.5rem 1rem 2.5rem; }
    .fb-page-hero h1 { font-size: 1.6rem; }
    .fb-bubble { max-width: 92%; }
    .fb-bubbles { max-height: 55vh; }
    .fb-row-head { gap: 0.4rem; }
    .fb-pill { margin-left: 0; }
}

/* =====================================================================
   In-app billing — invoices list, past-due banner, card-update link.
   Card change is the one billing action that can't be in-app (PCI:
   Polar's portal, x-frame-options DENY); the small ".dash2-bill-link"
   and the alert button route there. Everything else stays in a modal.
   ===================================================================== */
.dash2-bill-link {
    display: block; width: 100%; margin-top: 0.6rem; padding: 0.45rem;
    background: none; border: none; border-radius: 8px;
    color: var(--accent-bright, #ead29b); font-family: inherit;
    font-size: 0.82rem; cursor: pointer; text-align: center;
}
@media (hover: hover) { .dash2-bill-link:hover { background: rgba(255, 255, 255, 0.04); } }

/* Payment-failed alert: in the billing modal, on the dashboard (overview +
   plan), and on the account page. Shared warm-amber treatment. */
.dash2-bill-alert, .dash2-pastdue, .acct-bill-alert {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    padding: 0.85rem 1rem; margin: 0 0 1.1rem; border-radius: 10px;
    background: rgba(224, 115, 79, 0.1); border: 1px solid rgba(224, 115, 79, 0.32);
    color: #f0b89f; font-size: 0.85rem;
}
.dash2-bill-alert svg, .dash2-pastdue svg { flex-shrink: 0; color: #e0734f; }
.dash2-bill-alert span, .dash2-pastdue span, .acct-bill-alert span { flex: 1 1 200px; }
.dash2-bill-alert-btn, .dash2-pastdue-btn {
    flex-shrink: 0; padding: 0.5rem 0.9rem; border-radius: 8px; white-space: nowrap;
    background: rgba(224, 115, 79, 0.18); border: 1px solid rgba(224, 115, 79, 0.4);
    color: #f5d2c2; font-family: inherit; font-size: 0.8rem; cursor: pointer;
}
@media (hover: hover) {
    .dash2-bill-alert-btn:hover, .dash2-pastdue-btn:hover { background: rgba(224, 115, 79, 0.28); }
}

/* Invoices list inside the dash2 modal */
.dash2-inv-list { display: flex; flex-direction: column; }
.dash2-inv-row {
    display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash2-inv-row:last-child { border-bottom: none; }
.dash2-inv-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.dash2-inv-prod { color: #fff; font-size: 0.86rem; font-weight: 500; }
.dash2-inv-date { color: var(--text-3); font-size: 0.76rem; }
.dash2-inv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.dash2-inv-amt { color: var(--text-2); font-size: 0.84rem; }
.dash2-inv-badge {
    font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.dash2-inv-paid { background: rgba(120, 180, 120, 0.14); color: #9ccb9c; }
.dash2-inv-refunded { background: rgba(255, 255, 255, 0.07); color: var(--text-3); }
.dash2-inv-partially_refunded { background: rgba(224, 179, 79, 0.14); color: #e0b34f; }
.dash2-inv-dl {
    flex-shrink: 0; padding: 0.45rem 0.85rem; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
    color: #fff; font-family: inherit; font-size: 0.8rem; cursor: pointer;
}
@media (hover: hover) { .dash2-inv-dl:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); } }
.dash2-inv-dl:disabled { opacity: 0.5; cursor: default; }
.dash2-inv-na { flex-shrink: 0; color: var(--text-3); }

/* Account page: small "update payment method" link under the invoices card */
.acct-btn-link {
    display: inline-block; margin-top: 0.55rem; padding: 0.3rem 0;
    background: none; border: none; color: var(--accent-bright, #ead29b);
    font-family: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
}
@media (hover: hover) { .acct-btn-link:hover { text-decoration: underline; } }