* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #0a0a0f;
        color: #ffffff;
        height: 100vh;
        overflow: hidden;
        display: flex;
    }

    /* ---------- SIDEBAR ---------- */
    .sidebar {
        width: 260px;
        flex-shrink: 0;
        height: 100vh;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        padding: 18px 14px;
        overflow-y: auto;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 6px 22px;
    }

    .sidebar-brand-text {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
    }

    .sidebar-collapse {
        background: none;
        border: none;
        color: #6b7280;
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        display: flex;
        flex-shrink: 0;
    }

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

    .sidebar-collapse svg {
        width: 17px;
        height: 17px;
    }

    .nav-section {
        margin-bottom: 22px;
    }

    .nav-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: #6b7280;
        text-transform: uppercase;
        padding: 0 10px 8px;
        background: none;
        border: 0;
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    .nav-label:hover {
        color: #9ca3af;
    }

    .nav-label-arrow {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        opacity: 0;
        transition: transform 0.2s, opacity 0.2s;
    }

    .nav-label:hover .nav-label-arrow,
    .nav-label:focus-visible .nav-label-arrow,
    .nav-section.is-collapsed .nav-label-arrow {
        opacity: 0.8;
    }

    .nav-section.is-collapsed .nav-label-arrow {
        transform: rotate(-90deg);
    }

    /* Rolled up: only the header shows. */
    .nav-section.is-collapsed > .nav-item {
        display: none;
    }

    .nav-section.is-collapsed {
        margin-bottom: 10px;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 9px 10px;
        border-radius: 8px;
        color: #d1d5db;
        text-decoration: none;
        font-size: 13.5px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }

    .nav-item.active {
        background: rgba(28, 109, 139, 0.18);
        color: #fff;
    }

    .nav-item svg {
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        stroke: currentColor;
        fill: none;
    }

    .nav-item .chevron {
        margin-left: auto;
        width: 14px;
        height: 14px;
        opacity: 0.45;
    }

    .sidebar-spacer {
        flex: 1;
    }

    .sidebar-icons {
        display: flex;
        gap: 4px;
        padding: 10px 4px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 8px;
    }

    .sidebar-icon-btn {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .sidebar-icon-btn:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    .sidebar-icon-btn svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        fill: none;
    }

    .sidebar-tier {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
        padding: 8px 10px;
        background: none;
        border: 1px solid transparent;
        border-radius: 8px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        color: #9ca3af;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }

    .sidebar-tier:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .sidebar-tier-change {
        margin-left: auto;
        font-size: 11px;
        color: #6b7280;
        opacity: 0;
        transition: opacity 0.15s;
    }

    .sidebar-tier:hover .sidebar-tier-change {
        opacity: 1;
    }

    .sidebar-tier-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #33819e;
        flex-shrink: 0;
    }

    .sidebar-tokens {
        padding: 14px 10px 0;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .sidebar-tokens-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 6px;
    }

    .sidebar-tokens-value {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
    }

    .sidebar-tokens-value span {
        font-size: 13px;
        font-weight: 500;
        color: #9ca3af;
    }

    .sidebar-tokens-bar {
        width: 100%;
        height: 6px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        overflow: hidden;
        margin-bottom: 14px;
    }

    .sidebar-tokens-fill {
        height: 100%;
        background: linear-gradient(90deg, #1c6d8b, #33819e);
        border-radius: 999px;
    }

    .sidebar-upsell {
        background: rgba(28, 109, 139, 0.1);
        border: 1px solid rgba(28, 109, 139, 0.25);
        border-radius: 10px;
        padding: 12px;
        font-size: 12px;
        color: #d1d5db;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .sidebar-upsell a {
        display: block;
        margin-top: 9px;
        color: #fff;
        background: linear-gradient(135deg, #1c6d8b, #33819e);
        text-align: center;
        text-decoration: none;
        font-weight: 600;
        padding: 8px;
        border-radius: 7px;
        font-size: 12.5px;
        transition: opacity 0.2s;
    }

    .sidebar-upsell a:hover {
        opacity: 0.88;
    }

    /* ---------- MAIN ---------- */
    .main {
        flex: 1;
        position: relative;
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: 40px 40px 34px;
        height: 100vh;
        overflow: hidden;
    }

    .workspace {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 48px;
        width: 100%;
        max-width: 1280px;
    }

    .workspace.generated {
        justify-content: space-between;
    }

    .workspace .main-hero {
        transition: max-width 0.4s ease;
    }

    .workspace.generated .main-hero {
        max-width: 620px;
    }

    /* Room above the prompt box for the prompt history */
    .prompt-history {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .result-panel {
        display: none;
        flex-shrink: 0;
        align-self: center;
    }

    .workspace.generated .result-panel {
        display: block;
    }

    .result-panel .phone-frame {
        width: min(360px, 34vw);
        aspect-ratio: 9/16;
        max-height: calc(100vh - 110px);
        background: #383c4a;
        border-radius: 28px;
        padding: 8px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    }

    .result-panel .phone-notch {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 22px;
        background: #0a0a0f;
        border-radius: 0 0 14px 14px;
        z-index: 2;
    }

    .result-panel .phone-screen {
        width: 100%;
        height: 100%;
        background: #4a4f5f;
        border-radius: 20px;
        border: none;
        display: block;
    }

    /* ---------- BUILD OVERLAY ---------- */
    .build-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(10, 10, 15, 0.92);
        backdrop-filter: blur(6px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        text-align: center;
        padding: 20px;
    }

    .build-overlay.active {
        display: flex;
    }

    .build-spinner {
        width: 52px;
        height: 52px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: #33819e;
        border-radius: 50%;
        animation: build-spin 0.9s linear infinite;
    }

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

    .build-message {
        font-size: 15px;
        font-weight: 500;
        color: #e5e7eb;
        min-height: 22px;
        transition: opacity 0.25s ease;
    }

    .build-progress {
        width: 240px;
        height: 5px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        overflow: hidden;
    }

    .build-progress-fill {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #1c6d8b, #33819e);
        border-radius: 999px;
        transition: width 15s linear;
    }

    .main-settings {
        position: absolute;
        top: 24px;
        right: 28px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #9ca3af;
        cursor: pointer;
    }

    .main-settings:hover {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
    }

    .main-settings svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
    }

    .main-hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: center;
        max-width: 720px;
        width: 100%;
        min-height: 0;
    }

    /* ---------- PROMPT BOX (matches the main site) ---------- */
    .prompt-container {
        width: 100%;
        margin-top: 24px;
        flex-shrink: 0;
    }

    .prompt-box {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 8px;
        transition: all 0.3s;
        text-align: left;
    }

    .prompt-box:focus-within {
        border-color: #1c6d8b;
        box-shadow: 0 0 0 3px rgba(28, 109, 139, 0.1);
    }

    .prompt-input {
        width: 100%;
        background: transparent;
        border: none;
        padding: 16px 16px 8px;
        font-size: 16px;
        font-family: inherit;
        color: #fff;
        outline: none;
        resize: none;
    }

    .prompt-input::placeholder {
        color: #6b7280;
    }

    .prompt-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 4px 6px 6px;
    }

    .prompt-controls-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .btn-voice {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        flex-shrink: 0;
    }

    .btn-voice:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .btn-voice.listening {
        background: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
        animation: pulse-red 1.5s infinite;
    }

    @keyframes pulse-red {
        0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
        50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    }

    .btn-voice svg {
        width: 18px;
        height: 18px;
        fill: #9ca3af;
    }

    .btn-voice.listening svg {
        fill: #ef4444;
    }

    .btn-generate {
        padding: 11px 22px;
        background: linear-gradient(135deg, #1c6d8b, #33819e);
        color: #fff;
        border: none;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s;
        flex-shrink: 0;
    }

    .btn-generate:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(28, 109, 139, 0.3);
    }

    .btn-generate svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 860px) {
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 50;
            background: #0a0a0f;
            transform: translateX(-100%);
            transition: transform 0.3s;
        }

        .sidebar.open {
            transform: translateX(0);
        }

        .main {
            padding: 24px 18px;
            overflow-y: auto;
        }

        .workspace,
        .workspace.generated {
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 28px;
        }

        .workspace.generated .main-hero {
            max-width: 100%;
        }

        .result-panel .phone-frame {
            width: min(320px, 82vw);
            max-height: none;
        }

        .main-settings {
            top: 16px;
            right: 16px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

/* ---------- APP ID ---------- */
.is-hidden {
    display: none !important;
}

.sidebar-appid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.sidebar-appid-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.sidebar-appid-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #33819e;
    letter-spacing: 0.02em;
}

/* ---------- NOTICE ---------- */
.studio-notice {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(28, 109, 139, 0.1);
    border: 1px solid rgba(28, 109, 139, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: #d1d5db;
    text-align: left;
}

/* ---------- ACCOUNT ---------- */
.sidebar-upsell-secondary {
    background: none !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    padding: 6px 0 0 !important;
    text-decoration: underline;
}

.sidebar-upsell-secondary:hover {
    color: #fff !important;
}

.sidebar-account {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px 0;
    margin-bottom: 14px;
}

.sidebar-account-name {
    font-size: 12.5px;
    color: #d1d5db;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account-link {
    font-size: 11.5px;
    color: #9ca3af;
    text-decoration: underline;
    width: fit-content;
}

.sidebar-account-link:hover {
    color: #fff;
}

/* ---------- APP TOOLBAR ---------- */
.app-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 0 4px;
}

.app-toolbar-identity {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.app-icon-chip {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.app-name-input {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 7px;
    margin-left: -7px;
    width: 100%;
    min-width: 0;
    max-width: 240px;
    outline: none;
    text-overflow: ellipsis;
    cursor: text;
    transition: background 0.15s, border-color 0.15s;
}

.app-name-input:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.app-name-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #1c6d8b;
    text-overflow: clip;
}

.app-name-input.saved {
    border-color: #33819e;
}

.app-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.app-toolbar-btn {
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    color: #d1d5db;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.app-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ---------- MODALS ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(10, 10, 15, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal {
    width: 100%;
    max-width: 420px;
    /* Tall modals (settings) scroll inside instead of running off screen. */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.modal[hidden] {
    display: none;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 5px;
}

.modal-hint {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 18px;
}

.modal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 14.5px;
    font-family: inherit;
    color: #fff;
    outline: none;
}

.modal-input:focus {
    border-color: #1c6d8b;
    box-shadow: 0 0 0 3px rgba(28, 109, 139, 0.15);
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.icon-option {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid transparent;
    background-image: linear-gradient(135deg, var(--from), var(--to));
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, border-color 0.15s;
}

.icon-option:hover {
    transform: translateY(-2px);
}

.icon-option.selected {
    border-color: #fff;
}

.modal-upload {
    display: block;
    padding: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    font-size: 12.5px;
    color: #9ca3af;
    cursor: pointer;
    text-align: center;
}

.modal-upload:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #d1d5db;
}

.modal-upload input {
    display: block;
    margin: 10px auto 0;
    font-size: 12px;
    color: #9ca3af;
    max-width: 100%;
}

.modal-error {
    margin-top: 12px;
    font-size: 12.5px;
    color: #fca5a5;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 20px;
}

.modal-btn {
    padding: 9px 18px;
    background: linear-gradient(135deg, #1c6d8b, #33819e);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.modal-btn:hover {
    opacity: 0.9;
}

.modal-btn-ghost {
    padding: 9px 18px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #d1d5db;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}

.modal-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ---------- ICON PICKER ---------- */
.app-icon-chip svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
}

.app-icon-chip svg [fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

.modal-wide {
    max-width: 520px;
}

.icon-results-note {
    font-size: 11px;
    color: #6b7280;
    margin: 8px 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.icon-results {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 7px;
    max-height: 210px;
    overflow-y: auto;
    margin-top: 14px;
    padding: 3px;
}

.icon-result {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-radius: 9px;
    color: #d1d5db;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-result:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.icon-result.selected {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.2);
    color: #fff;
}

.icon-result svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
}

.icon-result svg [fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

.icon-empty {
    grid-column: 1 / -1;
    padding: 24px 0;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
}

.colour-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin: 18px 0;
}

.colour-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.colour-field input[type="color"] {
    width: 54px;
    height: 34px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
}

.colour-preview {
    margin-left: auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.colour-preview svg {
    width: 32px;
    height: 32px;
    stroke: currentColor;
    fill: none;
}

.colour-preview svg [fill="currentColor"] {
    fill: currentColor;
    stroke: none;
}

@media (max-width: 560px) {
    .icon-results {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ---------- CREDIT VALUE ---------- */
.sidebar-credit-value {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: -4px 0 14px;
}

.sidebar-credit-amount {
    font-size: 15px;
    font-weight: 700;
    color: #33819e;
}

.sidebar-credit-label {
    font-size: 11px;
    color: #6b7280;
}

/* ---------- TIER CHOOSER ---------- */
.tier-options {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.tier-option {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    font: inherit;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.tier-option:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.tier-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 109, 139, 0.45);
}

.tier-option.selected {
    background: linear-gradient(135deg, rgba(28, 109, 139, 0.22), rgba(51, 129, 158, 0.1));
    border-color: #33819e;
}

.tier-option-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 109, 139, 0.18);
    color: #5fb3d1;
    transition: background 0.18s, color 0.18s;
}

.tier-option.selected .tier-option-icon {
    background: linear-gradient(135deg, #1c6d8b, #33819e);
    color: #fff;
}

.tier-option-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.tier-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.tier-option-heading {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
}

.tier-option-description {
    font-size: 13px;
    line-height: 1.5;
    color: #9ca3af;
}

/* Right-hand indicator: empty ring, check when chosen, spinner while saving */
.tier-option-state {
    flex-shrink: 0;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.18s, background 0.18s;
}

.tier-check {
    width: 14px;
    height: 14px;
    color: #fff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s, transform 0.18s;
}

.tier-option.selected .tier-option-state {
    background: #33819e;
    border-color: #33819e;
}

.tier-option.selected .tier-check {
    opacity: 1;
    transform: scale(1);
}

.tier-spinner {
    display: none;
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #5fb3d1;
    animation: tier-spin 0.7s linear infinite;
}

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

.tier-option.is-loading .tier-spinner {
    display: block;
}

.tier-option.is-loading .tier-check {
    opacity: 0;
}

.tier-option.is-loading .tier-option-state {
    background: transparent;
    border-color: transparent;
}

/* While one is saving, the other fades back and neither can be clicked */
.tier-options.is-busy .tier-option {
    cursor: progress;
}

.tier-options.is-busy .tier-option:not(.is-loading) {
    opacity: 0.45;
}

@media (max-width: 480px) {
    .tier-option {
        gap: 12px;
        padding: 14px;
    }

    .tier-option-icon {
        width: 40px;
        height: 40px;
    }
}

/* ---------- TOOLTIPS ---------- */
[data-tip] {
    position: relative;
}

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
    width: max-content;
    max-width: 220px;
    padding: 7px 10px;
    background: #1f1f2a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 20;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 0.35s;
}

.btn-attach[data-tip]::after {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    transform: translate(0, 4px);
}

.btn-attach[data-tip]:hover::after,
.btn-attach[data-tip]:focus-visible::after {
    transform: translate(0, 0);
}

.btn-attach.is-open::after {
    display: none;
}

/* ---------- APP TOOLBAR (identity on the left) ---------- */
.app-toolbar {
    justify-content: flex-start;
    padding-right: 48px; /* keep clear of the settings gear */
}

button.app-icon-chip {
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

button.app-icon-chip:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.app-toolbar-identity .app-toolbar-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- PROMPT: ATTACH BUTTON & CHIPS ---------- */
.prompt-controls {
    justify-content: space-between;
}

.prompt-controls-left {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-attach {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.btn-attach:hover,
.btn-attach.is-open {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.btn-attach.is-open svg {
    transform: rotate(45deg);
}

.btn-attach svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.attach-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: 290px;
    padding: 6px;
    background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.attach-menu[hidden] {
    display: none;
}

.attach-menu button {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #e5e7eb;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.attach-menu button:hover,
.attach-menu button:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.attach-menu svg {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #33819e;
    flex-shrink: 0;
}

.attach-menu strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

.attach-menu small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #9ca3af;
}

.prompt-attachments {
    display: none;
    flex-wrap: wrap;
    gap: 7px;
    padding: 2px 14px 8px;
}

.prompt-attachments.has-items {
    display: flex;
}

.attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 240px;
    padding: 4px 4px 4px 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    font-size: 12.5px;
    color: #e5e7eb;
}

.attach-chip .file-thumb {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.attach-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attach-chip-tag {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.attach-chip-remove {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 5px;
    background: none;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.attach-chip-remove:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.prompt-box.is-dropping {
    border-color: #33819e;
    border-style: dashed;
    background: rgba(28, 109, 139, 0.08);
}

/* Shared: thumbnails and intent colours */
.file-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-thumb.is-sheet {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.1);
}

.file-thumb.is-sheet svg {
    width: 55%;
    height: 55%;
}

.intent-asset {
    background: rgba(51, 129, 158, 0.2);
    color: #7cc4dd;
}

.intent-reference {
    background: rgba(168, 85, 247, 0.16);
    color: #d8b4fe;
}

.intent-data {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

/* ---------- GALLERY ---------- */
.workspace[hidden],
.gallery-view[hidden] {
    display: none;
}

.gallery-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    min-height: 0;
}

.gallery-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-right: 48px;
    margin-bottom: 22px;
}

.gallery-title {
    font-size: 24px;
    font-weight: 700;
}

.gallery-subtitle {
    margin-top: 4px;
    font-size: 13.5px;
    color: #9ca3af;
}

.gallery-head-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gallery-usage {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    color: #9ca3af;
    min-width: 150px;
}

.gallery-usage-bar {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.gallery-usage-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #1c6d8b, #33819e);
    transition: width 0.3s;
}

.gallery-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 22px;
}

.gallery-folders {
    width: 210px;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-folders-label {
    margin: 14px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.gallery-folder {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #d1d5db;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.gallery-folder:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gallery-folder.active {
    background: rgba(28, 109, 139, 0.18);
    color: #fff;
}

.gallery-folder svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: #9ca3af;
}

.gallery-folder.active svg {
    color: #7cc4dd;
}

.gallery-folder-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-folder-count {
    font-size: 11.5px;
    color: #6b7280;
}

.gallery-files {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    border: 1px dashed transparent;
    border-radius: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.gallery-files.is-dropping {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.06);
}

.gallery-drop-hint {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #7cc4dd;
    background: rgba(10, 10, 15, 0.6);
    border-radius: 14px;
    pointer-events: none;
}

.gallery-files.is-dropping .gallery-drop-hint {
    display: flex;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    padding: 2px;
}

.gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    color: #9ca3af;
    font-size: 13.5px;
    text-align: center;
}

.gallery-empty[hidden] {
    display: none;
}

.gallery-empty svg {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    color: #4b5563;
}

.gallery-empty strong {
    color: #e5e7eb;
    font-size: 15px;
}

.gfile {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.gfile:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.gfile-preview {
    display: block;
}

.gfile-preview .file-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0;
}

.gfile-preview .file-thumb.is-sheet svg {
    width: 34%;
    height: 34%;
}

.gfile-meta {
    padding: 9px 10px 10px;
}

.gfile-ref {
    width: 100%;
    margin-left: -5px;
    padding: 3px 5px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    outline: none;
    text-overflow: ellipsis;
}

.gfile-ref:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.gfile-ref:focus {
    border-color: #1c6d8b;
    background: rgba(255, 255, 255, 0.05);
}

.gfile-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.gfile-intent {
    padding: 2px 8px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.gfile-intent:disabled {
    cursor: default;
}

.gfile-intent:not(:disabled):hover {
    filter: brightness(1.25);
}

.gfile-info {
    font-size: 11.5px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gfile-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.gfile:hover .gfile-actions,
.gfile:focus-within .gfile-actions {
    opacity: 1;
}

.gfile-action {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e5e7eb;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.gfile-action:hover {
    background: #1c6d8b;
    color: #fff;
}

.gfile-action.is-danger:hover {
    background: #b91c1c;
}

.gfile-action.is-copied {
    background: #15803d;
}

.gfile-action svg {
    width: 15px;
    height: 15px;
}

.gallery-guest {
    max-width: 440px;
    margin: 60px auto 0;
    padding: 28px;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.gallery-guest strong {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.gallery-guest p {
    font-size: 13.5px;
    color: #9ca3af;
    line-height: 1.5;
}

.gallery-guest-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* ---------- UPLOAD QUEUE ---------- */
.upload-queue {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 250;
    width: 320px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 8px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.upload-queue[hidden] {
    display: none;
}

.upload-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 10px;
    padding: 8px;
    font-size: 12.5px;
}

.upload-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e5e7eb;
}

.upload-status {
    color: #9ca3af;
    text-align: right;
}

.upload-bar {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.upload-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: #33819e;
    transition: width 0.2s;
}

.upload-row.is-done .upload-status {
    color: #86efac;
}

.upload-row.is-done .upload-bar span {
    background: #22c55e;
}

.upload-row.is-failed .upload-status {
    grid-column: 1 / -1;
    text-align: left;
    color: #fca5a5;
}

.upload-row.is-failed .upload-bar {
    display: none;
}

/* ---------- CONSENT / INTENT / PICKER ---------- */
a.modal-btn,
a.modal-btn-ghost {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.modal-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal-btn-danger {
    background: #b91c1c;
}

.consent-points {
    margin: 12px 0 14px;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #d1d5db;
}

.consent-points li + li {
    margin-top: 6px;
}

.consent-more {
    margin-bottom: 16px;
    font-size: 13px;
}

.consent-more summary {
    color: #7cc4dd;
    cursor: pointer;
    width: max-content;
}

.consent-full {
    margin-top: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9px;
    color: #9ca3af;
    line-height: 1.55;
}

.consent-full p + p {
    margin-top: 9px;
}

.consent-full strong {
    color: #e5e7eb;
}

.consent-version {
    font-size: 11.5px;
    color: #6b7280;
}

.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(28, 109, 139, 0.1);
    border: 1px solid rgba(28, 109, 139, 0.35);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    cursor: pointer;
}

.consent-check input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #1c6d8b;
    flex-shrink: 0;
}

.choice-options {
    display: grid;
    gap: 10px;
}

.choice-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.choice-option:hover,
.choice-option:focus-visible {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.1);
    outline: none;
}

.choice-option-heading {
    font-size: 14.5px;
    font-weight: 600;
}

.choice-option-description {
    font-size: 12.5px;
    color: #9ca3af;
    line-height: 1.5;
}

.picker-bar {
    display: flex;
    gap: 10px;
    margin: 14px 0 12px;
}

.picker-folder {
    flex: 1;
    padding: 9px 11px;
    font-size: 13.5px;
}

.picker-folder option {
    background: #14141c;
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
}

.picker-note {
    grid-column: 1 / -1;
    padding: 30px 0;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}

.picker-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid transparent;
    border-radius: 10px;
    color: #d1d5db;
    font-family: inherit;
    cursor: pointer;
}

.picker-tile:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
}

.picker-tile.selected {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.14);
}

.picker-tile:disabled {
    opacity: 0.4;
    cursor: default;
}

.picker-tile .file-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
}

.picker-tile-label {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .gallery-head {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 40px;
    }

    .gallery-body {
        flex-direction: column;
    }

    .gallery-folders {
        width: auto;
        flex-direction: row;
        overflow-x: auto;
    }

    .gallery-folders-label {
        display: none;
    }

    .gallery-folder {
        flex-shrink: 0;
    }

    .gfile-actions {
        opacity: 1;
    }
}

/* Name hugs its text so "App Icon" sits right beside it */
.app-toolbar-identity .app-name-input {
    width: auto;
    field-sizing: content;
    min-width: 60px;
    max-width: 200px;
}

/* ---------- MY APPS ---------- */
.apps-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    min-height: 0;
}

.apps-view[hidden] {
    display: none;
}

.apps-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px;
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.app-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.app-card.is-current {
    border-color: rgba(51, 129, 158, 0.55);
    background: rgba(28, 109, 139, 0.08);
}

.app-card.is-new {
    animation: app-card-in 0.5s ease;
}

@keyframes app-card-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

.app-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.app-card-link:focus-visible {
    outline: 2px solid #33819e;
    outline-offset: 2px;
}

.app-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 30px;
    min-width: 0;
}

.app-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.app-card-icon svg {
    width: 30px;
    height: 30px;
    stroke: currentColor;
    fill: none;
}

.app-card-icon svg [fill="currentColor"] {
    fill: currentColor;
}

.app-card-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.app-card-name {
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-code {
    font-size: 11.5px;
    color: #6b7280;
}

.app-card-badges {
    display: flex;
    gap: 6px;
}

.app-status,
.app-card-current {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.status-draft {
    background: rgba(234, 179, 8, 0.14);
    color: #fde047;
}

.status-released {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
}

.status-archived {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
}

.app-card-current {
    background: rgba(51, 129, 158, 0.2);
    color: #7cc4dd;
}

.app-card-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.app-card-meta dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 3px;
}

.app-card-meta dd {
    font-size: 12.5px;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-menu-btn {
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: #9ca3af;
    cursor: pointer;
}

.app-card-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.app-card-menu-btn svg {
    width: 18px;
    height: 18px;
}

.app-card-menu {
    position: absolute;
    top: 46px;
    right: 12px;
    z-index: 5;
    min-width: 150px;
    padding: 5px;
    background: #1a1a24;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

.app-card-menu[hidden] {
    display: none;
}

.app-card-menu button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 7px;
    color: #e5e7eb;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.app-card-menu button:hover {
    background: rgba(255, 255, 255, 0.07);
}

.app-card-menu button.is-danger {
    color: #fca5a5;
}

.app-card-new {
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 190px;
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.16);
    background: none;
    color: #9ca3af;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.app-card-new:hover {
    color: #fff;
    border-color: #33819e;
}

.app-card-new-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 109, 139, 0.18);
    color: #7cc4dd;
}

.app-card-new-icon svg {
    width: 20px;
    height: 20px;
}

.apps-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 16px 18px;
    background: rgba(28, 109, 139, 0.08);
    border: 1px solid rgba(28, 109, 139, 0.3);
    border-radius: 12px;
    font-size: 13.5px;
    color: #d1d5db;
}

/* ---------- BUILD ---------- */
.build-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #9ca3af;
}

