button:disabled { opacity: .5; cursor: not-allowed; }
select, textarea { font: inherit; }
.rule-picker { display: grid; gap: 3px; margin-right: auto; color: white; font-size: 11px; }
.rule-picker select { max-width: 360px; border: 0; border-radius: 9px; padding: 9px; background: white; color: var(--ink); }
.history-rule { display: block; color: var(--ink); margin-top: 5px; }
.rules-layout { display: grid; grid-template-columns: minmax(260px,.7fr) 1.3fr; gap: 20px; }
.rule-create, .rule-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.rule-create { align-self: start; }
.rule-create h2 { margin-top: 0; }
.rule-create label, .rule-card > label:first-child { display: grid; gap: 7px; font-weight: 700; }
.rule-create textarea, .rule-card textarea { resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: white; }
.rule-create button { margin-top: 14px; }
.rules-list { display: grid; gap: 12px; }
.rule-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.rule-card > label:first-child { grid-column: 1 / -1; }
.rule-card.inactive { opacity: .65; }
.rule-status { display: flex; gap: 8px; align-items: center; }
@media (max-width: 720px) { .rules-layout { grid-template-columns: 1fr; } }