/* One persistent category list, one live detail surface. Keep the standard page edges. */
#seafix-demo.sf-settings-view { --sf-settings-ground:light-dark(#fff,#242426); }
#seafix-demo.sf-settings-view::after { display:none; }
#seafix-demo.sf-settings-view .sf-settings-shell {
 display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); column-gap:18px;
 width:calc(100% - 2 * var(--sf-page-gutter)); height:100%; min-height:0;
 margin-inline:var(--sf-page-gutter); padding-top:16px; background:transparent;
}
#seafix-demo .sf-settings-sidebar { display:none!important; }
#seafix-demo.sf-settings-view .sf-settings-content {
 height:100%; min-width:0; min-height:0; padding:28px 30px 48px;
 border:0; border-radius:18px 18px 0 0; background:var(--sf-settings-paper);
 -webkit-backdrop-filter:none; backdrop-filter:none;
 -webkit-mask-image:none; mask-image:none; overflow-y:auto; scrollbar-width:thin;
}
#seafix-demo.sf-settings-view .sf-settings-content::before { display:none; }
#seafix-demo .sf-settings-shell .sf-settings-hub {
 width:100%; max-width:none!important; min-width:0; min-height:0; margin:0; padding:7px 0 32px;
 overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin;
}
#seafix-demo .sf-hub-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
#seafix-demo .sf-hub-category { min-width:0; padding:0; border:0; background:transparent; box-shadow:none; }
#seafix-demo .sf-hub-heading { display:flex; align-items:center; gap:12px; min-height:38px; margin:0 0 12px; padding-left:9px; }
#seafix-demo .sf-hub-icon {
 flex:0 0 28px; width:28px; height:32px; display:grid; place-items:center;
 border:0; border-radius:0; background:transparent; box-shadow:none;
 color:light-dark(#4c5964,#b2bec8);
}
#seafix-demo .sf-hub-icon svg { width:27px!important; height:27px!important; stroke-width:1.55; }
#seafix-demo .sf-hub-heading h2 { margin:0; color:var(--sf-settings-ink); font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-.025em; }
#seafix-demo .sf-hub-heading p { margin:4px 0 0; color:var(--sf-settings-muted); font-size:11.5px; line-height:1.45; }
#seafix-demo .sf-hub-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 9px; align-items:start; }
#seafix-demo .sf-hub-option {
 display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:42px;
 margin:0; padding:10px 11px; border:0; border-radius:8px; background:transparent; box-shadow:none;
 color:var(--sf-settings-ink); font:inherit; text-align:left; cursor:pointer;
}
#seafix-demo .sf-hub-option > svg { flex:0 0 18px; width:18px!important; height:18px!important; color:var(--sf-settings-muted); stroke-width:1.6; }
#seafix-demo .sf-hub-option > span { min-width:0; }
#seafix-demo .sf-hub-option > svg:last-child { display:none; }
#seafix-demo .sf-hub-option strong { display:block; font-size:13px; font-weight:450; line-height:1.35; overflow-wrap:anywhere; }
#seafix-demo .sf-hub-option small { display:none; }
#seafix-demo .sf-hub-option[aria-current="page"] { background:light-dark(#e1e6e9,#343c43); }
#seafix-demo .sf-hub-option[aria-current="page"] > svg { color:light-dark(#435963,#c4d3dc); }
#seafix-demo .sf-hub-option:focus-visible, #seafix-demo :is(.sf-hub-back,.sf-hub-close):focus-visible { outline:2px solid var(--sf-settings-ink); outline-offset:3px; }
@media(hover:hover) { #seafix-demo .sf-hub-option:hover { background:light-dark(#e8ebee,#30363b); } }
#seafix-demo :is(.sf-hub-back,.sf-hub-close) {
 display:none; align-items:center; gap:8px; margin:0 0 22px; padding:9px 0; min-height:44px;
 width:100%; border:0; background:transparent; color:var(--sf-settings-muted); font:inherit; font-size:13px; cursor:pointer;
}
#seafix-demo :is(.sf-hub-back,.sf-hub-close) svg { width:18px!important; height:18px!important; }
#seafix-demo .sf-settings-hub #sf-settings-system-group {
 margin-top:28px; padding:0 9px; border:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 9px;
}
#seafix-demo .sf-settings-hub #sf-settings-system-group > p { grid-column:1/-1; margin-bottom:9px; }
#seafix-demo .sf-settings-hub #sf-settings-system-group .sf-settings-link { width:100%; margin:0; padding:10px 0; font-size:12px; }
#seafix-demo :is(.sf-hub-category,#sf-settings-system-group)[hidden] { display:none; }
#seafix-demo .sf-hub-heading h2:focus { outline:none; }