/* ---------- PROMPT HISTORY ---------- */
.prompt-history {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 6px 4px 4px;
    text-align: left;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Few entries sit just above the prompt box, not at the top of the screen */
.prompt-history.has-items > :first-child {
    margin-top: auto;
}

.hist-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hist-prompt {
    align-self: flex-end;
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    background: rgba(28, 109, 139, 0.28);
    border: 1px solid rgba(51, 129, 158, 0.35);
    color: #f3f4f6;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.hist-item.is-restore .hist-prompt {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    font-style: italic;
    color: #d1d5db;
}

.hist-reply {
    align-self: flex-start;
    max-width: 92%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hist-summary {
    font-size: 14px;
    line-height: 1.5;
    color: #e5e7eb;
}

.hist-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
    color: #9ca3af;
}

.hist-item.is-failed .hist-result {
    color: #fca5a5;
}

.hist-time {
    color: #6b7280;
}

.hist-cost {
    font-size: 11.5px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hist-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #33819e;
    border-radius: 50%;
    animation: tier-spin 0.8s linear infinite;
}

.hist-restore {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #9ca3af;
    font: 500 12px inherit;
    font-family: inherit;
    cursor: pointer;
}

.hist-restore:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.hist-restore svg {
    width: 13px;
    height: 13px;
}

/* ---------- APP SETTINGS ---------- */
.settings-group {
    margin-bottom: 18px;
}

.settings-group[hidden] {
    display: none;
}

.settings-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9ca3af;
}

label.choice-option {
    position: relative;
    padding-left: 46px;
}

label.choice-option input {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #33819e;
}

label.choice-option:has(input:checked) {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.14);
}

.settings-note {
    font-size: 13px;
    line-height: 1.5;
    color: #9ca3af;
}

#settingsModal .modal-actions {
    flex-wrap: wrap;
}

/* ---------- APP USERS ---------- */
.nav-item[hidden] {
    display: none;
}

.nav-text {
    position: relative;
}

/* The number of users sits on the top-left corner of the label. */
.nav-badge {
    position: absolute;
    top: -8px;
    left: -11px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #33819e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px #0a0a0f;
}

.nav-badge[hidden] {
    display: none;
}

.users-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1080px;
    min-height: 0;
}

.users-view[hidden] {
    display: none;
}

.users-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 2px 24px;
}

.users-section + .users-section {
    margin-top: 26px;
}

.users-h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.users-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
}

.users-row.is-pending {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.06);
}

.users-row.is-disabled {
    opacity: 0.6;
}

.users-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 109, 139, 0.25);
    color: #cfe8f1;
    font-size: 13px;
    font-weight: 700;
}

.users-who {
    flex: 1;
    min-width: 0;
}

.users-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.users-you {
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #d1d5db;
}

