/* ============================================================
   MELCOLM · CREATOR OS — DESIGN TOKENS (ULTRA DARK CINEMATIC)
   ============================================================ */
:root {
    --bg-base:   #061B44;
    --bg-grad-1: #03112C;
    --bg-grad-2: #020B1F;
    --bg-grad-3: #000814;

    --surface-1:    rgba(157, 183, 255, 0.03);
    --surface-2:    rgba(157, 183, 255, 0.06);
    --surface-dark: rgba(0, 0, 0, 0.4);

    --ink:              #FFFFFF;
    --ink-soft:         #E2E8F0;
    --accent-yellow:    #FFE066;
    --accent-blue:      #9DB7FF;
    --accent-blue-light:#C4D6FF;
    --muted:            #647B9A;

    --gradient-yellow: linear-gradient(135deg, #FFE066 0%, #FFB347 100%);
    --gradient-bg:     linear-gradient(145deg, var(--bg-base) 0%, var(--bg-grad-1) 35%, var(--bg-grad-2) 70%, var(--bg-grad-3) 100%);

    --border:        rgba(157, 183, 255, 0.1);
    --border-strong: rgba(157, 183, 255, 0.2);
    --blur-lg:       saturate(180%) blur(24px);

    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   24px;
    --r-pill: 999px;

    --shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 32px rgba(255, 224, 102, 0.12);

    --fs-xs:      12px;
    --fs-sm:      14px;
    --fs-base:    16px;
    --fs-lg:      18px;
    --fs-xl:      28px;
    --fs-2xl:     40px;
    --fs-display: clamp(48px, 8vw, 84px);

    --ease-cinematic: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast: 150ms;
    --t-base: 300ms;
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-grad-3);
    background-image: var(--gradient-bg);
    background-attachment: fixed;
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

h1, h2, h3, h4, .bebas, .price {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1.5px;
}

::selection { background: var(--accent-yellow); color: var(--bg-grad-3); }
a { color: var(--accent-yellow); text-decoration: none; transition: color var(--t-fast) var(--ease-cinematic); }

/* ============================================================
   ATMOSPHERIC BACKGROUND
   ============================================================ */
.atmos-layer {
    position: fixed;
    inset: -10vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(60vmax 50vmax at 10% 10%, rgba(157, 183, 255, 0.03), transparent 60%),
        radial-gradient(70vmax 60vmax at 90% 90%, rgba(255, 224, 102, 0.02), transparent 60%);
    filter: blur(40px);
    animation: breathe 25s var(--ease-cinematic) infinite alternate;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}

@keyframes breathe {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, 1%); }
}

/* ============================================================
   LAYOUT & UTILITIES
   ============================================================ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 32px; border-radius: var(--r-pill);
    font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer; transition: all var(--t-base) var(--ease-cinematic);
    border: 1px solid transparent; text-transform: uppercase; letter-spacing: 1px;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.btn-primary  { background: var(--gradient-yellow); color: var(--bg-grad-3); box-shadow: 0 0 0 1px var(--accent-yellow), var(--shadow-sm); }
.btn-primary:not(:disabled):hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 224, 102, 0.25); }
.btn-secondary { background: var(--surface-1); color: var(--accent-blue-light); border-color: var(--border); backdrop-filter: var(--blur-lg); }
.btn-secondary:not(:disabled):hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink); transform: translateY(-2px); }
.btn:not(:disabled):active { transform: scale(0.98); }

/* ============================================================
   PUBLIC HEADER
   ============================================================ */
