/* =============================================================
   CGCosmos Showcase — showcase.css  v2
   Modern premium dark theme — refined palette, better contrast,
   cleaner cards, polished interactive elements.
   ============================================================= */

/* ── Reset / base ──────────────────────────────────────────── */
.cgshow-wrap *,
.cgshow-wrap *::before,
.cgshow-wrap *::after {
    box-sizing: border-box;
}

.cgshow-wrap {
    /* ── Inherits from CGCosmos site theme ──
       :root (light) and [data-theme="dark"] (dark) in style.css
       already define --accent, --border, --shadow-*, --radius-*, etc.
       We only declare showcase-specific aliases here that map to the
       site tokens. Variables with matching names (--accent, --border,
       --success, --danger, --shadow-sm, --shadow-lg, --radius-sm,
       --radius-lg, --radius-xl, --border-accent) are inherited
       directly from the site and NOT re-declared to avoid circularity. */

    /* Accent shade aliases (site defines --accent-dark, --accent-hover,
       --accent-glow, --accent-light — we only alias the renamed ones) */
    --accent-deep:   var(--accent-dark, #4F46E5);
    --accent-soft:   var(--accent-light, rgba(99,102,241,.08));

    /* Semantic extras */
    --success-soft:  rgba(16,185,129,.12);
    --danger-soft:   rgba(239,68,68,.10);
    --warn:          var(--warning, #F59E0B);

    /* Background aliases — mapped to site bg tokens */
    --bg:            var(--bg-primary, #FFFFFF);
    --bg2:           var(--bg-secondary, #F8F8FC);
    --bg3:           var(--bg-card, #FFFFFF);
    --bg4:           var(--bg-card-hover, #F3F4F8);

    /* Border alias (--border and --border-accent inherited from site) */
    --border2:       var(--border, #E5E7EB);

    /* Text aliases — mapped to site text tokens */
    --text:          var(--text-primary, #111827);
    --text2:         var(--text-secondary, #6B7280);
    --text3:         var(--text-muted, #9CA3AF);

    /* Radius alias */
    --radius:        var(--radius-md, 10px);

    /* Shadow aliases */
    --shadow:        var(--shadow-md, 0 4px 12px rgba(0,0,0,.08));
    --shadow-accent: var(--shadow-glow, 0 0 0 3px rgba(99,102,241,.2));

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    color:       var(--text);
    max-width:   1320px;
    margin:      0 auto;
    padding:     0 24px 72px;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.cgshow-breadcrumb {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   13px;
    color:       var(--text3);
    margin:      24px 0 32px;
    font-weight: 500;
}
.cgshow-breadcrumb a { color: var(--text2); text-decoration: none; transition: color .15s; }
.cgshow-breadcrumb a:hover { color: var(--text); }

/* ── Page headings ─────────────────────────────────────────── */
.cgshow-page-title {
    font-size:      30px;
    font-weight:    800;
    letter-spacing: -.5px;
    margin:         0 0 6px;
    color:          var(--text);
}
.cgshow-page-sub { font-size: 15px; color: var(--text2); margin: 0; }

/* ── Buttons ───────────────────────────────────────────────── */
.cgshow-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         10px 20px;
    border-radius:   var(--radius-sm);
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    border:          1px solid transparent;
    transition:      background .15s, box-shadow .15s, opacity .15s, color .15s, transform .1s;
    text-decoration: none;
    line-height:     1;
    white-space:     nowrap;
}
.cgshow-btn--primary {
    background:   var(--accent-deep);
    color:        #fff;
    border-color: var(--accent-deep);
}
.cgshow-btn--primary:hover {
    background:  var(--accent-hover);
    border-color:var(--accent-hover);
    box-shadow:  0 4px 20px var(--accent-glow, rgba(99,102,241,.35));
    transform:   translateY(-1px);
}
.cgshow-btn--outline {
    background:   transparent;
    color:        var(--text2);
    border-color: var(--border2);
}
.cgshow-btn--outline:hover {
    color:        var(--text);
    border-color: var(--border-accent);
    background:   var(--accent-soft);
}
.cgshow-btn--sm  { padding: 6px 13px; font-size: 12px; }
.cgshow-btn--lg  { padding: 13px 30px; font-size: 15px; }
.cgshow-btn:disabled { opacity: .38; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Feed header ───────────────────────────────────────────── */
.cgshow-feed-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 0 24px;
    flex-wrap: wrap;
}
.cgshow-feed-header-left {}
.cgshow-feed-header-right {}

/* ── Feed toolbar ──────────────────────────────────────────── */
.cgshow-feed-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
    padding-bottom:  24px;
    border-bottom:   1px solid var(--border);
    margin-bottom:   28px;
}

.cgshow-sort-tabs {
    display:      flex;
    gap:          2px;
    background:   var(--bg2);
    border:       1px solid var(--border);
    border-radius:var(--radius);
    padding:      3px;
}
.cgshow-sort-tab {
    padding:         7px 15px;
    border-radius:   var(--radius-sm);
    font-size:       13px;
    font-weight:     500;
    color:           var(--text2);
    text-decoration: none;
    transition:      background .15s, color .15s;
}
.cgshow-sort-tab:hover { color: var(--text); }
.cgshow-sort-tab.active { background: var(--accent-soft); color: var(--accent); }

.cgshow-filters { display: flex; gap: 10px; flex-wrap: wrap; }

.cgshow-filter-select,
.cgshow-select {
    background:      var(--bg2);
    border:          1px solid var(--border2);
    color:           var(--text2);
    border-radius:   var(--radius-sm);
    padding:         8px 32px 8px 12px;
    font-size:       13px;
    font-weight:     500;
    cursor:          pointer;
    appearance:      none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 11px center;
    transition:          border-color .15s, color .15s;
}
.cgshow-filter-select:focus,
.cgshow-select:focus { outline: none; border-color: var(--accent); color: var(--text); }
.cgshow-filter-select option { background: var(--bg-card, #FFFFFF); }

/* ── Card grid ─────────────────────────────────────────────── */
.cgshow-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap:                   22px;
}

/* ── Post card ─────────────────────────────────────────────── */
.cgshow-card {
    display:         flex;
    flex-direction:  column;
    border-radius:   var(--radius-xl);
    overflow:        hidden;
    background:      var(--bg2);
    border:          1px solid var(--border);
    text-decoration: none;
    transition:      transform .2s cubic-bezier(.2,0,.1,1), box-shadow .2s, border-color .2s;
}
.cgshow-card:hover {
    transform:    translateY(-5px);
    box-shadow:   var(--shadow-lg);
    border-color: var(--border2);
}
.cgshow-card-img {
    aspect-ratio:        16 / 10;
    background-size:     cover;
    background-position: center;
    position:            relative;
    overflow:            hidden;
}
.cgshow-paintover-badge {
    position:    absolute;
    top:         12px;
    right:       12px;
    background:  linear-gradient(135deg, var(--accent-deep), var(--accent-hover));
    color:       #fff;
    font-size:   11px;
    font-weight: 700;
    padding:     4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
    z-index: 2;
    box-shadow: 0 2px 8px var(--accent-glow, rgba(99,102,241,.4));
}
.cgshow-card-save {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transform: translateY(-5px);
    transition: all .2s cubic-bezier(.4,0,.2,1);
}
.cgshow-card:hover .cgshow-card-save {
    opacity: 1;
    transform: none;
}
.cgshow-card-save:hover {
    background: var(--accent-hover, rgba(99,102,241,0.8));
    border-color: var(--accent);
}
.cgshow-card-save.item-is-saved {
    opacity: 1;
    transform: none;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cgshow-card-save.item-is-saved svg { fill: currentColor; }
.cgshow-card-body { padding: 16px 18px; }
.cgshow-card-title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 10px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.cgshow-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.cgshow-card-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border2); }
.cgshow-card-sep { color: var(--text3); }

/* ── Load more ─────────────────────────────────────────────── */
.cgshow-load-more-wrap { display: flex; justify-content: center; margin-top: 40px; }

/* ── Empty / error ─────────────────────────────────────────── */
.cgshow-empty {
    grid-column: 1 / -1;
    display:     flex;
    flex-direction: column;
    align-items: center;
    padding:     72px 0;
    text-align:  center;
    color:       var(--text2);
    font-size:   15px;
    gap:         12px;
}
.cgshow-empty a { color: var(--accent); text-decoration: none; }
.cgshow-empty a:hover { text-decoration: underline; }
.cgshow-error { padding: 72px 0; text-align: center; color: var(--text2); }
.cgshow-error a { color: var(--accent); text-decoration: none; }

/* ── Single post ───────────────────────────────────────────── */
.cgshow-post-wrap { display: flex; flex-direction: column; gap: 36px; }
.cgshow-post-main {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}
@media (max-width: 960px) { .cgshow-post-main { grid-template-columns: 1fr; } }

.cgshow-image-viewer { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.cgshow-hero-wrap    { line-height: 0; background: #000; }
.cgshow-hero-img     { width: 100%; max-height: 720px; object-fit: contain; display: block; }

.cgshow-image-tabs { display: flex; gap: 5px; padding: 12px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cgshow-img-tab {
    padding:       6px 13px;
    border-radius: var(--radius-sm);
    font-size:     12px;
    font-weight:   600;
    background:    transparent;
    border:        1px solid var(--border);
    color:         var(--text2);
    cursor:        pointer;
    transition:    all .15s;
}
.cgshow-img-tab:hover  { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.cgshow-img-tab.active { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); }

.cgshow-thumbnails { display: flex; gap: 8px; padding: 12px 14px; overflow-x: auto; border-top: 1px solid var(--border); }
.cgshow-thumb-btn {
    flex-shrink:   0;
    width:         76px;
    height:        50px;
    border:        2px solid transparent;
    border-radius: var(--radius-sm);
    overflow:      hidden;
    padding:       0;
    background:    #000;
    cursor:        pointer;
    transition:    border-color .15s;
}
.cgshow-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgshow-thumb-btn.active, .cgshow-thumb-btn:hover { border-color: var(--accent); }

.cgshow-post-info {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius-xl);
    padding:       24px;
    display:       flex;
    flex-direction: column;
    gap:           22px;
    position:      sticky;
    top:           20px;
}
.cgshow-post-title    { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 0; line-height: 1.3; color: var(--text); }
.cgshow-post-author-row { display: flex; align-items: center; gap: 12px; }
.cgshow-author-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border2); flex-shrink: 0; }
.cgshow-author-name   { font-size: 14px; font-weight: 700; color: var(--text); }
.cgshow-post-date     { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cgshow-post-description { font-size: 14px; line-height: 1.75; color: var(--text2); }
.cgshow-post-description p { margin: 0 0 10px; }

.cgshow-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cgshow-tag  { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 20px; }
.cgshow-tag--software { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border-accent); }
.cgshow-tag--category { background: rgba(52,211,153,.10); color: var(--success); border: 1px solid rgba(52,211,153,.22); }

.cgshow-render-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.cgshow-render-card-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 14px; }
.cgshow-render-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cgshow-render-item  { display: flex; flex-direction: column; gap: 2px; }
.cgshow-render-label { font-size: 11px; color: var(--text3); font-weight: 500; }
.cgshow-render-val   { font-size: 13px; font-weight: 700; color: var(--text); }

.cgshow-post-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cgshow-action-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 15px;
    border-radius: var(--radius-sm);
    font-size:     13px;
    font-weight:   600;
    background:    var(--bg3);
    border:        1px solid var(--border);
    color:         var(--text2);
    cursor:        pointer;
    transition:    all .15s;
    text-decoration: none;
}
.cgshow-action-btn:hover { background: var(--bg4); border-color: var(--border2); color: var(--text); }
.cgshow-action-btn.active, .cgshow-like-btn.active, .cgshow-save-btn.active { color: var(--accent); border-color: var(--border-accent); background: var(--accent-soft); }
.cgshow-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.cgshow-views-display { cursor: default; }
.cgshow-delete-post, .cgshow-delete-post:hover { color: var(--danger); border-color: rgba(248,113,113,.25); background: var(--danger-soft); }

/* ── Submit form ───────────────────────────────────────────── */
.cgshow-submit-wrap { max-width: 780px; }
.cgshow-submit-form { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; }
.cgshow-field { display: flex; flex-direction: column; gap: 9px; }
.cgshow-label { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -.1px; }
.cgshow-req         { color: var(--accent); margin-left: 2px; }
.cgshow-field-hint  { font-size: 12px; color: var(--text2); font-weight: 400; margin-left: 6px; }

.cgshow-input, .cgshow-textarea {
    background:    var(--bg3);
    border:        1px solid var(--border2);
    border-radius: var(--radius-sm);
    color:         var(--text);
    font-size:     14px;
    padding:       11px 15px;
    width:         100%;
    font-family:   inherit;
    transition:    border-color .15s, box-shadow .15s;
    resize:        vertical;
}
.cgshow-input:focus, .cgshow-textarea:focus {
    outline:      none;
    border-color: var(--accent);
    box-shadow:   var(--shadow-glow, 0 0 0 3px rgba(99,102,241,.12));
}
.cgshow-input::placeholder, .cgshow-textarea::placeholder { color: var(--text3); }

.cgshow-upload-zone {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         48px 24px;
    border:          2px dashed var(--border2);
    border-radius:   var(--radius-lg);
    background:      var(--bg3);
    cursor:          pointer;
    text-align:      center;
    transition:      border-color .15s, background .15s;
    color:           var(--text2);
}
.cgshow-upload-zone:hover, .cgshow-upload-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cgshow-upload-zone svg { opacity: .4; transition: opacity .15s; }
.cgshow-upload-zone:hover svg, .cgshow-upload-zone.drag-over svg { opacity: .85; }
.cgshow-upload-text    { font-size: 14px; font-weight: 500; }
.cgshow-upload-text strong { color: var(--text); }
.cgshow-upload-browse  { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cgshow-upload-hint    { font-size: 12px; color: var(--text3); }

.cgshow-image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 4px; }
.cgshow-preview-item { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg3); border: 1px solid var(--border); aspect-ratio: 4/3; }
.cgshow-preview-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; }
.cgshow-preview-spinner { width: 28px; height: 28px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: cgshowSpin .7s linear infinite; }
.cgshow-preview-name { font-size: 10px; color: var(--text3); }
.cgshow-preview-prog-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--border); }
.cgshow-preview-prog { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.cgshow-preview-img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgshow-preview-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 7px 7px; background: linear-gradient(transparent, rgba(9,9,15,.88)); display: flex; align-items: center; gap: 5px; }
.cgshow-img-type-select { flex: 1; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 4px; font-size: 10px; font-weight: 600; padding: 3px 5px; appearance: none; }
.cgshow-preview-remove { background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15); border-radius: 4px; color: #fff; cursor: pointer; padding: 4px 5px; display: flex; align-items: center; flex-shrink: 0; transition: background .12s; }
.cgshow-preview-remove:hover { background: rgba(248,113,113,.6); }

.cgshow-upload-progress { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text2); }
.cgshow-progress-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.cgshow-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); width: 50%; animation: cgshowPulse 1.4s ease-in-out infinite; }

