/* Settings layout has one owner. Shared controls remain in admin.css. */
#settings-view{gap:14px;padding-top:16px}
#settings-view .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
#settings-view .settings-grid>.form-panel{display:flex;flex-direction:column;min-width:0}
#settings-view .panel-heading{flex:0 0 auto;min-height:74px;padding:14px 16px}
#settings-view .panel-heading h2{margin:4px 0 0;font-size:var(--font-section)}
#settings-view .panel-heading>small{font-size:12px}
#settings-view .form-body{flex:1 1 auto;display:grid;gap:12px;padding:16px;min-width:0}
#settings-view .form-body label{display:grid;min-width:0;gap:6px;align-content:start;color:#aeb7bd;font-size:14px;line-height:20px}
#settings-view input:not([type=checkbox]),#settings-view select,#settings-view .select-trigger{box-sizing:border-box;width:100%;min-width:0;height:38px;min-height:38px;font-size:14px}
#settings-view textarea{box-sizing:border-box;width:100%;min-width:0;padding:10px 11px;border:1px solid #374149;border-radius:7px;background:#10161a;color:#edf1f3;font:inherit;line-height:1.5;resize:vertical}
#settings-view textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f2a20d1a}
#settings-view button{min-height:38px;padding:6px 12px}
#settings-view .form-body>button[type=submit]{width:max-content;max-width:100%;min-width:120px;height:38px;justify-self:end;align-self:flex-end}
#settings-view .settings-switch-field{display:grid;align-content:end;gap:6px;min-width:0;justify-self:start;align-self:end}
#settings-view .settings-switch-caption{font-size:14px;line-height:20px;color:#aeb7bd}
#settings-view .form-body label.product-check{display:inline-flex;align-items:center;justify-self:start;align-self:end;gap:10px;width:fit-content;max-width:100%;height:38px;min-height:38px;margin:0;padding:7px 12px;line-height:20px;white-space:nowrap}
#settings-view label.product-check input[type=checkbox]{flex:0 0 38px;width:38px;height:22px;min-height:22px;margin:0;grid-row:auto}
#settings-view label.product-check span{font-size:14px}
#settings-view .form-message{margin:0}
#settings-view .form-hint{margin:0;font-size:12px;line-height:1.5}

/* First row: maintenance and device release; next row: account and TTL. */
#settings-view .store-maintenance-body,#settings-view #device-release-settings-form>.form-body,
#settings-view .admin-account-body,#settings-view #heartbeat-form>.form-body{display:flex;flex-direction:column}
#settings-view .store-maintenance-control{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px;min-width:0;align-items:end}
#settings-view .store-maintenance-message-field textarea{height:38px;min-height:38px}
#settings-view #device-release-settings-form .heartbeat-duration-group{display:grid;gap:0;padding:0;border:0;background:none}
#settings-view .store-maintenance-body>button,#settings-view #device-release-settings-form button,
#settings-view .admin-account-body>button,#settings-view #heartbeat-form .form-body>button{margin-top:auto;flex:0 0 38px}
#settings-view .store-maintenance-panel.is-active{border-color:#f2a20d6b}
#settings-view .store-maintenance-panel.is-active #store-maintenance-state{color:#efc36f}
#settings-view .admin-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
#settings-view .heartbeat-duration-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#settings-view .heartbeat-duration-group{min-width:0;min-height:0;padding:12px;gap:10px}
#settings-view .heartbeat-duration-group>strong{min-height:20px;line-height:20px}
#settings-view .heartbeat-duration-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#settings-view .heartbeat-duration-group input{padding:0 8px}
#settings-view .heartbeat-info-row{display:none}