nav { padding: 32px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); }
.brand-logo { font-size: 32px; color: var(--ink); letter-spacing: 3px; }
.nav-links { display: flex; align-items: center; gap: 24px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover { color: var(--accent-yellow); }

.hero { padding: 100px 0 80px; text-align: center; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero h1 { font-size: var(--fs-display); margin-bottom: 8px; color: var(--ink); }
.hero h1 span.highlight { color: var(--accent-yellow); }
.hero p { font-size: var(--fs-lg); color: var(--muted); max-width: 650px; margin: 0 auto; }

/* ============================================================
   OFFERS GRID & CARDS
   ============================================================ */
.offers-section { padding: 40px 0 120px; }
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; align-items: stretch; }

.admin-card-wrapper { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.admin-toolbar-top {
    background: var(--bg-grad-1); border: 1px solid var(--border-strong);
    padding: 10px 14px; border-radius: var(--r-md); display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: center; box-shadow: var(--shadow-sm); gap: 8px;
}
.admin-toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--ink-soft);
    padding: 6px 12px; border-radius: var(--r-sm); font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700; cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
}
.admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-btn:not(:disabled):hover { background: var(--accent-blue); color: var(--bg-grad-3); }
.admin-btn.danger:not(:disabled):hover { background: #E63946; color: white; border-color: #E63946; }

.offer-card {
    position: relative; background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 40px; display: flex; flex-direction: column;
    backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
    transition: all var(--t-base) var(--ease-cinematic); box-shadow: var(--shadow-sm);
    height: 100%; flex-grow: 1;
}
.offer-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); background: var(--surface-2); }
.card-header h2 { font-size: var(--fs-2xl); margin-bottom: 12px; color: var(--ink); text-transform: uppercase; }
.card-header p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 24px; }
.pricing-panel {
    background: var(--surface-dark); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 24px; margin-bottom: 32px; box-shadow: inset 0 2px 12px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 4px;
}
.price { font-size: 48px; color: var(--accent-yellow); }
.price-sub { font-size: var(--fs-xs); color: var(--accent-blue); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.deliverables-list { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.deliverables-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 500; }
.check-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent-yellow); margin-top: 2px; }
.offer-meta { margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--border); }
.meta-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); font-weight: 600; gap: 12px; }
.meta-label { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
.meta-value { color: var(--accent-blue-light); text-align: right; word-break: break-word; }
.card-footer { margin-top: auto; }
.card-footer .btn { width: 100%; }

.offer-card.featured { border-color: rgba(255, 224, 102, 0.3); box-shadow: var(--shadow-glow), var(--shadow-md); background: rgba(157, 183, 255, 0.05); }
.offer-card.featured::after {
    content: "Most Popular"; position: absolute; top: 20px; right: 20px; background: var(--gradient-yellow);
    color: var(--bg-grad-3); font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill);
    text-transform: uppercase; letter-spacing: 1px;
}

/* ============================================================
   PUBLIC CONTACT CTA (BOTTOM)
   ============================================================ */
.contact-cta-section { border-top: 1px solid var(--border); padding: 100px 0; text-align: center; }
.contact-cta-section h2 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 32px; color: var(--ink); }
.contact-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 40px; }
.contact-pill {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-pill);
    padding: 12px 24px; display: flex; align-items: center; gap: 10px; color: var(--ink-soft);
    font-size: var(--fs-sm); font-weight: 600; transition: all var(--t-fast);
}
.contact-pill:hover { background: var(--surface-2); border-color: var(--accent-yellow); color: var(--accent-yellow); transform: translateY(-2px); }

/* ============================================================
   FOOTER & HIDDEN ADMIN LINK
   ============================================================ */
.site-footer { text-align: center; padding: 40px 0 20px; color: var(--muted); font-size: 12px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.admin-access-link { font-size: 10px; color: var(--ink); opacity: 0.15; text-transform: uppercase; letter-spacing: 2px; transition: all var(--t-base); padding: 8px; }
.admin-access-link:hover { opacity: 0.8; color: var(--accent-yellow); text-shadow: 0 0 8px rgba(255,224,102,0.5); }

/* ============================================================
   ADMIN LOGIN & DASHBOARD VIEWS
   ============================================================ */
#view-admin-login, #view-admin-dashboard { display: none; }

.admin-login-box { max-width: 400px; margin: 120px auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px; text-align: center; backdrop-filter: var(--blur-lg); }
.admin-login-box h2 { font-size: 32px; margin-bottom: 12px; }
.admin-login-box p { color: var(--muted); margin-bottom: 32px; font-size: var(--fs-sm); }

.settings-panel { background: var(--surface-dark); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 40px; margin-bottom: 60px; box-shadow: inset 0 2px 12px rgba(0,0,0,0.5); }
.settings-section-title { font-family: 'Bebas Neue', sans-serif; color: var(--accent-yellow); font-size: 24px; margin-bottom: 20px; margin-top: 40px; border-bottom: 1px solid var(--border-strong); padding-bottom: 8px; letter-spacing: 1px; }
.settings-section-title:first-child { margin-top: 0; }

.add-card-block {
    border: 2px dashed var(--border-strong); border-radius: var(--r-lg); align-items: center; justify-content: center;
    flex-direction: column; gap: 16px; min-height: 400px; background: var(--surface-1); cursor: pointer; transition: all var(--t-fast); height: 100%; display: flex;
}
.add-card-block:hover { border-color: var(--accent-yellow); background: var(--surface-2); color: var(--accent-yellow); }
.add-card-block .bebas { font-size: 32px; }

/* Forms */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-label { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--accent-blue); letter-spacing: 1px; }
.form-input { background: rgba(0,0,0,0.3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 14px; color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); width: 100%; transition: all var(--t-fast); }
.form-input:focus { outline: none; border-color: var(--accent-yellow); background: rgba(0,0,0,0.5); }
textarea.form-input { resize: vertical; min-height: 100px; }

