/* ====== Trình chỉnh sửa quà ====== */
.editor-top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 18px 0 10px;
}
.editor-top .tpl-badge {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.4rem; color: #fff; flex: none;
}
.editor-top h1 { font-size: 1.3rem; margin: 0; }
.editor-top .muted { margin: 0; font-size: .88rem; }
.editor-top .spacer { margin-left: auto; }

.editor-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 26px;
    align-items: start; padding-bottom: 60px;
}
@media (max-width: 1000px) { .editor-layout { grid-template-columns: 1fr; } }

.editor-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.editor-panel h2 { font-size: 1.05rem; margin-bottom: 16px; }

.editor-section { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; }
.editor-section > summary {
    cursor: pointer; font-weight: 800; font-size: .95rem; list-style: none; display: flex; align-items: center; gap: 8px;
}
.editor-section > summary::-webkit-details-marker { display: none; }
.editor-section > summary::before { content: '▸'; transition: transform .2s ease; color: var(--purple); }
.editor-section[open] > summary::before { transform: rotate(90deg); }
.editor-section .inner { padding-top: 16px; }

/* Khung xem thử */
.preview-pane { position: sticky; top: 86px; }
.phone {
    background: #1a1226; border-radius: 32px; padding: 12px; box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, .12);
}
.phone-screen { position: relative; border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 9 / 17; }
.phone-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.phone-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 0 10px; }
.phone-bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.preview-loading {
    position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 5, 20, .55);
    color: #fff; font-size: .85rem; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 5;
}
.preview-loading.is-show { opacity: 1; }

/* Vùng chọn ảnh */
.uploader { border: 2px dashed var(--line); border-radius: 14px; padding: 14px; text-align: center; transition: border-color .2s ease, background .2s ease; }
.uploader.is-drag { border-color: var(--purple); background: var(--purple-soft); }
.uploader input[type=file] { display: none; }
.uploader .pick { font-weight: 700; color: var(--purple); cursor: pointer; font-size: .92rem; }
.uploader .note { font-size: .78rem; color: var(--muted); margin-top: 4px; }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #f7f4fb; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; font-size: .78rem; line-height: 1; display: grid; place-items: center;
}
.thumb.is-loading::after {
    content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .7)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%237c4ddb' d='M12 2a10 10 0 1 0 10 10h-3a7 7 0 1 1-7-7z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center/26px no-repeat;
}

/* Thanh nút luôn dính đáy khung nhập liệu, nền đặc để không lẫn vào nội dung phía sau */
.editor-actions {
    position: sticky; bottom: 0; z-index: 10;
    margin: 20px -22px -22px; padding: 16px 22px;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -10px 22px rgba(88, 44, 140, .08);
    display: flex; gap: 10px;
}
.editor-actions .btn { flex: 1; }

/* Nút xem thử trên di động */
.preview-fab {
    display: none; position: fixed; right: 16px; bottom: 82px; z-index: 40;
    border-radius: 999px; box-shadow: var(--shadow-lg);
}
@media (max-width: 1000px) {
    .preview-pane { position: fixed; inset: 0; z-index: 90; background: rgba(20, 10, 30, .92); padding: 20px; display: none; place-items: center; }
    .preview-pane.is-open { display: grid; }
    .preview-pane .phone { width: min(360px, 88vw); }
    .preview-fab { display: inline-flex; }
}

/* Trang hoàn tất */
.done-hero { text-align: center; padding: 40px 0 10px; }
.done-hero .emoji { font-size: 3.4rem; }
.done-grid { display: grid; grid-template-columns: 1fr 240px; gap: 26px; align-items: start; }
@media (max-width: 760px) { .done-grid { grid-template-columns: 1fr; } }
.qr-box { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.qr-box img { width: 100%; max-width: 200px; margin: 0 auto 8px; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }