/* Hallmark · genre: modern-minimal · tone: utilitarian · anchor: system blue
 * macrostructure: native settings index → focused drill-down · component: Settings app
 * pre-emit critique: P5 H5 E5 S5 R4 V4 · Slop test: pass (component scope)
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41) · responsive/mobile: pass (34, 49–57) */

.st-app {
  --st-control-h: 44px;
  --st-fast: 140ms ease-out;
  --st-muted-fill: color-mix(in srgb, var(--bg-tertiary) 82%, transparent);
  --st-selected-fill: color-mix(in srgb, var(--accent-blue) 13%, var(--bg-secondary));
  --st-focus-ring: color-mix(in srgb, var(--accent-blue) 72%, transparent);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.st-header {
  min-height: 58px;
  align-items: flex-start;
}

.st-heading {
  min-width: 0;
  flex: 1;
}

.st-header .ah-title {
  line-height: 1.1;
}

.st-subtitle {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}

.st-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--st-control-h);
  margin: -7px 0 -5px -10px;
  padding: 0 6px;
  color: var(--accent-blue);
  font-size: 13px;
}

.st-back .ic {
  width: 19px;
  height: 19px;
}

.st-scroll {
  padding-bottom: 110px;
}

.st-profile {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-card-lg);
  background: var(--bg-secondary);
}

.st-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-blue), var(--accent-purple));
  color: var(--theme-preview-light);
  font-size: 17px;
  font-weight: 800;
}

.st-profile-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.st-profile-copy strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-profile-copy span {
  color: var(--text-secondary);
  font-size: 12px;
}

.st-app .list-row {
  min-height: 50px;
  text-align: left;
}

.st-nav-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 15px;
  align-items: center;
  column-gap: 10px;
  width: 100%;
}

.st-toggle-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  cursor: default;
}

.st-app .lr-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.st-app .lr-title,
.st-app .lr-sub {
  display: block;
  min-width: 0;
  overflow: visible;
  line-height: 1.22;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.st-app .lr-sub {
  margin-top: 0;
  line-height: 1.3;
}

.st-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--theme-preview-light);
}

.st-icon .ic {
  width: 17px;
  height: 17px;
}

.st-blue { background: var(--accent-blue); }
.st-green { background: var(--accent-green); }
.st-orange { background: var(--accent-orange); }
.st-purple { background: var(--accent-purple); }
.st-red { background: var(--accent-red); }
.st-pink { background: var(--accent-pink); }
.st-teal { background: var(--accent-teal); }
.st-gray { background: var(--text-secondary); }

.st-chevron {
  grid-column: 4;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
}

.st-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--accent-blue);
}

.st-nav-row > .st-check { grid-column: 4; }

.st-row-value {
  grid-column: 3;
  max-width: 84px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.st-info-row {
  cursor: default;
}

.st-info-value {
  max-width: 58%;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: right;
}

.st-app .switch {
  min-width: 46px;
  outline: none;
}

.st-app .switch:disabled,
.st-app .is-disabled {
  cursor: not-allowed;
  opacity: .46;
}

.st-bottom-space {
  height: 10px;
}

/* Display & Brightness */
.st-theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.st-theme-card {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-card-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: border-color var(--st-fast), transform var(--st-fast);
}

.st-theme-card.selected {
  border-color: var(--accent-blue);
}

.st-theme-card:active {
  transform: scale(.98);
}

.st-theme-preview {
  display: flex;
  width: 100%;
  height: 94px;
  flex-direction: column;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 11px;
}

.st-theme-preview.dark { background: var(--theme-preview-dark); }
.st-theme-preview.light { background: var(--theme-preview-light); }
.st-theme-preview i {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--theme-preview-line);
}
.st-theme-preview i:last-child { width: 67%; }

.st-slider-card {
  padding: 16px;
  overflow: visible;
}

.st-slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  color: var(--text-secondary);
  font-size: 13px;
}

.st-slider-top span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.st-slider-top .ic { color: var(--accent-orange); }
.st-slider-top output { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.st-app input[type='range'] {
  width: 100%;
  height: 28px;
  accent-color: var(--accent-blue);
  cursor: grab;
}

.st-app input[type='range']:active { cursor: grabbing; }
.st-app input[type='range']:disabled { cursor: not-allowed; opacity: .42; }

.st-footnote {
  margin: -6px 5px 18px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.45;
}

/* Phone size drag and lock */
.st-size-preview {
  display: flex;
  min-height: 236px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 16px;
  border-radius: var(--radius-card-lg);
  background: var(--bg-secondary);
}

.st-size-phone {
  display: block;
  width: 82px;
  height: 160px;
  padding: 5px;
  border: 3px solid var(--text-secondary);
  border-radius: 18px;
  background: var(--bg-primary);
  transition: width var(--st-fast), height var(--st-fast);
}

.st-size-phone i {
  display: block;
  width: 30px;
  height: 7px;
  margin: 4px auto;
  border-radius: 5px;
  background: var(--text-tertiary);
}

.st-size-phone[data-size-preview='small'] { width: 68px; height: 133px; }
.st-size-phone[data-size-preview='medium'] { width: 76px; height: 148px; }
.st-size-phone[data-size-preview='large'] { width: 84px; height: 164px; }
.st-size-phone[data-size-preview='extra-large'] { width: 92px; height: 180px; }

.st-size-labels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 9px;
  text-align: center;
}

