/* ============ Shenanigo v5: #/settings (notifications, phone, quiet hours) ============ */
.settings { display: flex; flex-direction: column; gap: 22px; }
.st-title { margin-bottom: 14px; }
.st-title h1 { font-size: clamp(40px, 6vw, 72px); margin: 14px 0 12px; }
.st-title .lead { max-width: 620px; font-size: 17px; }
.st-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-card h2 { font-size: clamp(26px, 3vw, 34px); }
.st-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 21px; }
.st-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.st-h p { margin-top: 6px; font-size: 14px; }
.st-p { font-size: 14.5px; line-height: 1.5; }
.st-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.st-actions { gap: 8px; flex-wrap: wrap; }
.settings [hidden] { display: none !important; }
.st-saved { font: 600 12px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--good); opacity: 0; transform: translateY(4px); transition: all 0.3s var(--ease); white-space: nowrap; }
.st-saved.on { opacity: 1; transform: none; }
.st-dev { font: 600 10.5px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); padding: 4px 8px; border-radius: 99px; background: rgba(233, 169, 79, 0.12); box-shadow: inset 0 0 0 1px rgba(233, 169, 79, 0.35); }

/* the kinds x channels grid */
.st-grid { display: flex; flex-direction: column; }
.st-head, .st-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 76px); align-items: center; gap: 10px; }
.st-head { padding: 0 0 12px; border-bottom: 1px solid var(--line-2); font: 600 11.5px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.st-colh { text-align: center; color: var(--muted); }
.st-colh.off { color: var(--dim); opacity: 0.6; }
.st-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.st-kind { display: flex; align-items: center; gap: 14px; min-width: 0; }
.st-kind b { display: block; font-size: 15.5px; font-weight: 600; }
.st-kind small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.st-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 20px; border-radius: 13px; background: rgba(216, 178, 90, 0.1); box-shadow: inset 0 0 0 1px rgba(216, 178, 90, 0.22); }
.st-cell { display: flex; justify-content: center; }
.st-cl { display: none; }
.st-cell .switch[disabled] { opacity: 0.28; cursor: not-allowed; }
.st-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; padding-top: 14px; font-size: 13px; color: var(--dim); }
.st-na { color: var(--amber); }
.st-na-box { padding: 16px 18px; border-radius: var(--r-sm); font-size: 14.5px; color: var(--muted); background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line-2); }

/* email + phone */
.st-num { display: flex; align-items: center; gap: 14px; min-width: 0; }
.st-num > div { min-width: 0; }
.st-num b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.st-num small { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.st-check { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font: 700 17px var(--f-mono); color: #1a1508; background: linear-gradient(135deg, #f0d38a, #d8b25a); box-shadow: 0 8px 20px -8px rgba(216, 178, 90, 0.8); }
.st-phone { display: flex; flex-direction: column; gap: 14px; }
.st-phone-form { display: flex; flex-direction: column; gap: 12px; }
.st-phone-in { display: flex; align-items: stretch; gap: 8px; }
.st-cc { flex: none; display: grid; place-items: center; padding: 0 14px; border-radius: var(--r-sm); font: 600 14px var(--f-mono); color: var(--muted); background: rgba(16, 19, 24, 0.6); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-phone-in .input { min-width: 0; font: 600 17px var(--f-mono); letter-spacing: 0.04em; }
.st-consent { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.st-code { display: flex; flex-direction: column; gap: 16px; }
.st-code p { font-size: 14.5px; }
.st-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 8px; }
.st-box { width: 100%; height: 62px; padding: 0; border: 0; border-radius: 14px; text-align: center; font: 800 26px var(--f-mono); color: var(--text); caret-color: var(--violet);
  background: rgba(16, 19, 24, 0.7); box-shadow: inset 0 0 0 1px var(--line-2); outline: none; transition: box-shadow 0.2s, transform 0.2s var(--spring); }
.st-box:focus { box-shadow: inset 0 0 0 2px var(--violet-2), 0 0 0 5px rgba(216, 178, 90, 0.16); transform: translateY(-2px); }
.st-code.wobble { animation: stWobble 0.45s; }
@keyframes stWobble { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* quiet hours */
.st-hours { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; transition: opacity 0.3s; }
.st-hours.dim-out { opacity: 0.4; }
.st-hours select.input { padding: 12px 14px; }
.st-to { padding-bottom: 12px; color: var(--dim); font-size: 18px; }

/* app rows */
.st-list { gap: 0; }
.st-list .set-row { padding: 16px 0; }
.st-list .set-row:first-child { padding-top: 0; border-top: 0; }
.st-list .set-row:last-child { padding-bottom: 0; }

@media (max-width: 860px) {
  .st-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .settings { gap: 16px; }
  .st-card.card.pad { padding: 22px 18px; }
  .st-head { display: none; }
  .st-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 0 14px; }
  .st-row:first-of-type { padding-top: 4px; }
  .st-kind { grid-column: 1 / -1; align-items: flex-start; margin-bottom: 6px; }
  .st-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; }
  .st-cell { flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
  .st-cl { display: block; font: 600 10.5px var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
  .st-foot { flex-direction: column; }
  .st-boxes { gap: 6px; }
  .st-box { height: 54px; font-size: 22px; border-radius: 12px; }
  .st-h { align-items: flex-start; }
}