.users-email {
    font-size: 13px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.users-status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

.users-status.is-active {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.users-status.is-pending {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.users-status.is-invited {
    background: rgba(51, 129, 158, 0.2);
    color: #9fd3e6;
}

.users-status.is-disabled {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.users-flag {
    color: #fcd34d;
    font-weight: 600;
}

.users-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.users-btn {
    padding: 7px 12px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #d1d5db;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.users-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.users-btn.is-primary {
    background: linear-gradient(135deg, #1c6d8b, #33819e);
    border-color: transparent;
    color: #fff;
}

.users-btn.is-danger:hover {
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.users-role {
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 12.5px;
    font-family: inherit;
}

.users-role option {
    color: #111;
}

.users-role-fixed {
    font-size: 12.5px;
    color: #9ca3af;
    padding: 0 6px;
}

.users-empty {
    margin-top: 12px;
    font-size: 13.5px;
    color: #9ca3af;
}

.users-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(28, 109, 139, 0.14);
    border: 1px solid rgba(51, 129, 158, 0.4);
    font-size: 13.5px;
    color: #d1d5db;
}

.users-notice[hidden],
.users-section[hidden] {
    display: none;
}

.users-field {
    display: block;
    margin-bottom: 14px;
}

.users-field > span {
    display: block;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 6px;
}

#addUserModal .settings-label {
    margin-top: 4px;
}

.invite-link-row {
    display: flex;
    gap: 8px;
}

.invite-link-row .modal-input {
    font-size: 12.5px;
    font-family: ui-monospace, Menlo, monospace;
}

.invite-qr {
    width: 200px;
    height: 200px;
    margin: 18px auto 0;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
}

.invite-qr:empty {
    display: none;
}

.invite-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.invite-qr-note {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

.invite-whatsapp {
    margin-right: auto;
}

@media (max-width: 700px) {
    .users-row {
        flex-wrap: wrap;
    }

    .users-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 52px;
    }

    .users-notice {
        flex-direction: column;
        align-items: flex-start;
    }
}

.users-field-note {
    margin: 2px 0 10px;
    font-size: 12.5px;
    color: #9ca3af;
}

.users-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 560px) {
    .users-field-pair {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---------- PREVIEW MODE ---------- */
.preview-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px auto 0;
    width: min(360px, 34vw);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-mode[hidden] {
    display: none;
}

.preview-mode-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}

.preview-mode.is-test .preview-mode-dot {
    background: #33819e;
}

.preview-mode.is-live {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
}

.preview-mode.is-live .preview-mode-dot {
    background: #f59e0b;
}

#previewModeLabel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-mode-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: #9fd3e6;
    font-size: 12px;
    font-family: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.result-panel .phone-frame {
    max-height: calc(100vh - 150px);
}

.settings-test {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #9ca3af;
}

.settings-test span {
    flex: 1;
}

@media (max-width: 860px) {
    .preview-mode {
        width: min(320px, 82vw);
    }

    .result-panel .phone-frame {
        max-height: none;
    }
}

/* ---------- WHILE BUILDING ---------- */
.build-elapsed {
    font-size: 12.5px;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
    min-height: 16px;
    margin-top: -12px;
}

.build-fun {
    max-width: 440px;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.build-fun[hidden] {
    display: none;
}

.build-fun.is-shown {
    opacity: 1;
    transform: none;
}

.build-fun-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9fd3e6;
}

.build-fun-label[hidden] {
    display: none;
}

.build-fun p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #e5e7eb;
}

.build-fun.is-quip p {
    font-size: 16px;
    font-style: italic;
    color: #fff;
}

/* ---------- IDEAS FOR THIS APP ---------- */
.hist-ideas {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(51, 129, 158, 0.1);
    border: 1px solid rgba(51, 129, 158, 0.28);
}

.hist-ideas-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9fd3e6;
}

.hist-ideas-head svg {
    width: 14px;
    height: 14px;
}

.hist-idea {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.hist-idea + .hist-idea {
    margin-top: 4px;
}

.hist-idea-text {
    flex: 1;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.45;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.hist-idea-text:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.hist-idea-x {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #9ca3af;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.hist-idea-x:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.settings-switch {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #9ca3af;
    cursor: pointer;
}

.settings-switch input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: #33819e;
}

/* ---------- MONTHLY COST ---------- */
.app-cost-btn[hidden] {
    display: none;
}

.app-cost-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 12px 5px 10px;
    background: linear-gradient(135deg, rgba(28, 109, 139, 0.35), rgba(51, 129, 158, 0.2));
    border: 1px solid rgba(51, 129, 158, 0.7);
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(51, 129, 158, 0.12);
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.app-cost-btn:hover {
    background: linear-gradient(135deg, rgba(28, 109, 139, 0.55), rgba(51, 129, 158, 0.35));
    box-shadow: 0 0 0 4px rgba(51, 129, 158, 0.2);
}

.app-cost-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9fd3e6;
}

.app-cost-amount {
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.app-cost-btn.is-changing {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.app-cost-btn.is-changing .app-cost-amount {
    color: #fcd34d;
}

/* The same figure in the menu, above the build credit. */
.sidebar-cost {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 12px 10px;
    text-align: left;
    background: linear-gradient(135deg, rgba(28, 109, 139, 0.28), rgba(51, 129, 158, 0.1));
    border: 1px solid rgba(51, 129, 158, 0.45);
    border-radius: 12px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sidebar-cost[hidden] {
    display: none;
}

.sidebar-cost:hover {
    border-color: rgba(51, 129, 158, 0.8);
    background: linear-gradient(135deg, rgba(28, 109, 139, 0.4), rgba(51, 129, 158, 0.16));
}

.sidebar-cost-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9fd3e6;
}

.sidebar-cost-amount {
    font-variant-numeric: tabular-nums;
}

.sidebar-cost-amount strong {
    font-size: 22px;
    font-weight: 800;
}

.sidebar-cost-amount span {
    font-size: 12px;
    color: #9ca3af;
    margin-left: 2px;
}

.sidebar-cost.is-changing .sidebar-cost-amount strong {
    font-size: 17px;
    color: #fcd34d;
}

.sidebar-cost-detail {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #9ca3af;
}

.sidebar-cost-detail > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-cost-more {
    color: #33819e;
    font-weight: 600;
    flex-shrink: 0;
}

/* How much of the starting build credit is left. */
.credit-bar {
    width: 100%;
    height: 6px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.credit-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1c6d8b, #33819e);
    border-radius: 999px;
    transition: width 0.6s ease, background 0.3s;
}

.credit-bar.is-low .credit-bar-fill {
    background: linear-gradient(90deg, #b91c1c, #ef4444);
}

.credit-bar-note {
    margin-top: 5px;
    font-size: 11px;
    color: #6b7280;
}

.credit-bar.is-low + .credit-bar-note {
    color: #f87171;
}

.cost-change {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(51, 129, 158, 0.12);
    border: 1px solid rgba(51, 129, 158, 0.35);
    font-size: 13px;
    color: #d1d5db;
}

.cost-change[hidden] {
    display: none;
}

.cost-change strong {
    font-size: 14.5px;
    color: #fff;
}

.cost-change.is-up {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.4);
}

.cost-lines {
    margin-bottom: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cost-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    color: #e5e7eb;
}

.cost-line-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cost-line-label small {
    font-size: 12px;
    color: #9ca3af;
}

.cost-line-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cost-line.is-total {
    font-weight: 700;
    color: #fff;
    border-bottom: 0;
}

.cost-included {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.cost-allow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cost-allow strong {
    font-size: 16px;
    color: #fff;
}

.cost-allow span {
    font-size: 12.5px;
    color: #d1d5db;
}

.cost-allow small {
    font-size: 11.5px;
    color: #9ca3af;
}

.cost-note {
    font-size: 12.5px;
    line-height: 1.5;
    color: #9ca3af;
}

@media (max-width: 560px) {
    .cost-included {
        grid-template-columns: 1fr;
    }
}

.cost-line.is-total small {
    font-weight: 400;
}

/* ---------- TEAM ---------- */
.team-switch {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px;
}

.team-switch-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.team-switch select {
    width: 100%;
    padding: 8px 10px;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
}

.credit-team-note {
    margin-top: 3px;
    font-size: 11px;
    color: #9ca3af;
}

.team-rename {
    margin-left: 8px;
    padding: 3px 9px;
    vertical-align: middle;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #9ca3af;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.team-rename:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.team-rename[hidden] {
    display: none;
}

.team-name-input {
    max-width: 320px;
    font-size: 18px;
    font-weight: 700;
}

.team-roles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.team-roles div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
}

.team-roles strong {
    font-size: 12.5px;
    color: #9fd3e6;
}

.team-roles span {
    font-size: 11.5px;
    line-height: 1.45;
    color: #9ca3af;
}

.team-all-apps {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #d1d5db;
    margin-bottom: 10px;
    cursor: pointer;
}

.team-app-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.team-app-list[hidden],
#teamAppsGroup[hidden],
#teamLimitGroup[hidden],
#teamEmailField[hidden] {
    display: none;
}

.team-app {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #d1d5db;
    cursor: pointer;
    min-width: 0;
}

.team-app span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-limit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
}

.team-limit-row span {
    color: #9ca3af;
    font-weight: 600;
}

@media (max-width: 900px) {
    .team-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .team-roles,
    .team-app-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- NOTIFICATIONS ---------- */
.push-off {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
    background: rgba(28, 109, 139, 0.12);
    border: 1px solid rgba(51, 129, 158, 0.35);
    border-radius: 12px;
}

.push-off div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #9ca3af;
}

.push-off strong {
    color: #fff;
    font-size: 14px;
}

.push-off[hidden],
.push-grid[hidden],
.push-people[hidden] {
    display: none;
}

.push-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 26px;
}

.push-card,
.push-side {
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.push-body {
    resize: vertical;
    min-height: 76px;
    font-family: inherit;
}

.push-count {
    margin: -6px 0 12px;
    text-align: right;
    font-size: 11px;
    color: #6b7280;
}

.push-audience {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.push-people {
    display: grid;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.push-person {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 2px;
    font-size: 13px;
    color: #d1d5db;
    cursor: pointer;
}

.push-person.is-none {
    opacity: 0.5;
    cursor: default;
}

.push-person-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.push-person-devices {
    font-size: 11.5px;
    color: #6b7280;
}

.push-preview {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px;
    margin: 6px 0 12px;
    background: #f3f4f6;
    border-radius: 16px;
    color: #111827;
}

.push-preview-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.push-preview-icon svg {
    width: 22px;
    height: 22px;
}

.push-preview-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
}

.push-preview-app {
    font-size: 11px;
    color: #6b7280;
}

.push-preview-text strong {
    font-size: 13.5px;
}

.push-preview-text span:last-child {
    color: #374151;
    overflow-wrap: anywhere;
}

.push-sent-body {
    font-size: 12.5px;
    color: #9ca3af;
    margin: 2px 0 4px;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .push-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.push-rules-note {
    margin: -2px 0 12px;
}

.push-rule.is-disabled .users-name,
.push-rule.is-disabled .push-sent-body {
    opacity: 0.5;
}

.push-rule-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #d1d5db;
    cursor: pointer;
}

.push-rule-switch input {
    width: 16px;
    height: 16px;
    accent-color: #33819e;
}

#pushRulesSection[hidden] {
    display: none;
}

/* ---------- REPORTS ---------- */
.reports-view {
    max-width: 1280px;
}

.reports-list,
.report-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.reports-list[hidden],
.report-detail[hidden],
.reports-starter[hidden],
.reports-busy[hidden],
.report-change[hidden],
.reports-view [hidden] {
    display: none;
}

.reports-starter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
    background: rgba(28, 109, 139, 0.12);
    border: 1px solid rgba(51, 129, 158, 0.35);
    border-radius: 12px;
}

.reports-starter div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #9ca3af;
}

.reports-starter strong {
    color: #fff;
    font-size: 14px;
}

.reports-busy {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13.5px;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.reports-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #33819e;
    border-radius: 50%;
    animation: reports-spin 0.8s linear infinite;
}

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

.report-card-icon {
    color: #fff;
    background: linear-gradient(135deg, #1c6d8b, #33819e);
}

.report-card.is-draft .report-card-icon {
    background: linear-gradient(135deg, #374151, #4b5563);
}

.report-card-sub {
    font-family: inherit;
}

.report-card-new {
    min-height: 170px;
}

.report-card-new:disabled {
    opacity: 0.5;
    cursor: wait;
}

.report-card-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 999px;
    vertical-align: middle;
}

.report-card-status.is-draft {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.08);
}