/* The profile is part of the white surface, without a second enclosing card. */
#seafix-demo .sf-settings-content .sf-settings-page > .sf-screen-title { margin-bottom:25px; }
#seafix-demo .sf-settings-content .sf-screen-title h2 { font-size:24px; font-weight:550; }
#seafix-demo .sf-settings-content .sf-screen-title p { font-size:12px; margin-top:5px; }
#seafix-demo .sf-settings-content .sf-profile-summary { border:0; border-radius:0; background:transparent; box-shadow:none; }
#seafix-demo .sf-profile-summary .sf-account-identity { padding:2px 0 23px; gap:15px; }
#seafix-demo .sf-profile-summary .sf-account-avatar { flex-basis:64px; width:64px; height:64px; border-radius:20px; background:light-dark(#e5eae6,#37463e); color:light-dark(#527364,#b8d1c1); }
#seafix-demo .sf-profile-summary .sf-account-details { padding:0; }
#seafix-demo .sf-profile-summary .sf-account-details > div { padding:18px 0; grid-template-columns:minmax(95px,.8fr) minmax(0,1.2fr); gap:18px; }
#seafix-demo .sf-settings-content .sf-settings-caption { margin-top:19px; font-size:11.5px; }
#seafix-demo .sf-settings-content [data-screen="tutorial"] { max-width:100%!important; }
#seafix-demo.sf-settings-view.sf-tutorial-view .sf-phone { max-width:var(--sf-shell-width); }
#seafix-demo .sf-settings-content .sf-tutorial-layout { display:flex; flex-direction:column; gap:22px; }
#seafix-demo .sf-settings-content .sf-tutorial-nav { position:static; width:100%; max-height:none; }
#seafix-demo .sf-settings-content .sf-tutorial-guide { width:100%; padding:0; border-radius:0; }
#seafix-demo .sf-settings-content .sf-tutorial-guide::before { display:none; }
#seafix-demo .sf-settings-content .sf-guide-controls { flex-wrap:wrap; }

@media(min-width:1400px) {
 #seafix-demo.sf-settings-view .sf-settings-shell { column-gap:20px; }
 #seafix-demo .sf-hub-grid { gap:28px; }
 #seafix-demo .sf-hub-options { column-gap:14px; }
}
@media(max-width:1199px) and (min-width:1000px) {
 #seafix-demo.sf-settings-view .sf-settings-shell { column-gap:16px; }
 #seafix-demo.sf-settings-view .sf-settings-content { padding-inline:25px; }
 #seafix-demo .sf-hub-option { padding-inline:8px; gap:8px; }
 #seafix-demo .sf-hub-option strong { font-size:12.5px; }
}
@media(max-width:999px) {
 #seafix-demo.sf-settings-view .sf-settings-shell { display:block; height:auto; min-height:100%; padding-top:12px; overflow:visible; }
 #seafix-demo.sf-settings-view .sf-settings-content { min-height:calc(100svh - var(--sf-header-height,80px)); height:auto; padding:14px 24px calc(var(--sf-nav-height,72px) + 28px); overflow:visible; }
 #seafix-demo .sf-settings-shell .sf-settings-hub { display:none; padding:0 0 32px; overflow:visible; }
 #seafix-demo .sf-settings-shell.is-menu-open .sf-settings-hub { display:block; }
 #seafix-demo .sf-settings-shell.is-menu-open .sf-settings-content { display:none; }
 #seafix-demo :is(.sf-hub-back,.sf-hub-close) { display:flex; }
 #seafix-demo .sf-hub-back { margin-bottom:15px; }
 #seafix-demo .sf-hub-close { margin-bottom:12px; }
 #seafix-demo .sf-hub-option { min-height:44px; }
}
@media(max-width:759px) {
 #seafix-demo.sf-settings-view .sf-settings-shell { width:calc(100% - 2 * max(12px,env(safe-area-inset-left,0px))); margin-inline:max(12px,env(safe-area-inset-left,0px)); }
}
@media(max-width:479px) {
 #seafix-demo.sf-settings-view .sf-settings-content { padding-inline:18px; }
 #seafix-demo .sf-hub-heading { gap:10px; padding-left:7px; }
 #seafix-demo .sf-hub-heading h2 { font-size:17px; }
 #seafix-demo .sf-hub-heading p { font-size:11px; }
 #seafix-demo .sf-hub-icon { flex-basis:25px; width:25px; }
 #seafix-demo .sf-hub-icon svg { width:25px!important; height:25px!important; }
 #seafix-demo .sf-hub-options { column-gap:4px; }
 #seafix-demo .sf-hub-option { padding-inline:7px; gap:7px; }
 #seafix-demo .sf-hub-option strong { font-size:12px; }
 #seafix-demo .sf-profile-summary .sf-account-details > div { grid-template-columns:1fr; gap:5px; }
 #seafix-demo .sf-profile-summary .sf-account-details dd { text-align:left; }
}

