/* ==========================================================================
   Settings, professional: clean sans type, filled inputs, buttons that say what they do
   (kind + icon), steppers on numbers. Loaded after terminal.css; only inside #settings.
   ========================================================================== */

#settings {
  --sp-radius: 8px;
  --sp-ctl: 34px;
  --sp-fill: color-mix(in srgb, var(--text) 6%, var(--surface));
  --sp-fill-hover: color-mix(in srgb, var(--text) 10%, var(--surface));
  --sp-line: color-mix(in srgb, var(--text) 10%, transparent);
}

/* Type: sans everywhere, normal case; numbers and addresses stay monospaced. */
#settings :is(.tabs__btn, .form-group, .form-note, .field__label, .seg__btn, .btn, .pcard__close, .input, #settingsSearch, .sheet__head > :first-child, .notice, .exc, .mwl, .deskswitch) {
  font-family: var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
}
#settings .mono, #settings .input--num, #settings .mwl__sol, #settings .mwb__addr b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Panes: plain, calm background. */
#settings #settingsPanes { background-image: none; background-color: var(--bg); }
#settings .sheet, #settings .sheet__head, #settings .sheet__foot { background: var(--bg); }
#settings .sheet__head > :first-child { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
#settings .sheet__head > :first-child::before { border-radius: 3px; }

/* Side tabs. */
#settings .tabs { background: var(--bg); }
#settings .tabs__btn { height: 34px; font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--sp-radius); }
#settings .tabs__btn.is-on { background: var(--sp-fill); box-shadow: none; color: var(--text); }
#settings .tabs__btn.is-on::before { top: 8px; bottom: 8px; border-radius: 2px; }
#settings #settingsSearch { height: var(--sp-ctl); border-radius: var(--sp-radius); background: var(--sp-fill); border-color: transparent; font-size: var(--fs-sm); }

/* Section headings. */
#settings .form-group { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); margin-top: var(--sp-5); }
#settings .form-group::before { content: none; }
#settings .form-group::after { background: var(--sp-line); }

/* Rows: soft cards. */
#settings .field { background: var(--surface); border: 1px solid var(--sp-line); border-radius: 10px; padding: 12px 16px; }
#settings .field:hover { background: var(--surface); border-color: color-mix(in srgb, var(--text) 18%, transparent); }
#settings .field:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
#settings .field__label > span:first-child { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }

/* Notes. */
#settings .form-note { font-size: var(--fs-sm); border: 1px solid var(--sp-line); border-left: 3px solid var(--accent); border-radius: var(--sp-radius); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); color: var(--text-2); }
#settings .form-note::before { content: none; }
#settings .form-note:not(.form-note--brief) { padding: 10px 12px; }
#settings .notice { border-radius: var(--sp-radius); font-size: var(--fs-sm); }

/* Inputs: filled, rounded, clear focus. */
#settings .input,
#settings select.input {
  height: var(--sp-ctl);
  border-radius: var(--sp-radius);
  background: var(--sp-fill);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  color: var(--text);
  box-shadow: none;
}
#settings .input:hover { background: var(--sp-fill-hover); border-color: transparent; }
#settings .input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#settings .input::placeholder { color: var(--text-3); }

/* Numbers: − value unit + in one filled control. */
#settings .numfield { display: inline-flex; align-items: center; gap: 0; height: var(--sp-ctl); border-radius: var(--sp-radius); background: var(--sp-fill); border: 1px solid transparent; overflow: hidden; }
#settings .numfield:hover { background: var(--sp-fill-hover); }
#settings .numfield:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#settings .numfield .input { height: 100%; width: 92px; min-width: 64px; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 4px; text-align: right; }
#settings .numfield .input:focus { box-shadow: none; }
#settings .numfield .input-suffix { padding: 0 8px 0 2px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
#settings .numfield__btn { flex: none; width: 30px; height: 100%; border: 0; background: transparent; color: var(--text-2); font: 600 16px/1 var(--font-sans); cursor: pointer; }
#settings .numfield__btn:hover:not(:disabled) { background: var(--sp-fill-hover); color: var(--text); }
#settings .numfield__btn:disabled { opacity: 0.35; cursor: default; }
#settings .numfield input::-webkit-outer-spin-button, #settings .numfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Segmented choices: pills. */
#settings .seg { background: var(--sp-fill); border: 0; border-radius: var(--sp-radius); padding: 3px; gap: 2px; }
#settings .seg__btn { height: 28px; padding: 0 12px; border-radius: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); box-shadow: none; }
#settings .seg__btn:hover:not(:disabled) { color: var(--text); background: var(--sp-fill-hover); }
#settings .seg__btn.is-on { background: var(--surface-3, var(--surface)); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--sp-line); }

