/*
 * Rainha do PPT — Creator Page (light theme)
 * Sidebar layout inspired by modern AI tool UIs.
 * Loaded only when page template = "Criador de Apresentações".
 * ------------------------------------------------------------------ */

/* ── 0. Tokens ──────────────────────────────────────────────────────── */
body.rppg-creator-page {
    --cp-sidebar-w:      248px;
    --cp-topbar-h:       52px;

    /* Colours */
    --cp-sidebar-bg:     #ffffff;
    --cp-body-bg:        #f3f4f8;
    --cp-border:         #e5e7eb;
    --cp-accent:         #6c63ff;
    --cp-accent-light:   rgba(108, 99, 255, .08);
    --cp-accent-hover:   rgba(108, 99, 255, .14);

    /* Text */
    --cp-text:           #111827;
    --cp-text-muted:     #6b7280;
    --cp-text-faint:     #9ca3af;

    /* Shadows */
    --cp-shadow-card:    0 1px 4px rgba(0,0,0,.07);
    --cp-shadow-sidebar: 1px 0 0 var(--cp-border);

    /* Radius */
    --cp-radius:         10px;
    --cp-radius-sm:      7px;
}

/* ── 1. Base reset for the creator page ─────────────────────────────── */
html { height: 100%; }

body.rppg-creator-page {
    margin:  0;
    padding: 0;
    background: var(--cp-body-bg);
    color:   var(--cp-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

body.rppg-cp-no-scroll { overflow: hidden; }

/* ── 2. Layout shell ────────────────────────────────────────────────── */

/* Outer column: header on top, sidebar+body row below */
.rppg-cp-app {
    display:        flex;
    flex-direction: column;
    height:         100vh;
    overflow:       hidden;
}

/* Inner row: sidebar left, body right */
.rppg-cp-layout {
    flex:       1;
    display:    flex;
    min-height: 0;         /* let flex children control their own height */
    overflow:   hidden;
}

/* ── 3. Sidebar ─────────────────────────────────────────────────────── */
.rppg-cp-sidebar {
    width:          var(--cp-sidebar-w);
    flex-shrink:    0;
    background:     var(--cp-sidebar-bg);
    box-shadow:     var(--cp-shadow-sidebar);
    overflow:       hidden;               /* clips content during collapse */
    transition:     width .25s cubic-bezier(.4,0,.2,1);
    z-index:        300;
}

/* Inner scroll wrapper — has fixed width so content doesn't squish during collapse */
.rppg-cp-sidebar__inner {
    width:            var(--cp-sidebar-w);
    height:           100%;
    display:          flex;
    flex-direction:   column;
    overflow-y:       auto;
    overflow-x:       hidden;
    scrollbar-width:  thin;
    scrollbar-color:  var(--cp-border) transparent;
}

/* New-presentation button */
.rppg-cp-new-btn {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         8px 14px;
    background:      var(--cp-accent);
    color:           #fff;
    font-size:       .82rem;
    font-weight:     600;
    border-radius:   var(--cp-radius-sm);
    text-decoration: none;
    border:          none;
    cursor:          pointer;
    transition:      background .15s, box-shadow .15s;
    box-shadow:      0 2px 8px rgba(108,99,255,.25);
    white-space:     nowrap;
    letter-spacing:  .01em;
}
.rppg-cp-new-btn:hover {
    background:  #5a52e8;
    box-shadow:  0 4px 14px rgba(108,99,255,.35);
    color:       #fff;
    text-decoration: none;
}
.rppg-cp-new-btn svg { flex-shrink: 0; }

/* Section labels */
.rppg-cp-section-label {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--cp-text-faint);
    padding:        14px 16px 6px;
}

/* Navigation */
.rppg-cp-sidebar__nav {
    flex-shrink: 0;
    padding:     0 8px;
}

.rppg-cp-nav-item {
    display:         flex;
    align-items:     center;
    gap:             9px;
    padding:         8px 10px;
    border-radius:   var(--cp-radius-sm);
    font-size:       .84rem;
    font-weight:     500;
    color:           var(--cp-text-muted);
    text-decoration: none;
    transition:      background .12s, color .12s;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}
.rppg-cp-nav-item:hover {
    background: var(--cp-accent-light);
    color:      var(--cp-accent);
    text-decoration: none;
}
.rppg-cp-nav-item--active,
.rppg-cp-nav-item--active:hover {
    background: var(--cp-accent-light);
    color:      var(--cp-accent);
    font-weight: 600;
}
.rppg-cp-nav-icon {
    font-size:   1em;
    flex-shrink: 0;
    opacity:     .8;
}

/* History list */
.rppg-cp-sidebar__history {
    flex:     1;
    padding:  0 8px;
    overflow: hidden;
}

.rppg-cp-history-list {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        2px;
}

.rppg-cp-history-link {
    display:         flex;
    align-items:     center;
    gap:             8px;
    width:           100%;
    padding:         7px 10px;
    border-radius:   var(--cp-radius-sm);
    font-size:       .8rem;
    color:           var(--cp-text-muted);
    text-decoration: none;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-align:      left;
    font-family:     inherit;
    transition:      background .12s, color .12s;
    white-space:     nowrap;
    overflow:        hidden;
}
.rppg-cp-history-link:hover {
    background: var(--cp-accent-light);
    color:      var(--cp-accent);
    text-decoration: none;
}
.rppg-cp-history-icon {
    flex-shrink: 0;
    opacity:     .55;
}
.rppg-cp-history-text {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* User footer */
.rppg-cp-sidebar__footer {
    flex-shrink:   0;
    padding:       10px 12px 14px;
    border-top:    1px solid var(--cp-border);
    margin-top:    auto;
}

.rppg-cp-user-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.rppg-cp-avatar { flex-shrink: 0; }
.rppg-cp-avatar__img {
    width:         32px;
    height:        32px;
    border-radius: 50%;
    display:       block;
}
.rppg-cp-user-info {
    flex:      1;
    min-width: 0;
    display:   flex;
    flex-direction: column;
    gap:       1px;
}
.rppg-cp-user-name {
    font-size:     .8rem;
    font-weight:   600;
    color:         var(--cp-text);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.rppg-cp-user-email {
    font-size:     .7rem;
    color:         var(--cp-text-faint);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.rppg-cp-exit-icon {
    flex-shrink:  0;
    color:        var(--cp-text-faint);
    display:      flex;
    align-items:  center;
    padding:      6px;
    border-radius: var(--cp-radius-sm);
    transition:   background .12s, color .12s;
    text-decoration: none;
}
.rppg-cp-exit-icon:hover {
    background: var(--cp-accent-light);
    color:      var(--cp-accent);
}

/* ── 4. Body (right of sidebar) ─────────────────────────────────────── */
.rppg-cp-body {
    flex:           1;
    display:        flex;
    flex-direction: column;
    min-width:      0;
    min-height:     0;
    overflow:       hidden;   /* main area scrolls internally */
}

/* Collapsed sidebar — animate width to 0, body expands automatically */
.rppg-cp-layout--sidebar-hidden .rppg-cp-sidebar {
    width: 0;
}

/* ── 5. Mobile top bar ──────────────────────────────────────────────── */
.rppg-cp-topbar {
    display:         none;   /* hidden on desktop */
    align-items:     center;
    justify-content: space-between;
    height:          var(--cp-topbar-h);
    padding:         0 16px;
    background:      var(--cp-sidebar-bg);
    border-bottom:   1px solid var(--cp-border);
    position:        sticky;
    top:             0;
    z-index:         200;
    gap:             12px;
    flex-shrink:     0;
}

.rppg-cp-menu-btn {
    background:    none;
    border:        none;
    padding:       6px;
    cursor:        pointer;
    color:         var(--cp-text-muted);
    border-radius: var(--cp-radius-sm);
    display:       flex;
    align-items:   center;
    transition:    background .12s;
    flex-shrink:   0;
}
.rppg-cp-menu-btn:hover { background: var(--cp-accent-light); color: var(--cp-accent); }

.rppg-cp-topbar__logo {
    flex:            1;
    display:         flex;
    align-items:     center;
    text-decoration: none;
    justify-content: center;
}
.rppg-cp-topbar__logo img {
    max-height: 32px;
    width:      auto;
    display:    block;
}

.rppg-cp-topbar__exit {
    font-size:       .78rem;
    font-weight:     500;
    color:           var(--cp-text-muted);
    text-decoration: none;
    padding:         5px 10px;
    border:          1px solid var(--cp-border);
    border-radius:   var(--cp-radius-sm);
    transition:      all .12s;
    flex-shrink:     0;
}
.rppg-cp-topbar__exit:hover {
    color:           var(--cp-accent);
    border-color:    var(--cp-accent);
    background:      var(--cp-accent-light);
    text-decoration: none;
}

/* ── 6. Desktop header ──────────────────────────────────────────────── */
.rppg-cp-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         0 20px 0 0;
    height:          60px;
    flex-shrink:     0;
    background:      var(--cp-sidebar-bg);
    border-bottom:   1px solid var(--cp-border);
    box-shadow:      0 1px 3px rgba(0,0,0,.05);
    z-index:         400;   /* above sidebar on mobile */
}

.rppg-cp-header__left {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
}

/* Sidebar toggle button (desktop) */
.rppg-cp-sidebar-toggle {
    display:       flex;
    align-items:   center;
    justify-content: center;
    background:    none;
    border:        none;
    padding:       6px;
    cursor:        pointer;
    color:         var(--cp-text-muted);
    border-radius: var(--cp-radius-sm);
    flex-shrink:   0;
    transition:    background .12s, color .12s;
    line-height:   0;
}
.rppg-cp-sidebar-toggle:hover {
    background: var(--cp-accent-light);
    color:      var(--cp-accent);
}

/* Brand strip — alinha com o sidebar abaixo */
.rppg-cp-header__brand {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           235px;
    flex-shrink:     0;
    padding:         0 4px 0 16px;
}

/* Logo in header */
.rppg-cp-header__logo {
    display:         flex;
    align-items:     center;
    text-decoration: none;
    flex-shrink:     0;
}
.rppg-cp-header__logo-img {
    height:    26px;
    width:     auto;
    max-width: 160px;
    display:   block;
}

/* Vertical divider between logo and page title */
.rppg-cp-header__divider {
    display:     block;
    width:       1px;
    height:      22px;
    background:  var(--cp-border);
    flex-shrink: 0;
    margin:      0 2px;
}

.rppg-cp-header__icon {
    font-size:   1.25rem;
    color:       var(--cp-accent);
    flex-shrink: 0;
    line-height: 1;
}

.rppg-cp-header__titles {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    min-width:      0;
}

.rppg-cp-header__title {
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--cp-text);
    margin:      0;
    padding:     0;
    line-height: 1.2;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.rppg-cp-header__sub {
    font-size:  .75rem;
    color:      var(--cp-text-muted);
    margin:     0;
    padding:    0;
    line-height: 1.3;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.rppg-cp-header__right {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.rppg-cp-header__user {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.rppg-cp-header__avatar {
    width:         32px !important;
    height:        32px !important;
    border-radius: 50%;
    object-fit:    cover;
    display:       block;
    border:        2px solid var(--cp-border);
}

.rppg-cp-header__name {
    font-size:   .82rem;
    font-weight: 500;
    color:       var(--cp-text-muted);
    white-space: nowrap;
}

/* ── 7. Main content ────────────────────────────────────────────────── */
.rppg-cp-main {
    flex:       1;
    display:    flex;
    flex-direction: column;
    align-items: center;
    padding:    36px 24px 80px;
    overflow-y: auto;
}

.rppg-cp-content {
    width:     100%;
    max-width: 700px;
}

/* ── 8. Generator — LIGHT overrides ─────────────────────────────────── */

/* Remove the frontend.css dark variables that bleed in */
body.rppg-creator-page .rppg-generator {
    color: var(--cp-text);
}

/* Step panel title */
body.rppg-creator-page .rppg-step-panel__title {
    font-size:     1.3rem;
    font-weight:   700;
    color:         var(--cp-text);
    margin-bottom: 1.5rem;
}
body.rppg-creator-page .rppg-step-panel__icon { opacity: .7; }

/* Fields */
body.rppg-creator-page .rppg-field label {
    color:       var(--cp-text);
    font-weight: 600;
    font-size:   13px;
}
body.rppg-creator-page .rppg-field textarea,
body.rppg-creator-page .rppg-field input[type="number"],
body.rppg-creator-page .rppg-field select {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    color:         var(--cp-text);
    border-radius: var(--cp-radius);
    font-size:     14px;
}
body.rppg-creator-page .rppg-field textarea:focus,
body.rppg-creator-page .rppg-field input:focus,
body.rppg-creator-page .rppg-field select:focus {
    border-color: var(--cp-accent);
    box-shadow:   0 0 0 3px rgba(108,99,255,.12);
    outline:      none;
    background:   #fff;
}
body.rppg-creator-page .rppg-field textarea {
    min-height:  140px;
    line-height: 1.65;
    font-size:   15px;
    resize:      vertical;
}
body.rppg-creator-page .rppg-field textarea::placeholder {
    color: var(--cp-text-faint);
}

/* Quota bar */
body.rppg-creator-page .rppg-quota-text {
    color: var(--cp-text-muted);
}
body.rppg-creator-page .rppg-quota-track {
    background: var(--cp-border);
}

/* Prompt example chips */
body.rppg-creator-page .rppg-prompt-example {
    background: #fff;
    border-color: var(--cp-border);
    color: var(--cp-text-muted);
}
body.rppg-creator-page .rppg-prompt-example:hover {
    border-color: var(--cp-accent);
    color:        var(--cp-accent);
    background:   var(--cp-accent-light);
}
body.rppg-creator-page .rppg-prompt-examples__label {
    color: var(--cp-text-faint);
}

/* Buttons */
body.rppg-creator-page .rppg-btn {
    border-radius: var(--cp-radius);
}
body.rppg-creator-page .rppg-btn--lg {
    padding:   13px 32px;
    font-size: 15px;
}
body.rppg-creator-page .rppg-btn--ghost {
    background:   transparent;
    color:        var(--cp-text-muted) !important;
    border:       1px solid var(--cp-border);
}
body.rppg-creator-page .rppg-btn--ghost:hover {
    background:   var(--cp-accent-light);
    color:        var(--cp-accent) !important;
    border-color: var(--cp-accent);
}
body.rppg-creator-page .rppg-btn--outline {
    color:        var(--cp-accent) !important;
    border-color: var(--cp-accent);
}
body.rppg-creator-page .rppg-btn--outline:hover {
    background: var(--cp-accent-light);
}

/* Wizard bar */
body.rppg-creator-page .rppg-wiz-bar {
    margin-bottom: 2.5rem;
}
body.rppg-creator-page .rppg-wiz-step__bubble {
    width:  38px;
    height: 38px;
}
body.rppg-creator-page .rppg-wiz-line {
    max-width:  80px;
    margin-top: 18px;
}
body.rppg-creator-page .rppg-wiz-step__label {
    font-size: .72rem;
    color:     var(--cp-text-muted);
}
body.rppg-creator-page .rppg-wiz-step--active .rppg-wiz-step__label,
body.rppg-creator-page .rppg-wiz-step--done  .rppg-wiz-step__label {
    color: var(--cp-accent);
}
/* Done steps are clickable — light-theme hover */
body.rppg-creator-page .rppg-wiz-step--done:hover .rppg-wiz-step__bubble {
    background:  var(--cp-accent-hover);
    border-color: var(--cp-accent);
    color:       var(--cp-accent);
    box-shadow:  0 0 0 3px rgba(108,99,255,.10);
}
body.rppg-creator-page .rppg-wiz-step--done:hover .rppg-wiz-step__label {
    color: var(--cp-accent);
}

/* Design picker */
body.rppg-creator-page .rppg-tpl-card {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
}
body.rppg-creator-page .rppg-tpl-card:hover {
    border-color: var(--cp-accent);
    background:   var(--cp-accent-light);
}
body.rppg-creator-page .rppg-tpl-card--active {
    border-color: var(--cp-accent);
    background:   var(--cp-accent-light);
    box-shadow:   0 0 0 3px rgba(108,99,255,.12);
}
body.rppg-creator-page .rppg-tpl-name { color: var(--cp-text); }
body.rppg-creator-page .rppg-tpl-desc { color: var(--cp-text-muted); }
body.rppg-creator-page .rppg-design-label { color: var(--cp-text-muted); }

/* Color inputs */
body.rppg-creator-page .rppg-color-label span { color: var(--cp-text-muted); font-size: 12px; }

/* Logo upload */
body.rppg-creator-page .rppg-logo-drop {
    background:    #fff;
    border:        2px dashed var(--cp-border);
    color:         var(--cp-text-muted);
    border-radius: var(--cp-radius);
}
body.rppg-creator-page .rppg-logo-drop:hover,
body.rppg-creator-page .rppg-logo-drop--over {
    border-color: var(--cp-accent);
    background:   var(--cp-accent-light);
}
body.rppg-creator-page .rppg-logo-drop__icon { color: var(--cp-accent); }
body.rppg-creator-page .rppg-logo-hint,
body.rppg-creator-page .rppg-logo-status { color: var(--cp-text-faint); }

/* Wiz summary */
body.rppg-creator-page .rppg-wiz-summary {
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding:       12px 16px;
    font-size:     13px;
    color:         var(--cp-text-muted);
    margin-bottom: 20px;
}

/* ── 8. Progress ────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-progress-wrap {
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding:       20px 24px;
    box-shadow:    var(--cp-shadow-card);
}
body.rppg-creator-page .rppg-progress-track {
    background:    var(--cp-border);
    border-radius: 99px;
    height:        6px;
}
body.rppg-creator-page .rppg-progress-bar {
    border-radius: 99px;
    background:    linear-gradient(90deg, #6c63ff, #a8a4ff);
}
body.rppg-creator-page .rppg-status {
    color:     var(--cp-text-muted);
    font-size: 13px;
}

/* ── 9. Result ──────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-result {
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    color:         var(--cp-text);
    box-shadow:    var(--cp-shadow-card);
}
body.rppg-creator-page .rppg-result strong { color: var(--cp-accent); }
body.rppg-creator-page #rppg-result-info    { color: var(--cp-text-muted); }

/* ── 10. Error ──────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-notice {
    background:    #fffbeb;
    border-color:  #f59e0b;
    border-radius: var(--cp-radius);
}
body.rppg-creator-page .rppg-notice--error {
    background:   #fef2f2;
    border-color: #f87171;
    color:        #991b1b;
}

/* ── 11. Preview ────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-preview-wrap { margin-top: 20px; }
body.rppg-creator-page .rppg-preview-wrap h3 {
    color:          var(--cp-text-muted);
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight:    700;
}
body.rppg-creator-page .rppg-preview-actions {
    flex-wrap: wrap;
    gap:       10px;
}
body.rppg-creator-page .rppg-nav-btn {
    background:  #fff;
    border-color: var(--cp-border);
    color:       var(--cp-text);
}
body.rppg-creator-page .rppg-nav-btn:hover {
    border-color: var(--cp-accent);
    color:        var(--cp-accent);
    background:   var(--cp-accent-light);
}
body.rppg-creator-page .rppg-nav-counter { color: var(--cp-text-muted); }
body.rppg-creator-page .rppg-thumb {
    background: #fff;
    border-color: var(--cp-border);
}
body.rppg-creator-page .rppg-thumb:hover  { border-color: var(--cp-accent); }
body.rppg-creator-page .rppg-thumb--active {
    border-color: var(--cp-accent);
    background:   var(--cp-accent-light);
    box-shadow:   0 0 0 2px rgba(108,99,255,.15);
}
body.rppg-creator-page .rppg-thumb-num   { color: var(--cp-accent); }
body.rppg-creator-page .rppg-thumb-title { color: var(--cp-text); }

/* ── 12. History (inline below generator) ──────────────────────────── */
body.rppg-creator-page .rppg-history {
    max-width:  700px;
    width:      100%;
    margin-top: 2.5rem;
}
body.rppg-creator-page .rppg-history h3 {
    color:          var(--cp-text-muted);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
body.rppg-creator-page .rppg-history-item { border-color: var(--cp-border); }
body.rppg-creator-page .rppg-history-prompt { color: var(--cp-text); }
body.rppg-creator-page .rppg-history-meta   { color: var(--cp-text-faint); }
body.rppg-creator-page .rppg-history-dl     { color: var(--cp-accent); }

/* ── 13. Auth gates ─────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-gate {
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: 16px;
    color:         var(--cp-text);
    box-shadow:    0 4px 24px rgba(0,0,0,.07);
    max-width:     520px;
    margin:        0 auto;
}
body.rppg-creator-page .rppg-gate__title { color: var(--cp-text); }
body.rppg-creator-page .rppg-gate__desc  { color: var(--cp-text-muted); }
body.rppg-creator-page .rppg-gate__perks li { color: var(--cp-text-muted); }

/* ── 14. Mobile overlay ─────────────────────────────────────────────── */
.rppg-cp-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.35);
    z-index:    299;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.rppg-cp-overlay--show { display: block; }

/* ── 15. Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
    /* Break out of the fixed-height column so the page scrolls normally */
    .rppg-cp-app    { height: auto; min-height: 100vh; overflow: visible; }
    .rppg-cp-layout { overflow: visible; min-height: 0; flex: none; }
    .rppg-cp-body   { overflow: visible; min-height: 0; }
    .rppg-cp-main   { overflow-y: visible; }

    /* Sidebar becomes a fixed overlay again on mobile */
    .rppg-cp-sidebar {
        position:   fixed !important;
        inset:      0 auto 0 0;
        width:      var(--cp-sidebar-w) !important;
        height:     100%;
        transform:  translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,.12);
    }
    .rppg-cp-sidebar__inner { height: 100%; }
    .rppg-cp-sidebar--open  { transform: translateX(0) !important; }

    /* Show mobile topbar, hide desktop header */
    .rppg-cp-topbar { display: flex; }
    .rppg-cp-header { display: none; }

    /* Main padding tighter on tablet */
    .rppg-cp-main { padding: 32px 20px 60px; }
}

@media (max-width: 540px) {
    .rppg-cp-main { padding: 20px 14px 60px; }

    body.rppg-creator-page .rppg-step-panel__title { font-size: 1.1rem; }
    body.rppg-creator-page .rppg-btn--lg { padding: 12px 22px; font-size: 14px; }

    body.rppg-creator-page .rppg-wiz-step__bubble { width: 30px; height: 30px; }
    body.rppg-creator-page .rppg-wiz-line { margin-top: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. EDITOR — light-theme overrides (creator page only)
   All rules scoped to body.rppg-creator-page to keep the dark theme intact
   when the shortcode is used elsewhere.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Modal shell ─────────────────────────────────────────────────────────── */
body.rppg-creator-page #rppg-editor-modal {
    background: #f0f1f5;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-editor-bar {
    background:    #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

/* ── Slide canvas area ───────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-editor-canvas-wrap {
    background: #e8e9ef;
}

/* ── Thumbnail strip ─────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-editor-thumbstrip {
    background:      #ffffff;
    border-top:      1px solid #e5e7eb;
    scrollbar-color: #d1d5db transparent;
}
body.rppg-creator-page .rppg-editor-thumbstrip::-webkit-scrollbar-thumb {
    background: #d1d5db;
}

/* ── Generic editor buttons ──────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-btn {
    background:   #f9fafb;
    border-color: #d1d5db;
    color:        #374151;
}
body.rppg-creator-page .rppg-ed-btn:hover {
    background:   #f3f4f6;
    border-color: #9ca3af;
    color:        #111827;
}

/* Ghost (close) */
body.rppg-creator-page .rppg-ed-btn--ghost {
    background:   transparent;
    border-color: transparent;
    color:        #6b7280;
}
body.rppg-creator-page .rppg-ed-btn--ghost:hover {
    background:   #f3f4f6;
    border-color: #d1d5db;
    color:        #374151;
}

/* Add-slide button */
body.rppg-creator-page .rppg-ed-btn--add {
    background:   rgba(108,99,255,.08);
    border-color: rgba(108,99,255,.35);
    color:        #6c63ff !important;
}
body.rppg-creator-page .rppg-ed-btn--add:hover {
    background:   rgba(108,99,255,.15);
    border-color: var(--cp-accent);
    color:        #5a52e8 !important;
}

/* Danger (delete) button — already uses red, just lighten the bg */
body.rppg-creator-page .rppg-ed-btn--danger {
    background:   rgba(239,68,68,.07);
    border-color: rgba(239,68,68,.28);
    color:        #dc2626 !important;
}
body.rppg-creator-page .rppg-ed-btn--danger:hover {
    background:   rgba(239,68,68,.15);
    border-color: #ef4444;
    color:        #b91c1c !important;
}

/* ── Slide counter ───────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-counter {
    color: #6b7280;
}

/* ── Vertical separator ──────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-sep {
    background: #e5e7eb;
}

/* ── Type-selector dropdown ──────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-type-sel {
    background-color: #f9fafb;
    /* arrow SVG with grey fill */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    border-color: #d1d5db;
    color:        #374151;
}
body.rppg-creator-page .rppg-ed-type-sel:hover {
    border-color:     #9ca3af;
    background-color: #f3f4f6;
}
body.rppg-creator-page .rppg-ed-type-sel option {
    background: #ffffff;
    color:      #374151;
}

/* ── Formatting toolbar buttons ──────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-fmt-btn {
    color: #6b7280;
}
body.rppg-creator-page .rppg-ed-fmt-btn:hover {
    background:   #f3f4f6;
    border-color: #d1d5db;
    color:        #374151;
}
body.rppg-creator-page .rppg-ed-fmt-btn--on {
    background:   rgba(108,99,255,.10);
    border-color: rgba(108,99,255,.40);
    color:        #6c63ff;
}

/* ── "Add item" / "Add block" inline buttons ─────────────────────────────── */
body.rppg-creator-page .rppg-ed-li-add {
    border-color: rgba(108,99,255,.28);
    color:        rgba(108,99,255,.60);
}
body.rppg-creator-page .rppg-ed-li-add:hover {
    border-color: rgba(108,99,255,.60);
    color:        #6c63ff;
    background:   rgba(108,99,255,.06);
}
body.rppg-creator-page .rppg-ed-block-add {
    border-color: rgba(108,99,255,.28);
    color:        rgba(108,99,255,.60);
}
body.rppg-creator-page .rppg-ed-block-add:hover {
    border-color: rgba(108,99,255,.60);
    color:        #6c63ff;
    background:   rgba(108,99,255,.05);
}

/* ── Hint text ───────────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-hint {
    color: #9ca3af;
}

/* ── Add-slide panel ─────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-addpanel__overlay {
    background:           rgba(160,163,180,.45);
    backdrop-filter:      blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
body.rppg-creator-page .rppg-ed-addpanel__box {
    background:   #ffffff;
    border-color: #e5e7eb;
    box-shadow:   0 20px 60px rgba(0,0,0,.10);
    scrollbar-color: #d1d5db transparent;
}
body.rppg-creator-page .rppg-ed-addpanel__box::-webkit-scrollbar-thumb {
    background: #d1d5db;
}
body.rppg-creator-page .rppg-ed-addpanel__hdr {
    color: #111827;
}

/* Type cards */
body.rppg-creator-page .rppg-ed-type-card {
    background:   #f9fafb;
    border-color: #e5e7eb;
    color:        #374151;
}
body.rppg-creator-page .rppg-ed-type-card:hover {
    background:   #f0f0ff;
    border-color: var(--cp-accent);
    color:        var(--cp-accent);
    box-shadow:   0 4px 14px rgba(108,99,255,.15);
}

/* ── Favorite button in sidebar ──────────────────────────────────────────── */
.rppg-cp-history-item {
    position: relative;
    display:  flex;
    gap:      4px;
}
.rppg-cp-history-item .rppg-cp-history-link {
    flex: 1;
    min-width: 0;
}

.rppg-cp-fav-btn {
    flex-shrink:  0;
    width:        22px;
    height:       22px;
    border:       none;
    background:   transparent;
    color:        #d1d5db;
    font-size:    13px;
    line-height:  1;
    cursor:       pointer;
    border-radius: 4px;
    padding:      0;
    display:      flex;
    align-items:  center;
    justify-content: center;
    opacity:      0;
    transition:   opacity .12s, color .12s, background .12s;
    align-self:   center;
}
.rppg-cp-history-item:hover .rppg-cp-fav-btn,
.rppg-cp-fav-btn--on {
    opacity: 1;
}
.rppg-cp-fav-btn--on {
    color: #f59e0b;
}
.rppg-cp-fav-btn:hover {
    color:      #f59e0b;
    background: rgba(245,158,11,.10);
}

/* Favorite items get a subtle left accent */
.rppg-cp-history-item--fav > .rppg-cp-history-link {
    color: var(--cp-text);
}

/* ── Editor titlebar — light theme ───────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-titlebar {
    background:    #f8f9fb;
    border-bottom: 1px solid #e5e7eb;
}
body.rppg-creator-page .rppg-ed-name-input {
    color: #111827;
}
body.rppg-creator-page .rppg-ed-name-input::placeholder { color: #d1d5db; }
body.rppg-creator-page .rppg-ed-name-input:hover  { border-color: #d1d5db; background: rgba(0,0,0,.02); }
body.rppg-creator-page .rppg-ed-name-input:focus  { border-color: var(--cp-accent); background: rgba(108,99,255,.03); }

body.rppg-creator-page .rppg-ed-save-status { color: #9ca3af; }

/* ── Zoom label ──────────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-zoom-label {
    color: #6b7280;
}

/* ── Speaker notes panel ─────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-notes-panel {
    background: #f8f9fb;
    border-top: 1px solid #e5e7eb;
}
body.rppg-creator-page .rppg-ed-notes-label {
    color: #9ca3af;
}
body.rppg-creator-page .rppg-ed-notes-textarea {
    color: #374151;
}
body.rppg-creator-page .rppg-ed-notes-textarea::placeholder {
    color: #d1d5db;
}
body.rppg-creator-page .rppg-ed-notes-textarea:focus {
    background: rgba(108,99,255,.02);
}

/* ── AI toolbar button ───────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-btn--ai {
    background: linear-gradient(135deg, #6c63ff 0%, #a78bfa 100%);
    color: #fff !important;
    border: none;
}

/* ── AI panel ────────────────────────────────────────────────────────────── */
body.rppg-creator-page .rppg-ed-ai-box {
    background:  #ffffff;
    border-left: 1px solid #e5e7eb;
    box-shadow:  -6px 0 24px rgba(0,0,0,.08);
}

body.rppg-creator-page .rppg-ed-ai-box > div:first-child {
    border-bottom: 1px solid #e5e7eb;
}
body.rppg-creator-page .rppg-ed-ai-box > div:first-child strong {
    color: #111827;
}

body.rppg-creator-page .rppg-ed-ai-section__title {
    color: #9ca3af;
}

body.rppg-creator-page .rppg-ed-ai-btn {
    background:   #f3f4f6;
    border-color: #e5e7eb;
    color:        #5b5bd6;
}
body.rppg-creator-page .rppg-ed-ai-btn:hover:not(:disabled) {
    background:   #ede9ff;
    border-color: #6c63ff;
}

body.rppg-creator-page .rppg-ed-ai-translate-row select {
    background:   #f3f4f6;
    border-color: #e5e7eb;
    color:        #111827;
}

/* loading overlay */
body.rppg-creator-page .rppg-ed-ai-loading {
    background: rgba(255,255,255,.82);
    color:      #374151;
}
body.rppg-creator-page .rppg-ed-ai-loading__spinner {
    border-color:     #e5e7eb;
    border-top-color: #6c63ff;
}

/* status bar */
body.rppg-creator-page .rppg-ed-ai-status {
    background:  #f9fafb;
    border-color: #e5e7eb;
    color:        #6b7280;
}
body.rppg-creator-page .rppg-ed-ai-status--ok  { background: #f0fdf4; border-color: #86efac; color: #166534; }
body.rppg-creator-page .rppg-ed-ai-status--err { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* ── Sprint 7 — Exportação & Compartilhamento ───────────────────────────── */

/* Share modal */
body.rppg-creator-page .rppg-ed-share-box {
    background:   #ffffff;
    border-color: #e5e7eb;
    box-shadow:   0 20px 60px rgba(0,0,0,.1);
}
body.rppg-creator-page .rppg-ed-share-hdr {
    border-bottom-color: #e5e7eb;
}
body.rppg-creator-page .rppg-ed-share-hdr strong { color: #111827; }
body.rppg-creator-page .rppg-ed-share-desc        { color: #6b7280; }
body.rppg-creator-page .rppg-ed-share-input {
    background:   #f3f4f6;
    border-color: #e5e7eb;
    color:        #111827;
}
body.rppg-creator-page .rppg-ed-share-status {
    background:   #f9fafb;
    border-color: #e5e7eb;
    color:        #6b7280;
}
body.rppg-creator-page .rppg-ed-share-status--ok  { background: #f0fdf4; border-color: #86efac; color: #166534; }
body.rppg-creator-page .rppg-ed-share-status--err { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* Export dropdown — light theme */
body.rppg-creator-page .rppg-ed-export-menu {
    background:   #ffffff;
    border-color: #e2e8f0;
    box-shadow:   0 10px 30px rgba(0,0,0,.1);
}
body.rppg-creator-page .rppg-ed-export-item {
    color: #1e293b;
}
body.rppg-creator-page .rppg-ed-export-item:hover {
    background: #f1f5f9;
    color:      #111827;
}
body.rppg-creator-page .rppg-ed-export-item--share {
    color: #2563eb;
}
body.rppg-creator-page .rppg-ed-export-item--share:hover {
    background: #eff6ff;
    color:      #1d4ed8;
}
body.rppg-creator-page .rppg-ed-export-divider {
    background: #e2e8f0;
}
/* Google Slides hint — light theme */
body.rppg-creator-page .rppg-ed-gslides-hint {
    background:   #eff6ff;
    border-color: #93c5fd;
    color:        #1e40af;
    box-shadow:   0 4px 16px rgba(0,0,0,.08);
}
body.rppg-creator-page .rppg-ed-gslides-hint strong { color: #1d4ed8; }
body.rppg-creator-page .rppg-ed-gslides-hint em     { opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════════
   17. TOOL VIEWS — Presentations, Favorites, Library, Converter, Brand Kit
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Common wrapper ─────────────────────────────────────────────────────── */
.rppg-cp-tool-view {
    width:     100%;
    max-width: 860px;
}

.rppg-cp-view-desc {
    font-size:     14px;
    color:         var(--cp-text-muted);
    margin:        0 0 24px;
    line-height:   1.6;
}

/* ── Top bar: search + count ────────────────────────────────────────────── */
.rppg-cp-view-topbar {
    display:        flex;
    align-items:    center;
    gap:            12px;
    margin-bottom:  20px;
    flex-wrap:      wrap;
}

.rppg-cp-search-form {
    flex:           1;
    min-width:      180px;
    display:        flex;
    align-items:    center;
    gap:            8px;
    background:     #fff;
    border:         1.5px solid var(--cp-border);
    border-radius:  var(--cp-radius);
    padding:        0 12px;
    color:          var(--cp-text-faint);
    transition:     border-color .15s;
}
.rppg-cp-search-form:focus-within {
    border-color: var(--cp-accent);
    box-shadow:   0 0 0 3px rgba(108,99,255,.10);
    color:        var(--cp-accent);
}
.rppg-cp-search-form svg { flex-shrink: 0; }
.rppg-cp-search-form input[type="search"] {
    flex:       1;
    border:     none;
    outline:    none;
    background: transparent;
    font-size:  14px;
    color:      var(--cp-text);
    padding:    10px 0;
    min-width:  0;
}
.rppg-cp-search-form input[type="search"]::placeholder { color: var(--cp-text-faint); }

.rppg-cp-view-count {
    font-size:  13px;
    color:      var(--cp-text-faint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.rppg-cp-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    padding:        60px 24px;
    text-align:     center;
    gap:            12px;
}
.rppg-cp-empty__icon {
    font-size:  3rem;
    line-height: 1;
    opacity:    .45;
}
.rppg-cp-empty__text {
    font-size:  15px;
    color:      var(--cp-text-muted);
    margin:     0;
    max-width:  320px;
}

/* ── Presentations grid ─────────────────────────────────────────────────── */
.rppg-cp-pres-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   16px;
}

.rppg-cp-pres-card {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .15s, border-color .15s;
}
.rppg-cp-pres-card:hover {
    border-color: var(--cp-accent);
    box-shadow:   var(--cp-shadow-card);
}

.rppg-cp-pres-card__thumb {
    position:        relative;
    background:      linear-gradient(135deg, #f0f1f9 0%, #e8e9f5 100%);
    height:          120px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--cp-text-faint);
    flex-shrink:     0;
}
.rppg-cp-pres-card__fav {
    position:   absolute;
    top:        8px;
    right:      10px;
    font-size:  14px;
    color:      #f59e0b;
    line-height: 1;
}
.rppg-cp-pres-card__badge {
    position:      absolute;
    bottom:        8px;
    left:          8px;
    font-size:     10px;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background:    rgba(108,99,255,.12);
    color:         var(--cp-accent);
    padding:       2px 7px;
    border-radius: 99px;
}

.rppg-cp-pres-card__body {
    flex:    1;
    padding: 12px 14px 8px;
}
.rppg-cp-pres-card__title {
    font-size:     13px;
    font-weight:   600;
    color:         var(--cp-text);
    margin:        0 0 4px;
    line-height:   1.4;
    overflow:      hidden;
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rppg-cp-pres-card__meta {
    font-size: 11px;
    color:     var(--cp-text-faint);
    margin:    0;
}

.rppg-cp-pres-card__actions {
    padding:    0 14px 12px;
    flex-shrink: 0;
}

/* ── Library grid ───────────────────────────────────────────────────────── */
.rppg-cp-design-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   20px;
}

.rppg-cp-design-card {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .15s, border-color .15s;
}
.rppg-cp-design-card:hover {
    border-color: var(--cp-accent);
    box-shadow:   0 4px 18px rgba(108,99,255,.12);
}

/* Mini slide preview */
.rppg-cp-design-preview {
    height:          150px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    gap:             6px;
    flex-shrink:     0;
}
.rppg-cp-design-preview__title {
    font-size:   1.15rem;
    font-weight: 700;
    text-align:  center;
    line-height: 1.2;
}
.rppg-cp-design-preview__sub {
    font-size:  .78rem;
    opacity:    .75;
    text-align: center;
}

.rppg-cp-design-card__info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.rppg-cp-design-card__header {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         8px;
}
.rppg-cp-design-card__header strong {
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--cp-text);
}

.rppg-cp-design-swatches {
    display: flex;
    gap:     5px;
    flex-shrink: 0;
}
.rppg-cp-design-swatch {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    display:       inline-block;
    border:        1.5px solid rgba(0,0,0,.08);
}

.rppg-cp-design-desc {
    font-size: 12px;
    color:     var(--cp-text-muted);
    margin:    0;
    line-height: 1.5;
}
.rppg-cp-design-fonts {
    font-size: 11px;
    color:     var(--cp-text-faint);
    margin:    0;
    font-style: italic;
}

/* ── Converter ──────────────────────────────────────────────────────────── */
.rppg-cp-converter-view {
    max-width: 660px;
}

.rppg-cp-converter-box {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-bottom:  24px;
}

.rppg-cp-drop-area {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         40px 24px;
    background:      #fff;
    border:          2px dashed var(--cp-border);
    border-radius:   var(--cp-radius);
    color:           var(--cp-text-muted);
    cursor:          pointer;
    transition:      border-color .15s, background .15s;
    text-align:      center;
}
.rppg-cp-drop-area svg {
    color:   var(--cp-accent);
    opacity: .6;
}
.rppg-cp-drop-area span {
    font-size:   14px;
    font-weight: 500;
}
.rppg-cp-drop-area small {
    font-size: 12px;
    color:     var(--cp-text-faint);
}
.rppg-cp-drop-area:hover,
.rppg-cp-drop-area--drag {
    border-color: var(--cp-accent);
    background:   var(--cp-accent-light);
}
.rppg-cp-drop-area:hover svg,
.rppg-cp-drop-area--drag svg { opacity: 1; }
.rppg-cp-drop-area--has-file {
    border-color: var(--cp-accent);
    border-style: solid;
}
.rppg-cp-drop-area--has-file span { color: var(--cp-accent); font-weight: 600; }

.rppg-cp-conv-status {
    padding:       10px 14px;
    border-radius: var(--cp-radius-sm);
    font-size:     13px;
    color:         var(--cp-text-muted);
    background:    #f9fafb;
    border:        1px solid var(--cp-border);
}
.rppg-cp-conv-status--error {
    background:   #fef2f2;
    border-color: #fca5a5;
    color:        #991b1b;
}

.rppg-cp-conv-result {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.rppg-cp-conv-summary {
    font-size:     14px;
    color:         var(--cp-text-muted);
    padding:       10px 14px;
    background:    var(--cp-accent-light);
    border-radius: var(--cp-radius-sm);
    border:        1px solid rgba(108,99,255,.18);
}
.rppg-cp-conv-summary strong { color: var(--cp-accent); }

.rppg-cp-conv-slides {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.rppg-cp-conv-slide {
    display:       flex;
    gap:           12px;
    align-items:   flex-start;
    background:    #fff;
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding:       12px 14px;
}
.rppg-cp-conv-slide__num {
    min-width:     28px;
    height:        28px;
    border-radius: 6px;
    background:    var(--cp-accent-light);
    color:         var(--cp-accent);
    font-size:     11px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.rppg-cp-conv-slide__body {
    flex:      1;
    min-width: 0;
}
.rppg-cp-conv-slide__body strong {
    display:    block;
    font-size:  13px;
    color:      var(--cp-text);
    margin-bottom: 4px;
}
.rppg-cp-conv-slide__body p {
    font-size:   12px;
    color:       var(--cp-text-muted);
    margin:      0;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break:  break-word;
}

/* ── Brand kit ──────────────────────────────────────────────────────────── */
.rppg-cp-brand-view {
    max-width: 600px;
}

.rppg-cp-brand-form {
    display:        flex;
    flex-direction: column;
    gap:            28px;
}

.rppg-cp-brand-section {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
.rppg-cp-brand-section h3 {
    font-size:   .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:       var(--cp-text-faint);
    margin:      0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cp-border);
}

/* Logo row */
.rppg-cp-brand-logo-row {
    display:     flex;
    gap:         16px;
    align-items: flex-start;
    flex-wrap:   wrap;
}
.rppg-cp-brand-logo-preview {
    width:         100px;
    height:        64px;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background:    #f9fafb;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    overflow:      hidden;
}
.rppg-cp-brand-logo-preview img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    display:    block;
}
.rppg-cp-brand-logo-preview span {
    font-size: 11px;
    color:     var(--cp-text-faint);
}
.rppg-cp-brand-logo-input {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rppg-cp-brand-logo-input label {
    font-size:   12px;
    color:       var(--cp-text-muted);
    font-weight: 500;
}
.rppg-cp-brand-logo-input input[type="url"] {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding:       9px 12px;
    font-size:     13px;
    color:         var(--cp-text);
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color .15s;
}
.rppg-cp-brand-logo-input input[type="url"]:focus {
    border-color: var(--cp-accent);
    box-shadow:   0 0 0 3px rgba(108,99,255,.10);
    outline:      none;
}

/* Colors */
.rppg-cp-brand-colors {
    display: flex;
    gap:     20px;
    flex-wrap: wrap;
}
.rppg-cp-brand-color-label {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
}
.rppg-cp-brand-color-label input[type="color"] {
    width:         44px;
    height:        44px;
    padding:       2px;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    cursor:        pointer;
    background:    transparent;
}
.rppg-cp-brand-color-label span {
    font-size:  13px;
    color:      var(--cp-text-muted);
    font-weight: 500;
}

/* Fonts */
.rppg-cp-brand-fonts {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
}
@media (max-width: 500px) {
    .rppg-cp-brand-fonts { grid-template-columns: 1fr; }
}
.rppg-cp-brand-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.rppg-cp-brand-field label {
    font-size:   12px;
    color:       var(--cp-text-muted);
    font-weight: 500;
}
.rppg-cp-brand-field select {
    background:    #fff;
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    padding:       9px 12px;
    font-size:     13px;
    color:         var(--cp-text);
    cursor:        pointer;
    transition:    border-color .15s;
    appearance:    none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.rppg-cp-brand-field select:focus {
    border-color: var(--cp-accent);
    box-shadow:   0 0 0 3px rgba(108,99,255,.10);
    outline:      none;
}

/* Save row */
.rppg-cp-brand-actions {
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
    padding-top: 4px;
}
.rppg-cp-brand-status {
    font-size:  13px;
    color:      var(--cp-text-muted);
}
.rppg-cp-brand-status--ok  { color: #16a34a; font-weight: 600; }
.rppg-cp-brand-status--err { color: #dc2626; font-weight: 600; }

/* ── Responsive tweaks for tool views ──────────────────────────────────── */
@media (max-width: 640px) {
    .rppg-cp-pres-grid   { grid-template-columns: 1fr 1fr; }
    .rppg-cp-design-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .rppg-cp-pres-grid { grid-template-columns: 1fr; }
}