/* The mobile Settings entry is the option list; each detail returns from its title. */
#seafix-demo.sf-settings-view .sf-topbar #sf-settings-back { display:none!important; }
#seafix-demo .sf-settings-shell.is-overview { display:block; }
#seafix-demo .sf-settings-shell.is-overview .sf-settings-hub { display:block; }
#seafix-demo .sf-settings-shell.is-overview .sf-settings-content { display:none; }
#seafix-demo .sf-settings-content .sf-settings-page > .sf-screen-title { position:relative; padding-right:52px; }
#seafix-demo .sf-settings-return { position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:44px; min-height:44px; margin:0; padding:10px; border:0; border-radius:10px; background:transparent; color:var(--sf-settings-ink); cursor:pointer; }
#seafix-demo .sf-settings-return svg { width:22px; height:22px; }
#seafix-demo .sf-settings-return:hover { background:var(--sf-settings-selection); }
#seafix-demo .sf-settings-return:focus-visible { outline:2px solid var(--sf-settings-blue); outline-offset:2px; }
@media(min-width:1000px) { #seafix-demo .sf-settings-return { display:none; } }


/* Approved settings navigation. */
#seafix-demo .sf-settings-shell .sf-settings-hub { background:var(--sf-settings-paper); border-radius:18px 18px 0 0; padding:0 20px 32px; }
#seafix-demo .sf-hub-grid { gap:22px; }
#seafix-demo .sf-hub-featured { margin:0 -20px; padding:10px 0; border-radius:18px 18px 0 0; background:linear-gradient(125deg,#242426,#55565a); color:#fff; }
#seafix-demo .sf-hub-featured .sf-hub-heading { display:none; }
#seafix-demo .sf-hub-featured .sf-hub-options { display:block; }
#seafix-demo .sf-hub-featured .sf-hub-option { min-height:56px; padding:10px 20px; color:#fff; border-radius:0; }
#seafix-demo .sf-hub-featured .sf-hub-option > svg { color:#fff; width:22px!important; height:22px!important; flex-basis:22px; }
#seafix-demo .sf-hub-featured .sf-hub-option > svg:last-child { display:block; margin-left:auto; width:18px!important; height:18px!important; flex-basis:18px; }
#seafix-demo .sf-hub-featured .sf-hub-option strong { font-weight:650; }
#seafix-demo .sf-hub-featured .sf-hub-option small { display:block; color:#eee; font-size:11px; margin-top:2px; line-height:1.2; }
#seafix-demo .sf-hub-featured [data-settings-category="pwa"]:not([hidden]) + .sf-hub-option { position:relative; }
#seafix-demo .sf-hub-featured [data-settings-category="pwa"]:not([hidden]) + .sf-hub-option::before { content:""; position:absolute; top:0; left:20px; right:20px; border-top:1px solid #ffffff45; }
#seafix-demo .sf-hub-featured .sf-hub-option[aria-current="page"] { background:#ffffff20; }
#seafix-demo .sf-hub-featured .sf-hub-option:focus-visible { outline:2px solid white; outline-offset:-3px; }
#seafix-demo .sf-hub-heading h2 { font-size:14px; font-weight:700; }
#seafix-demo .sf-hub-heading p { display:none; }
#seafix-demo .sf-hub-icon { flex-basis:20px; width:20px; height:22px; }
#seafix-demo .sf-hub-icon svg { width:18px!important; height:18px!important; }
#seafix-demo .sf-hub-heading { min-height:22px; margin-bottom:8px; }
#seafix-demo .sf-settings-hub #sf-settings-system-group { display:none; }
@media(min-width:1000px) { #seafix-demo.sf-settings-view .sf-settings-shell { grid-template-columns:minmax(250px,.55fr) minmax(0,1.45fr); column-gap:18px; } #seafix-demo .sf-hub-options { grid-template-columns:1fr; } #seafix-demo .sf-hub-option > svg:last-child { display:block; margin-left:auto; } }
@media(max-width:999px) { #seafix-demo .sf-settings-shell .sf-settings-hub { padding:0 20px 32px; } }
@media(max-width:479px) { #seafix-demo .sf-hub-heading h2 { font-size:14px; } #seafix-demo .sf-hub-icon { flex-basis:20px; width:20px; } #seafix-demo .sf-hub-icon svg { width:18px!important; height:18px!important; } }
@media(hover:hover) { #seafix-demo .sf-hub-featured .sf-hub-option:hover { background:#ffffff20; } }
#seafix-demo .sf-hub-featured .sf-hub-option > span { flex:1; }
@media(min-width:1000px) { #seafix-demo .sf-hub-option > span { flex:1; } }