/* Admin Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(2, 11, 31, 0.85); backdrop-filter: blur(16px); display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity var(--t-fast); }
.modal-backdrop.active { display: flex; opacity: 1; }
.modal-content { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: var(--r-lg); width: 100%; max-width: 700px; padding: 40px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal-header { font-size: var(--fs-2xl); margin-bottom: 24px; color: var(--accent-yellow); }
.modal-actions { display: flex; justify-content: flex-end; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }

/* ============================================================
   VERSION HISTORY LIST
   ============================================================ */
.version-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 16px;
}
.version-row:last-child { border-bottom: none; }
.version-label { color: var(--ink-soft); font-size: 13px; font-weight: 500; font-family: 'Montserrat', sans-serif; }

/* ============================================================
   SAVE STATUS INDICATOR (floating, bottom-right)
   ============================================================ */
.save-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    border: 1px solid var(--border);
    background: rgba(3, 17, 44, 0.9);
    color: var(--ink-soft);
    box-shadow: var(--shadow-md);
    /* Start off-screen; transitions in when .visible is added */
    transform: translateY(80px);
    opacity: 0;
    transition: transform var(--t-base) var(--ease-cinematic),
                opacity   var(--t-base) var(--ease-cinematic),
                border-color var(--t-fast),
                color        var(--t-fast);
    pointer-events: none;
}
.save-indicator.visible {
    transform: translateY(0);
    opacity: 1;
}
.save-indicator.status-error { pointer-events: all; }

/* Status color theming */
.save-indicator.status-saving { border-color: var(--accent-blue);   color: var(--accent-blue); }
.save-indicator.status-saved  { border-color: #4CAF50;              color: #4CAF50; }
.save-indicator.status-unsaved{ border-color: var(--accent-yellow);  color: var(--accent-yellow); }
.save-indicator.status-error  { border-color: #E63946;              color: #E63946; }
.save-indicator.status-offline{ border-color: #FF8C00;              color: #FF8C00; }

.save-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-saving .save-dot {
    animation: pulse-dot 1s ease infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.6); }
}

/* ============================================================
   LOADING OVERLAY (admin dashboard only)
   ============================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 8, 20, 0.92);
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    transition: opacity var(--t-base) var(--ease-cinematic);
    pointer-events: all;
}
.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.loading-spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-yellow);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--muted);
    letter-spacing: 3px;
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease-cinematic), transform 0.8s var(--ease-cinematic); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ============================================================
   GLOBAL PERFORMANCE METRICS SECTION (above pricing)
   ============================================================ */
.global-metrics-section {
    padding: 40px 0 60px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 40px 0 20px;
    position: relative;
}
.global-metrics-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60vmax 30vmax at 20% 0%, rgba(157, 183, 255, 0.04), transparent 60%),
        radial-gradient(50vmax 30vmax at 80% 100%, rgba(255, 224, 102, 0.03), transparent 60%);
    z-index: -1;
}
.global-metrics-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.global-metrics-header h2 {
    font-size: clamp(32px, 4.5vw, 48px);
    color: var(--ink);
    letter-spacing: 2px;
}
.global-metrics-header p {
    color: var(--muted);
    font-size: var(--fs-base);
    max-width: 580px;
    margin: 0 auto;
}
.global-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}
.global-metric-card {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 24px 22px 22px;
    backdrop-filter: var(--blur-lg);
    -webkit-backdrop-filter: var(--blur-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    transition: border-color var(--t-base) var(--ease-cinematic),
                background   var(--t-base) var(--ease-cinematic),
                transform    var(--t-base) var(--ease-cinematic),
                box-shadow   var(--t-base) var(--ease-cinematic);
}
.global-metric-card:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.global-metric-value {
    font-size: clamp(40px, 4.6vw, 58px);
    line-height: 0.95;
    letter-spacing: 1.5px;
    color: var(--accent-yellow);
    word-break: break-word;
    text-shadow: 0 0 24px rgba(255, 224, 102, 0.12);
}
.global-metric-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-blue);
    margin-top: 4px;
}
.global-metric-description {
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    font-weight: 500;
}

