.preview-page{
    background: var(--ig-bg, #f7f7f8);
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.preview-main{
    max-width: 1400px;
    margin: 0 auto;
}

.preview-status{
    padding: 12px 22px;
    font-size: 14px;
    color: #374151;
}
.preview-status[hidden]{ display: none; }
.preview-status--error{
    color: #b91c1c;
}

.preview-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    padding: 18px 22px 60px;
    box-sizing: border-box;
}

/* Page tools drawer (right panel) */
.page-panel{ position: fixed; top:0; right:0; height:100%; width: 360px; max-width: 96vw;
  background:#fff; border-left:1px solid #e5e7eb; box-shadow:-10px 0 30px rgba(0,0,0,.08);
  transform: translateX(100%); transition: transform .2s ease; z-index: 2100; display:flex; flex-direction:column; }
.page-panel header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid #e5e7eb; }
.page-panel .panel-body{ padding:12px; overflow:auto; }
.page-panel .dz{ border:2px dashed #cbd5e1; border-radius:12px; background:#f8fafc; padding:16px; text-align:center; color:#475569; cursor:pointer; }
.page-panel .dz.drag{ background:#eef2ff; border-color:#93c5fd; }
.page-panel .queue{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.page-panel .q-item{ border:1px solid #e5e7eb; border-radius:10px; padding:8px; display:grid; grid-template-columns:72px 1fr; gap:8px; align-items:flex-start; position:relative; }
.page-panel .q-item img{ width:72px; height:72px; object-fit:contain; background:#fff; border:1px solid #e5e7eb; border-radius:8px; }
.page-panel .q-item input[type="text"]{
    width: calc(100% - 12px);
    margin: 0 6px 6px 6px;
    display: block;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}
.page-panel .q-item .meta{ font-size:12px; color:#64748b; margin-top:4px; }
.page-panel .q-item .actions{ display:flex; gap:8px; position:absolute; right:10px; bottom:8px; margin-top:0; }
.page-panel .q-item .btn{
  border:1px solid #d1d5db; background:#fff; border-radius:8px; cursor:pointer;
  width:32px; height:32px; padding:0; line-height:1; font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
}
.page-panel .q-item .btn.upload{ font-weight:600; }
.page-panel .q-item .btn.remove{ font-size:20px; }
.ig-panel-btn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ig-border); background:#fff; border-radius:10px; font-size:18px; line-height:1; cursor:pointer; }

body.panel-open .page-panel{ transform: translateX(0); }

.preview-card{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s ease, box-shadow .12s ease;
}
.preview-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15,23,42,0.12);
}

.preview-thumb{
    background: #f3f4f6;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.preview-thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.preview-meta{
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.preview-meta h3{
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Inline title input for editors */
.preview-meta .pg-title-input{
    /* slightly narrower than container for a neat inset look */
    width: calc(100% - 12px);
    margin: 0 6px 6px;
    display: block;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}
.preview-meta .pg-title-input.bad{ border-color:#dc2626; }
.preview-meta p{
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}
.preview-open{
    align-self: flex-start;
    margin-top: 4px;
    font-size: 13px;
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.preview-open:hover{
    text-decoration: underline;
}

.preview-sentinel{
    height: 1px;
}

/* Legacy uploader compatibility (used in G_media preview uploader) */
.preview-card > img{
    width: 100%;
    height: 300px;
    object-fit: contain;
    background: #fff;
    display: block;
}
.preview-card .card-header{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}
.preview-card .close-btn{
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #d00;
    cursor: pointer;
    font-size: 1rem;
    border: 1px solid #ccc;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.preview-card .close-btn:hover{
    background: rgba(255,0,0,0.12);
}
.preview-card .card-body{
    padding: 0.75rem;
}
.preview-card .card-name-input{
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 0.95rem;
}

.preview-guard{
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:#f8fafc;
}
.preview-guard__box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:24px;
    max-width:420px;
    text-align:center;
    box-shadow:0 8px 20px rgba(15,23,42,0.08);
}
.preview-guard__box h1{ margin-top:0; font-size:20px; }
.preview-guard__box p{ margin:12px 0 18px; color:#4b5563; font-size:15px; }
.preview-guard__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:10px;
    border:1px solid #2563eb;
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}
.preview-guard__link:hover{
    background:#e0e7ff;
}

@media (max-width: 640px){
    .preview-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px 14px 40px;
    }
    .preview-meta h3{ font-size:14px; }
    .preview-meta p{ font-size:12px; }
}