/* Switch. */
#settings .switch__track { border-radius: 999px; }
#settings .switch__thumb { border-radius: 50%; }

/* ---------- Buttons: what they do, at a glance ---------- */
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip),
#settings .sheet__foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--sp-radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  background: var(--sp-fill);
  color: var(--text);
  box-shadow: none;
  transition: background var(--dur-fast, 0.12s), border-color var(--dur-fast, 0.12s), color var(--dur-fast, 0.12s);
}
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip):hover:not(:disabled),
#settings .sheet__foot .btn:hover:not(:disabled) { background: var(--sp-fill-hover); color: var(--text); border-color: transparent; }
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip):is(.btn--xs, .pcard__close) { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
#settings .pane .btn:disabled, #settings .pane .pcard__close:disabled { opacity: 0.45; }
#settings .pane .btn .bi, #settings .pane .pcard__close .bi { width: 14px; height: 14px; flex: none; }

/* Primary: the main action (solid, high contrast like OKX). */
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip).btn--primary, #settings .sheet__foot .btn.btn--primary { background: var(--text); color: var(--bg); }
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip).btn--primary:hover:not(:disabled), #settings .sheet__foot .btn.btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 86%, var(--bg)); color: var(--bg); }

/* Positive: use, connect, link, create. */
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip).is-go:not(.btn--primary) { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip).is-go:not(.btn--primary):hover:not(:disabled) { background: color-mix(in srgb, var(--pos) 24%, transparent); color: var(--pos); }

/* Danger: remove, withdraw, reset, turn off. */
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip):is(.is-danger, .btn--danger, .is-risk) { background: color-mix(in srgb, var(--neg) 12%, transparent); color: var(--neg); border-color: transparent; }
#settings .pane :is(.btn, .pcard__close):not(.btn--icon):not(.itip):is(.is-danger, .btn--danger, .is-risk):hover:not(:disabled) { background: var(--neg); color: #fff; }

/* Links that read as text. */
#settings .pane .link { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--accent); }

/* Pills. */
#settings .pill { border-radius: 999px; font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: normal; text-transform: none; }

/* Wallet list rows a little roomier. */
#settings .mwl__row { background: var(--surface); border-color: var(--sp-line); border-radius: 10px; padding: 12px 14px; }
#settings .mwl__row.is-active { border-color: color-mix(in srgb, var(--pos) 50%, transparent); background: color-mix(in srgb, var(--pos) 4%, var(--surface)); }
#settings .exc { border-radius: 10px; }