.cgshow-tag-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.cgshow-tag-option {
    padding:       7px 15px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   500;
    background:    var(--bg3);
    border:        1px solid var(--border2);
    color:         var(--text2);
    cursor:        pointer;
    transition:    all .15s;
    user-select:   none;
}
.cgshow-tag-option:hover  { border-color: var(--border-accent); color: var(--text); background: var(--bg4); }
.cgshow-tag-option.active { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); font-weight: 700; }

.cgshow-render-inputs     { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cgshow-render-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.cgshow-render-input-label{ font-size: 12px; font-weight: 600; color: var(--text2); }

.cgshow-toggle-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             20px;
    background:      var(--accent-soft);
    border:          1px solid var(--border-accent);
    border-radius:   var(--radius);
    padding:         18px 20px;
}
.cgshow-toggle-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; }
.cgshow-toggle-switch input { opacity: 0; width: 0; height: 0; }
.cgshow-toggle-track { position: absolute; inset: 0; background: var(--bg4); border: 1px solid var(--border2); border-radius: 13px; cursor: pointer; transition: background .2s, border-color .2s; }
.cgshow-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: var(--text2); border-radius: 50%; transition: transform .2s, background .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cgshow-toggle-switch input:checked + .cgshow-toggle-track { background: var(--accent-deep); border-color: var(--accent-deep); }
.cgshow-toggle-switch input:checked + .cgshow-toggle-track::after { transform: translateX(19px); background: #fff; }

.cgshow-paintover-options { background: var(--bg3); border: 1px solid var(--border-accent); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: 14px 20px 18px; margin-top: -2px; }
.cgshow-radio-group { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.cgshow-radio-option { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; }
.cgshow-radio-option input { accent-color: var(--accent); width: 15px; height: 15px; }

.cgshow-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; }
.cgshow-submit-hint { font-size: 13px; color: var(--text3); }

.cgshow-form-message { padding: 13px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; }
.cgshow-form-message--error   { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(248,113,113,.22); }
.cgshow-form-message--success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(52,211,153,.22); }

