.settings-page { max-width: 1320px; margin: 0 auto; padding: 22px 24px 40px; color: var(--text-primary, #17324d); }
.settings-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: center; padding: 24px 28px; background: linear-gradient(110deg, #103b66, #1f628d); color: #f5fbff; border: 1px solid #3988b8; border-radius: 8px; box-shadow: 0 12px 28px rgba(18, 67, 105, .18); }
.settings-kicker { display: block; color: #79d2ff; font-size: .72rem; font-weight: 800; letter-spacing: .07em; }
.settings-hero h2, .settings-panel h2 { margin: 4px 0 6px; font-size: 1.35rem; letter-spacing: 0; }
.settings-hero p { max-width: 720px; margin: 0; color: #d4ebf8; }
.settings-connection { padding-left: 20px; border-left: 2px solid #72c7f0; display: grid; gap: 2px; }
.settings-connection span { color: #c2e5f7; font-size: .78rem; font-weight: 700; }
.settings-connection strong { color: #fff; font-size: 1.12rem; }
.settings-connection small { color: #b1d9ef; }
.settings-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.settings-metrics article { min-height: 74px; padding: 13px 16px; border: 1px solid #afd0e3; border-radius: 7px; background: #eff7fb; display: grid; align-content: center; gap: 4px; }
.settings-metrics article:nth-child(2) { background: #edf6fb; border-color: #9ec6df; }
.settings-metrics article:nth-child(3) { background: #fff7ec; border-color: #e1bb86; }
.settings-metrics article:nth-child(4) { background: #f1f4fa; border-color: #b7c4d7; }
.settings-metrics span { color: #4a6782; font-size: .78rem; font-weight: 700; }
.settings-metrics strong { color: #143957; font-size: 1.14rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-panel { min-width: 0; padding: 18px; border: 1px solid #a9c9dd; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(14, 64, 101, .07); }
.settings-panel-system { border-top: 3px solid #237cb0; }
.settings-panel-preferences { grid-column: 1 / -1; border-top: 3px solid #36a8d6; }
.settings-panel-account { border-top: 3px solid #637e9e; }
.settings-panel-backup { border-top: 3px solid #c18146; }
.settings-panel-sync { border-top: 3px solid #377d83; }
.settings-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.settings-panel h2 { color: #173d5d; font-size: 1.05rem; }
.settings-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.settings-list div { min-width: 0; padding: 9px 10px; background: #f1f7fa; border: 1px solid #d1e1eb; border-radius: 6px; }
.settings-list dt { color: #58738b; font-size: .72rem; font-weight: 800; }
.settings-list dd { margin: 3px 0 0; overflow: hidden; color: #173d5d; font-size: .86rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.settings-message { margin: 0; color: #536f85; font-size: .87rem; line-height: 1.45; }
.settings-message-box { margin-top: 12px; padding: 10px 12px; border-left: 3px solid #47a2d0; background: #eef7fb; }
.settings-account-email { margin: 18px 0 10px; overflow-wrap: anywhere; color: #173d5d; font-size: .98rem; font-weight: 800; }
.settings-actions { display: grid; gap: 8px; margin-top: 16px; }
.settings-actions-two { grid-template-columns: minmax(160px, 220px); }
.settings-actions-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-button { min-height: 38px; padding: 0 12px; border: 1px solid #9abed4; border-radius: 6px; background: #eef5f9; color: #143c5d; font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; text-align: center; }
.settings-button:hover, .settings-button:focus-visible { border-color: #167eb9; background: #dceef8; outline: 2px solid transparent; }
.settings-button-primary { background: #176ca5; border-color: #176ca5; color: #fff; }
.settings-button-primary:hover, .settings-button-primary:focus-visible { background: #0f5d91; }
.settings-file-button { display: grid; place-items: center; }
.settings-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-badge { padding: 6px 8px; border: 1px solid #9bc4db; border-radius: 999px; color: #265979; background: #eaf5fa; font-size: .75rem; white-space: nowrap; }
.settings-conflict-panel { margin-top: 14px; border-top: 1px solid #d2e0e8; padding-top: 12px; }
.settings-conflict-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #173d5d; }
.settings-conflict-list { display: grid; gap: 6px; margin-top: 10px; }
.settings-conflict-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; background: #fff7ec; border-left: 3px solid #c18146; color: #4f6576; font-size: .76rem; }
.settings-conflict-item strong { display: block; color: #603f1c; }
.settings-conflict-item small { display: block; margin-top: 2px; }
.settings-legacy-values { display: none; }
.settings-preference-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.settings-preference-form label { display: grid; gap: 5px; color: #4a6782; font-size: .76rem; font-weight: 800; }
.settings-preference-form select { min-width: 0; min-height: 38px; border: 1px solid #a9c9dd; border-radius: 6px; padding: 0 10px; background: #fff; color: #173d5d; font: inherit; }
.settings-preference-form .settings-message-box, .settings-preference-actions { grid-column: 1 / -1; }
.settings-preference-actions { display: flex; justify-content: flex-end; }
.settings-preference-actions .settings-button { width: 180px; }
html[data-theme="dark"] .settings-page { color: #eaf5fb; }
html[data-theme="dark"] .settings-hero { background: linear-gradient(110deg, #102e4b, #205477); border-color: #498eb7; box-shadow: none; }
html[data-theme="dark"] .settings-metrics article { background: #1b3548; border-color: #426e89; }
html[data-theme="dark"] .settings-metrics article:nth-child(2) { background: #183b4e; }
html[data-theme="dark"] .settings-metrics article:nth-child(3) { background: #40372d; border-color: #907047; }
html[data-theme="dark"] .settings-metrics article:nth-child(4) { background: #273746; border-color: #61758a; }
html[data-theme="dark"] .settings-metrics span, html[data-theme="dark"] .settings-message, html[data-theme="dark"] .settings-list dt { color: #b8d0de; }
html[data-theme="dark"] .settings-metrics strong, html[data-theme="dark"] .settings-panel h2, html[data-theme="dark"] .settings-list dd, html[data-theme="dark"] .settings-account-email, html[data-theme="dark"] .settings-conflict-head { color: #f3fbff; }
html[data-theme="dark"] .settings-panel { background: #183247; border-color: #3e6d88; box-shadow: none; }
html[data-theme="dark"] .settings-list div { background: #204158; border-color: #3f6f8c; }
html[data-theme="dark"] .settings-message-box { background: #193b50; border-left-color: #67c5ed; }
html[data-theme="dark"] .settings-button { background: #244b64; border-color: #5281a0; color: #eef9ff; }
html[data-theme="dark"] .settings-button:hover, html[data-theme="dark"] .settings-button:focus-visible { background: #306585; border-color: #74c9ef; }
html[data-theme="dark"] .settings-button-primary { background: #197ab2; border-color: #4fb7e4; color: #fff; }
html[data-theme="dark"] .settings-badge { background: #21495f; border-color: #5d91ad; color: #d8f1ff; }
html[data-theme="dark"] .settings-conflict-panel { border-color: #3d6b83; }
html[data-theme="dark"] .settings-conflict-item { background: #40372d; color: #f2dcc1; border-left-color: #e4a353; }
html[data-theme="dark"] .settings-conflict-item strong { color: #fff0dc; }
html[data-theme="dark"] .settings-preference-form label { color: #b8d0de; }
html[data-theme="dark"] .settings-preference-form select { background: #dce8ef; color: #17304b; border-color: #6e96ae; }
@media (max-width: 900px) { .settings-preference-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .settings-page { padding: 14px 12px 28px; } .settings-hero { grid-template-columns: 1fr; gap: 16px; padding: 18px; } .settings-connection { padding: 10px 0 0; border-left: 0; border-top: 2px solid #72c7f0; } .settings-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-grid { grid-template-columns: 1fr; } .settings-actions-three { grid-template-columns: 1fr; } .settings-actions-two { grid-template-columns: 1fr; } .settings-conflict-item { grid-template-columns: 1fr; gap: 3px; } .settings-preference-form { grid-template-columns: 1fr; }.settings-preference-actions { display: grid; grid-template-columns: 1fr 1fr; }.settings-preference-actions .settings-button { width: 100%; } }