/* Matching first and second rows align payment and Bark across the cards. */
#settings-view .payment-settings-body{grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"enable basics" "credentials credentials" "message message" "save save";grid-template-rows:64px auto minmax(0,1fr) 38px;align-items:end}
#settings-view .payment-settings-body>.settings-switch-field{grid-area:enable}
#settings-view .payment-settings-grid{display:grid;grid-area:basics;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;min-width:0}
#settings-view .payment-credentials-row{display:grid;grid-area:credentials;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;min-width:0}
#settings-view .payment-url-fields{display:grid;min-width:0}
#settings-view .payment-settings-body>.form-message{grid-area:message}
#settings-view .payment-settings-body>button[type=submit]{grid-area:save}
#settings-view .jinghe-payment-fields{display:grid;grid-area:jinghe;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
#settings-view .jinghe-payment-fields .form-hint{grid-column:1/-1}
#settings-view .payment-settings-body:has(.jinghe-payment-fields:not([hidden])){grid-template-areas:"enable basics" "credentials credentials" "jinghe jinghe" "message message" "save save";grid-template-rows:64px auto auto minmax(0,1fr) 38px}
#settings-view .payment-credentials-row:has([data-payment-official][hidden]){grid-template-columns:1fr}
#settings-view .bark-settings-body{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"controls controls" "api icon" "message message" "save save";grid-template-rows:minmax(64px,auto) auto minmax(0,1fr) 38px;align-items:end}
#settings-view .notification-controls-row{grid-area:controls;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) max-content;gap:12px;min-width:0;align-items:end}
#settings-view .notification-controls-row>.settings-switch-field,#settings-view .notification-controls-row label.product-check{width:100%;justify-self:stretch}
#settings-view .notification-picker-field{width:100%;min-width:0;justify-self:stretch}
#settings-view .notification-picker-field button{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px;width:100%;text-align:left;white-space:nowrap}
#settings-view .bark-api-field{grid-area:api}
#settings-view .bark-icon-field{grid-area:icon}
#settings-view #send-test-bark{justify-self:end;width:max-content;white-space:nowrap}
#settings-view .bark-settings-body>.form-message{grid-area:message}
#settings-view .bark-settings-body>button[type=submit]{grid-area:save}

/* Template and SMTP columns share top/bottom edges. */
#settings-view .email-settings-panel,#settings-view .backup-settings-panel{grid-column:1/-1}
#settings-view .email-settings-body{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"subject toggles" "body settings" "body test" "message message" "save save";align-items:start;column-gap:18px}
#settings-view .email-template-subject{grid-area:subject}
#settings-view .email-settings-body>label.email-template-body{display:flex;flex-direction:column;grid-area:body;align-self:stretch;min-height:0}
#settings-view .email-template-body textarea{flex:1 1 auto;height:auto;min-height:220px}
#settings-view .email-toggle-row{display:grid;grid-area:toggles;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-self:end}
#settings-view .email-toggle-row label.product-check{width:100%;justify-self:stretch}
#settings-view .email-toggle-row .settings-switch-field{width:100%;justify-self:stretch}
#settings-view .email-settings-grid{display:grid;grid-area:settings;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}
#settings-view .email-settings-grid>label:nth-child(n){grid-column:auto}
#settings-view .email-test-row{display:grid;grid-area:test;grid-template-columns:minmax(120px,.65fr) minmax(0,1.35fr) auto;gap:12px;align-items:end}
#settings-view .email-test-row button{height:38px;min-height:38px;white-space:nowrap}
#settings-view .email-settings-body>.form-message{grid-area:message}
#settings-view .email-settings-body>button[type=submit]{grid-area:save}

/* Ten controls occupy two rows of five; the save action has its own footer. */
#settings-view .backup-settings-body{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 12px;align-items:end}
#settings-view .backup-settings-summary{display:grid;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
#settings-view .backup-settings-summary article{display:grid;align-content:start;gap:5px;min-width:0;min-height:80px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#10161a}
#settings-view .backup-settings-summary article span,#settings-view .backup-settings-summary article small{color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#settings-view .backup-settings-summary article strong{font-size:15px}
#settings-view .backup-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;gap:8px;align-self:end}
#settings-view .backup-actions button{width:100%;min-width:0;height:38px;white-space:nowrap}
#settings-view .backup-settings-body>.form-message,#settings-view .backup-settings-body>button[type=submit]{grid-column:1/-1}

