.sl-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.sl-section { display: grid; gap: 14px; }
.sl-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; max-height: 180px; overflow: auto; }
.sl-preview > div { display: grid; padding: 8px; border-radius: 10px; background: var(--surface-control); font-size: 12px; text-align: center; }
.sl-preview strong { color: var(--blue-700); }
.sl-tools { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--en-line); }
.sl-record { overflow-wrap: anywhere; }
.sl-key-search { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid var(--en-line); border-radius: 16px; background: var(--surface-control); }
.sl-key-search > .el-field:nth-of-type(3) { grid-column: 1 / -1; }
.sl-key-search > button { justify-self: end; grid-column: 1 / -1; }
.sl-key-summary { margin-top: 12px !important; padding: 10px 12px; border-radius: 11px; background: var(--surface-primary, #d6ecfb); color: var(--blue-700); font-size: 12px; }
.sl-key-unavailable { margin-top: 10px !important; }
.sl-key-disabled { color: var(--en-danger, #b54155); background: color-mix(in srgb, var(--en-danger, #b54155) 8%, var(--surface-control)); }
.sl-validity-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 650; }
.sl-calendar-button { display: inline-flex; align-items: center; gap: 8px; }
.sl-calendar-button svg { flex: 0 0 18px; }
.sl-date-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 14px; border: 1px solid var(--en-line); border-radius: 15px; background: var(--surface-control); }
.sl-date-range > p { grid-column: 1 / -1; }
@media (max-width: 480px) { .sl-preview { grid-template-columns: repeat(2,minmax(0,1fr)); } .sl-actions > button { flex: 1 1 auto; } }
@media (max-width: 380px) { .sl-key-search, .sl-date-range { grid-template-columns: minmax(0,1fr); } .sl-validity-head { align-items: flex-start; flex-direction: column; } }