<meta name="viewport" content="width=device-width, initial-scale=1.0">

.wrap { padding: 0.5rem 0; }
.layer { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); margin-bottom: 12px; overflow: hidden; }
.layer-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-background-secondary); }
.layer-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.layer-sub { font-size: 12px; color: var(--color-text-secondary); margin-left: auto; }
.layer-body { padding: 10px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item { font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); }
.item b { color: var(--color-text-primary); font-weight: 500; display: block; margin-bottom: 2px; }
.badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 500; margin-right: 4px; }
.b-red   { background: var(--color-background-danger);  color: var(--color-text-danger); }
.b-amber { background: var(--color-background-warning); color: var(--color-text-warning); }
.b-green { background: var(--color-background-success); color: var(--color-text-success); }
.b-blue  { background: var(--color-background-info);    color: var(--color-text-info); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.full { grid-column: 1 / -1; }
.rule-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 0.5px solid var(--color-border-tertiary); font-size: 12px; color: var(--color-text-secondary); }
.rule-row:first-child { border-top: none; }
.rule-label { min-width: 90px; font-weight: 500; color: var(--color-text-primary); flex-shrink: 0; }