.rule-workflow { padding: 20px 18px 32px; }
.rule-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; margin:0 0 24px; padding:0; gap:8px; }
.rule-steps li { font-size:12px; line-height:1.6; color:var(--muted-strong); text-align:center; }
.rule-steps span { display:block; width:28px; height:28px; border:1px solid var(--border-strong); border-radius:50%; margin:0 auto 8px; line-height:26px; }
.rule-steps [aria-current] { color:var(--gold-strong); }
.rule-steps [aria-current] span { background:var(--gold-dark); border-color:var(--gold); color:var(--text); }
.rule-note { color:var(--text-soft); font-size:14px; line-height:1.7; margin:12px 0 20px; }
.rule-field { display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--text-soft); margin:0 0 18px; min-width:0; }
.rule-field input,.rule-field select { min-width:0; width:100%; min-height:46px; padding:10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font-size:16px; }
.rule-workflow fieldset { border:0; margin:0; padding:0; min-width:0; }
.rule-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.rule-panel { border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:18px 14px; margin-bottom:18px; }
.rule-panel h2 { font-size:17px; line-height:1.5; margin:0 0 16px; overflow-wrap:anywhere; }
.rule-help { color:var(--muted-strong); font-size:14px; line-height:1.6; margin:-6px 0 14px; }
.rule-stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rule-stage { display:flex; flex-direction:column; gap:6px; min-height:92px; padding:12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface-raised); color:var(--text); cursor:pointer; }
.rule-stage:has(input:checked) { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-dark) inset; }
.rule-stage input { width:20px; height:20px; accent-color:var(--gold); }
.rule-stage span { font-weight:600; }
.rule-stage small { color:var(--muted-strong); line-height:1.45; }
.rule-card-header { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.rule-card-header h2 { margin-bottom:6px; }
.rule-card-header .tag { flex-shrink:0; }
.rule-actions { display:flex; flex-wrap:wrap; gap:10px; }
.rule-actions > button { flex:1 1 130px; min-height:46px; padding:10px 12px; }
.rule-workflow button { cursor:pointer; min-height:44px; }
.rule-workflow button:disabled { opacity:.5; cursor:not-allowed; }
.rule-message { font-size:14px; color:var(--gold-strong); line-height:1.7; overflow-wrap:anywhere; }
.rule-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0 16px; }
.rule-metrics div { padding:12px; border-radius:8px; background:var(--surface-raised); }
.rule-metrics span { color:var(--muted-strong); font-size:13px; display:block; margin-bottom:8px; }
.rule-metrics strong { font-size:21px; font-variant-numeric:tabular-nums; }
.rule-progress { width:100%; accent-color:var(--gold); height:8px; }
.rule-empty { border:1px dashed var(--border-strong); padding:18px; border-radius:8px; color:var(--text-soft); line-height:1.7; }
.rule-ranking-row { width:100%; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(80px,1.5fr) auto; gap:10px; align-items:center; border:0; border-top:1px solid var(--border); background:transparent; color:inherit; text-align:left; padding:14px 0; }
.rule-ranking-row:first-child { border-top:0; }
.rule-ranking-row i { display:block; height:6px; background:var(--border); border-radius:5px; overflow:hidden; }
.rule-ranking-row i b { display:block; height:100%; background:var(--gold); }
.rule-orders { list-style:none; padding:0; margin:0; }
.rule-orders li { border-top:1px solid var(--border); padding:14px 0; line-height:1.7; overflow-wrap:anywhere; }
.rule-orders small { display:block; color:var(--muted-strong); }
.rule-dialog { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:12px; width:min(390px,calc(100% - 32px)); padding:24px; }
.rule-dialog::backdrop { background:rgb(0 0 0 / 75%); }
.rule-dialog h2 { margin-top:0; font-size:20px; }
.rule-dialog p { line-height:1.8; color:var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .rule-workflow * { transition:none!important; animation:none!important; } }
@media (max-width:560px) { .rule-stage-grid { grid-template-columns:1fr; } .rule-stage { min-height:0; } }