/* Community integration */
.cgshow-community-cards { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.cgshow-community-card { display: flex; align-items: center; gap: 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; transition: all .15s; color: var(--text); }
.cgshow-community-card:hover { border-color: var(--border-accent); background: var(--bg3); }
.cgshow-community-card--paintover:hover { border-color: var(--accent); }
.cgshow-cc-icon { color: var(--text2); flex-shrink: 0; }
.cgshow-cc-body { flex: 1; }
.cgshow-cc-title { font-size: 14px; font-weight: 700; }
.cgshow-cc-desc  { font-size: 12px; color: var(--text2); margin-top: 2px; }
.cgshow-cc-arrow { color: var(--text3); flex-shrink: 0; }

.cgshow-sidebar-widget { margin-bottom: 16px; }
.cgshow-widget-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 10px 0; }
.cgshow-widget-thumb { aspect-ratio: 1; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-color: var(--bg3); display: block; transition: opacity .15s; }
.cgshow-widget-thumb:hover { opacity: .8; }
.cgshow-widget-link { display: block; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 6px; }
.cgshow-widget-link:hover { text-decoration: underline; }
.cgshow-po-widget-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.cgshow-po-widget-row:last-of-type { border-bottom: none; }
.cgshow-po-widget-thumb { width: 42px; height: 30px; border-radius: 5px; background-size: cover; background-position: center; flex-shrink: 0; }
.cgshow-po-widget-info  { flex: 1; overflow: hidden; }
.cgshow-po-widget-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cgshow-po-widget-meta  { font-size: 11px; color: var(--text2); margin-top: 2px; }

