#settingsModal { align-items: stretch; background: #eaf1f2; backdrop-filter: none; }
#settingsModal .settings-sheet { display: flex; flex-direction: column; width: 100%; max-width: 620px; height: 100dvh; max-height: 100dvh; overflow: hidden; padding: 0; border-radius: 0; background: #f3f7f7; }
.settings-toolbar { z-index: 6; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: calc(env(safe-area-inset-top,0px) + 7px) 14px 7px 20px; border-bottom: 1px solid #dce6e8; background: #fff; }
.settings-toolbar h1 { font-size: 20px; line-height: 1.3; }
.settings-toolbar .modal-close { flex: 0 0 44px; width: 44px; height: 44px; }
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding-bottom: calc(env(safe-area-inset-bottom,0px) + 24px); background: #f3f7f7; }
.settings-hero { position: relative; height: clamp(142px,22dvh,184px); overflow: hidden; background: #dff5ff; }
.settings-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.settings-tabs { position: sticky; z-index: 5; top: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border-bottom: 1px solid #dce6e8; background: rgba(255,255,255,.97); box-shadow: 0 4px 12px rgba(20,58,71,.06); }
.settings-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 7px 2px 8px; border: 0; background: transparent; color: #68787f; font-size: 11px; font-weight: 700; white-space: nowrap; }
.settings-tab::after { content: ''; position: absolute; right: 18%; bottom: 0; left: 18%; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.settings-tab-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #65777f; background: #edf2f3; }
.settings-tab-icon .icon { width: 15px; height: 15px; }
.settings-tab.active { color: var(--primary); }
.settings-tab.active::after { background: var(--primary); }
.settings-tab.active .settings-tab-icon { color: #fff; background: var(--primary); }
.settings-tab:focus-visible { z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.settings-body { padding: 0 16px; }
.settings-section { padding: 22px 0 8px; }
.settings-section[hidden] { display: none; }
.settings-section-heading { margin-bottom: 3px; }
.settings-section h2 { color: #142f3a; font-size: 23px; line-height: 1.35; }
.settings-section-lead { margin: 0 0 23px; color: #65777f; font-size: 13px; line-height: 1.65; }
.settings-group-label { margin: 22px 4px 7px; color: #53666e; font-size: 12px; font-weight: 700; }
.settings-section-heading + .settings-section-lead + .settings-group-label { margin-top: 0; }
.settings-group { overflow: hidden; margin: 0; border: 1px solid #dce5e7; border-radius: 8px; background: #fff; box-shadow: 0 2px 7px rgba(23,56,68,.04); }
.settings-row { display: flex; align-items: center; width: 100%; min-height: 64px; gap: 12px; padding: 11px 14px; border: 0; background: #fff; color: #17313b; font: inherit; text-align: left; }
.settings-row-icon { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #e7f4ff; color: var(--primary); }
.settings-row-icon .icon { width: 18px; height: 18px; }
.settings-row-copy { min-width: 0; flex: 1; }
.settings-row-copy strong { display: block; font-size: 15px; line-height: 1.45; }
.settings-row-copy small { display: block; margin-top: 2px; color: #718087; font-size: 12px; line-height: 1.45; }
.settings-chevron { flex: 0 0 auto; color: #819096; font-size: 25px; font-weight: 400; line-height: 1; }
.settings-action-row .guide-settings-button { margin: 0; border: 0; border-radius: 0; background: #fff; color: #17313b; }
.settings-action-row .guide-settings-button > span { font-size: inherit; }
.settings-field-group { padding: 15px; }
.settings-field-group .field-label { display: block; margin-bottom: 8px; color: #314951; font-size: 13px; font-weight: 700; }
.settings-field-group .select-dropdown { min-height: 48px; border-color: #cfdadd; background-color: #fff; }
.settings-field-group .settings-section-lead { margin: 8px 0 0 !important; }
.settings-icon-group { padding: 15px; }
.settings-section .auth-account { min-height: 58px; margin: 0; padding: 8px 14px; border: 0; }
.settings-section .auth-account span { color: #314951; font-weight: 600; }
.settings-section .auth-account button { min-height: 44px; }
.settings-section .shortcut-settings { margin: 0; padding: 15px; border: 1px solid #dce5e7; }
.settings-section .shortcut-settings h3 { color: #17313b; }
.settings-usage-group { padding: 15px; }
.settings-usage-group .quota-section-title { margin-bottom: 10px; color: #17313b; font-size: 15px; font-weight: 700; }
.settings-usage-group .quota-row { padding: 10px 0; }
.settings-usage-group .quota-row + .quota-row { border-top: 1px solid #e7edef; }
#settingsModal .account-admin { margin-top: 12px; padding: 15px; border-top: 1px solid #dce5e7; }
#settingsModal .account-admin-row { min-height: 58px; padding: 12px 0; }
#settingsModal .account-admin-row:last-child { border-bottom: 0; }
#settingsModal .account-admin button { min-height: 44px; }
.settings-account-fold { margin-top: 16px; border: 1px solid #dce5e7; border-radius: 8px; background: #fff; overflow: hidden; }
.settings-account-fold[hidden] { display: none; }
.settings-account-fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 15px; color: #17313b; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.settings-account-fold > summary::-webkit-details-marker { display: none; }
.settings-account-fold[open] > summary { border-bottom: 1px solid #e3eaec; }
.settings-account-fold[open] > summary .settings-chevron { transform: rotate(90deg); }
.settings-account-fold .settings-group { border: 0; border-radius: 0; box-shadow: none; }
#settingsModal .settings-account-fold .account-admin { margin: 0; border: 0; }
.app-icon-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.app-icon-picker button { min-width: 0; min-height: 128px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 10px 5px; border: 2px solid #dce5e7; border-radius: 8px; background: #fff; color: #354656; font-size: 13px; cursor: pointer; }
.app-icon-picker button[aria-pressed="true"] { border-color: var(--primary); background: #eaf6ff; color: #075eaa; }
.app-icon-picker img { width: 76px; height: 76px; object-fit: contain; }
.app-install-link { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 14px; border-top: 1px solid #e1e8ea; color: var(--primary); text-align: center; text-decoration: none; font-size: 14px; font-weight: 700; }
.app-install-link:focus-visible { outline: 3px solid #13a5a0; outline-offset: -3px; }
.settings-about { border: 1px solid #dce5e7; }
.settings-about > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 13px 15px; cursor: pointer; color: #17313b; font-size: 14px; font-weight: 700; list-style: none; }
.settings-about > summary::-webkit-details-marker { display: none; }
.settings-about[open] > summary { border-bottom: 1px solid #e3eaec; }
.settings-about[open] > summary .settings-chevron { transform: rotate(90deg); }
.settings-about-body { padding: 14px; }
#diagnosticSettings { margin: 0; padding: 15px; border-bottom: 1px solid #dce5e7; }
#diagnosticSettings h3 { margin: 0 0 7px; color: #17313b; font-size: 15px; }
#diagnosticSettings p { margin: 7px 0 12px; color: #61737a; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#diagnosticSettings label { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; }
#diagnosticSettings input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--primary); }
#diagnosticSettings > button { min-height: 44px; margin: 5px 7px 5px 0; padding: 9px 12px; border: 1px solid #cfdadd; border-radius: 8px; background: #fff; color: #245262; font-weight: 700; }
#diagnosticSettings > button:nth-of-type(2) { border-color: var(--primary); background: var(--primary); color: #fff; }
#diagnosticSettings textarea,#authGate textarea { width: 100%; min-height: 120px; font-size: 16px; }
#diagnosticReports pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
#diagnosticReports article { padding: 12px 0; border-bottom: 1px solid #e1e8ea; }
#screen-map { padding: 8px 0 0; }
.map-page-heading { align-items: center; margin: 0; padding: 4px 20px 12px; }
.map-page-heading h1 { font-size: 26px; }
.map-page-heading p { margin-top: 2px; }
.page-heading > div:first-child { flex: 1; }
.page-heading .settings-trigger { width: 44px; height: 44px; }
#screen-map .map-container { height: calc(100dvh - var(--app-top-inset) - var(--nav-height) - env(safe-area-inset-bottom,0px) - 84px); }
@media (max-width:380px) {
  .settings-body { padding: 0 12px; }
  .settings-hero { height: 132px; }
  .settings-tab { min-height: 56px; font-size: 10px; }
  .settings-section h2 { font-size: 21px; }
  .app-icon-picker img { width: 68px; height: 68px; }
  #settingsModal .account-admin-row { align-items: flex-start; flex-wrap: wrap; }
}