/* ============================================================
   METRIC EDITOR (ADMIN MODAL)
   ============================================================ */
.metric-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.metric-editor-hint {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 14px;
}
.metric-editor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.metric-editor-empty {
    color: var(--muted);
    font-size: 12px;
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
}
.metric-editor-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    will-change: transform;
}
.metric-editor-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
@keyframes metric-row-flash {
    0%   { box-shadow: 0 0 0 0 rgba(80, 160, 255, 0.55); border-color: var(--accent-blue); }
    60%  { box-shadow: 0 0 0 6px rgba(80, 160, 255, 0); border-color: var(--accent-blue); }
    100% { box-shadow: 0 0 0 0 rgba(80, 160, 255, 0); }
}
.metric-editor-row.metric-row-flash { animation: metric-row-flash 600ms ease-out; }
.metric-reorder-btn {
    transition: transform 120ms ease, background var(--t-fast), border-color var(--t-fast);
}
.metric-reorder-btn:active { transform: scale(0.9); }
.metric-editor-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.metric-editor-field { display: flex; flex-direction: column; gap: 4px; }
.metric-editor-field-wide { grid-column: 1 / -1; }
.metric-editor-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    color: var(--accent-blue);
    letter-spacing: 1px;
}
.metric-editor-input { padding: 10px 12px; font-size: var(--fs-xs); }
.metric-editor-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.metric-editor-actions .admin-btn { padding: 6px 10px; min-width: 36px; text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .nav-links       { display: none; }
    .form-row        { grid-template-columns: 1fr; }
    .settings-panel  { padding: 24px; }
    .save-indicator  { bottom: 16px; right: 16px; font-size: 11px; padding: 8px 14px; }
    .global-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .global-metric-card  { padding: 18px 16px; }
    .metric-editor-row    { grid-template-columns: 1fr; gap: 10px; padding: 12px; }
    .metric-editor-actions { flex-direction: row; justify-content: flex-end; }
}
@media (max-width: 480px) {
    .global-metrics-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   [v2] Diagnostics Panel — inside the admin settings panel
   ========================================================================== */

.diagnostics-panel {
    background: #0d0d0d;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
}

.diag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid #1a1a1a;
    gap: 16px;
    flex-wrap: wrap;
}

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

.diag-label {
    color: #666;
    flex-shrink: 0;
    min-width: 180px;
}

.diag-value {
    color: #aaa;
    text-align: right;
    word-break: break-all;
}

.diag-ok   { color: #4ade80; } /* green  */
.diag-fail { color: #f87171; } /* red    */
.diag-warn { color: #facc15; } /* yellow */
.diag-mono { font-family: 'Courier New', Courier, monospace; font-size: 11px; color: #888; }

/* ==========================================================================
   [v2] Floating Debug Panel — bottom-left, admin mode only
   ========================================================================== */

.debug-panel {
    position: fixed;
    bottom: 80px;
    left: 16px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 60vh;
    overflow-y: auto;
    background: rgba(8, 8, 8, 0.97);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    backdrop-filter: blur(8px);
}

.debug-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #222;
    color: #facc15;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    position: sticky;
    top: 0;
    background: rgba(8, 8, 8, 0.99);
}

.debug-panel-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
    transition: color 150ms;
}
.debug-panel-close:hover { color: #f87171; }

.debug-panel-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dbg-line {
    color: #ccc;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Debug toggle button — fixed bottom-left */
.debug-toggle-btn {
    position: fixed;
    bottom: 24px;
    left: 16px;
    z-index: 9998;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(8, 8, 8, 0.9);
    border: 1px solid #2a2a2a;
    color: #facc15;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    transition: transform 150ms ease, box-shadow 150ms ease;
    backdrop-filter: blur(4px);
}
.debug-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.7);
}