.btn {
    display:inline-block;
    border:1px solid var(--bs-primary, #1f2937);
    border-radius:8px;
    padding:8px 12px;
    text-decoration:none;
    color:var(--bs-primary, #1f2937);
    font-weight:600;
    background:#fff;
    margin: 0 6px 8px 0;
}
.cards { display:grid; gap:12px; }
.card {
    border:1px solid color-mix(in srgb, var(--bs-primary, #1f2937) 16%, #d1d5db 84%);
    border-radius:10px;
    padding:12px;
    background:#fff;
}
.card.is-home {
    border-color:color-mix(in srgb, var(--bs-primary, #1f2937) 55%, #3f7d2b 45%);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--bs-primary, #1f2937) 16%, transparent 84%) inset;
}
.card-header { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.card-header h2 { margin:0; font-size:18px; }
.card-header a { color:inherit; text-decoration:none; }
.meta { display:flex; flex-wrap:wrap; gap:6px; }
.pill {
    border:1px solid color-mix(in srgb, var(--bs-primary, #1f2937) 16%, #d1d5db 84%);
    border-radius:999px;
    padding:2px 8px;
    font-size:12px;
    text-transform:uppercase;
}
.pill-home {
    border-color:var(--bs-primary, #1f2937);
    color:var(--bs-primary, #1f2937);
}
.preview {
    max-height:180px;
    overflow:hidden;
    border:1px solid color-mix(in srgb, var(--bs-primary, #1f2937) 12%, #e5e7eb 88%);
    border-radius:8px;
    padding:8px;
    background:color-mix(in srgb, var(--app-page-bg, #f6f7f9) 68%, #ffffff 32%);
}
.preview img { max-width:100%; height:auto; }
.actions { display:flex; gap:8px; align-items:center; margin-top:10px; }
.actions form { margin:0; }
.menu-editor {
    border:1px solid color-mix(in srgb, var(--bs-primary, #1f2937) 14%, #d1d5db 86%);
    border-radius:10px;
    padding:12px;
    margin:0 0 14px;
    background:#fff;
}
.menu-hint { color:var(--bs-secondary, #4b5563); font-size:13px; }
.menu-editor-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.menu-node {
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:10px;
    align-items:center;
    border:1px solid color-mix(in srgb, var(--bs-primary, #1f2937) 12%, #e5e7eb 88%);
    border-radius:8px;
    background:color-mix(in srgb, var(--app-page-bg, #f6f7f9) 72%, #ffffff 28%);
    padding:8px 10px;
}
.menu-node.dragging { opacity:.55; }
.menu-node.drop-before { border-top:3px solid color-mix(in srgb, var(--bs-primary, #1f2937) 70%, #1d4ed8 30%); }
.menu-node.drop-child { border-right:3px solid color-mix(in srgb, var(--bs-primary, #1f2937) 70%, #15803d 30%); }
.drag-handle { cursor:grab; color:var(--bs-secondary, #6b7280); user-select:none; }
.menu-node-title { font-weight:700; }
.menu-parent-note { color:var(--bs-secondary, #4b5563); font-size:12px; }
.menu-save-state { color:var(--bs-primary, #065f46); font-size:13px; }