/* ── Template Picker Modal ──────────────────────────────────────── */
.tpl-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

.tpl-modal {
    background: #fff; color: #1a1a1a;
    border-radius: 12px;
    width: 100%; max-width: 860px; max-height: 88vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    overflow: hidden;
}

.tpl-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #e8e8e8;
}
.tpl-title  { font-size: 1.3rem; font-weight: 700; color: #111; }
.tpl-subtitle { font-size: .85rem; color: #666; margin-top: .15rem; }
.tpl-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.1rem; color: #888; padding: .2rem .4rem;
    border-radius: 4px; line-height: 1;
}
.tpl-close:hover { background: #f0f0f0; color: #333; }

.tpl-tabs {
    display: flex; gap: .5rem;
    padding: .75rem 1.5rem 0;
    border-bottom: 1px solid #e8e8e8;
}
.tpl-tab {
    background: none; border: none; cursor: pointer;
    padding: .5rem .9rem; font-size: .88rem; color: #666;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: flex; align-items: center; gap: .4rem;
}
.tpl-tab.active { color: #7c4dff; border-bottom-color: #7c4dff; font-weight: 600; }
.tpl-count {
    background: #f0f0f0; color: #666;
    font-size: .72rem; padding: .1rem .4rem; border-radius: 10px;
}

.tpl-grid-wrap {
    flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.tpl-card {
    border: 2px solid #e8e8e8; border-radius: 8px;
    cursor: pointer; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.tpl-card:hover { border-color: #bbb; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.tpl-card.selected { border-color: #7c4dff; box-shadow: 0 0 0 3px rgba(124,77,255,.15); }

.tpl-card-preview {
    height: 140px; background: #f8f7f5;
    overflow: hidden; position: relative;
}
.tpl-card-preview img { width: 100%; height: 100%; object-fit: cover; }

.tpl-card-blank .tpl-card-preview {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .4rem; color: #aaa; font-size: .82rem;
    background: #fafafa; border-bottom: 1px solid #eee;
}
.tpl-blank-icon { font-size: 2rem; color: #ccc; }

.tpl-card-name {
    font-size: .85rem; font-weight: 600; color: #1a1a1a;
    padding: .5rem .65rem .15rem;
}
.tpl-card-desc {
    font-size: .75rem; color: #777;
    padding: 0 .65rem .65rem;
    line-height: 1.35;
}

.tpl-delete-btn {
    background: none; border: none; cursor: pointer;
    font-size: .85rem; color: #ccc; padding: .1rem .25rem;
    border-radius: 3px; flex-shrink: 0;
}
.tpl-delete-btn:hover { color: #e53e3e; background: #fff0f0; }

.tpl-empty {
    text-align: center; padding: 3rem 2rem; color: #888;
    font-size: .92rem;
}

.tpl-footer {
    display: flex; justify-content: flex-end; gap: .75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e8e8e8;
    background: #fafafa;
}
/* Modal is a light surface — btn-outline needs dark text, not the dark-theme #ededed */
.tpl-footer .btn-outline { color: #1a1a1a; border-color: #c8c2bb; }
.tpl-footer .btn-outline:hover { border-color: #555; color: #111; background: #f0eeeb; }

/* ── Mini Preview Blocks ─────────────────────────────────────────── */
.mini-preview {
    width: 100%; height: 100%;
    padding: 8px 7px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 5px;
    background: #fff;
}

.mp-img-full    { background: #dde4ec; border-radius: 2px; height: 38px; flex-shrink: 0; }
.mp-img-small   { background: #dde4ec; border-radius: 2px; height: 44px; width: 70%; margin: 0 auto; flex-shrink: 0; }
.mp-img-small-sq{ background: #dde4ec; border-radius: 2px; width: 52px; height: 52px; flex-shrink: 0; }
.mp-img-half    { background: #dde4ec; border-radius: 2px; flex: 1; height: 44px; }
.mp-text-h      { background: #222; border-radius: 2px; height: 10px; width: 90%; }
.mp-text-h2     { background: #555; border-radius: 2px; height: 8px; width: 60%; }
.mp-text-s      { background: #888; border-radius: 2px; height: 7px; width: 70%; }
.mp-text-b      { background: #ccc; border-radius: 2px; height: 5px; width: 100%; }
.mp-text-xs     { background: #aaa; border-radius: 2px; height: 5px; width: 55%; }
.mp-divider     { background: #ddd; border-radius: 1px; height: 1px; }
.mp-divider.accent { background: #e53e3e; }
.mp-quote-block { background: #f4f0ff; border-left: 3px solid #7c4dff; height: 18px; border-radius: 0 2px 2px 0; }
.mp-label-chip  { background: #1a1a1a; border-radius: 2px; height: 8px; width: 40%; }
.mp-label-chip.accent { background: #e53e3e; }
.mp-quote-mark  { font-size: 1.2rem; color: #7c4dff; line-height: 1; }
.mp-btn-pill    { background: #7c4dff; border-radius: 6px; height: 8px; width: 45%; margin: 0 auto; }

.mp-text-h.light, .mp-text-s.light { background: rgba(255,255,255,.85); }
.mp-text-h.center, .mp-text-s.center { margin: 0 auto; }

.mp-row { display: flex; gap: 5px; align-items: flex-start; }
.mp-col { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.mp-dark-bg {
    background: #1a1a2e; flex: 1; border-radius: 2px;
    display: flex; flex-direction: column; gap: 5px;
    padding: 6px; align-items: center; justify-content: center;
}
.mp-cover-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    padding: 8px 6px 4px;
    display: flex; flex-direction: column; gap: 4px;
}
.mp-img-full.cover { position: relative; }

.mp-generic {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: #999; font-size: 1.2rem; font-weight: 700;
}

/* ── Delete confirmation ────────────────────────────────────────── */
.tpl-card-danger { border-color: #fca5a5 !important; }
.tpl-confirm-delete {
    padding: .5rem .65rem .65rem;
    background: #fff5f5;
}
.tpl-confirm-delete > span {
    display: block; font-size: .78rem; font-weight: 600; color: #b91c1c;
    margin-bottom: .4rem;
}
.tpl-confirm-btns { display: flex; gap: .4rem; }
.tpl-confirm-yes {
    flex: 1; background: #e53e3e; color: #fff; border: none;
    border-radius: 4px; padding: .3rem; font-size: .78rem; cursor: pointer; font-weight: 600;
}
.tpl-confirm-yes:hover { background: #c53030; }
.tpl-confirm-no {
    flex: 1; background: #f0f0f0; color: #333; border: none;
    border-radius: 4px; padding: .3rem; font-size: .78rem; cursor: pointer;
}
.tpl-confirm-no:hover { background: #e0e0e0; }

/* ── Tier badge on cards (system templates) ─────────────────────── */
.tpl-card-preview .tpl-tier-badge {
    position: absolute; top: 6px; right: 6px;
    font-size: .62rem; font-weight: 700; letter-spacing: .04em;
    padding: .15rem .4rem; border-radius: 3px; text-transform: uppercase;
    background: rgba(0,0,0,.55); color: #fff;
}