.lay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }

.lay-card {
    position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px;
    background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    transition: border-color 160ms, transform 200ms var(--ease);
    animation: st-rise 0.4s var(--ease) both;
}
.lay-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }

.lay-card.is-active { border-color: transparent; }
.lay-card.is-busy { opacity: 0.6; pointer-events: none; }


.lay-top { display: flex; align-items: center; gap: 12px; }
.lay-mark {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-well); border: 1px solid var(--border);
}
.lay-mark img { width: 30px; height: 30px; object-fit: contain; }

.lay-mark--none .uic { width: 22px; height: 22px; stroke: var(--text-muted); --uic-ac: var(--text-muted); }
.lay-card.is-active .lay-mark { background: var(--accent-soft); border-color: var(--accent-line); }
.lay-card.is-active .lay-mark--none .uic { stroke: var(--accent-text); --uic-ac: var(--accent-text); }

.lay-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lay-name {
    width: 100%; padding: 3px 6px; margin-left: -6px; border-radius: var(--radius-xs);
    background: transparent; border: 1px solid transparent; color: var(--text-main);
    font: 650 15.5px var(--sans); letter-spacing: -0.01em; outline: none;
}
.lay-name:hover { border-color: var(--border); }
.lay-name:focus { border-color: var(--accent-line); background: var(--bg-sunken); cursor: text; }
.lay-keys { padding-left: 0; font-size: 12px; color: var(--text-muted); }

.lay-now {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
    font: 600 11px var(--sans); color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.lay-now i { font-size: 8px; }


.lay-opens { display: flex; align-items: center; gap: 8px; }
.lay-opens-label { flex: none; font-size: 12px; color: var(--text-muted); }
.lay-pick {
    flex: 1; min-width: 0; height: 36px; padding: 0 10px 0 8px; display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-main);
    font: 500 13px var(--sans); text-align: left;
    transition: border-color 160ms, box-shadow 160ms;
}
.lay-pick:hover { border-color: var(--border-hover); }
.lay-pick:focus-visible { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.lay-pick > .fa-chevron-down { margin-left: auto; font-size: 10px; color: var(--text-dim); }
.lay-pick-empty { color: var(--text-muted); }
.lay-clear {
    width: 32px; height: 32px; flex: none; border-radius: var(--radius-xs); cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--text-muted); font-size: 12px;
    transition: color 160ms, background-color 160ms, border-color 160ms;
}
.lay-clear:hover { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-line); }


.lay-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.lay-show {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: var(--radius-sm); cursor: pointer;
    background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-main); font: 600 13px var(--sans);
    transition: background-color 160ms, border-color 160ms;
}
.lay-show:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.lay-show i { font-size: 11px; transition: transform 200ms var(--ease); }
.lay-show:hover i { transform: translateX(3px); }
.lay-show:disabled { cursor: default; color: var(--text-muted); background: var(--bg-well); }
.lay-show:disabled:hover i { transform: none; }
.lay-delete {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); cursor: pointer;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-size: 12px;
    transition: color 160ms, background-color 160ms, border-color 160ms;
}
.lay-delete:hover { color: var(--danger-text); background: var(--danger-soft); border-color: var(--danger-line); }


.lay-picker { width: 280px; z-index: 120; }
.lay-picker[hidden] { display: none; }

@media (max-width: 760px) {
    .lay-grid { grid-template-columns: 1fr; }
}


.preset-item {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: border-color 160ms;
}
.preset-item:hover { border-color: var(--border-hover); }
.preset-item.is-busy { opacity: 0.6; pointer-events: none; }
.preset-item-info { flex: 1; min-width: 0; }
.preset-item-name { display: block; font: 650 14.5px var(--sans); color: var(--text-main); letter-spacing: -0.01em; }
.preset-item-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.preset-item-note {
    display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 8px 10px;
    border-radius: var(--radius-sm); font-size: 11.5px; line-height: 1.45; color: var(--warning-text, var(--warning));
    background: var(--warning-soft); border: 1px solid var(--warning-line);
}
.preset-item-note i { flex: none; margin-top: 1px; color: var(--warning); }
.preset-item-install { flex: none; min-width: 92px; }
.preset-library-empty, .preset-library-error {
    padding: 24px 0; text-align: center; font-size: 13px; color: var(--text-muted);
}