.report-card-status.is-published {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

.reports-rate-note {
    margin-top: 18px;
}

.report-head {
    align-items: flex-start;
    flex-wrap: wrap;
}

.report-head-main {
    min-width: 0;
}

.report-back {
    margin-bottom: 8px;
    padding: 0;
    background: none;
    border: 0;
    color: #5fb3c9;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.report-back:hover {
    color: #fff;
}

.report-actions {
    flex-wrap: wrap;
    gap: 8px;
}

.report-delete:hover {
    border-color: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.report-title-input {
    display: inline-block;
    width: min(420px, 70vw);
    font-size: 20px;
    font-weight: 700;
}

.report-change {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.report-change .modal-input {
    flex: 1;
    margin: 0;
}

.report-new-prompt {
    resize: vertical;
    min-height: 96px;
    font-family: inherit;
}

/* The report itself (also used by shared links later). Colours come
   from the report's theme, set as CSS variables by report-view.js. */
.rv {
    --rv-bg: #0d0d14;
    --rv-card: #15151d;
    --rv-border: rgba(255, 255, 255, 0.08);
    --rv-text: #e5e7eb;
    --rv-muted: #9ca3af;
    --rv-line: rgba(255, 255, 255, 0.08);
    --rv-accent: #33819e;
    --rv-accent-text: #ffffff;
    --rv-input: rgba(255, 255, 255, 0.05);
    --rv-input-border: rgba(255, 255, 255, 0.14);
    --rv-page-text: #e5e7eb;
    --rv-page-muted: #9ca3af;
    --rv-panel: #1a1a24;
    --rv-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    color: var(--rv-text);
    background: var(--rv-bg);
    border-radius: 16px;
    transition: background 0.25s;
}

.rv-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.rv-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rv-page-muted);
}

.rv-filter select {
    min-width: 150px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rv-page-text);
    background: var(--rv-input);
    border: 1px solid var(--rv-input-border);
    border-radius: 8px;
}

.rv-filter select option {
    color: #111827;
    background: #fff;
}

/* From and To, when the dates are picked by hand. */
.rv-dates-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rv-dates input[type="date"] {
    padding: 7px 8px;
    font-family: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rv-page-text);
    background: var(--rv-input);
    border: 1px solid var(--rv-input-border);
    border-radius: 8px;
}

/* The browser's little calendar button is black on a dark report. */
.rv-dates input[type="date"]::-webkit-calendar-picker-indicator {
    filter: var(--rv-date-icon, none);
    cursor: pointer;
}

.rv-dates-dash {
    font-size: 13px;
    text-transform: none;
    color: var(--rv-page-muted);
}

.rv-dates-go {
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rv-accent-text);
    background: var(--rv-accent);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.rv-dates-go:hover {
    filter: brightness(1.08);
}

.rv-range {
    margin-left: auto;
    padding-bottom: 9px;
    font-size: 12.5px;
    color: var(--rv-page-muted);
}

.rv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.rv-card {
    flex: 1 1 calc(50% - 14px);
    min-width: 0;
    padding: 16px 18px;
    color: var(--rv-text);
    background: var(--rv-card);
    border: 1px solid var(--rv-border);
    border-radius: var(--rv-radius);
    transition: background 0.25s, border-color 0.25s;
}

.rv-title {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rv-text);
    opacity: 0.9;
}

.rv-kpi {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--rv-kpi, var(--rv-text));
    overflow-wrap: anywhere;
}

.rv-compare {
    margin-top: 6px;
    font-size: 12px;
    color: var(--rv-muted);
}

.rv-compare.is-up { color: var(--rv-up, #22c55e); }
.rv-compare.is-down { color: var(--rv-down, #ef4444); }

/* Solid number tiles (the Bold look, or a coloured number part) */
.rv-card.is-solid {
    border-color: transparent;
}

.rv-card.is-solid .rv-title,
.rv-card.is-solid .rv-kpi,
.rv-card.is-solid .rv-compare {
    color: inherit;
    opacity: 1;
}

.rv-card.is-solid .rv-compare {
    opacity: 0.85;
}

.rv-chart {
    width: 100%;
    height: 260px;
}

.rv-table-wrap {
    max-height: 360px;
    overflow: auto;
}

.rv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rv-table th,
.rv-table td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--rv-line);
    white-space: nowrap;
}

.rv-table th {
    position: sticky;
    top: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rv-muted);
    background: var(--rv-card);
}

.rv-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rv-empty,
.rv-loading {
    padding: 28px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--rv-muted);
}

.rv-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rv-text);
    white-space: pre-line;
}

@media (max-width: 900px) {
    .rv-grid > .rv-card { flex-basis: 100% !important; }
    .rv-grid > .rv-card.rv-w-kpi { flex-basis: calc(50% - 14px) !important; }
}

@media (max-width: 560px) {
    .rv { padding: 12px; }
    .rv-grid > .rv-card { flex-basis: 100% !important; }
    .reports-starter, .report-change { flex-direction: column; align-items: stretch; }
    .rv-range { margin-left: 0; }
}

/* ---------- REPORTS: filters with several picks ---------- */
.rv-multi {
    position: relative;
}

.rv-multi-btn {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 150px;
    max-width: 220px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--rv-page-text);
    text-align: left;
    background: var(--rv-input);
    border: 1px solid var(--rv-input-border);
    border-radius: 8px;
    cursor: pointer;
}

.rv-multi-btn.is-set {
    border-color: var(--rv-accent);
    box-shadow: inset 0 0 0 1px var(--rv-accent);
}

.rv-multi-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rv-multi-caret {
    font-size: 10px;
    color: var(--rv-page-muted);
}

.rv-multi-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 240px;
    padding: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--rv-text);
    background: var(--rv-panel);
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.rv-multi-panel[hidden],
.rv-multi-option[hidden] {
    display: none;
}

.rv-multi-search {
    width: 100%;
    margin-bottom: 4px;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--rv-text);
    background: var(--rv-input);
    border: 1px solid var(--rv-border);
    border-radius: 7px;
}

.rv-multi-clear {
    display: block;
    width: 100%;
    padding: 7px 9px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--rv-accent);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.rv-multi-clear:hover,
.rv-multi-option:hover {
    background: var(--rv-line);
}

.rv-multi-list {
    max-height: 260px;
    overflow-y: auto;
}

.rv-multi-option {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--rv-text);
    border-radius: 7px;
    cursor: pointer;
}

.rv-multi-option input {
    accent-color: var(--rv-accent);
    width: 15px;
    height: 15px;
}

.rv-multi-none {
    padding: 8px 9px;
    font-size: 12.5px;
    color: var(--rv-muted);
}

/* ---------- REPORTS: designing by hand ---------- */
.report-editbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
}

.report-editbar[hidden],
.report-settings[hidden] {
    display: none;
}

.report-editbar-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    color: #d1d5db;
}

.report-editbar-main strong {
    font-size: 14px;
    color: #fcd34d;
}

.report-editbar-grip {
    display: inline-block;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}

.report-editbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-edit-status {
    font-size: 12px;
    color: #9ca3af;
}

.report-edit-status.is-dirty {
    color: #fcd34d;
}

.report-settings {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 2fr);
    gap: 14px;
    padding: 16px 18px 4px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.report-set-filters > span {
    display: block;
    font-size: 12.5px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.report-chips,
#reportSetFilters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.report-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 11px;
    font-size: 13px;
    color: #e5e7eb;
    background: rgba(51, 129, 158, 0.16);
    border: 1px solid rgba(51, 129, 158, 0.45);
    border-radius: 999px;
}

.report-chip small {
    font-size: 11px;
    color: #9ca3af;
}

.report-chip-none {
    font-size: 12.5px;
    color: #6b7280;
}

.report-chip-x {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: #9ca3af;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.report-chip-x:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.report-add-filter {
    width: auto;
    min-width: 170px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* A part's toolbar while editing */
.rv-editing .rv-card {
    position: relative;
    outline: 1px dashed var(--rv-page-muted);
    outline-offset: 3px;
}

.rv-editing .rv-card:hover {
    outline-color: var(--rv-accent);
}

.rv-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px -8px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rv-line);
}

.rv-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.7;
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.rv-edit-btn svg {
    width: 16px;
    height: 16px;
}

.rv-edit-btn:hover {
    opacity: 1;
    background: var(--rv-line);
}

.rv-edit-drag {
    cursor: grab;
    touch-action: none;
}

.rv-edit-drag:active {
    cursor: grabbing;
}

.rv-edit-remove:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
}

.rv-edit-sizes {
    display: inline-flex;
    margin-right: auto;
    padding: 2px;
    background: var(--rv-line);
    border-radius: 8px;
}

.rv-edit-sizes button {
    min-width: 28px;
    padding: 4px 7px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: inherit;
    opacity: 0.7;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.rv-edit-sizes button:hover {
    opacity: 1;
}

.rv-edit-sizes button.is-on {
    opacity: 1;
    color: var(--rv-accent-text);
    background: var(--rv-accent);
}

.rv-card-ghost {
    opacity: 0.35;
    outline-color: var(--rv-accent) !important;
}

.rv-add {
    flex: 1 1 calc(25% - 14px);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--rv-page-muted);
    background: none;
    border: 1px dashed var(--rv-page-muted);
    border-radius: var(--rv-radius);
    cursor: pointer;
}

.rv-add:hover:not(:disabled) {
    color: var(--rv-page-text);
    border-color: var(--rv-accent);
}

.rv-add:disabled {
    opacity: 0.4;
    cursor: default;
}

.rv-add-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--rv-accent-text);
    background: var(--rv-accent);
}

.rv-add-icon svg {
    width: 18px;
    height: 18px;
}

/* The part editor */
.report-part-modal {
    max-width: 560px;
}

.report-part-form {
    max-height: 62vh;
    overflow-y: auto;
    padding-right: 4px;
}

.report-part-note {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #9ca3af;
}

.report-part-text {
    resize: vertical;
    font-family: inherit;
}

.report-part-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.report-part-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
    color: #e5e7eb;
    cursor: pointer;
}

.report-part-form > .report-part-check {
    margin: -4px 0 14px;
}

.report-part-check input {
    accent-color: #33819e;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.report-part-where {
    margin-top: 4px;
}