/* Saved configuration is indicated without putting fake secrets in values. */
#settings-view .saved-secret-field{position:relative}
#settings-view .secret-field-state{position:absolute;right:0;top:0;padding:1px 5px;border-radius:4px;font-size:11px;line-height:16px;color:var(--muted);background:#20282d}
#settings-view .secret-field-state[data-state=saved]{color:#9ad3ad;background:#1d3028}
#settings-view .secret-field-state[data-state=pending]{color:#b4c8e0;background:#223043}
#settings-view .saved-secret-field input::placeholder{font-family:inherit;letter-spacing:.02em}

@media(max-width:1600px){#settings-view .payment-settings-panel,#settings-view .bark-settings-panel{grid-column:1/-1}#settings-view .backup-settings-body{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1400px){#settings-view .email-settings-body{grid-template-columns:1fr;grid-template-areas:"subject" "body" "toggles" "settings" "test" "message" "save"}}
@media(max-width:1180px){
 #settings-view .settings-grid{grid-template-columns:1fr}
 #settings-view .email-settings-body{grid-template-columns:1fr;grid-template-areas:"subject" "body" "toggles" "settings" "test" "message" "save"}
 #settings-view .backup-settings-body{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 #settings-view .store-maintenance-control{grid-template-columns:1fr}
 #settings-view .panel-heading{flex-wrap:wrap;gap:10px}
 #settings-view .heartbeat-duration-grid{grid-template-columns:1fr}
 #settings-view .email-toggle-row,#settings-view .email-test-row,#settings-view .email-settings-grid,
 #settings-view .backup-settings-body,#settings-view .backup-settings-summary{grid-template-columns:1fr}
 #settings-view .email-test-row button{justify-self:end}
 #settings-view .payment-settings-body,#settings-view .payment-settings-body:has(.jinghe-payment-fields:not([hidden])){grid-template-columns:1fr;grid-template-areas:"enable" "basics" "credentials" "jinghe" "message" "save";grid-template-rows:auto}
 #settings-view .payment-settings-grid,#settings-view .payment-credentials-row,#settings-view .jinghe-payment-fields{grid-template-columns:1fr}
 #settings-view .bark-settings-body{grid-template-columns:1fr;grid-template-areas:"controls" "api" "icon" "message" "save";grid-template-rows:auto}
 #settings-view .notification-controls-row{grid-template-columns:1fr 1fr}
 #settings-view .notification-controls-row>.settings-switch-field{grid-column:1/-1}
}
@media(max-width:480px){#settings-view .admin-account-grid{grid-template-columns:1fr}}
@media(max-width:1000px){#settings-view .notification-controls-row{grid-template-columns:minmax(0,1fr) auto}#settings-view .notification-controls-row>.settings-switch-field{grid-column:1/-1;width:100%}}
@media(max-width:430px){#settings-view .notification-controls-row{grid-template-columns:1fr}}

#bark-notification-dialog{width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid #46515a;border-radius:12px;background:#171e23;color:#edf1f3;overflow:auto;overscroll-behavior:contain}
#bark-notification-dialog::backdrop{background:#0009}
#bark-notification-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
#bark-notification-dialog h2{margin:0;font-size:18px}
#bark-notification-dialog .notification-event-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#bark-notification-dialog section{display:grid;align-content:start;gap:12px;min-width:0}
#bark-notification-dialog h3{margin:0 0 4px;font-size:14px;color:#edf1f3}
#settings-view #bark-notification-dialog label{display:flex;align-items:center;gap:8px;font-size:13px;color:#c4cdd2;line-height:20px}
#bark-notification-dialog input[type=checkbox]{appearance:auto;flex:0 0 16px;width:16px;height:16px;min-height:16px;margin:0;accent-color:var(--accent)}
#bark-notification-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
#bark-notification-dialog footer [data-notification-none]{margin-right:auto}
@media(max-width:600px){#bark-notification-dialog .notification-event-groups{grid-template-columns:1fr}}