.settings-page { min-height: 100vh; background: #eeeaf8; }
.settings-shell { width: min(520px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 calc(34px + env(safe-area-inset-bottom)); color: #52647e; }
.settings-back { color: #7b8eaf; text-decoration: none; font: 13px "Yomogi Local", sans-serif; }
.settings-header { display: flex; align-items: center; gap: 13px; margin: 12px 4px 14px; }.settings-header img { width: 64px; height: 64px; object-fit: contain; }.settings-header p { margin: 0 0 2px; color: #8797b2; font: 12px "Yomogi Local", sans-serif; }.settings-header h1 { margin: 0; font-size: 30px; }
.settings-form { margin: 0; }.settings-card { margin: 12px 0; padding: 18px; border: 1px solid rgba(218,214,239,.9); border-radius: 24px; background: rgba(252,251,255,.94); box-shadow: 0 10px 28px rgba(93,91,135,.09); }.settings-card h2 { margin: 0; font-size: 19px; }
.settings-card > label { display: grid; min-width: 0; gap: 6px; margin-top: 14px; color: #61718b; font: 13px "Yomogi Local", sans-serif; }.settings-card input { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #d6d3eb; border-radius: 13px; color: #4e5f7b; background: #fff; font: 15px "Yomogi Local", sans-serif; }.settings-date-field { position: relative; display: grid; box-sizing: border-box; min-width: 0; min-height: 45px; max-width: 100%; overflow: hidden; border: 1px solid #d6d3eb; border-radius: 13px; background: #fff; }.settings-date-display { display: grid; min-width: 0; min-height: 43px; place-items: center; padding: 10px 12px; color: #4e5f7b; font: 15px "Yomogi Local", sans-serif; line-height: 1.2; pointer-events: none; text-align: center; }.settings-date-field input[type="date"] { position: absolute; inset: 0; z-index: 1; display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }.settings-card input[readonly] { color: #8390a4; background: #f4f3fa; }
.settings-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }.settings-pair label { display: grid; gap: 6px; color: #61718b; font: 13px "Yomogi Local", sans-serif; }.field-with-unit { position: relative; display: block; }.field-with-unit input { padding-right: 34px; }.field-with-unit small { position: absolute; right: 11px; top: 50%; color: #8797b2; font-size: 12px; transform: translateY(-50%); }
.save-profile,.google-connect,.logout-button { width: 100%; margin-top: 17px; padding: 12px 16px; border: 0; border-radius: 15px; color: #fff; background: #849bc6; box-shadow: 0 6px 14px rgba(103,123,169,.18); font: 600 15px "Yomogi Local", sans-serif; cursor: pointer; }.save-profile:disabled,.google-connect:disabled,.logout-button:disabled { opacity: .6; cursor: wait; }
.settings-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.settings-card-heading p { margin: 5px 0 0; color: #8797b2; font: 12px/1.45 "Yomogi Local", sans-serif; }.connection-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: #7586a2; background: #ecebf5; font: 11px "Yomogi Local", sans-serif; }.connection-badge.is-connected { color: #4f8776; background: #e2f2eb; }
.connection-list { display: grid; gap: 8px; margin-top: 15px; }.connection-list p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 11px; border-radius: 13px; background: #f5f3fb; }.connection-list strong { font-size: 13px; }.connection-list span { color: #8797b2; font: 11px "Yomogi Local", sans-serif; }.connection-note { margin: 14px 0 0; color: #7484a0; font: 12px/1.55 "Yomogi Local", sans-serif; }.google-connect { background: #6d91c5; }
.logout-button { margin-top: 12px; color: #7c6b79; background: #fff5f5; box-shadow: none; }.settings-status { min-height: 20px; margin: 14px 0 0; color: #71829d; text-align: center; font: 12px/1.5 "Yomogi Local", sans-serif; }.settings-login { min-height: 100vh; display: grid; place-items: center; color: #7385a1; font: 14px "Yomogi Local", sans-serif; }.settings-login[hidden] { display: none; }
@media (max-width: 390px) { .settings-shell { width: min(100% - 22px, 520px); }.settings-card { padding: 15px; }.settings-pair { grid-template-columns: 1fr; gap: 12px; } }