#seafix-demo .sf-navigation-form { padding:20px; border:1px solid var(--sf-line); border-radius:18px; background:var(--sf-surface); }
#seafix-demo .sf-navigation-form fieldset { min-width:0; margin:0; padding:0; border:0; }
#seafix-demo .sf-navigation-form label { display:block; margin:20px 0 8px; color:var(--sf-heading); font-size:13px; font-weight:550; }
#seafix-demo .sf-navigation-form select { width:100%; min-height:46px; padding:11px 12px; border:1px solid var(--sf-line); border-radius:11px; background:var(--sf-surface-raised); color:var(--sf-heading); font:inherit; font-size:14px; }
#seafix-demo .sf-navigation-form select:focus-visible { outline:2px solid var(--sf-heading); outline-offset:2px; }
#seafix-demo .sf-navigation-preview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:4px; padding:13px 6px; border:1px solid var(--sf-line); border-radius:17px; background:var(--sf-canvas); }
#seafix-demo .sf-navigation-preview-item { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:9px; min-width:0; min-height:55px; color:var(--sf-muted); }
#seafix-demo .sf-navigation-preview-item > svg { width:22px!important; height:22px!important; }
#seafix-demo .sf-navigation-preview-item.is-add > svg { box-sizing:content-box; padding:8px; margin:-8px; border-radius:50%; background:var(--sf-heading); color:var(--sf-canvas); }
#seafix-demo .sf-navigation-preview-item small { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:16px; }
#seafix-demo .sf-navigation-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:25px; }
#seafix-demo .sf-navigation-actions button { min-height:44px; }
#seafix-demo .sf-navigation-form .is-error { color:var(--sf-danger); }
#seafix-demo .sf-bottom-nav [data-nav-slot] { -webkit-touch-callout:none; user-select:none; }
#seafix-demo .sf-bottom-nav [data-nav-slot] .sf-nav-label { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:479px) {
  #seafix-demo .sf-navigation-form { padding:15px 12px; }
  #seafix-demo .sf-navigation-form select { font-size:16px; }
  #seafix-demo .sf-navigation-actions { flex-wrap:wrap; gap:10px; }
  #seafix-demo .sf-navigation-actions button { flex:1; }
  #seafix-demo .sf-navigation-preview-item small { font-size:9px; }
}