/* Wallpaper */
.st-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.st-custom-thumb {
  width: 42px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 8px;
  background-color: var(--bg-tertiary);
  background-position: center;
  background-size: cover;
}

.st-wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.st-wallpaper {
  position: relative;
  display: flex;
  min-height: 210px;
  overflow: hidden;
  align-items: flex-end;
  border: 2px solid transparent;
  border-radius: var(--radius-card-lg);
  background: var(--bg-secondary);
  transition: border-color var(--st-fast), transform var(--st-fast);
}

.st-wallpaper.selected { border-color: var(--accent-blue); }
.st-wallpaper:active { transform: scale(.985); }

.st-wallpaper > .wallpaper {
  position: absolute;
  inset: 0;
}

.st-wallpaper strong {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 28px 10px 10px;
  background: linear-gradient(transparent, var(--theme-preview-overlay));
  color: var(--theme-preview-light);
  font-size: 12px;
  text-align: left;
}

.st-wallpaper > .ic {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 9px;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: var(--theme-preview-light);
}

/* Choice pages */
.st-choice-row.selected { background: var(--st-selected-fill); }

.st-frame-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--separator);
  border-radius: 10px;
}

.st-font-sample {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--bg-tertiary);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.st-font-system { font-family: var(--clock-font-system); }
.st-font-rounded { font-family: var(--clock-font-rounded); }
.st-font-serif { font-family: var(--clock-font-serif); }
.st-font-mono { font-family: var(--clock-font-mono); }

/* Forms, security, number change and block list */
.st-form-card {
  position: relative;
  padding: 4px;
}

.st-form-card textarea {
  width: 100%;
  min-height: 128px;
  resize: none;
  border: 0;
  border-radius: calc(var(--radius-card) - 3px);
  outline: 0;
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px 12px 28px;
  font-size: 14px;
  line-height: 1.45;
}

.st-char-count {
  position: absolute;
  right: 12px;
  bottom: 9px;
  color: var(--text-tertiary);
  font-size: 10px;
}

.st-primary-action,
.st-danger-action,
.st-text-action {
  min-height: var(--st-control-h);
  margin: 14px 0;
}

.st-danger-action,
.st-text-action {
  width: 100%;
  border-radius: var(--radius-card);
  color: var(--accent-red);
  font-size: 14px;
  font-weight: 700;
}

.st-text-action { color: var(--accent-blue); }

.st-security-card,
.st-number-card {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding: 24px;
  border-radius: var(--radius-card-lg);
  background: var(--bg-secondary);
  text-align: center;
}

.st-security-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 5px;
  border-radius: 18px;
  background: var(--st-selected-fill);
  color: var(--accent-blue);
}

.st-security-card .ic { width: 30px; height: 30px; }
.st-security-card p { color: var(--text-secondary); font-size: 12px; }

.st-number-card span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.st-number-card strong {
  font-family: var(--clock-font-mono);
  font-size: 27px;
  font-variant-numeric: tabular-nums;
}

.st-modal-copy {
  margin: 0 4px 13px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.st-block-row { cursor: default; }
.st-unblock {
  min-height: var(--st-control-h);
  padding: 0 4px;
  color: var(--accent-red);
  font-size: 12px;
  font-weight: 700;
}

/* Explicit loading, empty, error and success-capable states */
.st-loading,
.st-empty-state,
.st-error-state {
  display: flex;
  min-height: 230px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  text-align: center;
}

.st-loading::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 2px solid var(--separator);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: stSpin .8s linear infinite;
}

.st-empty-state .ic {
  width: 40px;
  height: 40px;
  color: var(--text-tertiary);
}

.st-empty-state span { color: var(--text-tertiary); font-size: 12px; }
.st-error-state strong { color: var(--accent-red); }
.st-error-state button { min-height: var(--st-control-h); color: var(--accent-blue); font-weight: 700; }
.st-success { color: var(--accent-green); }

@keyframes stSpin { to { transform: rotate(360deg); } }

/* Interaction and accessibility */
.st-app button:hover:not(:disabled) {
  filter: brightness(.98);
}

.st-app button:focus-visible,
.st-app input:focus-visible,
.st-app textarea:focus-visible {
  outline: 3px solid var(--st-focus-ring);
  outline-offset: 2px;
}

.st-app button:disabled {
  cursor: not-allowed;
}

@media (max-height: 760px) {
  .st-size-preview { min-height: 190px; }
  .st-wallpaper { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-app *,
  .st-app *::before,
  .st-app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}