/* A new wallet's key: copy it and confirm it's saved before going on. */
.kb { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, #000 62%, transparent); }
.kb__card { width: min(520px, 100%); padding: 22px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius: 14px; background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); font-family: var(--font-sans); }
.kb__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.kb__text { margin: 8px 0 14px; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); }
.kb__row { display: flex; gap: 8px; }
.kb__key { flex: 1; min-width: 0; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, var(--surface)); border: 1px solid transparent; font-size: var(--fs-xs); }
.kb__row .btn, .kb__foot .btn { height: 36px; padding: 0 16px; border-radius: 8px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: none; letter-spacing: normal; }
.kb__tick { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.kb__tick input { width: 16px; height: 16px; accent-color: var(--accent); }
.kb__foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.kb__foot .btn--primary { background: var(--text); color: var(--bg); border: 0; }
.kb__foot .btn--primary:disabled { opacity: 0.35; }

/* ---------- Sidebar, like a modern app's settings menu ---------- */
#settings .tabs.tabs--dc { gap: 2px; padding: 14px 10px; background: color-mix(in srgb, var(--text) 3%, var(--bg)); border-right: 1px solid var(--sp-line); }
#settings .tabs--dc .tabs__btn { height: 34px; padding: 0 10px; gap: 10px; border-radius: 6px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-2); box-shadow: none; }
#settings .tabs--dc .tabs__btn::before { content: none !important; }
#settings .tabs--dc .tabs__btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); transform: none; }
#settings .tabs--dc .tabs__btn.is-on { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
#settings .tabs--dc .tabs__ico { width: 20px; height: 20px; display: grid; place-items: center; color: currentColor; opacity: 0.85; }
#settings .tabs--dc .tabs__ico svg { width: 19px; height: 19px; }
#settings .tabs--dc .tabs__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings .tabs--dc .tabs__head { margin: 6px 10px 4px; font: var(--fw-semibold) var(--fs-xs) var(--font-sans); color: var(--text-3); letter-spacing: normal; text-transform: none; }
#settings .tabs--dc .tabs__sep { width: calc(100% - 20px); margin: 8px 10px; border: 0; border-top: 1px solid var(--sp-line); }
#settings .tabs--dc #settingsSearch { margin: 6px 0 10px; height: 34px; background: color-mix(in srgb, var(--text) 4%, var(--bg)); border: 1px solid var(--sp-line); padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a0a0aa' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; background-size: 15px; }
/* You, at the top. */
#settings .tabs--dc .tabs__me { height: auto; padding: 8px 10px; gap: 12px; background: transparent; }
#settings .tabs--dc .tabs__me.is-on { background: color-mix(in srgb, var(--text) 10%, transparent); }
#settings .tabs__meav { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--bot-c, var(--accent)) 22%, var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bot-c, var(--accent)) 55%, transparent); overflow: hidden; }
#settings .tabs__meav svg { width: 30px; height: 30px; }
#settings .tabs__metext { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
#settings .tabs__metext b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#settings .tabs__metext small { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--text-3); }
/* The open page's sections. */
#settings .tabs__subs { display: flex; flex-direction: column; margin: 2px 0 4px 20px; padding-left: 0; border-left: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
#settings .tabs__sub { position: relative; height: 30px; padding: 0 12px 0 20px; text-align: left; border: 0; background: transparent; font: var(--fw-medium) var(--fs-sm) var(--font-sans); color: var(--text-3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#settings .tabs__sub:hover { color: var(--text); }
#settings .tabs__sub.is-on { color: var(--text); }
#settings .tabs__sub.is-on::before { content: ''; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--text); }
#settings .tabs.tabs--dc { overflow-y: auto; }
#settings .tabs.tabs--dc > * { flex: none; }
/* An icon never grows past its button text, whatever the button. */
#settings button .bi { width: 14px; height: 14px; flex: none; }
#settings .input-row { display: flex; align-items: center; gap: 8px; }

/* Settings → Gifts */
#settings .gifts { display: flex; flex-direction: column; gap: 8px; }
#settings .gift { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--surface); }
#settings .gift.is-done { opacity: 0.75; }
#settings .gift--send { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
#settings .gift__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; background: color-mix(in srgb, var(--text) 6%, transparent); }
#settings .gift__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
#settings .gift__main b { font-size: var(--fs-md); }
#settings .gift__note { color: var(--text-2); font-style: italic; }
#settings .gift__what { color: var(--pos); font-size: var(--fs-xs); }

/* Settings → Phone: the QR code to link a phone */
#settings .phone-qr { display: flex; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--sp-line); border-radius: 12px; background: var(--surface); margin-bottom: 6px; }
#settings .phone-qr img { flex: none; width: 200px; height: 200px; border-radius: 10px; background: #fff; image-rendering: pixelated; }
#settings .phone-qr__how { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); min-width: 0; }
#settings .phone-qr__how ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); }
#settings .phone-qr__how .muted { overflow-wrap: anywhere; }