.report-where-row {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1.1fr 26px;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

.report-where-row .modal-input {
    margin: 0;
}

.report-where-row .modal-input[hidden] {
    visibility: hidden;
    display: block;
}

.report-link-btn {
    margin-top: 6px;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    color: #7cc4dd;
    background: none;
    border: 0;
    cursor: pointer;
}

.report-link-btn:hover {
    color: #fff;
}

.report-new-actions .report-new-blank {
    margin-right: auto;
}

@media (max-width: 900px) {
    .report-settings { grid-template-columns: 1fr 1fr; }
    .report-set-filters { grid-column: 1 / -1; }
    .rv-add { flex-basis: 100%; }
}

@media (max-width: 560px) {
    .report-settings { grid-template-columns: 1fr; }
    .report-where-row { grid-template-columns: 1fr 1fr; }
    .report-part-checks { grid-template-columns: 1fr; }
    .rv-multi-btn { min-width: 0; max-width: none; width: 100%; }
    .rv-multi-panel { width: min(280px, calc(100vw - 40px)); }
}

/* ---------- REPORTS: looks and colours ---------- */
.report-set-look {
    grid-column: 1 / -1;
    padding-bottom: 14px;
}

.report-set-look-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.report-set-look-head span {
    font-size: 12.5px;
    color: #9ca3af;
}

.report-set-look-head small {
    font-size: 11.5px;
    color: #6b7280;
}

.report-looks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.report-look {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 5px 5px 7px;
    font-family: inherit;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.report-look:hover {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.report-look.is-on {
    border-color: #33819e;
    box-shadow: 0 0 0 2px rgba(51, 129, 158, 0.45);
}

.report-look-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* The little drawing of a look */
.rt-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 76px;
    padding: 6px;
    border-radius: 7px;
    overflow: hidden;
}

.rt-row {
    display: flex;
    gap: 5px;
    min-height: 0;
}

.rt-row:first-child {
    flex: 0 0 22px;
}

.rt-row:last-child {
    flex: 1;
}

.rt-tile {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
}

.rt-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 6px;
}

.rt-kpi i {
    display: block;
    width: 45%;
    height: 2px;
    border-radius: 2px;
    opacity: 0.7;
}

.rt-kpi b {
    display: block;
    width: 70%;
    height: 5px;
    border-radius: 2px;
}

.rt-bars {
    flex: 1.6;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 5px 6px;
}

.rt-bars span {
    flex: 1;
    border-radius: 2px 2px 0 0;
}

.rt-donut {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rt-donut span {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.rt-donut em {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
}

.report-colours {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

.report-colours-label {
    font-size: 12.5px;
    color: #9ca3af;
}

.report-colour {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #e5e7eb;
    cursor: pointer;
}

.report-colour input,
.report-swatch.is-custom input {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.report-colour input::-webkit-color-swatch-wrapper { padding: 2px; }
.report-colour input::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* A part's colour */
.report-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.report-swatch {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.report-swatch.is-on {
    border-color: #fff;
    box-shadow: 0 0 0 2px #33819e;
}

.report-swatch.is-auto {
    width: auto;
    padding: 0 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.06);
}

.report-swatch.is-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #a855f7, #ef4444);
    overflow: hidden;
}

.report-swatch.is-custom input {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.report-sets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 7px;
}

.report-set {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    font-family: inherit;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
}

.report-set.is-on {
    border-color: #33819e;
    box-shadow: 0 0 0 2px rgba(51, 129, 158, 0.45);
}

.report-set-strip {
    display: flex;
    height: 12px;
    border-radius: 4px;
    overflow: hidden;
}

.report-set-strip i {
    flex: 1;
}

.report-set-name {
    font-size: 11.5px;
    text-align: left;
}

@media (max-width: 560px) {
    .report-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rt-preview { height: 64px; }
}

/* ---------- REPORTS: the picture picker and new parts ---------- */
.report-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.report-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 6px 8px;
    font-family: inherit;
    color: #d1d5db;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.report-type:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.05);
}

.report-type.is-on {
    border-color: #33819e;
    background: rgba(51, 129, 158, 0.14);
    box-shadow: 0 0 0 2px rgba(51, 129, 158, 0.4);
}

.report-type:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.report-type-pic svg {
    display: block;
    width: 48px;
    height: 36px;
    color: #9ca3af;
}

.report-type strong {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.report-type small {
    font-size: 10.5px;
    line-height: 1.3;
    color: #9ca3af;
}

.report-choice-row {
    display: inline-flex;
    padding: 3px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9px;
}

.report-choice {
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    color: #d1d5db;
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.report-choice.is-on {
    color: #fff;
    background: #33819e;
}

.report-part-colours {
    padding-top: 4px;
}

.rv-chart-gauge {
    height: 210px;
}

.rv-ring-key {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--rv-muted);
}

.rv-ring-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rv-ring-item i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.report-part-modal {
    max-width: 640px;
}

/* ---------- REPORTS: maps ---------- */
.rv-chart-map,
.rv-chart-region {
    height: 340px;
}

.rv-map {
    position: relative;
    isolation: isolate;          /* keeps the map's layers under studio windows */
    overflow: hidden;
    border-radius: calc(var(--rv-radius) - 4px);
    background: var(--rv-line);
    font-family: inherit;
}

.rv-map.is-dark .leaflet-tile {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.6);
}

.rv-map .leaflet-control-attribution {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.75);
}

.rv-map.is-dark .leaflet-control-attribution {
    color: #d1d5db;
    background: rgba(0, 0, 0, 0.55);
}

.rv-map.is-dark .leaflet-control-attribution a {
    color: #93c5fd;
}

.rv-map .leaflet-bar a {
    color: #111827;
}

.rv-cluster {
    background: none;
}

.rv-cluster span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.rv-pin {
    border-collapse: collapse;
    font-size: 12.5px;
}

.rv-pin th {
    padding: 2px 10px 2px 0;
    font-weight: 600;
    color: #6b7280;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
}

.rv-pin td {
    padding: 2px 0;
    color: #111827;
}

.rv-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--rv-muted);
}

/* ---------- AI in this app ---------- */
.settings-ai {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    color: #d1d5db;
}

.settings-ai .is-warning {
    color: #fcd34d;
}

.ai-cost-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #d1d5db;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
}

.ai-cost-box strong {
    font-size: 14px;
    color: #fcd34d;
}

.ai-usage {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.ai-usage[hidden] {
    display: none;
}

.ai-usage-head {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: #fff;
}

.ai-bar {
    height: 6px;
    margin: 10px 0 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.ai-bar span {
    display: block;
    height: 100%;
    background: #33819e;
    border-radius: inherit;
}

.ai-bar.is-warn span {
    background: #f59e0b;
}

.ai-bar.is-full span {
    background: #ef4444;
}

.ai-usage-facts {
    font-size: 12px;
    color: #9ca3af;
}

.ai-usage-alert {
    margin-top: 8px;
    font-size: 12.5px;
    color: #fcd34d;
}

.ai-people {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ai-person {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 12.5px;
    color: #d1d5db;
}

.ai-limit .modal-input {
    max-width: 180px;
}

.ai-agree {
    margin: 6px 0 10px;
}

.ai-agree[hidden],
.ai-readonly[hidden] {
    display: none;
}

.ai-jobs {
    margin-top: 12px;
}

.ai-job {
    padding: 6px 10px;
    margin-top: 6px;
    font-size: 13px;
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 7px;
}

.sidebar-cost.is-warning {
    border-color: rgba(245, 158, 11, 0.6);
}

/* ---------- REPORTS: downloads ---------- */
.rv-card.has-dl {
    position: relative;
}

.rv-card.has-dl > .rv-title {
    padding-right: 30px;
}

.rv-dl {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--rv-text);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rv-card.has-dl:hover .rv-dl,
.rv-dl:focus-visible,
.rv-dl.is-busy {
    opacity: 0.75;
}

.rv-card.is-solid .rv-dl {
    color: inherit;
}

@media (hover: none) {
    .rv-dl { opacity: 0.6; }
}

.rv-dl.is-busy svg,
.rv-slides.is-busy svg {
    animation: rv-dl-pulse 0.9s ease-in-out infinite;
}

@keyframes rv-dl-pulse {
    50% { opacity: 0.3; }
}

.rv-slides {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rv-page-text);
    background: var(--rv-input);
    border: 1px solid var(--rv-input-border);
    border-radius: 8px;
    cursor: pointer;
}

.rv-slides svg {
    width: 16px;
    height: 16px;
}

.rv-slides:hover {
    border-color: var(--rv-accent);
}

.rv-slides[disabled] {
    cursor: progress;
    opacity: 0.7;
}

.report-set-downloads {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.report-set-dl-head {
    font-size: 12.5px;
    color: #9ca3af;
}

.report-switch {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.report-switch input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: #33819e;
}

.report-switch span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.report-switch strong {
    font-size: 13.5px;
    font-weight: 600;
    color: #e5e7eb;
}

.report-switch small,
.report-set-dl-note {
    font-size: 11.5px;
    color: #6b7280;
}

.report-switch.is-off {
    opacity: 0.5;
    cursor: default;
}

/* ---------- REPORTS: share links ---------- */
.share-new {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.share-new .modal-btn {
    height: 42px;
    white-space: nowrap;
}

.share-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
}

.share-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.share-row-main strong {
    font-size: 13.5px;
    color: #e5e7eb;
}

.share-link {
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.share-row-facts {
    font-size: 11.5px;
    color: #6b7280;
}

.share-row-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .share-new { grid-template-columns: 1fr; }
    .share-row { flex-direction: column; align-items: stretch; }
}

/* ---------- A report opened from a share link ---------- */
.shared-page {
    /* The studio's body is a sidebar layout that never scrolls; this page does. */
    display: block;
    height: auto;
    overflow: visible;
    margin: 0;
    min-height: 100vh;
    background: #0b1220;
    color: #e5e7eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.shared-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 28px 0;
}

.shared-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.shared-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

.shared-brand {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}

.shared-body {
    padding: 8px 12px 0;
}

.shared-foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 6px 28px 28px;
    font-size: 11.5px;
    color: #6b7280;
}

.shared-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.shared-card {
    width: 100%;
    max-width: 420px;
    padding: 28px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 14px;
}

.shared-card h1 {
    margin: 0 0 8px;
    font-size: 20px;
}

.shared-card p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #9ca3af;
}

.shared-card .modal-btn {
    width: 100%;
    margin-top: 14px;
}

.shared-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: #9ca3af;
}

