/* Shared preset-slot cards (Bloodline presets; reusable for other preset dialogs). */
.pst {
    --pst-accent: var(--ui-teal, #4ecdc4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
}

.pst-active {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: 12px 14px;
    background: radial-gradient(ellipse at 0% 0%, rgba(255, 215, 0, 0.12), transparent 65%), var(--sect-surface-2, rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: var(--r-md, 8px);
}
.pst-active__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pst-badge {
    align-self: flex-start;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #231a00;
    background: var(--ui-gold, #ffd700);
    border-radius: 999px;
}
.pst-stats { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pst-stat { font-size: 0.95em; font-weight: 700; color: var(--sect-text, #fff); }
.pst-stat small { font-size: 0.72em; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--sect-text-dim, #9ca3af); margin-left: 4px; }
.pst-stat--pl { color: var(--ui-gold, #ffd700); }
.pst-muted { font-size: 0.85em; color: var(--sect-text-dim, #9ca3af); }

.pst-hint { margin: 0; font-size: 0.8em; line-height: 1.45; color: var(--sect-text-dim, #9ca3af); }

.pst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.pst-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--sect-surface-2, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--sect-border, #333);
    border-radius: var(--r-md, 8px);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.pst-card--filled { border-color: rgba(78, 205, 196, 0.45); }
.pst-card--filled:hover { border-color: var(--pst-accent); transform: translateY(-1px); }
.pst-card--empty { border-style: dashed; background: transparent; }

.pst-card__head { display: flex; align-items: center; gap: 8px; }
.pst-card__num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    color: var(--sect-text-dim, #9ca3af);
    border: 1px solid var(--sect-border-strong, #444);
}
.pst-card--filled .pst-card__num { color: #04201d; background: var(--pst-accent); border-color: var(--pst-accent); }
.pst-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 0.88em;
    font-weight: 700;
    color: var(--sect-text, #fff);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
}
.pst-name:hover { border-color: var(--sect-border-strong, #444); }
.pst-name:focus { outline: none; border-color: var(--pst-accent); background: var(--sect-surface-1, rgba(0, 0, 0, 0.4)); }

.pst-card__body { min-height: 38px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.pst-card__empty { font-size: 0.82em; color: var(--sect-text-dim, #9ca3af); }
.pst-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pst-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px 1px 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sect-text, #e5e7eb);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}
.pst-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #888); }

.pst-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pst-pill {
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c, #e5e7eb);
    border: 1px solid color-mix(in srgb, var(--c, #888) 55%, transparent);
    background: color-mix(in srgb, var(--c, #888) 12%, transparent);
    border-radius: 5px;
}
.pst-active .pst-pill { font-size: 12px; padding: 2px 8px; }

.pst-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pst-delta { font-size: 0.78em; font-weight: 700; font-variant-numeric: tabular-nums; }
.pst-delta--up { color: #6ee7b7; }
.pst-delta--down { color: #ff8a8a; }
.pst-delta--same { color: var(--sect-text-dim, #9ca3af); }
.pst-card__foot .sect-btn { margin-left: auto; }

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

/* Room presets (Feng Shui, Body Training, Weapon Training) and Dantian presets use the pst-* cards. */
.room-presets { display: flex; flex-direction: column; gap: 8px; }
.room-presets .room-preset-card { margin: 0; padding: 10px 12px; background: var(--sect-surface-2, rgba(0, 0, 0, 0.25)); border: 1px solid var(--sect-border, #333); border-radius: var(--r-md, 8px); }
.room-presets .room-preset-card.pst-card--filled { border-color: rgba(78, 205, 196, 0.45); }
.room-presets .room-preset-card.pst-card--empty { border-style: dashed; background: transparent; }
.room-presets .room-preset-row { gap: 10px; padding: 0; border: 0; }
.room-presets .room-preset-row label { flex: 1 1 auto; }
.room-presets .room-preset-row input.pst-name { width: 100%; padding: 4px 8px; font-size: 0.95em; background: transparent; border: 1px solid transparent; }
.room-presets .room-preset-row input.pst-name:hover { border-color: var(--sect-border-strong, #444); }
.room-presets .room-preset-row input.pst-name:focus { border-color: var(--pst-accent, #4ecdc4); background: var(--sect-surface-1, rgba(0, 0, 0, 0.4)); }
.room-presets .room-preset-row .pst-count { white-space: nowrap; }
.room-presets .room-preset-card.pst-card--filled .room-preset-contents { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.room-presets .room-preset-equipment li:has(.room-preset-empty) { opacity: 0.45; }
.pst-count { flex: 0 0 auto; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; color: var(--sect-text-dim, #9ca3af); border: 1px solid var(--sect-border-strong, #444); border-radius: 999px; }
.pst-count--on { color: var(--pst-accent, #4ecdc4); border-color: rgba(78, 205, 196, 0.5); background: rgba(78, 205, 196, 0.1); }
.room-presets .room-preset-card.pst-card--filled .pst-card__num { color: #04201d; background: var(--pst-accent, #4ecdc4); border-color: var(--pst-accent, #4ecdc4); }

.dtn-preset-card.pst-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 8px; }
.dtn-preset-card.pst-card--empty { grid-template-columns: 1fr; }
.dtn-preset-card.pst-card--empty .dtn-preset-preview { display: none; }
.dtn-preset-card .pst-name { width: auto; flex: 1 1 auto; }
.dtn-preset-card.pst-card--empty .dtn-preset-roots { padding: 4px 0; }
.dtn-preset-card.pst-card--empty .dtn-preset-actions { justify-content: flex-end; }
.dtn-preset-content .pst-card__head { margin-bottom: 4px; }
.dtn-preset-content input.pst-name { width: auto; flex: 1 1 auto; padding: 4px 8px; font-size: 0.95em; font-weight: 700; background: transparent; border: 1px solid transparent; color: var(--sect-text, #fff); }
.dtn-preset-content input.pst-name:hover { border-color: var(--sect-border-strong, #444); }
.dtn-preset-content input.pst-name:focus { outline: none; border-color: var(--pst-accent, #4ecdc4); background: var(--sect-surface-1, rgba(0, 0, 0, 0.4)); }
.dtn-preset-card.pst-card--filled .pst-card__num { color: #04201d; background: var(--pst-accent, #4ecdc4); border-color: var(--pst-accent, #4ecdc4); }
.dtn-preset-card.pst-card--empty .pst-card__head { margin-bottom: 0; }
.dtn-preset-card.pst-card--empty [data-preset-action="load"],
.dtn-preset-card.pst-card--empty [data-preset-action="delete"] { display: none; }
.dtn-preset-card.pst-card--empty .dtn-preset-content { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dtn-preset-card.pst-card--empty .pst-card__head { flex: 1 1 200px; }
.dtn-preset-card.pst-card--empty .dtn-preset-roots { order: 3; flex: 0 0 auto; padding: 0; }
.dtn-preset-card.pst-card--empty .dtn-preset-actions { order: 4; margin-left: auto; }