.rules{display:flex;flex-direction:column;gap:18px}
.rule{background:var(--card);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:14px;border:1.5px solid var(--line)}
.rule-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rule-head>div{display:flex;align-items:center;gap:10px;min-width:0}
.rule-badge{background:var(--ink);color:#fff;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;flex:none}
.rtitle{font-size:18px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.box{background:var(--surface);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 8px rgba(18,18,23,.05)}
.box.comment{border-left:5px solid var(--lime)}
.box.dm{border-left:5px solid var(--blue)}
.box.kwbox{border-left:5px solid var(--ink)}
.box-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.box-head>div{flex:1;min-width:0}
.box-head p{color:var(--muted);font-size:14px}
.ico{flex:none;width:38px;height:38px;border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:18px}
.hint{color:var(--muted);font-size:14px}

.kw{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 9px;background:#fff;transition:border-color .2s,box-shadow .2s}
.kw:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(184,244,60,.55)}
.kw input{flex:1;min-width:140px;border:0;padding:6px;box-shadow:none!important;background:transparent;width:auto}
.k{display:inline-flex;align-items:center;gap:6px;background:var(--lime);color:var(--lime-ink);border-radius:999px;padding:4px 7px 4px 12px;font-weight:600;font-size:14px}
.k button{border:0;background:#0000001a;border-radius:50%;width:22px;height:22px;line-height:1;transition:background .2s}
.k button:hover{background:#00000040}

.mode{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r-md);background:var(--card)}
.mode.gone{display:none}
.mode .lk{display:grid;gap:10px;grid-template-columns:1fr 2fr}
.mode .nf.off,.mode .lfol.gone{display:none}
.lfol{display:flex;flex-direction:column;gap:12px}
.step{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.step em{font-style:normal;background:var(--blue);color:#fff;border-radius:999px;padding:2px 11px;font-size:12px}
.tagline{font-size:13px;font-weight:600;border-radius:999px;padding:3px 11px;background:#fff;align-self:flex-start;color:var(--muted)}

.ig-preview{display:flex;flex-direction:column;gap:6px}
.ig-preview small{font-size:13px}
.ig-chat{background:#000;border-radius:20px;padding:14px;max-width:320px}
.ig-bubble{background:#262626;color:#fff;border-radius:18px;padding:11px 13px;font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.ig-bubble .pb{margin-top:9px;background:#363636;border-radius:12px;padding:9px;text-align:center;font-weight:600}

@media(max-width:600px){
  .mode .lk{grid-template-columns:1fr}
  .box{padding:14px}
  .rule{padding:12px}
  .dmseg span{display:block;text-align:center;border-radius:var(--r-sm)}
  .dmseg{flex-direction:column}
  .dmseg label{width:100%}
}