.shared-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5 !important;
}

.shared-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: 90vw;
    padding: 12px 16px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 10px;
    font-size: 13.5px;
    color: #e5e7eb;
    z-index: 50;
}

@media (max-width: 560px) {
    .shared-head, .shared-foot { padding-left: 16px; padding-right: 16px; }
}

/* ---------- DASHBOARD ---------- */
.dash-view {
    max-width: 1180px;
}

.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.dash-tile-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.dash-tile-value {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.dash-tile-note {
    font-size: 12.5px;
    color: #9ca3af;
}

.dash-bar {
    height: 6px;
    margin-top: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.dash-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #5fb3c9;
    transition: width 0.3s;
}

.dash-bar.is-low .dash-bar-fill {
    background: #f59e0b;
}

.dash-block + .dash-block,
.dash-pair {
    margin-top: 28px;
}

.dash-heading {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
}

.dash-quiet {
    font-size: 13.5px;
    color: #6b7280;
}

/* Things that need somebody */
.dash-need {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: inherit;
}

.dash-need + .dash-need {
    margin-top: 8px;
}

a.dash-need:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.dash-need-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}

.dash-need-icon svg {
    width: 17px;
    height: 17px;
}

.dash-need-icon.is-credit {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.dash-need-icon.is-push {
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
}

.dash-need-icon.is-draft {
    background: rgba(95, 179, 201, 0.14);
    color: #5fb3c9;
}

.dash-need-words {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
}

.dash-need-words strong {
    font-weight: 600;
    color: #e5e7eb;
}

.dash-need-words span {
    color: #9ca3af;
    font-size: 12.5px;
}

/* The apps, as a list */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.dash-table th {
    padding: 0 12px 8px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.dash-table td {
    padding: 11px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #d1d5db;
    vertical-align: middle;
}

.dash-app-name {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.dash-app-name:hover {
    text-decoration: underline;
}

.dash-app-size {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
}

.dash-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.dash-pill.is-live {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.14);
}

.dash-pill.is-draft {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
}

.dash-num {
    font-variant-numeric: tabular-nums;
}

.dash-num.is-quiet {
    color: #6b7280;
}

.dash-when {
    color: #9ca3af;
    white-space: nowrap;
}

/* What's been happening, beside the chart */
.dash-pair {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr);
    gap: 28px;
    align-items: start;
}

.dash-pair .dash-block + .dash-block,
.dash-pair .dash-block {
    margin-top: 0;
}

.dash-feed {
    list-style: none;
    font-size: 13px;
}

.dash-feed li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #9ca3af;
}

.dash-feed-said {
    min-width: 0;
}

.dash-feed li:first-child {
    border-top: 0;
}

.dash-feed strong {
    color: #e5e7eb;
    font-weight: 600;
}

.dash-feed-app {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.06);
}

.dash-feed-when {
    flex-shrink: 0;
    font-size: 11.5px;
    color: #6b7280;
    white-space: nowrap;
}

/* Builds and spending, week by week */
.dash-chart {
    width: 100%;
    height: auto;
}

.dash-chart-bar {
    fill: rgba(95, 179, 201, 0.55);
}

