/*! modern-ui.css — [ZyRox] Unified modern surface, radius & motion layer.
 *  Additive, loaded late. Wins the cascade deterministically (doubled-class
 *  specificity + !important) over rules that load afterwards, such as
 *  settings-center.css, settings-mobile.css, brand-experience.css,
 *  model-picker-v2.css and the login page's own <style> block.
 *  Theme-aware via the --zy-* tokens. Motion honours prefers-reduced-motion.
 *  RTL-safe (logical properties). No trade dress is copied. License: MIT.
 *
 *  1. Design tokens
 *  2. User settings — full modern redesign
 *  3. Model picker — refined shape
 *  4. Login / account page — refined shape
 *  5. Generic app surfaces (static pages)
 */

/* ================================================================== *
 * 1. Design tokens
 * ================================================================== */
:root{
  --wg-r-xs:10px;
  --wg-r-sm:12px;
  --wg-r-md:16px;
  --wg-r-lg:20px;
  --wg-r-xl:26px;
  --wg-hair:rgba(var(--zy-veil),.09);
  --wg-hair-2:rgba(var(--zy-veil),.15);
  --wg-surface:rgba(var(--zy-veil),.035);
  --wg-surface-2:rgba(var(--zy-veil),.06);
  --wg-sh-sm:0 10px 30px -18px rgba(0,0,0,.55);
  --wg-sh-lg:0 34px 80px -28px rgba(0,0,0,.62);
  --wg-accent:var(--zy-fill,#0b57d0);
  --wg-accent-2:#4d90fe;
  --wg-grad:linear-gradient(180deg,#3079ed,#0b57d0);
  --wg-ok:#2fbf7f;
  --wg-warn:#e0a72e;
  --wg-gold:#e9b068;
  --wg-danger:#ef5f6b;
}

/* ================================================================== *
 * 2. User settings — full modern redesign
 * ================================================================== */
.settings-overlay.settings-overlay{
  padding:20px !important;
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

.settings-dialog.settings-dialog{
  width:min(920px,100%) !important;
  height:min(640px,90dvh) !important;
  max-height:90dvh !important;
  border-radius:var(--wg-r-xl) !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgb(var(--zy-solid)) !important;
  color:var(--zy-text) !important;
  box-shadow:var(--wg-sh-lg) !important;
  overflow:hidden !important;
}

/* ---- header ---- */
.settings-dialog.settings-dialog header{
  justify-content:flex-start !important;
  gap:14px !important;
  padding:16px 20px !important;
  min-height:auto !important;
  flex:none !important;
  border-bottom:1px solid var(--wg-hair) !important;
  background:rgba(var(--zy-veil),.02) !important;
}
.settings-dialog.settings-dialog header h2{
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-.2px !important;
}
.settings-dialog.settings-dialog .settings-head-brand small{
  font-size:11px !important;
  color:var(--zy-text2) !important;
}
.settings-header-user.settings-header-user{
  margin-inline-start:auto !important;
  border:1px solid var(--wg-hair-2) !important;
  border-radius:999px !important;
  background:var(--wg-surface) !important;
  padding:4px 12px 4px 4px !important;
}
.settings-header-user.settings-header-user strong{ font-size:12.5px !important; }
.settings-close.settings-close{
  width:38px !important;
  height:38px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
  font-size:22px !important;
  line-height:1 !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
.settings-close.settings-close:hover{
  background:var(--wg-surface) !important;
  border-color:var(--wg-hair) !important;
  color:var(--zy-text) !important;
}

/* ---- side navigation ---- */
.settings-layout.settings-layout{ min-height:0 !important; }
.settings-layout.settings-layout nav{
  flex:0 0 184px !important;
  padding:12px 12px 18px !important;
  gap:2px !important;
  background:rgba(var(--zy-veil),.022) !important;
  border-inline-end:1px solid var(--wg-hair) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}
.settings-nav-group.settings-nav-group{
  margin:16px 10px 6px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:var(--zy-text2) !important;
  opacity:1 !important;
  text-transform:none !important;
}
.settings-nav-group.settings-nav-group:first-child{ margin-top:4px !important; }
.settings-layout.settings-layout nav button{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:11px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
  font-size:13px !important;
  font-weight:500 !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
.settings-layout.settings-layout nav button:hover{
  background:var(--wg-surface) !important;
  color:var(--zy-text) !important;
}
.settings-layout.settings-layout nav button.active{
  background:rgba(77,144,254,.12) !important;
  border-color:rgba(77,144,254,.28) !important;
  color:var(--zy-text) !important;
  font-weight:600 !important;
}
.settings-layout.settings-layout nav button.active .settings-nav-ico{ color:var(--wg-accent-2) !important; }
.settings-nav-ico.settings-nav-ico{
  width:22px !important;
  height:22px !important;
  color:var(--zy-text2) !important;
  transition:color .16s ease !important;
}

/* ---- content ---- */
.settings-content.settings-content{
  padding:0 28px 36px !important;
  scroll-padding-top:64px !important;
  scrollbar-width:thin !important;
}
.settings-content.settings-content::-webkit-scrollbar{ width:12px; }
.settings-content.settings-content::-webkit-scrollbar-track{ background:transparent; }
.settings-content.settings-content::-webkit-scrollbar-thumb{
  background:rgba(var(--zy-veil),.14);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}
.settings-content.settings-content > .settings-error{ margin:0 0 16px !important; }
/* The section title holds its place while a long section scrolls under it. */
.settings-section-title.settings-section-title{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  margin:0 0 18px !important;
  padding:20px 0 14px !important;
  background:rgb(var(--zy-solid)) !important;
  border-bottom:1px solid var(--wg-hair) !important;
  font-size:20px !important;
  font-weight:650 !important;
  letter-spacing:-.3px !important;
  line-height:1.3 !important;
}

/* ---- cards / tiles / heroes : one surface + one hairline ---- */
.settings-card.settings-card,
.settings-plan-card.settings-plan-card,
.settings-plan-tile.settings-plan-tile,
.settings-membership.settings-membership,
.settings-claude-hero.settings-claude-hero,
.settings-payee.settings-payee,
.settings-models.settings-models,
.settings-profile.settings-profile,
.settings-clock.settings-clock{
  border-radius:var(--wg-r-md) !important;
  border:1px solid var(--wg-hair) !important;
  background:var(--wg-surface) !important;
  box-shadow:none !important;
}
.settings-membership.settings-membership,
.settings-claude-hero.settings-claude-hero{
  background:linear-gradient(180deg,rgba(var(--zy-veil),.055),rgba(var(--zy-veil),.02)) !important;
}
.settings-plan-tile.settings-plan-tile{
  border-radius:var(--wg-r-lg) !important;
  padding:20px !important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}
.settings-plan-tile.settings-plan-tile:hover{
  border-color:var(--wg-hair-2) !important;
  transform:translateY(-2px) !important;
  box-shadow:var(--wg-sh-sm) !important;
}
.settings-plan-tile.settings-plan-tile h3{ font-size:17px !important; font-weight:650 !important; letter-spacing:-.2px !important; }
.settings-plan-tile-price.settings-plan-tile-price{
  font-size:30px !important;
  font-weight:700 !important;
  letter-spacing:-.8px !important;
  line-height:1.05 !important;
}
.settings-plan-tile-head.settings-plan-tile-head small{
  text-transform:none !important;
  letter-spacing:0 !important;
  opacity:1 !important;
  font-size:11.5px !important;
}
.settings-plan-tile-meta.settings-plan-tile-meta span{
  padding:3px 9px !important;
  font-size:11px !important;
}
.settings-hero-head.settings-hero-head{ align-items:flex-start !important; }
.settings-hero-head.settings-hero-head .settings-active{ font-weight:650 !important; }
.settings-plan-x5.settings-plan-x5{
  border-color:rgba(224,167,46,.34) !important;
  background:linear-gradient(180deg,rgba(224,167,46,.08),rgba(224,167,46,.02)) !important;
}
.settings-plan-current.settings-plan-current{
  border-color:rgba(77,144,254,.42) !important;
  background:linear-gradient(180deg,rgba(77,144,254,.10),rgba(77,144,254,.02)) !important;
}
.settings-plan-title.settings-plan-title h3{ margin:0 0 12px !important; }

/* ---- identity ---- */
.settings-avatar.settings-avatar{
  background:var(--wg-grad) !important;
  color:#fff !important;
  border-radius:50% !important;
}
.settings-profile.settings-profile{ padding:16px 18px !important; }
.settings-profile.settings-profile strong{ font-size:15px !important; }
.settings-profile.settings-profile small{ color:var(--zy-text2) !important; font-size:12px !important; }
/* A row reads "label → trailing value": the label holds the leading edge,
   the value is right-aligned with tabular figures, and a hairline separates
   consecutive rows (the iOS Settings / Material list convention). */
.settings-detail.settings-detail{
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  min-height:52px !important;
  padding:12px 0 !important;
  border-bottom:1px solid var(--wg-hair) !important;
  font-size:14px !important;
}
.settings-detail.settings-detail > span:first-child{ color:var(--zy-text) !important; }
.settings-detail.settings-detail > strong{
  margin-inline-start:auto !important;
  text-align:end !important;
  font-size:14px !important;
  font-weight:600 !important;
  font-variant-numeric:tabular-nums !important;
}
.settings-detail.settings-detail > small{
  margin-inline-start:auto !important;
  text-align:end !important;
  font-size:12.5px !important;
  color:var(--zy-text2) !important;
}
.settings-detail.settings-detail > div{ min-width:0 !important; }
.settings-detail.settings-detail > div > strong{
  display:block !important;
  font-size:14px !important;
  font-weight:600 !important;
}
.settings-detail.settings-detail > div > small{
  display:block !important;
  margin-top:2px !important;
  font-size:12px !important;
  color:var(--zy-text2) !important;
}

/* ---- form controls ---- */
.settings-field.settings-field{
  gap:8px !important;
  color:var(--zy-text2) !important;
  font-size:12px !important;
}
.settings-dialog.settings-dialog input:not([type="checkbox"]):not([type="radio"]),
.settings-dialog.settings-dialog select,
.settings-dialog.settings-dialog textarea{
  border-radius:var(--wg-r-sm) !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
  color:var(--zy-text) !important;
  padding:11px 13px !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
}
.settings-dialog.settings-dialog select{ background:rgb(var(--zy-solid)) !important; }
.settings-dialog.settings-dialog input:not([type="checkbox"]):not([type="radio"]):focus,
.settings-dialog.settings-dialog select:focus,
.settings-dialog.settings-dialog textarea:focus{
  border-color:var(--wg-accent-2) !important;
  box-shadow:0 0 0 3px rgba(77,144,254,.22) !important;
  background:rgba(var(--zy-veil),.05) !important;
  outline:none !important;
}
.settings-inline.settings-inline input[type=checkbox]{ accent-color:var(--wg-accent-2) !important; }

/* ---- buttons ---- */
.settings-dialog.settings-dialog .settings-button{
  border-radius:var(--wg-r-sm) !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface-2) !important;
  color:var(--zy-text) !important;
  padding:9px 16px !important;
  min-height:38px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  transition:background .16s ease,border-color .16s ease,transform .12s ease !important;
}
.settings-dialog.settings-dialog .settings-button:hover{ background:rgba(var(--zy-veil),.09) !important; }
.settings-dialog.settings-dialog .settings-button:active{ transform:translateY(1px) !important; }
.settings-dialog.settings-dialog .settings-primary{
  border-radius:var(--wg-r-sm) !important;
  border:1px solid transparent !important;
  background:var(--wg-grad) !important;
  color:#fff !important;
  padding:9px 18px !important;
  min-height:38px !important;
  font-size:12.5px !important;
  font-weight:650 !important;
  box-shadow:0 12px 26px -16px rgba(11,87,208,.95) !important;
}
.settings-dialog.settings-dialog .settings-primary:hover{ filter:brightness(1.06) !important; }
/* Destructive action: red is the colour, not a filled button (Apple). */
.settings-dialog.settings-dialog .settings-danger{
  border-radius:var(--wg-r-sm) !important;
  border:1px solid rgba(239,95,107,.34) !important;
  background:rgba(239,95,107,.08) !important;
  color:#ff9aa5 !important;
  padding:9px 16px !important;
  min-height:38px !important;
  font-weight:600 !important;
  transition:background .16s ease,border-color .16s ease !important;
}
.settings-dialog.settings-dialog .settings-danger:hover{
  background:rgba(239,95,107,.16) !important;
  border-color:rgba(239,95,107,.5) !important;
}

/* ---- pills / chips / segmented / payee opts ---- */
.settings-pill.settings-pill,
.settings-payee-opt.settings-payee-opt{
  border-radius:999px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
  padding:7px 15px !important;
  font-size:12px !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
.settings-pill.settings-pill:hover,
.settings-payee-opt.settings-payee-opt:hover{ border-color:rgba(77,144,254,.4) !important; color:var(--zy-text) !important; }
.settings-pill.settings-pill.active,
.settings-payee-opt.settings-payee-opt.active{
  background:var(--wg-grad) !important;
  border-color:transparent !important;
  color:#fff !important;
  font-weight:700 !important;
}
.settings-segmented.settings-segmented{
  border-radius:13px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
  padding:3px !important;
  gap:3px !important;
  overflow:hidden !important;
}
.settings-seg.settings-seg{
  border-radius:10px !important;
  padding:9px 20px !important;
  font-size:12.5px !important;
  transition:background .16s ease,color .16s ease !important;
}
.settings-seg.settings-seg.active{ background:var(--wg-grad) !important; color:#fff !important; font-weight:700 !important; }

/* ---- usage bars / rings ---- */
.settings-bar.settings-bar{
  height:8px !important;
  border-radius:999px !important;
  background:var(--wg-surface-2) !important;
  overflow:hidden !important;
}
.settings-bar-value.settings-bar-value{
  border-radius:999px !important;
  background:var(--wg-grad) !important;
  transition:width .4s ease !important;
}
html body .settings-bar-value.settings-bar-ok{ background:linear-gradient(90deg,#1f9d67,#2fbf7f) !important; }
html body .settings-bar-value.settings-bar-warn{ background:linear-gradient(90deg,#c98a1b,#e0a72e) !important; }
html body .settings-bar-value.settings-bar-danger{ background:linear-gradient(90deg,#c0392b,#e05a4a) !important; }
.settings-limit.settings-limit progress{ accent-color:var(--wg-accent-2) !important; }
.settings-limit.settings-limit progress::-webkit-progress-value{ background:var(--wg-grad) !important; }
.settings-countdown.settings-countdown{ color:var(--zy-text2) !important; }
.settings-membership-stat.settings-membership-stat{
  border-radius:var(--wg-r-md) !important;
  border:1px solid var(--wg-hair) !important;
  background:var(--wg-surface) !important;
}
.settings-ring-inner.settings-ring-inner{ box-shadow:inset 0 0 0 1px var(--wg-hair) !important; }

/* ---- plan lists (subscription tab) ---- */
.settings-plans article.settings-popular{
  border-color:var(--wg-accent-2) !important;
  box-shadow:0 0 0 1px var(--wg-accent-2) !important;
}
.settings-plans article.settings-popular>small{ color:var(--wg-accent-2) !important; }
.settings-plans article.settings-x5{
  border-color:rgba(224,167,46,.36) !important;
  background:linear-gradient(160deg,rgba(224,167,46,.10),transparent) !important;
}
.settings-plans article.settings-x5>small{ color:var(--wg-gold) !important; }

/* ---- models / chips ---- */
.settings-models.settings-models{ padding:14px 16px !important; }
.settings-model-row.settings-model-row{ border-top:1px solid var(--wg-hair) !important; }
.settings-model-row.settings-model-row strong{ color:var(--zy-text) !important; font-weight:700 !important; }
.settings-model-chip.settings-model-chip{
  border-radius:999px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
  color:var(--zy-text2) !important;
  padding:4px 10px !important;
}
.settings-model-chip-x.settings-model-chip-x{
  border-color:rgba(224,167,46,.34) !important;
  background:rgba(224,167,46,.10) !important;
  color:var(--wg-gold) !important;
}
.settings-chip.settings-chip{ border-radius:999px !important; }
.settings-chip-warn.settings-chip-warn{ border-radius:999px !important; }

/* ---- notes / errors / empty ---- */
.settings-error.settings-error{
  border-radius:var(--wg-r-sm) !important;
  border:1px solid rgba(239,95,107,.24) !important;
  background:rgba(239,95,107,.10) !important;
  color:#ffb3ba !important;
  padding:11px 13px !important;
  font-size:12px !important;
}
.settings-note.settings-note,
.settings-bar-sub.settings-bar-sub{ color:var(--zy-text2) !important; }
.settings-clock.settings-clock{
  border-radius:var(--wg-r-md) !important;
  background:var(--wg-surface) !important;
}

/* ---- language chooser ---- */
.wg-lang-grid .wg-lang-opt{
  border-radius:11px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
  transition:background .16s ease,border-color .16s ease !important;
}
.wg-lang-grid .wg-lang-opt:hover{
  border-color:rgba(77,144,254,.34) !important;
  background:var(--wg-surface-2) !important;
}
.wg-lang-grid .wg-lang-opt.active{
  background:rgba(77,144,254,.16) !important;
  border-color:rgba(77,144,254,.42) !important;
  box-shadow:none !important;
}
.wg-lang-toggle.wg-lang-toggle{ border-radius:11px !important; }

/* ---- 2b. Grouping, hierarchy and destructive zones ----
 *  Follows the list conventions shared by iOS Settings and Material's
 *  settings surfaces: labelled groups, rows that read "label → value",
 *  weight and colour instead of case, and destructive actions kept in a
 *  separated zone. */

/* Grouped card: a calm heading, then the rows. */
.settings-card.settings-card,
.settings-plan-card.settings-plan-card{
  padding:18px 20px !important;
  margin:0 0 16px !important;
}
.settings-card.settings-card > h3{
  margin:0 0 12px !important;
  font-size:15px !important;
  font-weight:650 !important;
  letter-spacing:-.1px !important;
}
.settings-card.settings-card > p.settings-note{
  margin:0 0 10px !important;
  line-height:1.9 !important;
}

/* Benefits: a checked list reads faster than a run of sentences. */
.settings-benefits.settings-benefits{
  list-style:none !important;
  display:grid !important;
  gap:9px !important;
  margin:6px 0 14px !important;
  padding:0 !important;
}
.settings-benefits.settings-benefits > li{
  position:relative !important;
  padding-inline-start:24px !important;
  font-size:12.5px !important;
  line-height:1.75 !important;
  color:var(--zy-text2) !important;
}
.settings-benefits.settings-benefits > li::before{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:0 !important;
  top:4px !important;
  width:15px !important;
  height:15px !important;
  border-radius:999px !important;
  background:rgba(77,144,254,.16) !important;
  box-shadow:inset 0 0 0 1px rgba(77,144,254,.42) !important;
}
.settings-benefits.settings-benefits > li::after{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:5px !important;
  top:8px !important;
  width:5px !important;
  height:8px !important;
  border-right:1.7px solid #6ea8fe !important;
  border-bottom:1.7px solid #6ea8fe !important;
  transform:rotate(45deg) !important;
}

/* Usage figures: numbers line up from row to row. */
.settings-bar-head.settings-bar-head > span:last-child{
  font-weight:600 !important;
  font-variant-numeric:tabular-nums !important;
  color:var(--zy-text) !important;
}

/* Signed-out state inside the dialog. */
.settings-empty.settings-empty{ padding:44px 16px !important; }
.settings-empty.settings-empty img{ width:56px !important; height:56px !important; opacity:.92 !important; }
.settings-empty.settings-empty h3{
  margin:14px 0 6px !important;
  font-size:16px !important;
  font-weight:650 !important;
  letter-spacing:-.2px !important;
}
.settings-empty.settings-empty p{
  margin:0 auto 16px !important;
  max-width:34ch !important;
  font-size:13px !important;
  line-height:1.9 !important;
  color:var(--zy-text2) !important;
}

/* Group badges: weight and colour instead of shouted case. */
.settings-active.settings-active{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:11.5px !important;
  font-weight:600 !important;
}

/* Danger zone: the one card that holds a destructive action stands apart. */
.settings-card.settings-card:has(.settings-danger){
  border-color:rgba(239,95,107,.26) !important;
  background:linear-gradient(180deg,rgba(239,95,107,.055),rgba(239,95,107,.012)) !important;
}
.settings-card.settings-card:has(.settings-danger) > h3{ color:#ffb3ba !important; }

/* Bare group headings inside the scroll area share the card-heading voice. */
.settings-content.settings-content > h3:not(.settings-section-title){
  margin:26px 0 10px !important;
  font-size:15px !important;
  font-weight:650 !important;
  letter-spacing:-.1px !important;
  color:var(--zy-text) !important;
}

/* Session rows: one date column, digits aligned. */
.settings-session.settings-session small{ font-variant-numeric:tabular-nums !important; }

/* Keyboard focus stays visible on every control in the dialog. */
.settings-dialog.settings-dialog button:focus-visible,
.settings-dialog.settings-dialog a:focus-visible{
  outline:2px solid var(--wg-accent-2) !important;
  outline-offset:2px !important;
}

/* ---- settings : phone layout ---- */
@media (max-width:600px){
  .settings-dialog.settings-dialog{
    width:100% !important;
    height:min(720px,94dvh) !important;
    border-radius:22px !important;
  }
  .settings-layout.settings-layout nav{
    flex:0 0 auto !important;
    flex-direction:row !important;
    overflow-x:auto !important;
    border-inline-end:0 !important;
    border-bottom:1px solid var(--wg-hair) !important;
    padding:10px !important;
    gap:4px !important;
  }
  .settings-layout.settings-layout nav button{
    padding:9px 12px !important;
    white-space:nowrap !important;
  }
  .settings-nav-group.settings-nav-group{ display:none !important; }
  .settings-content.settings-content{ padding:20px 16px 30px !important; }
  .settings-section-title.settings-section-title{
    padding:16px 0 12px !important;
    font-size:18px !important;
    letter-spacing:-.2px !important;
  }
  .settings-detail.settings-detail{ min-height:48px !important; padding:11px 0 !important; }
}

/* ================================================================== *
 * 3. Model picker — harmonised with the new rounded language
 *
 *  The picker's inner look (selected tint, status chip, subscribe card)
 *  is already provided by model-picker-v2.css, which is pinned last on
 *  the chat page. Only the shell and the row radii are adjusted here so
 *  the surface matches the settings dialog. The selectors below are
 *  scoped with a doubled .focused-model-menu class so they win over
 *  model-picker-v2.css's "html body .focused-model-menu …" rules.
 * ================================================================== */
.focused-model-menu.focused-model-menu{
  border-radius:22px !important;
  border:1px solid var(--wg-hair-2) !important;
  padding:14px !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option{
  border-radius:14px !important;
}
html body .focused-model-menu.focused-model-menu .model-subscribe{
  border-radius:14px !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-note{
  border-top:1px solid var(--wg-hair) !important;
}

/* ================================================================== *
 * 4. Login / account page — refined shape
 * ================================================================== */
html body .auth-shell{ width:min(100%,420px) !important; }

html body .login-kicker{
  color:var(--wg-accent-2) !important;
  font-size:11.5px !important;
  font-weight:740 !important;
  letter-spacing:.2px !important;
}
html body #loginTitle,
html body .auth-shell h1{
  font-size:clamp(26px,4vw,32px) !important;
  font-weight:700 !important;
  letter-spacing:-.5px !important;
  margin:0 0 8px !important;
}
html body .login-description{ font-size:13.5px !important; }

html body .input-shell input{
  width:100% !important;
  min-height:52px !important;
  border-radius:14px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--zy-text) !important;
  padding:14px 44px !important;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
}
html body .input-shell input::placeholder{ color:var(--zy-text2) !important; opacity:.75 !important; }
html body .input-shell:focus-within input,
html body .input-shell input:focus{
  border-color:var(--wg-accent-2) !important;
  box-shadow:0 0 0 3px rgba(77,144,254,.22) !important;
  background:rgba(255,255,255,.055) !important;
  outline:none !important;
}
html body .input-shell > svg{ color:var(--zy-text2) !important; }

html body .primary-button{
  min-height:52px !important;
  border-radius:14px !important;
  border:0 !important;
  background:var(--wg-grad) !important;
  color:#fff !important;
  font-weight:650 !important;
  font-size:14px !important;
  box-shadow:0 16px 34px -18px rgba(11,87,208,.95) !important;
  transition:filter .16s ease,transform .12s ease,box-shadow .16s ease !important;
}
html body .primary-button:hover{
  filter:brightness(1.06) !important;
  box-shadow:0 20px 40px -18px rgba(11,87,208,1) !important;
}
html body .primary-button:active{ transform:translateY(1px) !important; }

html body .google-button{
  min-height:52px !important;
  border-radius:14px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--zy-text) !important;
  font-weight:600 !important;
  transition:background .16s ease,border-color .16s ease !important;
}
html body .google-button:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.24) !important;
}

html body .divider{ color:var(--zy-text2) !important; }

html body .password-toggle{ border-radius:10px !important; }

html body .legal-consent{
  border-radius:14px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgba(255,255,255,.03) !important;
  padding:14px 16px !important;
}
html body .legal-consent a{ color:var(--wg-accent-2) !important; }

html body .system-banner{ border-radius:14px !important; }
html body .feedback{
  border-radius:12px !important;
  border-start-start-radius:0 !important;
  border-end-start-radius:0 !important;
}
html body .strength-track{ height:5px !important; border-radius:999px !important; background:rgba(255,255,255,.08) !important; }
html body .strength-fill{ border-radius:999px !important; }
html body .language-switch{
  border-radius:12px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgba(255,255,255,.03) !important;
  color:var(--zy-text) !important;
  padding:10px 14px !important;
  min-height:44px !important;
}
html body .language-switch:hover{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.3) !important;
}
html body .field-note{ font-size:11px !important; color:var(--zy-text2) !important; }
html body .legal{ font-size:10.8px !important; }
html body .mobile-brand strong{ letter-spacing:-.35px !important; }

/* ================================================================== *
 * 5. Generic app surfaces (static pages)
 * ================================================================== */
.chat-composer.chat-composer{ border-radius:var(--wg-r-xl) !important; }
.panel.panel,
.box.box,
.account-box.account-box,
.stat.stat,
.question-editor.question-editor,
.chat-card.chat-card,
.account-card.account-card{ border-radius:var(--wg-r-md) !important; }
.account-trigger.account-trigger{ border-radius:var(--wg-r-sm) !important; }

html.wg-static.wg-static .btn,
html.wg-static.wg-static .nav-cta,
html.wg-static.wg-static button,
html.wg-static.wg-static input,
html.wg-static.wg-static select,
html.wg-static.wg-static textarea{ border-radius:var(--wg-r-sm); }
html.wg-static.wg-static .card,
html.wg-static.wg-static .panel,
html.wg-static.wg-static .box,
html.wg-static.wg-static .pm,
html.wg-static.wg-static .pu-item,
html.wg-static.wg-static .plans-grid > *,
html.wg-static.wg-static .rate-card,
html.wg-static.wg-static .ticker-card,
html.wg-static.wg-static article{ border-radius:var(--wg-r-md); }
html.wg-static.wg-static .pill,
html.wg-static.wg-static .chip,
html.wg-static.wg-static .badge{ border-radius:999px; }

/* ================================================================== *
 * 6. Menus & sheets — one coherent popover language
 *
 *  The model picker is the app's primary menu: a popover on desktop and
 *  a bottom sheet on phones. This section gives it one surface, one row
 *  rhythm and one focus treatment, and restores tap-outside dismissal
 *  (the scrim was inert: pointer-events:none, invisible, no blur).
 * ================================================================== */

/* ---- surface ---- */
html body .focused-model-menu.focused-model-menu{
  width:min(400px,calc(100vw - 24px)) !important;
  max-height:min(72dvh,560px) !important;
  padding:12px !important;
  border-radius:var(--wg-r-lg) !important;
  border:1px solid var(--wg-hair-2) !important;
  background:rgb(var(--zy-solid)) !important;
  box-shadow:var(--wg-sh-lg) !important;
  overscroll-behavior:contain !important;
  scroll-padding-top:64px !important;
  scrollbar-width:thin;
}
html body .focused-model-menu.focused-model-menu::-webkit-scrollbar{ width:10px; }
html body .focused-model-menu.focused-model-menu::-webkit-scrollbar-track{ background:transparent; }
html body .focused-model-menu.focused-model-menu::-webkit-scrollbar-thumb{
  background:rgba(var(--zy-veil),.16);
  border:3px solid transparent;
  border-radius:999px;
  background-clip:content-box;
}

/* ---- heading: holds its place while the list scrolls under it ---- */
html body .focused-model-menu.focused-model-menu .focused-model-heading{
  position:sticky !important;
  top:-12px !important;
  z-index:2 !important;
  margin:0 !important;
  padding:12px 8px !important;
  background:rgb(var(--zy-solid)) !important;
  border-bottom:1px solid transparent !important;
  transition:border-color .18s ease,box-shadow .18s ease !important;
}
html body .focused-model-menu.focused-model-menu.wg-scrolled .focused-model-heading{
  border-bottom-color:var(--wg-hair) !important;
  box-shadow:0 12px 20px -18px rgba(0,0,0,.75) !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-heading strong{
  font-size:16px !important;
  font-weight:650 !important;
  letter-spacing:-.2px !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-heading button{
  width:32px !important;
  height:32px !important;
  border-radius:var(--wg-r-xs) !important;
  font-size:0 !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-heading button::before{
  content:"" !important;
  width:13px !important;
  height:13px !important;
  background:currentColor !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* ---- rows: one rhythm, an accent rail for the current model ---- */
html body .focused-model-menu.focused-model-menu .focused-model-list{ gap:3px !important; }
html body .focused-model-menu.focused-model-menu .focused-model-option{
  position:relative !important;
  min-height:64px !important;
  padding:13px 14px !important;
  border-radius:var(--wg-r-sm) !important;
  border:1px solid transparent !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:background .16s ease,border-color .16s ease !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option:hover{
  background:rgba(var(--zy-veil),.06) !important;
  border-color:var(--wg-hair) !important;
  transform:none !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option:active{
  background:rgba(var(--zy-veil),.09) !important;
  transform:none !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"]{
  background:rgba(77,144,254,.13) !important;
  border-color:rgba(77,144,254,.32) !important;
  box-shadow:none !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[aria-checked="true"]::before{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:5px !important;
  top:50% !important;
  translate:0 -50% !important;
  width:3px !important;
  height:56% !important;
  border-radius:999px !important;
  background:var(--wg-accent-2) !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option:focus-visible{
  outline:2px solid var(--wg-accent-2) !important;
  outline-offset:-2px !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-title strong{
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.1px !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-description{
  font-size:12px !important;
  line-height:1.7 !important;
}
html body .focused-model-menu.focused-model-menu .model-meta-item b{
  font-variant-numeric:tabular-nums !important;
}
html body .focused-model-menu.focused-model-menu .model-subscribe{
  border-radius:var(--wg-r-sm) !important;
  transition:background .16s ease,border-color .16s ease !important;
}

/* ---- locked models: legible as "not now", not as broken ---- */
html body .focused-model-menu.focused-model-menu .focused-model-option[data-locked="true"]{
  opacity:1 !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[data-locked="true"] .focused-model-title strong{
  color:var(--zy-text) !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[data-locked="true"] .focused-model-description{
  color:var(--zy-text2) !important;
  opacity:.85 !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[data-locked="true"] .focused-model-status{
  background:rgba(224,167,46,.14) !important;
  border:1px solid rgba(224,167,46,.32) !important;
  border-radius:999px !important;
  /* The host writes a word here ("غير متاح") into a 20px badge, so it used to
     spill out of the circle. The vector lock replaces it visually while the
     text stays in the DOM for assistive technology. */
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:0 !important;
  line-height:1 !important;
}
html body .focused-model-menu.focused-model-menu .focused-model-option[data-locked="true"] .focused-model-status::before{
  content:"" !important;
  width:11px !important;
  height:11px !important;
  background:var(--wg-gold) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='11' width='17' height='10' rx='2.4'/%3E%3Cpath d='M7.5 11V7.4a4.5 4.5 0 0 1 9 0V11'/%3E%3C/svg%3E") center/contain no-repeat !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='11' width='17' height='10' rx='2.4'/%3E%3Cpath d='M7.5 11V7.4a4.5 4.5 0 0 1 9 0V11'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* ---- dismissal: the scrim must actually catch the tap ---- */
html body .model-menu-scrim.model-menu-scrim{
  pointer-events:auto !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* ---- phones: a real bottom sheet ---- */
@media (max-width:600px){
  html body .focused-model-menu.focused-model-menu{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    width:100% !important;
    max-width:100vw !important;
    max-height:min(80dvh,calc(100dvh - 72px)) !important;
    padding:8px 14px calc(16px + env(safe-area-inset-bottom, 0px) + var(--wg-kb, 0px)) !important;
    border-radius:24px 24px 0 0 !important;
    border-bottom:0 !important;
    box-shadow:0 -30px 80px -30px rgba(0,0,0,.9) !important;
  }
  html body .focused-model-menu.focused-model-menu .focused-model-heading{
    top:-8px !important;
    padding:14px 8px 12px !important;
  }
  html body .focused-model-menu.focused-model-menu .sheet-handle{
    display:block !important;
    width:38px !important;
    height:4px !important;
    margin:4px auto 10px !important;
    border-radius:999px !important;
    background:rgba(var(--zy-veil),.28) !important;
  }
  html body .focused-model-menu.focused-model-menu .focused-model-option{ min-height:68px !important; }
  html body .model-menu-scrim.model-menu-scrim{
    background:rgba(0,0,0,.5) !important;
    -webkit-backdrop-filter:blur(2px) !important;
    backdrop-filter:blur(2px) !important;
  }
  /* The page behind a sheet must not scroll away underneath it. */
  html:has(.model-menu-scrim),
  html:has(.settings-overlay),
  html body:has(.model-menu-scrim),
  html body:has(.settings-overlay){ overflow:hidden !important; }
}

/* ================================================================== *
 * 7. App shell — safe areas, keyboard inset, open/close motion
 * ================================================================== */

/* The overlay keeps clear of the notch, the home indicator and the
   software keyboard (--wg-kb is published by modern-ui.js). */
.settings-overlay.settings-overlay{
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px) + var(--wg-kb, 0px))
    max(16px, env(safe-area-inset-left, 0px)) !important;
}

/* Chat chrome sits inside the system bars when the app runs standalone. */
@media (display-mode: standalone), (display-mode: fullscreen){
  .chat-header.chat-header{ padding-top:max(8px, env(safe-area-inset-top, 0px)) !important; }
  .chat-sidebar.chat-sidebar{ padding-top:env(safe-area-inset-top, 0px) !important; }
  .composer-shell.composer-shell{ padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- motion: open ---- */
@media (prefers-reduced-motion: no-preference){
  @keyframes wg-menu-in{
    from{ opacity:0; transform:translateY(-8px) scale(.97); }
    to  { opacity:1; transform:none; }
  }
  @keyframes wg-menu-out{
    from{ opacity:1; transform:none; }
    to  { opacity:0; transform:translateY(-6px) scale(.985); }
  }
  @keyframes wg-sheet-in{
    from{ opacity:0; transform:translateY(28px); }
    to  { opacity:1; transform:none; }
  }
  @keyframes wg-sheet-out{
    from{ opacity:1; transform:none; }
    to  { opacity:0; transform:translateY(24px); }
  }
  @keyframes wg-scrim-in{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes wg-scrim-out{ from{ opacity:1; } to{ opacity:0; } }
  @keyframes wg-dialog-in{
    from{ opacity:0; transform:translateY(10px) scale(.975); }
    to  { opacity:1; transform:none; }
  }
  @keyframes wg-dialog-out{
    from{ opacity:1; transform:none; }
    to  { opacity:0; transform:translateY(8px) scale(.985); }
  }

  html body .focused-model-menu.focused-model-menu{
    animation:wg-menu-in .19s cubic-bezier(.22,.9,.3,1) both !important;
    transform-origin:top center;
  }
  html body .model-menu-scrim.model-menu-scrim{ animation:wg-scrim-in .2s ease both; }
  .settings-overlay.settings-overlay{ animation:wg-scrim-in .2s ease both; }
  .settings-dialog.settings-dialog{ animation:wg-dialog-in .22s cubic-bezier(.22,.9,.3,1) both !important; }

  @media (max-width:600px){
    html body .focused-model-menu.focused-model-menu{
      animation:wg-sheet-in .26s cubic-bezier(.22,.9,.3,1) both !important;
      transform-origin:bottom center;
    }
  }

  /* ---- motion: close (class added by modern-ui.js before the node goes) ---- */
  html body .focused-model-menu.focused-model-menu.wg-closing{
    animation:wg-menu-out .16s ease both !important;
    pointer-events:none !important;
  }
  html body .model-menu-scrim.model-menu-scrim.wg-closing{
    animation:wg-scrim-out .16s ease both !important;
    pointer-events:none !important;
  }
  .settings-dialog.settings-dialog.wg-closing{
    animation:wg-dialog-out .16s ease both !important;
    pointer-events:none !important;
  }
  .settings-overlay.settings-overlay.wg-closing{
    animation:wg-scrim-out .16s ease both !important;
    pointer-events:none !important;
  }
  @media (max-width:600px){
    html body .focused-model-menu.focused-model-menu.wg-closing{
      animation:wg-sheet-out .16s ease both !important;
    }
  }
}

/* ================================================================== *
 * 8. Settings - app-grade shell, navigation, controls and motion
 *
 *  Turns the settings surface into a first-class app screen: a calm
 *  reading shell on desktop, a real bottom sheet on phones (safe areas,
 *  keyboard inset, drag to dismiss), thumb-sized controls, and motion
 *  that explains where things come from. Additive only - no markup is
 *  required and nothing here depends on a library.
 * ================================================================== */

:root{
  --wg-safe-t:env(safe-area-inset-top, 0px);
  --wg-safe-r:env(safe-area-inset-right, 0px);
  --wg-safe-b:env(safe-area-inset-bottom, 0px);
  --wg-safe-l:env(safe-area-inset-left, 0px);
  /* safe-area-max-* keeps its value while browser chrome hides, so the
     sheet does not jump when the address bar retracts. Engines without
     it fall back to the live inset. */
  --wg-safe-b-max:env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
  --wg-ease:cubic-bezier(.22,.9,.3,1);
}

/* ---- 8.1 Desktop shell: a comfortable surface, not a stretched box ---- */

html body .settings-dialog.settings-dialog{
  width:min(1000px,100%) !important;
  height:min(680px,88dvh) !important;
  max-height:88dvh !important;
  border-radius:var(--wg-r-xl) !important;
  box-shadow:var(--wg-sh-lg),inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* The app bar carries the elevation; the hairline only appears once the
   content underneath is actually moving, which is what makes a header
   read as "floating" instead of drawn. */
html body .settings-dialog.settings-dialog header{
  position:relative !important;
  z-index:3 !important;
  min-height:64px !important;
  padding:14px 20px !important;
  gap:12px !important;
  border-bottom:1px solid transparent !important;
  transition:border-color .18s ease,background .18s ease !important;
}
html body .settings-dialog.settings-dialog.wg-scrolled header{
  border-bottom-color:var(--wg-hair) !important;
  background:color-mix(in srgb, rgb(var(--zy-solid)) 88%, transparent) !important;
  backdrop-filter:blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(150%) !important;
}

html body .settings-dialog.settings-dialog .settings-content{
  padding:0 min(34px,3.6vw) 44px !important;
  scrollbar-gutter:stable !important;
}

html body .settings-dialog.settings-dialog .settings-section-title{
  transition:border-color .18s ease,color .18s ease !important;
}
html body .settings-dialog.settings-dialog.wg-scrolled .settings-section-title{
  border-bottom-color:var(--wg-hair-2) !important;
}

/* ---- 8.2 Navigation: grouped list, animated active rail ---- */

html body .settings-dialog.settings-dialog .settings-layout nav{
  flex:0 0 212px !important;
  padding:14px 14px 22px !important;
  gap:2px !important;
}
html body .settings-dialog.settings-dialog .settings-layout nav button{
  position:relative !important;
  min-height:42px !important;
  padding:9px 12px !important;
  border-radius:12px !important;
  font-size:13px !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
html body .settings-dialog.settings-dialog .settings-layout nav button::before{
  content:"" !important;
  position:absolute !important;
  inset-inline-start:-8px !important;
  top:50% !important;
  width:3px !important;
  height:0 !important;
  translate:0 -50% !important;
  border-radius:999px !important;
  background:var(--wg-accent-2) !important;
  opacity:0 !important;
  transition:height .2s var(--wg-ease),opacity .2s var(--wg-ease) !important;
}
html body .settings-dialog.settings-dialog .settings-layout nav button.active::before{
  height:20px !important;
  opacity:1 !important;
}
html body .settings-dialog.settings-dialog .settings-layout nav button:hover .settings-nav-ico{
  color:var(--zy-text) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-group{
  margin:18px 12px 6px !important;
  font-size:11px !important;
  letter-spacing:.2px !important;
  color:color-mix(in srgb, var(--zy-text2) 80%, transparent) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-group:first-child{
  margin-top:6px !important;
}

/* ---- 8.3 Controls: thumb-sized, unambiguous, RTL-safe ---- */

/* Checkboxes become switches: the whole row is the target, the state is
   readable at a glance, and the knob travels on the inline axis so the
   gesture matches the language direction. */
html body .settings-dialog.settings-dialog input[type=checkbox]{
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:0 0 auto !important;
  width:46px !important;
  min-width:46px !important;
  height:28px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--wg-hair-2) !important;
  border-radius:999px !important;
  background:rgba(var(--zy-veil),.10) !important;
  position:relative !important;
  cursor:pointer !important;
  transition:background .2s ease,border-color .2s ease !important;
}
html body .settings-dialog.settings-dialog input[type=checkbox]::after{
  content:"" !important;
  position:absolute !important;
  top:2px !important;
  inset-inline-start:2px !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 0 0 .5px rgba(0,0,0,.08) !important;
  transition:translate .22s var(--wg-ease) !important;
}
html body .settings-dialog.settings-dialog input[type=checkbox]:checked{
  background:var(--wg-grad) !important;
  border-color:transparent !important;
}
/* LTR default, then the RTL override: the knob always travels toward the
   inline end, so the gesture matches the language direction. */
html body .settings-dialog.settings-dialog input[type=checkbox]:checked::after{
  translate:18px 0 !important;
}
html[dir=rtl] body .settings-dialog.settings-dialog input[type=checkbox]:checked::after{
  translate:-18px 0 !important;
}
html body .settings-dialog.settings-dialog input[type=checkbox]:focus-visible{
  outline:2px solid var(--wg-accent-2) !important;
  outline-offset:2px !important;
}
html body .settings-dialog.settings-dialog input[type=checkbox]:disabled{
  opacity:.45 !important;
  cursor:default !important;
}

/* Fields: 16px avoids the iOS zoom-on-focus jump, 44px keeps the row a
   comfortable touch target. */
html body .settings-dialog.settings-dialog input:not([type=checkbox]):not([type=radio]),
html body .settings-dialog.settings-dialog select,
html body .settings-dialog.settings-dialog textarea{
  min-height:44px !important;
  font-size:16px !important;
}
html body .settings-dialog.settings-dialog select{
  padding-inline:14px 34px !important;
}

html body .settings-dialog.settings-dialog .settings-segmented{
  padding:3px !important;
  gap:3px !important;
  border-radius:14px !important;
}
html body .settings-dialog.settings-dialog .settings-seg{
  border-radius:11px !important;
  padding:9px 22px !important;
  font-weight:600 !important;
}
html body .settings-dialog.settings-dialog .settings-seg.active{
  background:var(--wg-surface-2) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px -10px rgba(0,0,0,.7) !important;
}

html body .settings-dialog.settings-dialog .settings-pill,
html body .settings-dialog.settings-dialog .settings-payee-opt{
  min-height:36px !important;
  padding-inline:16px !important;
}

/* Buttons: one clear primary, quiet secondaries, a separated danger. */
html body .settings-dialog.settings-dialog .settings-button,
html body .settings-dialog.settings-dialog .settings-primary,
html body .settings-dialog.settings-dialog .settings-danger{
  min-height:42px !important;
  border-radius:12px !important;
  transition:background .16s ease,border-color .16s ease,transform .12s ease,box-shadow .16s ease !important;
}
html body .settings-dialog.settings-dialog .settings-button:active,
html body .settings-dialog.settings-dialog .settings-primary:active,
html body .settings-dialog.settings-dialog .settings-danger:active,
html body .settings-dialog.settings-dialog .settings-pill:active,
html body .settings-dialog.settings-dialog .settings-seg:active,
html body .settings-dialog.settings-dialog .accent-swatch:active,
html body .settings-dialog.settings-dialog .wg-lang-opt:active{
  transform:scale(.97) !important;
}
html body .settings-dialog.settings-dialog .settings-button:disabled,
html body .settings-dialog.settings-dialog .settings-primary:disabled,
html body .settings-dialog.settings-dialog .settings-danger:disabled{
  opacity:.5 !important;
  cursor:default !important;
  transform:none !important;
}

/* Usage bars keep their state colours - they carry meaning - and gain a
   soft inner highlight so the fill reads as a filled tube. */
html body .settings-dialog.settings-dialog .settings-bar{
  height:10px !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35) !important;
}
html body .settings-dialog.settings-dialog .settings-bar-value{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22) !important;
}
html body .settings-dialog.settings-dialog .settings-bar-value.settings-bar-ok{
  background:linear-gradient(90deg,#1f9d67,#37c98a) !important;
}
html body .settings-dialog.settings-dialog .settings-bar-value.settings-bar-warn{
  background:linear-gradient(90deg,#c98a1b,#e5b04a) !important;
}
html body .settings-dialog.settings-dialog .settings-bar-value.settings-bar-danger{
  background:linear-gradient(90deg,#c0392b,#e8685a) !important;
}

/* Accent swatches: the inline colours stay, the selection ring is ours.
   Author !important outranks the element's own style attribute. */
html body .settings-dialog.settings-dialog .accent-swatch{
  width:46px !important;
  height:46px !important;
  border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 16px -10px rgba(0,0,0,.9) !important;
  transition:transform .16s var(--wg-ease),box-shadow .16s var(--wg-ease) !important;
}
html body .settings-dialog.settings-dialog .accent-swatch:hover{
  transform:scale(1.06) !important;
}
html body .settings-dialog.settings-dialog .accent-swatch[aria-pressed="true"]{
  box-shadow:0 0 0 2px rgb(var(--zy-solid)),0 0 0 4px var(--wg-accent-2) !important;
}

/* Language tiles: flag, own name, country - a list you can scan. */
html body .settings-dialog.settings-dialog .wg-lang-grid{
  gap:10px !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
}
html body .settings-dialog.settings-dialog .wg-lang-opt{
  position:relative !important;
  min-height:56px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  transition:background .16s ease,border-color .16s ease,transform .12s ease !important;
}
html body .settings-dialog.settings-dialog .wg-lang-opt .wg-lang-flag{
  border-radius:4px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.4) !important;
}
html body .settings-dialog.settings-dialog .wg-lang-opt.active::after{
  content:"" !important;
  position:absolute !important;
  inset-inline-end:12px !important;
  top:50% !important;
  width:6px !important;
  height:11px !important;
  translate:0 -60% !important;
  border-right:1.8px solid var(--wg-accent-2) !important;
  border-bottom:1.8px solid var(--wg-accent-2) !important;
  transform:rotate(45deg) !important;
}

/* Plan tiles and cards: current plan is ringed, prices align optically. */
html body .settings-dialog.settings-dialog .settings-plan-tile{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}
html body .settings-dialog.settings-dialog .settings-plan-current{
  box-shadow:0 0 0 1px rgba(77,144,254,.42),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile-price{
  font-variant-numeric:tabular-nums !important;
}
html body .settings-dialog.settings-dialog .settings-note{
  text-wrap:pretty !important;
}

/* ---- 8.4 Phone: a real bottom sheet ---- */

@media (max-width:600px){
  html body .settings-overlay.settings-overlay{
    padding:0 !important;
    align-items:flex-end !important;
    justify-content:stretch !important;
  }
  html body .settings-dialog.settings-dialog{
    width:100% !important;
    height:94dvh !important;
    max-height:94dvh !important;
    /* earlier sheets centre the dialog with an auto margin; a sheet is
       anchored to the bottom edge instead */
    margin:0 !important;
    align-self:flex-end !important;
    border:0 !important;
    border-top:1px solid var(--wg-hair-2) !important;
    border-radius:24px 24px 0 0 !important;
    padding-bottom:var(--wg-safe-b-max) !important;
    box-shadow:0 -30px 70px -20px rgba(0,0,0,.75) !important;
  }
  /* Grab handle - the affordance that says "this sheet can be pulled". */
  html body .settings-dialog.settings-dialog header{
    padding:20px 16px 12px !important;
    padding-inline:max(16px,var(--wg-safe-r)) max(16px,var(--wg-safe-l)) !important;
    touch-action:none !important;
  }
  html body .settings-dialog.settings-dialog header::before{
    content:"" !important;
    position:absolute !important;
    top:8px !important;
    left:50% !important;
    width:40px !important;
    height:4px !important;
    translate:-50% 0 !important;
    border-radius:999px !important;
    background:rgba(var(--zy-veil),.26) !important;
  }
  /* Compact app bar: the avatar stays, the identity text folds away. */
  html body .settings-dialog.settings-dialog .settings-header-user{
    padding:3px !important;
    border:0 !important;
    background:transparent !important;
  }
  html body .settings-dialog.settings-dialog .settings-header-user > div{
    display:none !important;
  }
  /* The section list becomes a chip rail: one thumb sweep, snapping,
     faded edges, group headings dropped because the rail is short. */
  html body .settings-dialog.settings-dialog .settings-layout nav{
    flex:0 0 auto !important;
    /* responsive-workspace.css turns this list into a 4-column grid at
       <=850px; a rail needs a row, so the grid is retired explicitly. */
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:row !important;
    gap:6px !important;
    padding:10px max(14px,var(--wg-safe-r)) 10px max(14px,var(--wg-safe-l)) !important;
    border-inline-end:0 !important;
    border-bottom:1px solid var(--wg-hair) !important;
    background:rgba(var(--zy-veil),.02) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%) !important;
    mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%) !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout nav::-webkit-scrollbar{
    display:none !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button{
    scroll-snap-align:start !important;
    flex:0 0 auto !important;
    min-height:38px !important;
    padding:7px 14px !important;
    border:1px solid var(--wg-hair-2) !important;
    border-color:var(--wg-hair-2) !important;
    border-radius:999px !important;
    background:var(--wg-surface) !important;
    background-color:var(--wg-surface) !important;
    font-size:12.5px !important;
    font-weight:600 !important;
    white-space:nowrap !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button::before{
    display:none !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button.active{
    background:rgba(77,144,254,.16) !important;
    background-color:rgba(77,144,254,.16) !important;
    border-color:rgba(77,144,254,.44) !important;
  }
  html body .settings-dialog.settings-dialog .settings-nav-group{
    display:none !important;
  }
  html body .settings-dialog.settings-dialog .settings-content{
    padding:0 16px calc(28px + var(--wg-safe-b-max) + var(--wg-kb,0px)) !important;
    scroll-padding-top:56px !important;
    scrollbar-gutter:auto !important;
  }
  html body .settings-dialog.settings-dialog .settings-content::-webkit-scrollbar{
    display:none !important;
  }
  html body .settings-dialog.settings-dialog .settings-section-title{
    padding:14px 0 12px !important;
    font-size:19px !important;
  }
  /* Full-width commitments: primary actions stop being tiny islands. */
  html body .settings-dialog.settings-dialog .settings-plan-cta > *{
    flex:1 1 auto !important;
    justify-content:center !important;
  }
  html body .settings-dialog.settings-dialog .settings-segmented{
    width:100% !important;
  }
  html body .settings-dialog.settings-dialog .settings-seg{
    flex:1 1 0 !important;
    text-align:center !important;
  }
  html body .settings-dialog.settings-dialog .wg-lang-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  html body .settings-dialog.settings-dialog .settings-card,
  html body .settings-dialog.settings-dialog .settings-plan-card{
    padding:16px !important;
    border-radius:16px !important;
  }
}

/* ---- 8.5 Motion: entrance, tab change, snap-back ---- */

@media (prefers-reduced-motion: no-preference){
  @keyframes wg-card-in{
    from{ opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:none; }
  }

  /* Cards arrive in reading order; --wg-i is stamped by modern-ui.js and
     capped so a long tab never feels slow. */
  .settings-dialog.settings-dialog.wg-enter .settings-content > *{
    animation:wg-card-in .34s var(--wg-ease) both;
    animation-delay:calc(var(--wg-i,0) * 46ms);
  }

  .settings-dialog.settings-dialog{
    animation:wg-dialog-in .22s var(--wg-ease) both !important;
  }
  .settings-dialog.settings-dialog.wg-closing{
    animation:wg-dialog-out .16s ease both !important;
    pointer-events:none !important;
  }

  @media (max-width:600px){
    .settings-dialog.settings-dialog{
      animation:wg-sheet-in .3s var(--wg-ease) both !important;
      transform-origin:bottom center;
    }
    .settings-dialog.settings-dialog.wg-closing{
      animation:wg-sheet-out .18s ease both !important;
    }
  }
}

/* Dragging the sheet: the running fill animation would pin the transform,
   so the first drag retires it for this node and transitions take over. */
html body .settings-dialog.settings-dialog.wg-drag-ever{
  animation:none !important;
}
html body .settings-dialog.settings-dialog.wg-dragging{
  transition:none !important;
}
html body .settings-dialog.settings-dialog.wg-snapback{
  transition:transform .24s var(--wg-ease) !important;
}
/* A dragged-away sheet has already left the screen, so its exit animation
   must not fire and pull it back into view. */
html body .settings-dialog.settings-dialog.wg-drag-ever.wg-closing{
  animation:none !important;
}

/* Reduced motion: keep the state changes, drop the travel. */
@media (prefers-reduced-motion: reduce){
  html body .settings-dialog.settings-dialog,
  html body .settings-dialog.settings-dialog *{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    transition-duration:1ms !important;
  }
}

/* ================================================================== *
 * 9. Boot safety — the page is never white
 *
 *  Two floors under the themed surface:
 *  a) The canvas itself carries the theme's ground colour, so when the
 *     host's boot veil is removed — or a document is revealed after a
 *     failed boot — what shows is the app's own colour, never the
 *     browser's default white.
 *  b) If the app has not signalled readiness shortly after that, the
 *     companion script shows a small themed notice with one retry
 *     action instead of leaving a blank surface.
 * ================================================================== */

html{ background-color:#0b0b0c; }
html[data-theme="light"]{ background-color:#f3f1ec; }
html body{ background-color:var(--zy-bg,#0b0b0c); }
html[data-theme="light"] body{ background-color:var(--zy-bg,#f3f1ec); }

.wg-boot-fallback{
  position:fixed;
  inset:0;
  z-index:99990;
  display:grid;
  place-items:center;
  padding:24px;
  background:#0b0b0c;
  font-family:'IBM Plex Sans Arabic',-apple-system,'Segoe UI',sans-serif;
}
html[data-theme="light"] .wg-boot-fallback{ background:#f3f1ec; }
.wg-boot-fallback .wg-bf-card{
  display:grid;
  justify-items:center;
  gap:12px;
  max-width:340px;
  text-align:center;
}
.wg-boot-fallback img{ border-radius:12px; }
.wg-boot-fallback .wg-bf-title{
  margin:4px 0 0;
  font-size:15px;
  font-weight:650;
  color:#f4f4f3;
}
html[data-theme="light"] .wg-boot-fallback .wg-bf-title{ color:#292722; }
.wg-boot-fallback .wg-bf-sub{
  margin:0;
  font-size:12.5px;
  line-height:1.8;
  color:#b9b9b8;
}
html[data-theme="light"] .wg-boot-fallback .wg-bf-sub{ color:#625e56; }
.wg-boot-fallback .wg-bf-retry{
  margin-top:6px;
  min-height:40px;
  padding:9px 22px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,#3079ed,#0b57d0);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.wg-boot-fallback .wg-bf-retry:hover{ filter:brightness(1.06); }

/* ================================================================== *
 * 10. Settings surfaces — refinement pass
 *
 *  Usage, personalization, API and updates get one shared reading
 *  rhythm: quiet navigation, grouped surfaces, hairline rows, state
 *  colour only where it means something, numbers in tabular figures.
 * ================================================================== */

/* ---- 10.1 Navigation: a soft filled row, no loud rail ---- */

html body .settings-dialog.settings-dialog .settings-layout nav button::before{
  content:none !important;
}
html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button{
  min-height:44px !important;
  gap:12px !important;
  border-radius:12px !important;
}
html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button.active{
  background:var(--wg-surface-2) !important;
  background-color:var(--wg-surface-2) !important;
  border-color:transparent !important;
  font-weight:650 !important;
}
html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button.active .settings-nav-ico{
  color:var(--wg-accent-2) !important;
}

/* ---- 10.2 Usage: one calm budget statement, then the windows ---- */

html body .settings-dialog.settings-dialog .settings-claude-hero{
  padding:22px !important;
  border-radius:18px !important;
}
html body .settings-dialog.settings-dialog .settings-claude-body{
  gap:22px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
html body .settings-dialog.settings-dialog .settings-ring{
  width:118px !important;
  height:118px !important;
  border-radius:50% !important;
  box-shadow:inset 0 0 0 1px var(--wg-hair) !important;
}
html body .settings-dialog.settings-dialog .settings-ring-inner{
  width:88px !important;
  height:88px !important;
}
html body .settings-dialog.settings-dialog .settings-ring-inner strong{
  font-size:22px !important;
  font-weight:700 !important;
  letter-spacing:-.4px !important;
  line-height:1.1 !important;
  font-variant-numeric:tabular-nums !important;
}
html body .settings-dialog.settings-dialog .settings-ring-inner small{
  font-size:10.5px !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-claude-info h3{
  margin:0 0 4px !important;
  font-size:15px !important;
  font-weight:650 !important;
  letter-spacing:-.1px !important;
}
html body .settings-dialog.settings-dialog .settings-claude-info .settings-bar{
  margin-top:10px !important;
}
html body .settings-dialog.settings-dialog .settings-meta-row{
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid var(--wg-hair) !important;
  font-size:12px !important;
}
html body .settings-dialog.settings-dialog .settings-countdown{
  font-size:12px !important;
  font-variant-numeric:tabular-nums !important;
}

/* The remaining budget windows sit in a responsive two-up grid of
   equal cards; the primary window keeps the hero above. */
html body .settings-dialog.settings-dialog .settings-window-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:14px !important;
  margin:0 0 16px !important;
}
html body .settings-dialog.settings-dialog .settings-window-grid .settings-plan-card{
  margin:0 !important;
  padding:18px !important;
  border-radius:16px !important;
}
html body .settings-dialog.settings-dialog .settings-window-grid .settings-plan-title h3{
  font-size:13.5px !important;
  font-weight:650 !important;
}
html body .settings-dialog.settings-dialog .settings-window-grid .settings-bar-head{
  margin:2px 0 8px !important;
  font-size:12.5px !important;
}
html body .settings-dialog.settings-dialog .settings-window-grid .settings-bar-head > span:first-child{
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-window-grid .settings-bar-sub{
  margin:10px 0 0 !important;
  font-size:12px !important;
  line-height:1.8 !important;
}

/* Today's totals read as two quiet figures, not a run-on line. */
html body .settings-dialog.settings-dialog .settings-meta-row.settings-today{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:0 0 16px !important;
  padding-top:0 !important;
  border-top:0 !important;
}
html body .settings-dialog.settings-dialog .settings-meta-row.settings-today > span{
  min-width:0 !important;
  padding:14px 16px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:14px !important;
  background:var(--wg-surface) !important;
  color:var(--zy-text2) !important;
  font-size:12.5px !important;
  line-height:1.7 !important;
}

/* Model breakdown: quiet rows between hairlines. */
html body .settings-dialog.settings-dialog .settings-models{
  padding:4px 18px 8px !important;
  border-radius:16px !important;
}
html body .settings-dialog.settings-dialog .settings-models > h3{
  margin:14px 0 2px !important;
  font-size:14px !important;
  font-weight:650 !important;
}
html body .settings-dialog.settings-dialog .settings-model-row{
  padding:13px 0 !important;
}
html body .settings-dialog.settings-dialog .settings-model-row strong{
  font-size:13.5px !important;
}
html body .settings-dialog.settings-dialog .settings-model-row p{
  margin:3px 0 0 !important;
  font-size:12.25px !important;
  line-height:1.8 !important;
  color:var(--zy-text2) !important;
}

/* ---- 10.3 Personalization: preset cards fill the field for you ---- */

html body .settings-dialog.settings-dialog .settings-content > .response-presets{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:10px !important;
  margin:14px 0 20px !important;
}
html body .settings-dialog.settings-dialog .settings-content > .response-presets > button{
  min-height:48px !important;
  justify-self:stretch !important;
  border-radius:14px !important;
  border:1px solid var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
  color:var(--zy-text) !important;
  font-size:13px !important;
  font-weight:600 !important;
  transition:background .16s ease,border-color .16s ease,transform .12s ease !important;
}
html body .settings-dialog.settings-dialog .settings-content > .response-presets > button:hover{
  background:var(--wg-surface-2) !important;
  border-color:rgba(77,144,254,.4) !important;
}
html body .settings-dialog.settings-dialog .settings-content > .response-presets > button.active{
  background:rgba(77,144,254,.14) !important;
  border-color:rgba(77,144,254,.52) !important;
  color:var(--zy-text) !important;
}
html body .settings-dialog.settings-dialog label.settings-field{
  gap:9px !important;
}
html body .settings-dialog.settings-dialog label.settings-field:not(.settings-inline){
  font-weight:600 !important;
}
html body .settings-dialog.settings-dialog textarea{
  line-height:1.8 !important;
  resize:vertical !important;
}

/* ---- 10.4 API: credentials read like credentials ---- */

html body .settings-dialog.settings-dialog .settings-card .settings-detail > div > small[dir="ltr"]{
  display:inline-block !important;
  margin-top:6px !important;
  padding:3px 9px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:999px !important;
  background:rgba(var(--zy-veil),.05) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace !important;
  font-size:11.5px !important;
  letter-spacing:.2px !important;
}
html body .settings-dialog.settings-dialog .settings-card .settings-detail:last-child{
  border-bottom:0 !important;
}
html body .settings-dialog.settings-dialog pre{
  direction:ltr !important;
  text-align:left !important;
  unicode-bidi:isolate !important;
  margin:8px 0 4px !important;
  padding:14px 16px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:12px !important;
  background:rgba(var(--zy-veil),.045) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace !important;
  font-size:12px !important;
  line-height:1.75 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch !important;
}

/* ---- 10.5 Updates: version chip, readable body, quiet reactions ---- */

html body .settings-dialog.settings-dialog .settings-card > small:first-child{
  display:inline-flex !important;
  align-items:center !important;
  margin-bottom:10px !important;
  padding:3px 10px !important;
  border:1px solid var(--wg-hair-2) !important;
  border-radius:999px !important;
  background:var(--wg-surface) !important;
  color:var(--zy-text2) !important;
  font-size:11.5px !important;
  font-variant-numeric:tabular-nums !important;
}
html body .settings-dialog.settings-dialog .settings-card > p:not(.settings-note){
  font-size:13px !important;
  line-height:1.95 !important;
}

/* Reaction and copy actions share one chip language inside cards. */
html body .settings-dialog.settings-dialog .settings-card .response-presets{
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:12px 0 2px !important;
}
html body .settings-dialog.settings-dialog .settings-card .response-presets > button{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:7px 14px !important;
  border:1px solid var(--wg-hair-2) !important;
  border-radius:999px !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
html body .settings-dialog.settings-dialog .settings-card .response-presets > button:hover{
  background:var(--wg-surface) !important;
  color:var(--zy-text) !important;
}
html body .settings-dialog.settings-dialog .settings-card .response-presets > button[aria-pressed="true"]{
  background:rgba(77,144,254,.14) !important;
  border-color:rgba(77,144,254,.42) !important;
  color:var(--zy-text) !important;
}
html body .settings-dialog.settings-dialog .settings-card .response-presets > button svg{
  width:16px !important;
  height:16px !important;
}

/* ---- 10.6 Phone adjustments for the surfaces above ---- */

@media (max-width:600px){
  html body .settings-dialog.settings-dialog .settings-claude-hero{ padding:18px !important; }
  html body .settings-dialog.settings-dialog .settings-claude-body{ gap:16px !important; }
  html body .settings-dialog.settings-dialog .settings-ring{ width:104px !important; height:104px !important; }
  html body .settings-dialog.settings-dialog .settings-ring-inner{ width:78px !important; height:78px !important; }
  html body .settings-dialog.settings-dialog .settings-ring-inner strong{ font-size:20px !important; }
  html body .settings-dialog.settings-dialog .settings-window-grid{ grid-template-columns:1fr !important; }
  html body .settings-dialog.settings-dialog .settings-meta-row.settings-today{ grid-template-columns:1fr !important; }
  html body .settings-dialog.settings-dialog .settings-content > .response-presets{ grid-template-columns:1fr !important; }
  html body .settings-dialog.settings-dialog form > .settings-primary:last-child{
    width:100% !important;
    justify-content:center !important;
  }
}

/* ================================================================== *
 * 11. Settings surfaces — the remaining rooms
 *
 *  Account, subscription, security, appearance, data and install
 *  inherit §10's rhythm: quiet grouped cards, hairline rows, one
 *  accent per screen, numbers in tabular figures.
 * ================================================================== */

/* ---- 11.1 Appearance: labelled choice groups inside one card ---- */

html body .settings-dialog.settings-dialog .settings-appearance{
  padding:2px 18px 6px !important;
  border-radius:16px !important;
}
html body .settings-dialog.settings-dialog .settings-choice{
  display:grid !important;
  gap:10px !important;
  padding:16px 0 !important;
  border-top:1px solid var(--wg-hair) !important;
}
html body .settings-dialog.settings-dialog .settings-choice:first-of-type{
  border-top:0 !important;
  padding-top:10px !important;
}
html body .settings-dialog.settings-dialog .settings-choice-label{
  font-size:12.5px !important;
  font-weight:650 !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-choice .settings-segmented{
  margin-bottom:0 !important;
}
html body .settings-dialog.settings-dialog .settings-colors{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
  gap:8px !important;
}
html body .settings-dialog.settings-dialog .settings-color{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:44px !important;
  padding:8px 12px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:12px !important;
  background:transparent !important;
  color:var(--zy-text) !important;
  font:inherit !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  text-align:start !important;
  transition:border-color .15s ease,background .15s ease !important;
}
html body .settings-dialog.settings-dialog .settings-color:hover{
  border-color:var(--wg-hair-2) !important;
}
html body .settings-dialog.settings-dialog .settings-color.active{
  border-color:color-mix(in srgb, var(--sw) 55%, transparent) !important;
  background:color-mix(in srgb, var(--sw) 10%, transparent) !important;
}
html body .settings-dialog.settings-dialog .settings-color-dot{
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:var(--sw) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.28) !important;
  flex:0 0 auto !important;
}
html body .settings-dialog.settings-dialog .settings-color-name{
  flex:1 !important;
  text-align:start !important;
}
html body .settings-dialog.settings-dialog .settings-color-check{
  flex:0 0 auto !important;
  color:var(--sw) !important;
  opacity:0 !important;
  transition:opacity .15s ease !important;
}
html body .settings-dialog.settings-dialog .settings-color.active .settings-color-check{
  opacity:1 !important;
}

/* ---- 11.2 Account: one profile card, one quiet name card ---- */

html body .settings-dialog.settings-dialog .settings-profile-card{
  background:var(--wg-surface) !important;
}
html body .settings-dialog.settings-dialog .settings-profile-head{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:2px 0 10px !important;
}
html body .settings-dialog.settings-dialog .settings-profile-head .profile-photo{
  flex:0 0 auto !important;
  box-shadow:0 0 0 1px var(--wg-hair-2),0 12px 30px -22px rgba(0,0,0,.9) !important;
}
html body .settings-dialog.settings-dialog .settings-profile-head .settings-avatar{
  width:72px !important;
  height:72px !important;
  font-size:26px !important;
  border-radius:50% !important;
  flex:0 0 auto !important;
}
html body .settings-dialog.settings-dialog .settings-profile-id{ min-width:0 !important; flex:1 !important; }
html body .settings-dialog.settings-dialog .settings-profile-id h3{
  margin:0 0 3px !important;
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:-.2px !important;
}
html body .settings-dialog.settings-dialog .settings-profile-id .settings-note{
  margin:0 !important;
  overflow-wrap:anywhere !important;
}
html body .settings-dialog.settings-dialog .settings-profile-card .settings-plan-cta{
  gap:10px !important;
  flex-wrap:wrap !important;
}
html body .settings-dialog.settings-dialog .settings-profile-card .settings-button{
  position:relative !important;
  overflow:hidden !important;
  display:inline-flex !important;
  align-items:center !important;
}
html body .settings-dialog.settings-dialog .settings-profile-card .settings-button input[type=file]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-height:0 !important;
  opacity:0 !important;
  cursor:pointer !important;
}
html body .settings-dialog.settings-dialog form.settings-card-form{
  display:grid !important;
  gap:12px !important;
  padding:16px 18px !important;
  margin:0 0 14px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:16px !important;
}
html body .settings-dialog.settings-dialog form.settings-card-form h3{
  margin:0 0 2px !important;
}

/* The remaining direct-child forms (personalization, security) read as
   cards, matching the account card above. */
html body .settings-dialog.settings-dialog .settings-content > form:not(.settings-card-form){
  padding:16px 18px !important;
  margin:0 0 14px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:16px !important;
}

/* ---- 11.3 Subscription: neutral membership band, calm tiles ---- */

html body .settings-dialog.settings-dialog .settings-membership{
  border:1px solid var(--wg-hair-2) !important;
  border-radius:18px !important;
  background:var(--wg-surface) !important;
}
html body .settings-dialog.settings-dialog .settings-membership-info h3{
  font-weight:700 !important;
  letter-spacing:-.2px !important;
}
html body .settings-dialog.settings-dialog .settings-membership-stat{
  border:1px solid var(--wg-hair) !important;
  border-radius:14px !important;
  background:transparent !important;
  min-width:118px !important;
}
html body .settings-dialog.settings-dialog .settings-membership-stat strong{
  font-variant-numeric:tabular-nums !important;
}
html body .settings-dialog.settings-dialog .settings-payee{
  border:1px solid var(--wg-hair) !important;
  border-radius:16px !important;
  background:transparent !important;
}
html body .settings-dialog.settings-dialog .settings-payee-opt.active{
  background:var(--wg-surface-2) !important;
  border-color:var(--wg-hair-2) !important;
  color:var(--zy-text) !important;
  font-weight:650 !important;
}
html body .settings-dialog.settings-dialog .settings-plan-jump{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin:2px 0 6px !important;
}
html body .settings-dialog.settings-dialog .settings-plan-jump .settings-button{
  border-radius:999px !important;
  min-height:38px !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile{
  border:1px solid var(--wg-hair) !important;
  border-radius:16px !important;
  background:transparent !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile:hover{
  border-color:var(--wg-hair-2) !important;
  background:var(--wg-surface) !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile.settings-plan-current{
  border-color:rgba(77,144,254,.45) !important;
  background:rgba(77,144,254,.06) !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile h3{
  font-weight:700 !important;
  letter-spacing:-.2px !important;
}
html body .settings-dialog.settings-dialog .settings-plan-tile-meta span,
html body .settings-dialog.settings-dialog .settings-model-chips .settings-model-chip{
  border:1px solid var(--wg-hair) !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-model-chip.settings-model-chip-x{
  border-color:rgba(224,168,46,.35) !important;
  background:rgba(224,168,46,.10) !important;
  color:#dfa63a !important;
}

/* ---- 11.4 Security: sessions become separate cards ---- */

html body .settings-dialog.settings-dialog .settings-session{
  border:1px solid var(--wg-hair) !important;
  border-radius:14px !important;
  padding:12px 14px !important;
  margin-bottom:8px !important;
}
html body .settings-dialog.settings-dialog .settings-content > .settings-session:last-of-type{
  margin-bottom:14px !important;
}

/* ---- 11.5 Data & sync: server-first statements, red only where it hurts ---- */

html body .settings-dialog.settings-dialog .settings-danger-zone{
  border-color:rgba(233,104,104,.28) !important;
  background:rgba(233,104,104,.035) !important;
}
html body .settings-dialog.settings-dialog .settings-danger-zone > h3{
  color:#e9998f !important;
}
html[data-theme="light"] body .settings-dialog.settings-dialog .settings-danger-zone > h3{
  color:#b3261e !important;
}

/* ---- 11.6 Focus ring and hovers: one state colour everywhere ---- */

html body .settings-dialog.settings-dialog .settings-field input:focus,
html body .settings-dialog.settings-dialog .settings-field select:focus,
html body .settings-dialog.settings-dialog .settings-field textarea:focus{
  border-color:rgba(77,144,254,.55) !important;
  box-shadow:0 0 0 3px rgba(77,144,254,.15) !important;
}
html body .settings-dialog.settings-dialog .settings-button:hover,
html body .settings-dialog.settings-dialog .settings-primary:hover,
html body .settings-dialog.settings-dialog .settings-danger:hover{
  filter:brightness(1.07) !important;
}

/* ---- 11.7 Phone adjustments ---- */

@media (max-width:600px){
  html body .settings-dialog.settings-dialog .settings-profile-head{
    flex-direction:column !important;
    text-align:center !important;
  }
  html body .settings-dialog.settings-dialog .settings-profile-head .settings-profile-id{ text-align:center !important; }
  html body .settings-dialog.settings-dialog .settings-profile-card .settings-plan-cta{ justify-content:center !important; }
  html body .settings-dialog.settings-dialog .settings-choice{ gap:12px !important; }
}

/* ---- 12. Settings chrome: live save chip + settings search ---- */

html body .settings-dialog.settings-dialog .settings-save-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:5px 10px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:650 !important;
  color:var(--zy-text2) !important;
  background:transparent !important;
  white-space:nowrap !important;
  transition:color .18s ease,border-color .18s ease,background .18s ease !important;
}
html body .settings-dialog.settings-dialog .settings-save-chip.ok{
  color:#3fae6f !important;
  border-color:color-mix(in srgb, #3fae6f 45%, transparent) !important;
  background:color-mix(in srgb, #3fae6f 10%, transparent) !important;
}
html body .settings-dialog.settings-dialog .settings-save-chip.fail{
  color:#e5484d !important;
  border-color:color-mix(in srgb, #e5484d 45%, transparent) !important;
  background:color-mix(in srgb, #e5484d 10%, transparent) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 10px !important;
  padding:8px 10px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search svg{
  flex:0 0 auto !important;
  opacity:.7 !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search input{
  flex:1 !important;
  min-width:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:var(--zy-text) !important;
  font:inherit !important;
  font-size:12.5px !important;
  padding:0 !important;
  margin:0 !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search input::placeholder{
  color:var(--zy-text2) !important;
  opacity:.75 !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search:focus-within{
  border-color:rgba(77,144,254,.55) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-empty{
  margin:14px 4px !important;
  font-size:12px !important;
  color:var(--zy-text2) !important;
}
@media (max-width:600px){
  html body .settings-dialog.settings-dialog .settings-head-brand small{
    display:none !important;
  }
  html body .settings-dialog.settings-dialog .settings-nav-search{
    flex:0 0 auto !important;
    margin:0 !important;
    min-width:170px !important;
    min-height:38px !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    background:var(--wg-surface) !important;
  }
  html body .settings-dialog.settings-dialog .settings-nav-empty{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:9px 12px !important;
    font-size:12px !important;
  }
}

/* ================================================================== *
 * 13. Settings - the quiet room (reference: claude.ai settings)
 *
 *  One flat reading surface instead of boxed cards: a side list with a
 *  search field on top, plain section headings, rows separated by
 *  hairlines, a label on the leading edge and a slender control on the
 *  trailing edge. Segmented controls read as a raised pill on a soft
 *  track; selects drop their box and keep text + a chevron. Colour is
 *  spent only where it means something. Full-bleed on desktop; phones
 *  keep their sheet and chip rail but speak the same language.
 * ================================================================== */

/* ---- 13.1 Shell: full-bleed surface on desktop ---- */

@media (min-width:601px){
  html body .settings-overlay.settings-overlay{ padding:0 !important; }
  html body .settings-dialog.settings-dialog{
    position:absolute !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}

/* App bar: a whisper, not a band. The content scrolls in its own pane,
   so the bar never needs a scrolled state. */
html body .settings-dialog.settings-dialog header{
  min-height:0 !important;
  padding:12px clamp(20px,3.2vw,44px) !important;
  border-bottom:1px solid transparent !important;
  background:transparent !important;
}
html body .settings-dialog.settings-dialog.wg-scrolled header{
  border-bottom-color:transparent !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body .settings-dialog.settings-dialog header h2{
  font-size:15px !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
}
html body .settings-dialog.settings-dialog .settings-close.settings-close{
  border-color:transparent !important;
  border-radius:10px !important;
}
html body .settings-dialog.settings-dialog .settings-close.settings-close:hover{
  background:rgba(var(--zy-veil),.07) !important;
  border-color:transparent !important;
}
@media (min-width:601px){
  html body .settings-dialog.settings-dialog .settings-head-brand small{ display:none !important; }
  html body .settings-dialog.settings-dialog .settings-header-user{ display:none !important; }
  /* With the identity chip gone, the close button claims the far edge. */
  html body .settings-dialog.settings-dialog .settings-close.settings-close{
    margin-inline-start:auto !important;
  }
}

/* ---- 13.2 Side list: search first, icon rows, a quiet active pill ---- */

@media (min-width:601px){
  /* brand-experience.css hands the layout to a 210px grid; this design is
     one flex column, so the grid is retired explicitly. */
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout{
    display:flex !important;
  }
  html body .settings-dialog.settings-dialog .settings-layout nav{
    flex:0 0 246px !important;
    max-width:none !important;
    padding:14px 14px 26px !important;
    gap:1px !important;
    background:color-mix(in srgb, rgb(var(--zy-solid)), #000 4%) !important;
    border-inline-end:0 !important;
  }
}
html body .settings-dialog.settings-dialog .settings-nav-search{
  margin:2px 0 14px !important;
  padding:10px 12px !important;
  min-height:42px !important;
  border:1px solid var(--wg-hair) !important;
  border-radius:11px !important;
  background:transparent !important;
  transition:border-color .16s ease,background .16s ease !important;
}
html body .settings-dialog.settings-dialog .settings-nav-search:focus-within{
  border-color:rgba(77,144,254,.45) !important;
  background:rgba(var(--zy-veil),.03) !important;
}
/* The field shell owns the border; the input inside it is bare. */
html body .settings-dialog.settings-dialog .settings-nav-search input[type=search]{
  font-size:13px !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
@media (max-width:600px){
  /* 16px keeps iOS from zooming the sheet when the field is focused. */
  html body .settings-dialog.settings-dialog .settings-nav-search input[type=search]{
    font-size:16px !important;
  }
}
html body .settings-dialog.settings-dialog .settings-nav-group{
  margin:18px 10px 6px !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  letter-spacing:.1px !important;
  color:color-mix(in srgb, var(--zy-text2) 78%, transparent) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-group:first-child{ margin-top:6px !important; }
html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button{
  min-height:38px !important;
  gap:11px !important;
  padding:7px 10px !important;
  border-radius:9px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
}
html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button.active{
  background:rgba(var(--zy-veil),.075) !important;
  border-color:transparent !important;
  color:var(--zy-text) !important;
  font-weight:600 !important;
}
/* The active row is quiet: the icon brightens, it does not tint. */
html body .settings-dialog.settings-dialog .settings-layout nav button.active .settings-nav-ico,
html body .settings-dialog.settings-dialog .settings-layout nav button:hover .settings-nav-ico{
  color:var(--zy-text) !important;
}
html body .settings-dialog.settings-dialog .settings-nav-ico{
  width:18px !important;
  height:18px !important;
}

/* ---- 13.3 Content: headings and hairline rows, no boxes ---- */

html body .settings-dialog.settings-dialog .settings-content{
  padding:0 clamp(24px,4.4vw,76px) 80px !important;
  scroll-padding-top:24px !important;
}
html body .settings-dialog.settings-dialog .settings-section-title{
  position:static !important;
  z-index:auto !important;
  margin:0 !important;
  padding:30px 0 6px !important;
  border-bottom:0 !important;
  background:transparent !important;
  font-size:19px !important;
  font-weight:650 !important;
  letter-spacing:-.2px !important;
}
html body .settings-dialog.settings-dialog.wg-scrolled .settings-section-title{
  border-bottom-color:transparent !important;
}
html body .settings-dialog.settings-dialog .settings-card,
html body .settings-dialog.settings-dialog .settings-models,
html body .settings-dialog.settings-dialog .settings-appearance,
html body .settings-dialog.settings-dialog .settings-clock,
html body .settings-dialog.settings-dialog form.settings-card-form,
html body .settings-dialog.settings-dialog .settings-content > form:not(.settings-card-form){
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 6px !important;
}
html body .settings-dialog.settings-dialog .settings-card > h3,
html body .settings-dialog.settings-dialog .settings-content > h3:not(.settings-section-title),
html body .settings-dialog.settings-dialog form.settings-card-form h3{
  margin:28px 0 2px !important;
  font-size:14.5px !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
}
/* The tab title already says "المظهر"; the card heading repeated it. */
html body .settings-dialog.settings-dialog .settings-appearance > h3{ display:none !important; }
html body .settings-dialog.settings-dialog .settings-card > p.settings-note{
  margin:2px 0 10px !important;
  font-size:12.5px !important;
  line-height:1.8 !important;
  color:var(--zy-text2) !important;
}
/* Sessions become rows between hairlines instead of separate boxes. */
html body .settings-dialog.settings-dialog .settings-session{
  border:0 !important;
  border-bottom:1px solid var(--wg-hair) !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:14px 0 !important;
  margin:0 !important;
}
html body .settings-dialog.settings-dialog .settings-content > .settings-session:last-of-type{
  margin-bottom:6px !important;
}
/* The usage windows are genuine panels; they keep a quiet outline. */
@media (min-width:601px){
  html body .settings-dialog.settings-dialog .settings-window-grid .settings-plan-card{
    border:1px solid var(--wg-hair) !important;
    border-radius:16px !important;
  }
}

/* ---- 13.4 Rows and controls ---- */

html body .settings-dialog.settings-dialog .settings-detail.settings-detail{
  min-height:0 !important;
  padding:14px 0 !important;
  border-bottom:1px solid var(--wg-hair) !important;
}
html body .settings-dialog.settings-dialog .settings-detail.settings-detail:last-child,
html body .settings-dialog.settings-dialog .settings-card > .settings-detail:last-child{
  border-bottom:0 !important;
}
/* Values answer the label; they read muted, medium - never shouted. */
html body .settings-dialog.settings-dialog .settings-detail.settings-detail > strong,
html body .settings-dialog.settings-dialog .settings-detail.settings-detail > div > strong{
  font-weight:500 !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-detail.settings-detail > div > strong{
  color:var(--zy-text) !important;
}

/* Labelled choice rows: label on the leading edge, control trailing. */
html body .settings-dialog.settings-dialog .settings-choice{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
  gap:12px 18px !important;
  padding:13px 0 !important;
  border-top:1px solid var(--wg-hair) !important;
}
html body .settings-dialog.settings-dialog .settings-choice:first-of-type{
  border-top:0 !important;
  padding-top:4px !important;
}
html body .settings-dialog.settings-dialog .settings-choice-label{
  font-size:14px !important;
  font-weight:500 !important;
  color:var(--zy-text) !important;
}
/* A select with its own label sits on the row like a value: text on the
   leading edge, the control compact on the trailing edge. */
html body .settings-dialog.settings-dialog label.settings-field:has(> select){
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
html body .settings-dialog.settings-dialog label.settings-field:has(> select) > select{
  flex:0 1 auto !important;
  max-width:280px !important;
  text-overflow:ellipsis !important;
}
/* A switch lives at the trailing edge; its sentence keeps the rail. */
html body .settings-dialog.settings-dialog label.settings-field:has(> input[type=checkbox]){
  display:flex !important;
  flex-direction:row-reverse !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:12px 0 !important;
}
/* Field labels speak in the same voice as the rows around them. */
html body .settings-dialog.settings-dialog label.settings-field:not(.settings-inline){
  font-size:14px !important;
  color:var(--zy-text) !important;
}

/* Segmented: a soft track with one raised pill. */
html body .settings-dialog.settings-dialog .settings-segmented{
  background:rgba(var(--zy-veil),.065) !important;
  border:0 !important;
  border-radius:11px !important;
  padding:2px !important;
  gap:2px !important;
}
html body .settings-dialog.settings-dialog .settings-seg{
  min-height:30px !important;
  padding:6px 18px !important;
  border-radius:9px !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  color:var(--zy-text2) !important;
}
html body .settings-dialog.settings-dialog .settings-seg.active{
  background:rgba(var(--zy-veil),.13) !important;
  color:var(--zy-text) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
/* In the light theme the raised pill is the lightest surface there is. */
html[data-theme="light"] body .settings-dialog.settings-dialog .settings-seg.active{
  background:#fff !important;
  box-shadow:0 1px 2px rgba(20,18,14,.10) !important;
}

/* Selects: text plus a chevron - the box around them disappeared. */
html body .settings-dialog.settings-dialog select{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background-color:transparent !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390908d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-size:16px 16px !important;
  background-position:right 10px center !important;
  padding:8px 30px 8px 10px !important;
  border-radius:10px !important;
  box-shadow:none !important;
  min-height:38px !important;
  font-size:13.5px !important;
  transition:background-color .16s ease !important;
}
html[dir="rtl"] body .settings-dialog.settings-dialog select{
  background-position:left 10px center !important;
  padding:8px 10px 8px 30px !important;
}
html body .settings-dialog.settings-dialog select:hover{
  background-color:rgba(var(--zy-veil),.06) !important;
}
html body .settings-dialog.settings-dialog select:focus{
  background-color:rgba(var(--zy-veil),.06) !important;
  box-shadow:none !important;
}
@media (min-width:601px){
  html body .settings-dialog.settings-dialog input:not([type=checkbox]):not([type=radio]),
  html body .settings-dialog.settings-dialog textarea{
    font-size:14px !important;
  }
}
html body .settings-dialog.settings-dialog input:not([type=checkbox]):not([type=radio]),
html body .settings-dialog.settings-dialog textarea{
  border-color:var(--wg-hair) !important;
  background:rgba(var(--zy-veil),.04) !important;
  border-radius:12px !important;
}

/* Buttons: quiet secondaries, one accent commitment. */
html body .settings-dialog.settings-dialog .settings-button{
  background:transparent !important;
  border:1px solid var(--wg-hair-2) !important;
  border-radius:10px !important;
  min-height:38px !important;
  padding:8px 14px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
}
html body .settings-dialog.settings-dialog .settings-button:hover{
  background:rgba(var(--zy-veil),.06) !important;
}
html body .settings-dialog.settings-dialog .settings-primary{
  border-radius:10px !important;
  min-height:38px !important;
  box-shadow:none !important;
}
html body .settings-dialog.settings-dialog .settings-button.active{
  background:rgba(var(--zy-veil),.08) !important;
  border-color:transparent !important;
}
html body .settings-dialog.settings-dialog .settings-pill.settings-pill.active{
  background:rgba(var(--zy-veil),.10) !important;
  border-color:transparent !important;
  color:var(--zy-text) !important;
}

/* Accent picker: a strip of colour dots; the name lives for screen
   readers only, the dot itself is the label. */
html body .settings-dialog.settings-dialog .settings-colors{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
}
html body .settings-dialog.settings-dialog .settings-color{
  position:relative !important;
  width:36px !important;
  min-width:36px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  display:grid !important;
  place-items:center !important;
}
html body .settings-dialog.settings-dialog .settings-color:hover{
  background:rgba(var(--zy-veil),.06) !important;
  border:0 !important;
}
html body .settings-dialog.settings-dialog .settings-color-dot{
  width:20px !important;
  height:20px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;
}
html body .settings-dialog.settings-dialog .settings-color-name{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
html body .settings-dialog.settings-dialog .settings-color-check{ display:none !important; }
html body .settings-dialog.settings-dialog .settings-color.active{
  background:transparent !important;
  border:0 !important;
}
html body .settings-dialog.settings-dialog .settings-color.active .settings-color-dot{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 2px rgb(var(--zy-solid)),
    0 0 0 3.5px var(--sw) !important;
}

/* ---- 13.5 Phone: the sheet keeps its shape, the surfaces calm down ---- */

@media (max-width:600px){
  html body .settings-dialog.settings-dialog .settings-layout.settings-layout nav button.active{
    background:rgba(var(--zy-veil),.10) !important;
    background-color:rgba(var(--zy-veil),.10) !important;
    border-color:transparent !important;
  }
  html body .settings-dialog.settings-dialog .settings-choice{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding:14px 0 !important;
  }
  html body .settings-dialog.settings-dialog .settings-choice > select,
  html body .settings-dialog.settings-dialog .settings-choice > .settings-segmented,
  html body .settings-dialog.settings-dialog .settings-choice > .settings-colors{
    align-self:stretch !important;
  }
  html body .settings-dialog.settings-dialog .settings-colors{ justify-content:flex-start !important; }
  html body .settings-dialog.settings-dialog .settings-section-title{
    padding:24px 0 4px !important;
    font-size:18px !important;
  }
  html body .settings-dialog.settings-dialog .settings-card > h3,
  html body .settings-dialog.settings-dialog .settings-content > h3:not(.settings-section-title){
    margin-top:22px !important;
  }
}