.hud-gear { position: absolute; right: 16px; top: 14px; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #23263a; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #ffc83d 55%, #e0a312); box-shadow: 0 5px 0 #b88a12, 0 10px 18px rgba(0,0,0,.25);
  color: #23263a; font-size: 28px; line-height: 1; transition: transform .15s, box-shadow .15s; }
.hud-gear span { display: inline-block; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.hud-gear:hover span { transform: rotate(120deg); }
.hud-gear:active { transform: translateY(4px); box-shadow: 0 1px 0 #b88a12, 0 4px 8px rgba(0,0,0,.25); }

.dialog.settings { width: min(720px, 96vw); }
.settings .bp-head { margin-bottom: 12px; }
.st-close { color: #fff; margin-left: auto; }
.st-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.st-tabs button { flex: 1; border: 1.5px dashed rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: #dbe9ff; border-radius: 10px; padding: 8px 10px;
  font: inherit; font-weight: 800; cursor: pointer; transition: background .15s; }
.st-tabs button:hover { background: rgba(255,255,255,.14); }
.st-tabs button.on { background: #ffc83d; color: #23263a; border: 1.5px solid #ffc83d; }
.st-pane { max-height: 64vh; overflow-y: auto; padding-right: 4px; }
.st-pane h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #bcd7ff; }
.st-card { border: 1.5px dashed rgba(255,255,255,.35); border-radius: 10px; padding: 10px 12px; background: rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 7px; }
.st-row { line-height: 1.5; }
.st-row code, .st-notes code, .st-cmd code { background: rgba(0,0,0,.28); color: #ffe9b0; }
.st-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.st-actions .spacer { flex: 1; }
.st-badge { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.18); color: #fff; }
.st-badge.ok { background: #22b866; }
.st-badge.warn { background: #ffc83d; color: #23263a; }
.st-badge.bad { background: #e8453c; }
.st-activity { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.settings .led { width: 10px; height: 10px; border-radius: 50%; background: #3b3f58; display: inline-block; }
.settings .led.on { background: #3ee07f; box-shadow: 0 0 8px #3ee07f; }
.st-cmd { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.st-cmd code { flex: 1; padding: 8px 10px; border-radius: 8px; font-size: 12px; overflow-x: auto; white-space: nowrap; }
.st-cmd-label { width: 22px; height: 22px; border-radius: 50%; background: #ffc83d; color: #23263a; font-weight: 900; font-size: 12px; display: grid; place-items: center; flex: none; }
.st-copy { flex: none; min-width: 112px; }
.st-copy.done { background: #22b866 !important; border-color: #22b866 !important; color: #fff !important; }
.st-select select { margin-top: 4px; }
.st-notes { margin: 12px 0 0; padding-left: 20px; line-height: 1.6; color: #dbe9ff; font-family: var(--font); font-size: 13px; }
.st-form { margin-top: 12px; }
.st-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-theme { border: 2px dashed rgba(255,255,255,.4); border-radius: 14px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: inherit; color: #fff; transition: transform .15s; }
.st-theme i { font-style: normal; font-size: 40px; }
.st-theme b { font-size: 16px; }
.st-theme small { opacity: .8; text-align: center; }
.st-theme.day { background: linear-gradient(#8fd3ff, #7cc96a); color: #23263a; }
.st-theme.night { background: linear-gradient(#0b1233, #27346b); }
.st-theme:hover { transform: translateY(-2px); }
.st-theme.on { border: 3px solid #ffc83d; box-shadow: 0 0 0 3px rgba(255,200,61,.35); }

/* Slack: step-by-step guide */
.sl-why { margin-top: 0; }
.sl-guide { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: #dbe9ff; font-size: 13px; line-height: 1.5; }
.sl-step { display: flex; gap: 10px; align-items: flex-start; }
.sl-step > div { flex: 1; min-width: 0; }
.sl-step > div > b { color: #fff; font-size: 14px; }
.sl-step p { margin: 4px 0; }
.sl-step a { color: #ffc83d; }
.sl-step code { background: rgba(0,0,0,.28); color: #ffe9b0; }
.sl-step .muted { color: #9fb4d8; }
.sl-manifest { position: relative; margin: 6px 0; }
.sl-manifest pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.32); color: #ffe9b0; font-size: 12px; line-height: 1.4; overflow-x: auto; max-height: 220px; }
.sl-manifest .st-copy { position: absolute; top: 8px; right: 8px; }