.dash-chart-line {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.dash-chart-dot {
    fill: #f59e0b;
}

.dash-chart-label {
    font-size: 10px;
    fill: #6b7280;
}

.dash-key {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

.dash-key span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 3px;
    vertical-align: -1px;
}

.dash-key-bar::before {
    background: rgba(95, 179, 201, 0.55);
}

.dash-key-line::before {
    background: #f59e0b;
}

@media (max-width: 900px) {
    .dash-pair {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dash-pair .dash-block + .dash-block {
        margin-top: 24px;
    }

    .dash-table th:nth-child(4),
    .dash-table td:nth-child(4),
    .dash-table th:nth-child(5),
    .dash-table td:nth-child(5),
    .dash-table th:nth-child(7),
    .dash-table td:nth-child(7) {
        display: none;
    }
}

/* The team, counted by what they may do */
.dash-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.dash-role {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 96px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.dash-role strong {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.dash-role span {
    font-size: 11.5px;
    color: #9ca3af;
}

/* Reports and what they cost */
.dash-report-name {
    color: #fff;
    font-weight: 600;
}

.dash-report-sum {
    margin-top: 10px;
}

/* Top up, beside Refresh on the dashboard */
.dash-topup {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.dash-topup svg {
    width: 16px;
    height: 16px;
}

/* Notifications that went out */
.dash-sent-count {
    margin: -6px 0 10px;
}

.dash-sent-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dash-sent-row:first-child {
    border-top: 0;
}

.dash-sent-words {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 13.5px;
}

.dash-sent-words strong {
    color: #e5e7eb;
    font-weight: 600;
}

.dash-sent-body {
    font-size: 12.5px;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-sent-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-size: 11.5px;
    color: #6b7280;
}

.dash-sent-auto {
    padding: 1px 7px;
    border-radius: 999px;
    color: #5fb3c9;
    background: rgba(95, 179, 201, 0.14);
}

.dash-sent-how {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    font-size: 12.5px;
    color: #9ca3af;
    text-align: right;
}

.dash-sent-how strong {
    font-size: 13px;
    font-weight: 600;
    color: #e5e7eb;
}

.dash-sent-bad {
    color: #f87171 !important;
}

.dash-sent-when {
    font-size: 11.5px;
    color: #6b7280;
}

@media (max-width: 620px) {
    .dash-sent-row {
        flex-direction: column;
        gap: 6px;
    }

    .dash-sent-how {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---------- MANAGE DATA ---------- */
/* The header is a flex row, so hiding it needs saying twice. */
.gallery-head[hidden] {
    display: none;
}

.dash-manage {
    text-align: right;
    white-space: nowrap;
}

.dash-manage-btn {
    padding: 6px 12px;
    font-size: 12.5px;
}

.data-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12.5px;
}

.data-crumb {
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    color: #5fb3c9;
    background: none;
    border: 0;
    cursor: pointer;
}

.data-crumb:hover {
    text-decoration: underline;
}

.data-crumb.is-here {
    color: #9ca3af;
    cursor: default;
}

.data-crumb-sep {
    color: #4b5563;
}

.data-head {
    margin-bottom: 18px;
}

/* The modules, as cards */
.data-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.data-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    text-align: left;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.data-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.data-card-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.data-card-count {
    font-size: 12.5px;
    color: #9ca3af;
}

.data-card-table {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #6b7280;
    word-break: break-all;
    user-select: all;
}

/* The bar above a table */
.data-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.data-search {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
}

.data-search:focus {
    outline: none;
    border-color: #5fb3c9;
}

.data-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #9ca3af;
    white-space: nowrap;
    cursor: pointer;
}

/* The records */
.data-scroll {
    overflow-x: auto;
}

.data-table {
    min-width: 100%;
}

.data-table td {
    white-space: nowrap;
}

/* The headings sit on their own band, so the rows read clearly beneath. */
.data-table thead th {
    padding-top: 9px;
    background: rgba(255, 255, 255, 0.085);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0;
}

.data-table thead th:first-child {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 0;
}

.data-table thead th:last-child {
    border-top-right-radius: 9px;
}

/* The column that isn't sortable ("Edit") keeps the band too. */
.data-table thead th:not(.data-sortable) {
    padding-bottom: 9px;
}

.data-table tbody tr:first-child td {
    border-top: 0;
}

.data-sortable {
    padding: 0 !important;
}

.data-sortable button {
    padding: 0 12px 9px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.data-sortable button:hover {
    color: #e5e7eb;
}

.data-sortable.is-up button::after {
    content: ' ▲';
    color: #5fb3c9;
}

.data-sortable.is-down button::after {
    content: ' ▼';
    color: #5fb3c9;
}

/* A row the studio preview made. */
.data-test-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.14);
}

.data-actions {
    text-align: right;
}

.data-link {
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    color: #5fb3c9;
    background: none;
    border: 0;
    cursor: pointer;
}

.data-link:hover {
    text-decoration: underline;
}

.data-pages {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.data-pages-of {
    font-size: 12.5px;
    color: #9ca3af;
}

/* One record */
.data-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    max-width: 820px;
}

.data-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.data-field-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.data-field input,
.data-field select,
.data-field textarea {
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9px;
    resize: vertical;
}

.data-field input:focus,
.data-field select:focus,
.data-field textarea:focus {
    outline: none;
    border-color: #5fb3c9;
}

.data-field input:disabled,
.data-field select:disabled,
.data-field textarea:disabled {
    opacity: 0.55;
}

.data-field select option {
    color: #111827;
    background: #fff;
}

.data-field-fixed {
    padding: 9px 0;
    font-size: 13.5px;
    color: #9ca3af;
}

.data-facts {
    margin-top: 18px;
    font-size: 12.5px;
    color: #6b7280;
}

.data-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.data-danger {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.35);
    margin-left: auto;
}

/* ---------- A Report viewer's studio: reports and nothing else ---------- */
/* Reports is the only thing in the menu: every other item, both other
   sections, and the headings above them go. */
.is-reports-only #exploreSection,
.is-reports-only #manageSection,
.is-reports-only .nav-label,
.is-reports-only .nav-item:not([data-view="reports"]),
.is-reports-only .sidebar-tier,
.is-reports-only .sidebar-appid,
.is-reports-only .sidebar-cost,
.is-reports-only .sidebar-credit-value,
.is-reports-only .app-card-new,
.is-reports-only .app-card-menu-btn,
.is-reports-only .reports-starter,
.is-reports-only .report-change {
    display: none !important;
}

/* With the headings gone the one remaining item sits under the brand, and
   the line that separated the sections has nothing left to separate. */
body.is-reports-only .nav-section,
body.is-reports-only .nav-section + .nav-section {
    padding-top: 6px;
    border-top: 0;
}

/* ---------- The menu shrunk to icons ---------- */
@media (min-width: 861px) {
    .is-nav-narrow .sidebar {
        width: 64px;
        padding-left: 8px;
        padding-right: 8px;
        overflow-x: hidden;
    }

    .is-nav-narrow .sidebar-header {
        justify-content: center;
    }

    .is-nav-narrow .sidebar-brand-text,
    .is-nav-narrow .nav-label span,
    .is-nav-narrow .nav-label-arrow,
    .is-nav-narrow .sidebar-cost,
    .is-nav-narrow .sidebar-credit-value,
    .is-nav-narrow .sidebar-appid,
    .is-nav-narrow .sidebar-tier,
    .is-nav-narrow .team-switch,
    .is-nav-narrow .sidebar-upsell,
    .is-nav-narrow .sidebar-account-name,
    .is-nav-narrow .credit-team-note {
        display: none;
    }

    /* The words in a nav item are a bare text node, so they go with font-size. */
    .is-nav-narrow .nav-item {
        justify-content: center;
        font-size: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .is-nav-narrow .nav-item svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .is-nav-narrow .nav-badge {
        top: -10px;
        left: 2px;
        font-size: 10px;
    }

    /* A faint line where a section heading's words used to be. */
    .is-nav-narrow .nav-section + .nav-section {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding-top: 10px;
    }

    .is-nav-narrow .nav-label {
        height: 8px;
        padding: 0 0 6px;
    }

    /* The block stays so Sign out is still reachable from the rail. */
    .is-nav-narrow .sidebar-tokens {
        padding-left: 0;
        padding-right: 0;
    }

    .is-nav-narrow .sidebar-account {
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    .is-nav-narrow .sidebar-account-link {
        font-size: 11px;
        text-align: center;
    }
}

/* The way back to the menu on a phone, where it slides over the page. */
.sidebar-open {
    display: none;
}

@media (max-width: 860px) {
    .sidebar-open {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 60;
        width: 40px;
        height: 40px;
        padding: 0;
        color: #e5e7eb;
        background: rgba(10, 10, 15, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        cursor: pointer;
        backdrop-filter: blur(6px);
    }

    .sidebar-open svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
    }

    .is-nav-open .sidebar-open {
        display: none;
    }

    .is-nav-open .sidebar {
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    }
}

/* ---------- REPORTS: emailed on a schedule ---------- */
.users-field[hidden] {
    display: none;
}

.email-when {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}

.email-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    max-height: 190px;
    overflow-y: auto;
    padding: 4px 2px;
}

.email-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 9px;
    cursor: pointer;
}

.email-person input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #33819e;
}

.email-person span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.email-person strong {
    font-size: 13.5px;
    color: #e5e7eb;
}

.email-person small {
    font-size: 11.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
}

.email-pause {
    margin-top: 12px;
}

.email-status {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

@media (max-width: 720px) {
    .email-when { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Ask — the help bot in the bottom right corner
   ------------------------------------------------------------------ */

.ask-bubble {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #0b1220;
    background: #5fb3c9;
    border: none;
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.ask-bubble svg { width: 25px; height: 25px; }
.ask-bubble:hover { transform: translateY(-2px); }
.ask-bubble.is-open { background: #2b3a45; color: #e5e7eb; }

/* An open report is shown to clients and printed — nothing floats over it. */
body.ask-away .ask-bubble,
body.ask-away .ask-panel,
body.ask-away .ask-nudge { display: none; }

.ask-nudge {
    position: fixed;
    right: 86px;
    bottom: 34px;
    z-index: 260;
    padding: 8px 13px;
    font-size: 13px;
    color: #e5e7eb;
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.ask-nudge[hidden] { display: none; }

.ask-panel {
    position: fixed;
    right: 22px;
    bottom: 86px;
    z-index: 259;
    display: flex;
    flex-direction: column;
    width: 380px;
    max-height: min(620px, calc(100dvh - 130px));
    background: #14141c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.ask-panel[hidden] { display: none; }

.ask-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ask-head-name {
    font-size: 14.5px;
    font-weight: 600;
    color: #e5e7eb;
}

.ask-close {
    padding: 0 4px;
    font-size: 22px;
    line-height: 1;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
}

.ask-close:hover { color: #e5e7eb; }

.ask-talk {
    flex: 1;
    min-height: 120px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ask-line { margin-bottom: 14px; }

.ask-bubble-text {
    max-width: 88%;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #e5e7eb;
    border-radius: 12px;
}

.ask-line.is-bot .ask-bubble-text {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 4px;
}

.ask-line.is-you {
    display: flex;
    justify-content: flex-end;
}

.ask-line.is-you .ask-bubble-text {
    color: #0b1220;
    background: #5fb3c9;
    border-bottom-right-radius: 4px;
}

.ask-break { display: block; height: 8px; }

.ask-thinking { display: flex; gap: 4px; align-items: center; }

.ask-thinking span {
    width: 6px;
    height: 6px;
    background: #6b7280;
    border-radius: 50%;
    animation: ask-dot 1.2s infinite ease-in-out;
}

.ask-thinking span:nth-child(2) { animation-delay: 0.15s; }
.ask-thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ask-dot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

.ask-go {
    margin-top: 8px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 12.5px;
    color: #5fb3c9;
    background: rgba(95, 179, 201, 0.12);
    border: 1px solid rgba(95, 179, 201, 0.35);
    border-radius: 9px;
    cursor: pointer;
}

.ask-go:hover { background: rgba(95, 179, 201, 0.2); }

.ask-rate {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

.ask-rate.is-done { padding-top: 2px; }

.ask-thumb {
    padding: 2px 6px;
    font-size: 13px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    cursor: pointer;
    opacity: 0.7;
}

.ask-thumb:hover { opacity: 1; }

.ask-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px 12px;
}

.ask-chips:empty { display: none; }

.ask-chip {
    padding: 7px 11px;
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    cursor: pointer;
}

.ask-chip:hover { border-color: #5fb3c9; color: #e5e7eb; }

.ask-say {
    display: flex;
    gap: 8px;
    padding: 12px 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ask-say input {
    flex: 1;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
}

.ask-say input:focus { outline: none; border-color: #5fb3c9; }

.ask-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding: 0;
    color: #0b1220;
    background: #5fb3c9;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.ask-send svg { width: 18px; height: 18px; }
.ask-send:disabled { opacity: 0.5; cursor: default; }

.ask-small {
    margin: 8px 16px 12px;
    font-size: 11px;
    line-height: 1.45;
    color: #6b7280;
}

/* A narrow desktop: the prompt box stretches towards the corner, so the
   bubble steps up above it. */
@media (min-width: 721px) and (max-width: 1150px) {
    .ask-bubble { bottom: 118px; }
    .ask-panel { bottom: 182px; max-height: min(560px, calc(100dvh - 230px)); }
    .ask-nudge { bottom: 130px; }
}

@media (max-width: 720px) {
    .ask-bubble { right: 16px; bottom: 16px; width: 48px; height: 48px; }
    .ask-nudge { right: 74px; bottom: 26px; }

    .ask-panel {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 88dvh;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }
}

/* When the prompt box was asked something rather than told something. */
.studio-aside {
    display: block;
    line-height: 1.55;
}

.studio-anyway {
    margin-top: 10px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12.5px;
    color: #5fb3c9;
    background: rgba(95, 179, 201, 0.12);
    border: 1px solid rgba(95, 179, 201, 0.35);
    border-radius: 8px;
    cursor: pointer;
}

.studio-anyway:hover {
    background: rgba(95, 179, 201, 0.2);
}

/* Inside somebody's account: whether this is theirs to pay for. */
.inside-bill {
    padding: 3px 10px;
    font-family: inherit;
    font-size: 12px;
    color: #d1fae5;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.45);
    border-radius: 999px;
    cursor: pointer;
}

.inside-bill.is-on {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
}

.inside-bill:disabled { opacity: 0.6; cursor: default; }

/* What a visitor has left to try the studio with, above the sign-up offer */

.sidebar-guest-credit {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.sidebar-guest-credit .credit-bar {
    margin-top: 7px;
}

/* ---------- TOPPING UP BY CARD ---------- */
/* [hidden] is only display:none in the browser's own stylesheet, so any
   rule here that sets display beats it. That is how a "TEST MODE — no
   real money moves" banner came to stay on screen while live keys were
   charging real cards. Every element in this block that gets hidden from
   script says so explicitly. */
.topup-test[hidden],
.topup-choices[hidden],
.topup-own[hidden],
.topup-total[hidden],
.topup-error[hidden],
.topup-done[hidden],
#topUpPay[hidden],
#topUpEmail[hidden],
#topUpOff[hidden],
#topUpHint[hidden] {
    display: none;
}

.topup-test {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 9px;
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
    font-size: 12.5px;
    line-height: 1.45;
}

.topup-test strong {
    color: #fbbf24;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 11.5px;
}

.topup-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}

.topup-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.topup-choice:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.topup-choice.is-picked {
    border-color: #33819e;
    background: rgba(28, 109, 139, 0.18);
}

.topup-choice-usd {
    font-size: 16px;
    font-weight: 700;
}

.topup-choice-local {
    font-size: 11.5px;
    color: #9ca3af;
}

.topup-own {
    display: block;
    margin-bottom: 14px;
}

.topup-own-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.topup-own-sign {
    font-size: 15px;
    color: #9ca3af;
}

.topup-own input {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 14.5px;
    font-family: inherit;
    color: #fff;
    outline: none;
}

.topup-own input:focus {
    border-color: #1c6d8b;
    box-shadow: 0 0 0 3px rgba(28, 109, 139, 0.15);
}

.topup-total {
    padding: 11px 13px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 13.5px;
    line-height: 1.5;
    color: #d1d5db;
}

.topup-total strong {
    color: #fff;
}

.topup-error {
    margin-top: 12px;
    font-size: 12.5px;
    color: #fca5a5;
}

.topup-done {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    line-height: 1.5;
    color: #d1d5db;
}

.topup-done.is-good {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}

/* ---------- MAKING AN APP LIVE ---------- */
.launch-block[hidden],
.launch-card[hidden],
.launch-error[hidden],
.launch-done[hidden],
#launchBtn[hidden] {
    display: none;
}

.launch-block {
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
}

.launch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.launch-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.launch-trial {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.launch-trial.is-over {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fca5a5;
}

.launch-trial.is-live {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.4);
    color: #6ee7b7;
}

.launch-what {
    font-size: 13px;
    line-height: 1.55;
    color: #d1d5db;
}

.launch-what strong {
    color: #fff;
}

.launch-card {
    margin-top: 7px;
    font-size: 12.5px;
    color: #9ca3af;
}

.launch-card strong {
    color: #d1d5db;
}

.launch-error {
    margin-top: 10px;
    font-size: 12.5px;
    color: #fca5a5;
}

.launch-done {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 13px;
    line-height: 1.5;
    color: #d1d5db;
}

.launch-done.is-good {
    border: 1px solid rgba(52, 211, 153, 0.4);
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
}