/* Account settings: preserve existing controls and their forms. */
#seafix-demo :is([data-screen="account-login"],[data-screen="account-security"]) .sf-profile-options {display:flex;flex-direction:column;gap:0}
#seafix-demo :is([data-screen="account-login"],[data-screen="account-security"]) .sf-profile-option {border:0;border-bottom:1px solid var(--sf-settings-line);border-radius:0;background:transparent}
#seafix-demo :is([data-screen="account-login"],[data-screen="account-security"]) .sf-profile-option>summary {padding:22px 4px;min-height:82px}
#seafix-demo [data-screen="account-login"] #sf-device-security {order:-1;border:0;margin-bottom:12px}
#seafix-demo [data-screen="account-login"] #sf-device-security>summary {display:block;position:relative;min-height:220px;padding:24px;border-radius:12px;background:#000 url('/fyv-account-keys.webp') right center / auto 100% no-repeat;color:#fff}
#seafix-demo #sf-device-security>summary .sf-settings-summary-copy {display:block;position:relative;z-index:1;max-width:58%}
#seafix-demo #sf-device-security>summary .sf-settings-summary-copy>svg,#seafix-demo #sf-device-security>summary>svg {display:none}
#seafix-demo #sf-device-security>summary strong {display:block;color:#fff;font-size:21px;line-height:1.3;font-weight:600}
#seafix-demo #sf-device-security>summary small {display:block;color:#d2d5db;font-size:12px;line-height:1.5;margin-top:10px}
#seafix-demo .fyv-account-feature-action {display:inline-flex;margin-top:18px;padding:12px 14px;border-radius:8px;background:#fff;color:#15171b;font-size:12px;font-weight:600}
#seafix-demo .fyv-account-feature {min-height:220px;margin-bottom:12px;padding:24px;border-radius:12px;background:#000 url('/fyv-account-qr.webp') right 12px center / 39% auto no-repeat;color:#fff}
#seafix-demo .fyv-account-feature>strong,#seafix-demo .fyv-account-feature>p {display:block;max-width:55%;color:#fff}
#seafix-demo .fyv-account-feature>strong {font-size:21px;line-height:1.3}
#seafix-demo .fyv-account-feature>p {font-size:12px;line-height:1.5;color:#d2d5db;margin:10px 0 18px}
#seafix-demo .fyv-account-feature>button {width:auto;min-height:42px;padding:10px 14px;background:#fff;color:#15171b;border:0;border-radius:8px}
#seafix-demo [data-screen="profile"] .sf-account-avatar {border-radius:50%;background:light-dark(#eceef1,#393d43);color:light-dark(#343a44,#e6e8eb)}
#seafix-demo [data-screen="profile"] .sf-account-role {display:inline-block;padding:3px 8px;border-radius:6px;background:light-dark(#fff0ce,#524329);color:light-dark(#6f5017,#f4dea7)}
@media(max-width:759px){#seafix-demo.sf-settings-view .sf-settings-shell:has(:is([data-screen="profile"],[data-screen="account-login"],[data-screen="account-security"],[data-screen="account-privacy"]):not([hidden])) {width:100%;margin-inline:0} #seafix-demo.sf-settings-view .sf-settings-content:has(:is([data-screen="profile"],[data-screen="account-login"],[data-screen="account-security"],[data-screen="account-privacy"]):not([hidden])) {border-radius:0}}

#seafix-demo [data-screen="profile"] .sf-account-details>div {display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:16px;row-gap:4px;align-items:center}
#seafix-demo [data-screen="profile"] .sf-account-details>div>svg {grid-row:1 / span 2;width:20px;height:20px;color:var(--sf-settings-muted)}
#seafix-demo [data-screen="profile"] .sf-account-details>div>dd {grid-column:2;text-align:left}
#seafix-demo [data-screen="profile"] [data-self-position] {width:100%;text-align:left;border:0;background:light-dark(#f0f1f3,#34383d);min-height:48px}

#seafix-demo .fyv-account-feature>button.sf-primary-action {background:#fff!important;color:#15171b!important;position:relative;z-index:1}
#seafix-demo .fyv-account-feature>strong,#seafix-demo .fyv-account-feature>p {max-width:55%}
#seafix-demo [data-screen="account-login"] #sf-device-security>summary {background-size:55% auto}
#seafix-demo .fyv-account-feature-action {white-space:nowrap}
#seafix-demo [data-screen="account-login"] #sf-device-security>summary {min-height:190px}
#seafix-demo .fyv-account-feature {min-height:190px}
#seafix-demo .fyv-account-feature>strong {font-size:18px;max-width:61%;white-space:nowrap}
#seafix-demo .fyv-account-feature>p {max-width:57%;margin-bottom:14px}
#seafix-demo .sf-settings-content [data-screen="profile"] [data-self-position] {text-align:left;padding-inline:16px;justify-content:flex-start}
@media(max-width:350px){#seafix-demo .fyv-account-feature>strong {white-space:normal}}
#seafix-demo [data-screen="account-login"] .sf-profile-logout,
#seafix-demo [data-screen="account-login"] .sf-profile-logout :is(strong,svg) {color:var(--sf-settings-ink)}
#seafix-demo .fyv-account-feature {background-size:min(39%, 165px) auto}
#seafix-demo [data-screen="account-login"] #sf-device-security>summary {background-size:min(55%, 200px) auto}
/* Expanded account options are distinct while preserving their native controls. */
#seafix-demo :is([data-screen="account-login"],[data-screen="account-security"]) .sf-profile-option[open]:not(#sf-device-security) {background:light-dark(#f1f2f4,#323438);border-radius:10px}
#seafix-demo #sf-device-security[open]>.sf-profile-form {background:light-dark(#f1f2f4,#323438);border-radius:0 0 10px 10px;padding:18px 20px 20px}
#seafix-demo [data-screen="account-login"] #sf-logout {min-height:82px;padding:22px 4px;text-align:left;justify-content:flex-start}
#seafix-demo #sf-device-security .sf-security-device-row {display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px 12px;padding:16px;border:1px solid var(--sf-settings-line);border-radius:10px;background:var(--sf-settings-paper)}
#seafix-demo #sf-device-security .sf-security-device-row>.sf-security-device-copy {grid-column:2;min-width:0;overflow-wrap:anywhere}
#seafix-demo #sf-device-security .sf-security-device-row>button {grid-column:2;justify-self:start;margin:0;max-width:100%;white-space:normal}
#seafix-demo #sf-device-security [data-passkey-confirm] {grid-column:1/-1;min-width:0}
#seafix-demo #sf-device-security [data-passkey-confirm] .sf-confirm-actions {display:flex;flex-wrap:wrap;gap:8px}
/* Installation guide: the browser owns actual installation, not these instructions. */
#seafix-demo .fyv-pwa-guide[hidden],#seafix-demo .fyv-pwa-guide [hidden] {display:none!important}
#seafix-demo .fyv-pwa-guide {display:grid;gap:22px;color:var(--sf-settings-ink)}
#seafix-demo .fyv-pwa-device {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:5px;border:1px solid var(--sf-settings-line);border-radius:12px}
#seafix-demo .fyv-pwa-guide button {font:inherit;cursor:pointer}
#seafix-demo .fyv-pwa-device button,#seafix-demo .fyv-pwa-browsers button {display:flex;align-items:center;gap:12px;min-width:0;min-height:58px;padding:10px 14px;border:0;border-radius:9px;background:transparent;color:var(--sf-settings-ink);text-align:left;font-size:13px;font-weight:600}
#seafix-demo .fyv-pwa-device button[aria-pressed="true"] {background:var(--sf-settings-selection)}
#seafix-demo .fyv-pwa-guide img,#seafix-demo .fyv-pwa-guide button svg {width:26px!important;height:26px!important;flex:none}
#seafix-demo .fyv-pwa-guide img {filter:light-dark(none,invert(1))}
#seafix-demo .fyv-pwa-guide h3 {margin:0 0 10px;font-size:15px;color:var(--sf-settings-ink)}
#seafix-demo .fyv-pwa-browsers>div {display:flex;gap:10px;flex-wrap:wrap}
#seafix-demo .fyv-pwa-browsers button {border:1px solid var(--sf-settings-line);min-width:175px}
#seafix-demo .fyv-pwa-browsers button[aria-pressed="true"] {background:#17191d;color:#fff;border-color:#17191d}
#seafix-demo .fyv-pwa-browsers button[aria-pressed="true"] img {filter:invert(1)}
#seafix-demo .fyv-pwa-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
#seafix-demo .fyv-pwa-steps li {min-height:120px;padding:16px;border:1px solid var(--sf-settings-line);border-radius:10px;font-size:13px;line-height:1.5}
#seafix-demo .fyv-pwa-step-number {display:grid;place-items:center;width:28px;height:28px;margin-bottom:12px;border-radius:50%;background:var(--sf-settings-ink);color:var(--sf-settings-paper);font-weight:600}
#seafix-demo .fyv-pwa-minimum {font-size:12px;color:var(--sf-settings-muted)}
#seafix-demo .fyv-pwa-warning {padding:18px;border-radius:10px;background:#17191d;color:#fff}
#seafix-demo .fyv-pwa-warning strong {color:#fff;font-size:13px}
#seafix-demo .fyv-pwa-warning p {color:#d4d8df;font-size:12px;line-height:1.55;margin:6px 0 0}
#seafix-demo .fyv-pwa-enhanced [data-pwa-state="ios"],#seafix-demo .fyv-pwa-enhanced [data-pwa-state="unsupported"] {display:none!important}
#seafix-demo .fyv-pwa-enhanced [data-pwa-state="prompt"] .sf-app-details-description {display:none}
#seafix-demo .fyv-pwa-guide button:focus-visible {outline:2px solid var(--sf-settings-ink);outline-offset:2px}
@media(max-width:599px){#seafix-demo .fyv-pwa-device button {flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9px 4px;font-size:11px;gap:5px}#seafix-demo .fyv-pwa-steps {grid-template-columns:1fr}#seafix-demo .fyv-pwa-steps li {min-height:0}#seafix-demo .fyv-pwa-browsers button {flex:1;min-width:125px}}
#seafix-demo .fyv-pwa-guide img[src$=".png"],#seafix-demo .fyv-pwa-browsers button[aria-pressed="true"] img[src$=".png"] {filter:none}
#seafix-demo .fyv-pwa-device img[src*="android"] {filter:invert(52%) sepia(93%) saturate(627%) hue-rotate(38deg) brightness(98%)}
#seafix-demo .fyv-pwa-browsers img[src*="microsoftedge"] {filter:invert(39%) sepia(88%) saturate(1540%) hue-rotate(156deg) brightness(92%)}
#seafix-demo .fyv-pwa-browsers button[aria-pressed="true"] img[src*="microsoftedge"] {filter:invert(64%) sepia(80%) saturate(1163%) hue-rotate(143deg) brightness(100%)}
#seafix-demo .fyv-pwa-credit {margin:0;color:var(--sf-settings-muted);font-size:10px;line-height:1.4}

/* Mac Safari examples use locally stored, language-specific illustrations. */
#seafix-demo .fyv-pwa-guide .fyv-pwa-art {height:auto;aspect-ratio:1.55;background:transparent;border:0}
#seafix-demo .fyv-pwa-guide .fyv-pwa-art img {display:block;width:100%!important;height:100%!important;object-fit:contain;filter:none!important;border-radius:8px}
#seafix-demo [data-guide-page="safari"] .fyv-pwa-steps li {display:flex;flex-direction:column;min-height:290px}
#seafix-demo .fyv-pwa-safari-copy {display:flex;gap:12px;align-items:flex-start}
#seafix-demo .fyv-pwa-safari-copy .fyv-pwa-step-number {flex:none;margin:0}
#seafix-demo .fyv-pwa-safari-copy strong {display:block;font-size:13px;line-height:1.35;color:var(--sf-settings-ink)}
#seafix-demo .fyv-pwa-safari-copy p {margin:8px 0 0;color:var(--sf-settings-muted);font-size:12px;line-height:1.45}
#seafix-demo [data-guide-page="safari"] .fyv-pwa-art {margin-top:auto;padding-top:18px}
@media(max-width:599px){#seafix-demo [data-guide-page="safari"] .fyv-pwa-steps li {min-height:0}}
@media (min-width:1200px) {
 #seafix-demo [data-guide-page="safari"] .fyv-pwa-steps li {min-height:370px}
 #seafix-demo.sf-settings-view:has([data-screen="app-install"]:not([hidden]) [data-guide-page="safari"]:not([hidden])) .sf-phone {max-width:100%}
 #seafix-demo.sf-settings-view:has([data-screen="app-install"]:not([hidden]) [data-guide-page="safari"]:not([hidden])) .sf-settings-shell {grid-template-columns:minmax(0,.39fr) minmax(0,1fr)}
}
@media (min-width:1200px) {
 #seafix-demo .sf-settings-shell .sf-settings-page[data-screen="app-install"]:has([data-guide-page="safari"]:not([hidden])) {max-width:none!important}
}

/* Use the actual app icon in the illustrated installation dialog. */
#seafix-demo .fyv-pwa-guide .fyv-pwa-art-dialog {position:relative}
#seafix-demo .fyv-pwa-guide .fyv-pwa-art-dialog img.fyv-pwa-original-mark {position:absolute;left:9.1%;top:calc(34.8% + 11.736px);width:16.7%!important;height:auto!important;aspect-ratio:1;border-radius:22%}