.cgshow-inline-login-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: inherit; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cgshow-login-prompt { padding: 48px 0; text-align: center; color: var(--text2); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes cgshowSpin   { to { transform: rotate(360deg); } }
@keyframes cgshowPulse  { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes cgshowFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cgshow-wrap { padding: 0 16px 48px; }
    .cgshow-page-title { font-size: 24px; }
    .cgshow-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .cgshow-render-inputs { grid-template-columns: 1fr 1fr; }
    .cgshow-submit-row { flex-direction: column; align-items: flex-start; }
    .cgshow-sort-tabs { flex-wrap: wrap; }
}
@media (max-width: 400px) { .cgshow-grid { grid-template-columns: 1fr; } }

/* ── Toast notifications ───────────────────────────────────── */
.cgshow-toast {
    position:      fixed;
    bottom:        24px;
    right:         24px;
    padding:       14px 20px;
    border-radius: var(--radius);
    font-size:     14px;
    font-weight:   500;
    max-width:     360px;
    z-index:       99999;
    transform:     translateY(16px);
    opacity:       0;
    transition:    transform .25s cubic-bezier(.2,0,.1,1), opacity .25s;
    box-shadow:    var(--shadow-lg);
    pointer-events: auto;
}
.cgshow-toast--visible {
    transform: translateY(0);
    opacity:   1;
}
.cgshow-toast--success {
    background:  var(--success-soft);
    border:      1px solid rgba(16,185,129,.3);
    color:       var(--success);
}
.cgshow-toast--error {
    background:  var(--danger-soft);
    border:      1px solid rgba(239,68,68,.3);
    color:       var(--danger);
}
.cgshow-toast a {
    color:           inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight:     700;
}

/* ── Saved stamp on card ───────────────────────────────────── */
.cgshow-saved-stamp {
    position:      absolute;
    bottom:        10px;
    left:          10px;
    background:    rgba(9,9,15,.75);
    color:         var(--accent);
    font-size:     11px;
    font-weight:   600;
    padding:       4px 9px;
    border-radius: 20px;
    display:       flex;
    align-items:   center;
    gap:           5px;
    backdrop-filter: blur(4px);
    z-index:       2;
}

/* ── Paintover link states ─────────────────────────────────── */
.cgshow-paintover-link--open {
    color:        var(--accent) !important;
    border-color: var(--border-accent) !important;
    background:   var(--accent-soft) !important;
}
.cgshow-paintover-link--closed {
    color:        var(--text3) !important;
    border-color: var(--border) !important;
}
.cgshow-paintover-closed-pill {
    font-size:     10px;
    font-weight:   700;
    background:    rgba(74,74,106,.3);
    color:         var(--text3);
    padding:       2px 6px;
    border-radius: 10px;
    margin-left:   2px;
}

/* ── Hide the WordPress page title on our pages ─────────────── */
/* These cover the most common theme title class names.          */
body.cgshow-active-page .entry-title,
body.cgshow-active-page .page-title,
body.cgshow-active-page .post-title,
body.cgshow-active-page h1.page-header,
body.cgshow-active-page .page-header > .page-title,
body.cgshow-active-page .wp-block-post-title,
body.cgshow-active-page .site-page-title {
    display: none !important;
}
/* Some themes wrap the title in a header element */
body.cgshow-active-page .entry-header:has(.entry-title:empty),
body.cgshow-active-page .page-header:empty {
    display: none !important;
    margin:  0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME PAGE TITLE SUPPRESSION
   ---------------------------------------------------------------
   Hides the WordPress theme's page title on Showcase/Paintover
   pages. CSS covers common selectors; JS in showcase.js handles
   any remaining theme-specific heading structures.
   ═══════════════════════════════════════════════════════════════ */

/* Any heading directly inside page wrappers — not inside our app */
body.cgshow-page .entry-header,
body.cgshow-page .page-header,
body.cgshow-page .post-header,
body.cgshow-page .page-hero,
body.cgshow-page .page-banner,
body.cgshow-page .page-title-section,
body.cgshow-page h1.entry-title,
body.cgshow-page h1.page-title,
body.cgshow-page h2.entry-title,
body.cgshow-page .site-main > article > header,
body.cgshow-page main > article > header,
body.cgshow-page .content-area > h1:first-child,
body.cgshow-page .post-content > h1:first-child {
    display: none !important;
}

/* Strip all padding/margin from page wrappers so our content starts flush */
body.cgshow-page .entry-content,
body.cgshow-page .post-content,
body.cgshow-page .page-content,
body.cgshow-page .site-main article,
body.cgshow-page main .post-inner,
body.cgshow-page main .entry {
    padding-top: 0 !important;
    margin-top:  0 !important;
}

/* Compact top of our wrap itself */
body.cgshow-page .cgshow-wrap {
    padding-top: 4px;
}
body.cgshow-page .cgshow-wrap .cgshow-breadcrumb {
    margin-top: 8px;
}

/* Feed header needs a little top breathing room */
body.cgshow-page .cgshow-feed-header {
    padding-top: 16px;
}