/* SynthIQ ecosystem palette — reference values supplied from SynthIQ Appearance. */
:root{--bg:#f7f5ef!important;--surface:#fff!important;--surface-2:#f2efe7!important;--ink:#171b1d!important;--muted:#5b6670!important;--line:#d2ccc0!important;--accent:#a94700;--accent-soft:#f3e7dc;--control:#a94700!important;--control-ink:#fff!important;--mint:#087c58!important;--mint-soft:#e8f3ed!important;--shadow:0 7px 22px rgba(23,27,29,.07)!important}html,body{background:#f7f5ef!important;color:#171b1d}.hero .eyebrow,.section-heading .eyebrow,.settings-kicker,.settings-group-label{color:#a94700!important}.hero h1,.section-heading h2,.collection-name,.bookmark-title strong,.appearance-copy strong{color:#171b1d}.quick-input-wrap,.collection-card,.bookmark-card,.appearance-card,.setting-row,.sync-chip,.icon-button,.small-button{border-color:#d2ccc0!important}.add-button,.primary-button,.filter-pill.active{background:#a94700!important;border-color:#a94700!important;color:#fff!important}.inbox-card{border-color:#d2ccc0!important;background:linear-gradient(100deg,#edf5ef,#fff 72%)!important}.inbox-icon{background:#e3f1e9!important}.bottom-nav{background:rgba(247,245,239,.97)!important;border-color:#d2ccc0!important;box-shadow:0 14px 38px rgba(23,27,29,.14)!important}.nav-item{color:#5b6670!important}.nav-item.active{background:#fff!important;color:#171b1d!important;box-shadow:inset 0 0 0 1px #d2ccc0!important}.nav-item#navSearchBtn{background:#a94700!important;border-color:#a94700!important;color:#fff!important;box-shadow:0 9px 22px rgba(169,71,0,.24)!important}.theme-option.active{border-color:#a94700!important;box-shadow:0 0 0 1px #a94700!important}.light-preview{background:#f7f5ef!important}.light-preview:before,.light-preview:after{background:#fff!important}.light-preview i{background:#a94700!important}.topbar:before{display:none!important}.brand-title{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.brand-title strong{font-size:21px;font-weight:850;letter-spacing:-.045em;color:var(--ink)}.brand-title span{font-size:12px;font-weight:650;color:var(--muted)}.top-actions{margin-left:auto}.about-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}.about-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--accent);color:#fff;font-size:15px;font-weight:850}.about-copy strong{font-size:16px;color:var(--ink)}.about-copy strong span{font-size:12px;font-weight:650;color:var(--muted)}.about-copy p{margin:5px 0 6px;color:var(--muted);font-size:13px;line-height:1.45}.about-copy small{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.bookmark-brand-shell{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,var(--surface-2),var(--surface))}.bookmark-brand-shell.hidden{display:none}.bookmark-brand-fallback{display:grid;justify-items:center;gap:5px;padding:6px;max-width:100%}.bookmark-brand-fallback .bookmark-favicon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:850}.bookmark-brand-fallback small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:8px}.bookmark-visual{position:relative;overflow:hidden}.bookmark-preview-image{width:100%;height:100%;object-fit:cover}.bookmark-preview-image.hidden{display:none}.bookmark-app-icon{width:34px;height:34px;object-fit:contain;border-radius:9px}.favicon-mini{z-index:3}
/* Expanded collection palette. */
.collection-card[data-color=amber] .collection-icon{background:#ffedc2;color:#9a6100}.collection-card[data-color=orange] .collection-icon{background:#ffe2c5;color:#b45100}.collection-card[data-color=red] .collection-icon{background:#ffe0de;color:#b5332d}.collection-card[data-color=rose] .collection-icon{background:#ffe0e5;color:#a93b55}.collection-card[data-color=purple] .collection-icon{background:#eee0ff;color:#7343ad}.collection-card[data-color=indigo] .collection-icon{background:#e3e5ff;color:#4e56b5}.collection-card[data-color=sky] .collection-icon{background:#dff1ff;color:#2374a8}.collection-card[data-color=cyan] .collection-icon{background:#d9f5f7;color:#147681}.collection-card[data-color=teal] .collection-icon{background:#daf1ec;color:#176f62}.collection-card[data-color=green] .collection-icon{background:#dff2dc;color:#397c36}.collection-card[data-color=lime] .collection-icon{background:#edf4cf;color:#687a1d}.collection-card[data-color=slate] .collection-icon{background:#e4e8eb;color:#53616c}
html[data-theme="dark"]{--bg:#171b1d!important;--surface:#202528!important;--surface-2:#292f33!important;--ink:#f7f5ef!important;--muted:#aeb5ba!important;--line:#485056!important;--accent:#d66a1d;--accent-soft:#3a281d;--control:#d66a1d!important;--control-ink:#fff!important;--mint:#56c59b!important;--mint-soft:#19352c!important;--shadow:0 8px 26px rgba(0,0,0,.28)!important}html[data-theme="dark"],html[data-theme="dark"] body{background:#171b1d!important;color:#f7f5ef}html[data-theme="dark"] .hero .eyebrow,html[data-theme="dark"] .section-heading .eyebrow,html[data-theme="dark"] .settings-kicker,html[data-theme="dark"] .settings-group-label{color:#d66a1d!important}html[data-theme="dark"] .hero h1,html[data-theme="dark"] .section-heading h2,html[data-theme="dark"] .collection-name,html[data-theme="dark"] .bookmark-title strong,html[data-theme="dark"] .appearance-copy strong{color:#f7f5ef}html[data-theme="dark"] .quick-input-wrap,html[data-theme="dark"] .collection-card,html[data-theme="dark"] .bookmark-card,html[data-theme="dark"] .appearance-card,html[data-theme="dark"] .setting-row,html[data-theme="dark"] .sync-chip,html[data-theme="dark"] .icon-button,html[data-theme="dark"] .small-button{background:#202528!important;border-color:#485056!important;color:#f7f5ef!important}html[data-theme="dark"] .add-button,html[data-theme="dark"] .primary-button,html[data-theme="dark"] .filter-pill.active{background:#d66a1d!important;border-color:#d66a1d!important;color:#fff!important}html[data-theme="dark"] .inbox-card{background:linear-gradient(100deg,#19352c,#202528 72%)!important;border-color:#485056!important}html[data-theme="dark"] .bottom-nav{background:rgba(23,27,29,.97)!important;border-color:#485056!important}html[data-theme="dark"] .nav-item{color:#aeb5ba!important}html[data-theme="dark"] .nav-item.active{background:#292f33!important;color:#f7f5ef!important;box-shadow:inset 0 0 0 1px #485056!important}html[data-theme="dark"] .nav-item#navSearchBtn{background:#d66a1d!important;border-color:#d66a1d!important;color:#fff!important;box-shadow:0 9px 22px rgba(0,0,0,.34)!important}html[data-theme="dark"] .theme-option.active{border-color:#d66a1d!important;box-shadow:0 0 0 1px #d66a1d!important}.dark-preview{background:#171b1d!important}.dark-preview:before,.dark-preview:after{background:#292f33!important}.dark-preview i{background:#d66a1d!important}html[data-theme="dark"] .about-card{background:#202528;border-color:#485056}html[data-theme="dark"] .about-mark{background:#d66a1d}html[data-theme="dark"] .bookmark-brand-shell{background:linear-gradient(145deg,#292f33,#202528)}@media(max-width:430px){.brand-title{gap:6px}.brand-title strong{font-size:20px}.brand-title span{font-size:11px}}

/* Staging UI polish: professional collection icon treatment. */
.collection-icon{
  width:50px;
  height:50px;
  border:1px solid color-mix(in srgb,var(--line) 82%,currentColor)!important;
  border-radius:14px;
  background:var(--surface-2)!important;
  color:var(--collection-icon-color,var(--ink))!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.collection-icon svg{width:27px;height:27px;stroke-width:1.8}
.collection-card[data-color=yellow]{--collection-icon-color:#8a6500}
.collection-card[data-color=amber]{--collection-icon-color:#9a6100}
.collection-card[data-color=orange]{--collection-icon-color:#a64f08}
.collection-card[data-color=coral]{--collection-icon-color:#a94a36}
.collection-card[data-color=red]{--collection-icon-color:#a83b35}
.collection-card[data-color=rose]{--collection-icon-color:#a53f58}
.collection-card[data-color=pink]{--collection-icon-color:#a23e64}
.collection-card[data-color=violet]{--collection-icon-color:#664aa7}
.collection-card[data-color=purple]{--collection-icon-color:#7045a0}
.collection-card[data-color=indigo]{--collection-icon-color:#4f58a7}
.collection-card[data-color=blue]{--collection-icon-color:#286da7}
.collection-card[data-color=sky]{--collection-icon-color:#2374a8}
.collection-card[data-color=cyan]{--collection-icon-color:#19727a}
.collection-card[data-color=teal]{--collection-icon-color:#176f62}
.collection-card[data-color=mint]{--collection-icon-color:#18745a}
.collection-card[data-color=green]{--collection-icon-color:#397c36}
.collection-card[data-color=lime]{--collection-icon-color:#687a1d}
.collection-card[data-color=slate]{--collection-icon-color:#53616c}
.collection-card[data-color=yellow] .collection-icon{background:#fff5cf!important}
.collection-card[data-color=amber] .collection-icon{background:#ffedc2!important}
.collection-card[data-color=orange] .collection-icon{background:#ffe7d1!important}
.collection-card[data-color=coral] .collection-icon{background:#ffe4dc!important}
.collection-card[data-color=red] .collection-icon{background:#ffe4e2!important}
.collection-card[data-color=rose] .collection-icon{background:#ffe5e9!important}
.collection-card[data-color=pink] .collection-icon{background:#ffe4ee!important}
.collection-card[data-color=violet] .collection-icon{background:#eee8ff!important}
.collection-card[data-color=purple] .collection-icon{background:#eee5fb!important}
.collection-card[data-color=indigo] .collection-icon{background:#e9eaff!important}
.collection-card[data-color=blue] .collection-icon{background:#e5f1ff!important}
.collection-card[data-color=sky] .collection-icon{background:#e4f3ff!important}
.collection-card[data-color=cyan] .collection-icon{background:#e1f7f8!important}
.collection-card[data-color=teal] .collection-icon{background:#e1f3ef!important}
.collection-card[data-color=mint] .collection-icon{background:#e3f5ec!important}
.collection-card[data-color=green] .collection-icon{background:#e5f3e2!important}
.collection-card[data-color=lime] .collection-icon{background:#eff5d9!important}
.collection-card[data-color=slate] .collection-icon{background:#e8ecef!important}
.collection-card:hover .collection-icon{border-color:color-mix(in srgb,var(--collection-icon-color) 35%,var(--line))}
html[data-theme=dark] .collection-icon{background:var(--surface-2)!important;border-color:var(--line)!important}
html[data-theme=dark] .collection-card[data-color=yellow] .collection-icon{color:#f0c85a!important}
html[data-theme=dark] .collection-card[data-color=mint] .collection-icon{color:#65d6a6!important}
html[data-theme=dark] .collection-card[data-color=coral] .collection-icon{color:#ff9a82!important}
html[data-theme=dark] .collection-card[data-color=blue] .collection-icon{color:#78b6ef!important}
html[data-theme=dark] .collection-card[data-color=pink] .collection-icon{color:#ff86b0!important}
html[data-theme=dark] .collection-card[data-color=violet] .collection-icon{color:#aa96ee!important}

/* Desktop / landscape workspace refinement */
.collection-vault-heading-actions{display:flex;align-items:center;gap:10px}
.vault-collapse-button{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:750;cursor:pointer;box-shadow:0 3px 10px rgba(23,27,29,.04)}
.vault-collapse-button span{font-size:18px;line-height:1;font-weight:500}
.collection-vault-section.is-collapsed .collection-vault-subtitle,
.collection-vault-section.is-collapsed .collection-grid-group{display:none}
.collection-vault-section.is-collapsed{padding-bottom:4px}
#syncDialog .modal-card{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));max-height:min(760px,calc(100dvh - 32px));border-radius:28px;padding:28px}
#syncDialog .modal-head{margin-bottom:24px}
#syncDialog .sync-account-note{margin-top:0}

/* Music shell: adapt only LinkVault's own header/status-bar area. The Music iframe is independent. */
.music-shell{background:var(--bg)!important;color:var(--ink)!important}
.music-shell-bar{background:var(--surface)!important;color:var(--ink)!important;border-bottom-color:var(--line)!important}
.music-shell-bar .small-button,
.music-shell-bar .icon-button{background:var(--surface-2)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* Ferdz.Music-inspired color system: visual palette only, no iframe/theme bridge. */
:root{
  --bg:#E4E0D7!important;
  --surface:#FDFEFE!important;
  --surface-2:#E6E8EB!important;
  --ink:#25201E!important;
  --muted:#60656A!important;
  --line:#CECBC9!important;
  --line-strong:#C8C1B8!important;
  --accent:#F9792C!important;
  --accent-soft:#FFE5D6!important;
  --control:#F9792C!important;
  --control-ink:#22272E!important;
  --mint:#087C58!important;
  --mint-soft:#E8F3ED!important;
  --shadow:0 7px 22px rgba(37,32,30,.07)!important;
  color-scheme:light;
}
html,body{
  background:#E4E0D7!important;
  color:#25201E!important;
}
body{
  background:#E4E0D7!important;
}
.quick-input-wrap,
.collection-card,
.bookmark-card,
.appearance-card,
.setting-row,
.sync-chip,
.icon-button,
.small-button{
  background:#FDFEFE!important;
  border-color:#CECBC9!important;
  color:#25201E!important;
}
.quick-input-wrap input,
.modal-card input,
.modal-card select,
.modal-card textarea,
.search-panel input{
  background:#FDFEFE!important;
  color:#25201E!important;
}
.search-panel{
  background:rgba(253,254,254,.88)!important;
  border-color:#CECBC9!important;
}
.search-panel input{background:#E6E8EB!important}
.paste-button,
.small-button,
.filter-pill,
.icon-button,
.collection-menu{
  background:#E6E8EB!important;
  color:#25201E!important;
}
.add-button,
.primary-button,
.filter-pill.active,
.nav-item#navSearchBtn{
  background:#F9792C!important;
  border-color:#F9792C!important;
  color:#22272E!important;
}
.secondary-button{background:#E6E8EB!important;color:#25201E!important}
.danger-button{background:#FFE5D6!important;color:#4A1D08!important}
.bottom-nav{
  background:rgba(253,254,254,.94)!important;
  border-color:#CECBC9!important;
  box-shadow:0 14px 38px rgba(37,32,30,.12)!important;
}
.nav-item{color:#60656A!important}
.nav-item.active{
  background:#FDFEFE!important;
  color:#25201E!important;
  box-shadow:inset 0 0 0 1px #CECBC9!important;
}
.hero .eyebrow,
.section-heading .eyebrow,
.settings-kicker,
.settings-group-label{
  color:#F9792C!important;
}
.hero h1,
.section-heading h2,
.collection-name,
.bookmark-title strong,
.appearance-copy strong{
  color:#25201E!important;
}
.collection-card{
  box-shadow:5px 5px 0 rgba(37,32,30,.10);
}
.collection-card:hover{box-shadow:7px 7px 0 rgba(37,32,30,.12)}
.collection-card-tab{border-color:#25201E!important}
.collection-icon{
  background:#E6E8EB!important;
  color:#25201E!important;
  border-color:#CECBC9!important;
  box-shadow:none!important;
}
.bookmark-visual{background:#E6E8EB!important}
.bookmark-brand-shell{background:linear-gradient(145deg,#E6E8EB,#FDFEFE)!important}
.bookmark-brand-fallback .bookmark-favicon{
  background:#FFE5D6!important;
  color:#F9792C!important;
}
.tag{
  background:#FFE5D6!important;
  color:#8A3E17!important;
}
.modal-card{
  background:#FDFEFE!important;
  color:#25201E!important;
  box-shadow:0 -12px 50px rgba(37,32,30,.12)!important;
}
.modal-card input,
.modal-card select,
.modal-card textarea,
.toggle-line,
.metadata-preview,
.notice-card,
.settings-stack{
  border-color:#CECBC9!important;
}
.toggle-line,
.metadata-preview,
.notice-card,
.setting-row{
  background:#FDFEFE!important;
}
.storage-reminder-card{
  background:#FDFEFE!important;
  color:#25201E!important;
  border-color:#CECBC9!important;
}
.storage-reminder-card strong{color:#25201E!important}
.storage-reminder-card p{color:#60656A!important}
.storage-reminder-icon{
  background:#E6E8EB!important;
  color:#25201E!important;
  border-color:#CECBC9!important;
}
.storage-reminder-card.cloud .storage-reminder-icon{background:#FFE5D6!important}
.storage-reminder-card.local .storage-reminder-icon{background:#E8F3ED!important}
.storage-reminder-modal .modal-card{
  background:#FDFEFE!important;
  color:#25201E!important;
}
.storage-reminder-modal .modal-head h2{color:#25201E!important}
.storage-reminder-modal .modal-actions .primary-button{
  background:#F9792C!important;
  color:#22272E!important;
}
.inbox-card{
  border-color:#CECBC9!important;
  background:linear-gradient(100deg,#E8F3ED,#FDFEFE 72%)!important;
}
.inbox-icon{background:#E8F3ED!important}
.music-shell{background:#E4E0D7!important;color:#25201E!important}
.music-shell-bar{
  background:#E4E0D7!important;
  color:#25201E!important;
  border-bottom-color:#CECBC9!important;
}
.music-shell-bar .small-button,
.music-shell-bar .icon-button{
  background:#E6E8EB!important;
  color:#25201E!important;
  border:1px solid #CECBC9!important;
}

/* Ferdz.Music dark palette. */
html[data-theme="dark"]{
  --bg:#22272E!important;
  --surface:#2C3138!important;
  --surface-2:#343A42!important;
  --ink:#FDFEFE!important;
  --muted:#D2D6DA!important;
  --line:#515859!important;
  --line-strong:#4A443F!important;
  --accent:#F9792C!important;
  --accent-soft:#5B3929!important;
  --control:#F9792C!important;
  --control-ink:#22272E!important;
  --mint:#56C59B!important;
  --mint-soft:#19352C!important;
  --shadow:0 8px 26px rgba(0,0,0,.28)!important;
  color-scheme:dark;
}
html[data-theme="dark"],
html[data-theme="dark"] body{
  background:#22272E!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] body{
  background:radial-gradient(circle at 15% -10%,rgba(249,121,44,.07),transparent 30%),#22272E!important;
}
html[data-theme="dark"] .quick-input-wrap,
html[data-theme="dark"] .collection-card,
html[data-theme="dark"] .bookmark-card,
html[data-theme="dark"] .appearance-card,
html[data-theme="dark"] .setting-row,
html[data-theme="dark"] .sync-chip,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .small-button{
  background:#2C3138!important;
  border-color:#515859!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] .quick-input-wrap input,
html[data-theme="dark"] .modal-card input,
html[data-theme="dark"] .modal-card select,
html[data-theme="dark"] .modal-card textarea,
html[data-theme="dark"] .search-panel input{
  background:#343A42!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] .search-panel{
  background:rgba(44,49,56,.90)!important;
  border-color:#515859!important;
}
html[data-theme="dark"] .paste-button,
html[data-theme="dark"] .small-button,
html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .collection-menu{
  background:#343A42!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] .add-button,
html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .filter-pill.active,
html[data-theme="dark"] .nav-item#navSearchBtn{
  background:#F9792C!important;
  border-color:#F9792C!important;
  color:#22272E!important;
}
html[data-theme="dark"] .secondary-button{
  background:#343A42!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] .danger-button{
  background:#5B3929!important;
  color:#FFDCC2!important;
}
html[data-theme="dark"] .bottom-nav{
  background:rgba(44,49,56,.94)!important;
  border-color:#515859!important;
  box-shadow:0 14px 38px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .nav-item{color:#D2D6DA!important}
html[data-theme="dark"] .nav-item.active{
  background:#343A42!important;
  color:#FDFEFE!important;
  box-shadow:inset 0 0 0 1px #515859!important;
}
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .section-heading .eyebrow,
html[data-theme="dark"] .settings-kicker,
html[data-theme="dark"] .settings-group-label{
  color:#F9792C!important;
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .collection-name,
html[data-theme="dark"] .bookmark-title strong,
html[data-theme="dark"] .appearance-copy strong{
  color:#FDFEFE!important;
}
html[data-theme="dark"] .collection-card{
  box-shadow:5px 5px 0 rgba(0,0,0,.22);
}
html[data-theme="dark"] .collection-card:hover{box-shadow:7px 7px 0 rgba(0,0,0,.28)}
html[data-theme="dark"] .collection-card-tab{border-color:#FDFEFE!important}
html[data-theme="dark"] .collection-icon{
  background:#343A42!important;
  color:#FDFEFE!important;
  border-color:#515859!important;
}
html[data-theme="dark"] .bookmark-visual{background:#343A42!important}
html[data-theme="dark"] .bookmark-brand-shell{
  background:linear-gradient(145deg,#343A42,#2C3138)!important;
}
html[data-theme="dark"] .bookmark-brand-fallback .bookmark-favicon{
  background:#5B3929!important;
  color:#F9792C!important;
}
html[data-theme="dark"] .tag{
  background:#5B3929!important;
  color:#FFDCC2!important;
}
html[data-theme="dark"] .modal-card{
  background:#2C3138!important;
  color:#FDFEFE!important;
  box-shadow:0 -12px 50px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .modal-card input,
html[data-theme="dark"] .modal-card select,
html[data-theme="dark"] .modal-card textarea,
html[data-theme="dark"] .toggle-line,
html[data-theme="dark"] .metadata-preview,
html[data-theme="dark"] .notice-card,
html[data-theme="dark"] .settings-stack{
  border-color:#515859!important;
}
html[data-theme="dark"] .toggle-line,
html[data-theme="dark"] .metadata-preview,
html[data-theme="dark"] .notice-card,
html[data-theme="dark"] .setting-row{
  background:#2C3138!important;
}
html[data-theme="dark"] .storage-reminder-card{
  background:#2C3138!important;
  color:#FDFEFE!important;
  border-color:#515859!important;
}
html[data-theme="dark"] .storage-reminder-card strong{color:#FDFEFE!important}
html[data-theme="dark"] .storage-reminder-card p{color:#D2D6DA!important}
html[data-theme="dark"] .storage-reminder-icon{
  background:#343A42!important;
  color:#FDFEFE!important;
  border-color:#515859!important;
}
html[data-theme="dark"] .storage-reminder-card.cloud .storage-reminder-icon{background:#5B3929!important}
html[data-theme="dark"] .storage-reminder-card.local .storage-reminder-icon{background:#19352C!important}
html[data-theme="dark"] .storage-reminder-modal .modal-card{
  background:#2C3138!important;
  color:#FDFEFE!important;
}
html[data-theme="dark"] .storage-reminder-modal .modal-head h2{color:#FDFEFE!important}
html[data-theme="dark"] .storage-reminder-modal .modal-actions .primary-button{
  background:#F9792C!important;
  color:#22272E!important;
}
html[data-theme="dark"] .inbox-card{
  border-color:#515859!important;
  background:linear-gradient(100deg,#19352C,#2C3138 72%)!important;
}
html[data-theme="dark"] .inbox-icon{background:#19352C!important}
html[data-theme="dark"] .music-shell{background:#22272E!important;color:#FDFEFE!important}
html[data-theme="dark"] .music-shell-bar{
  background:#22272E!important;
  color:#FDFEFE!important;
  border-bottom-color:#515859!important;
}
html[data-theme="dark"] .music-shell-bar .small-button,
html[data-theme="dark"] .music-shell-bar .icon-button{
  background:#343A42!important;
  color:#FDFEFE!important;
  border-color:#515859!important;
}




/* Unified desktop + landscape workspace: one geometry for every LinkVault-owned shell. */
@media (min-width:800px) and (orientation:landscape), (min-width:1100px){
  .app-shell{
    width:calc(100% - 128px);
    max-width:none;
    margin-left:104px;
    margin-right:24px;
    padding:0 24px 40px;
    box-sizing:border-box;
  }

  .topbar{
    height:58px;
    margin-bottom:28px;
  }

  main{
    gap:32px;
  }

  .hero{
    display:none!important;
    max-width:none;
  }

  .quick-add,
  .collections-section,
  .bookmarks-section{
    max-width:none;
  }

  .collections-section > .section-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:end;
    gap:12px;
    margin-bottom:14px;
  }

  .section-heading{
    margin-bottom:14px;
  }

  .collection-vault-section{
    margin-top:20px;
  }

  .collection-vault-heading{
    margin-bottom:14px;
  }

  .collection-grid-group{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
  }

  .collection-card{
    min-height:128px;
  }

  .bookmark-heading-row{
    margin-bottom:12px;
  }

  .filter-row{
    margin-bottom:14px;
  }

  .bookmark-list{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
  }

  .bottom-nav{
    left:12px;
    top:50%;
    bottom:auto;
    transform:translateY(-50%);
    width:80px;
    height:auto;
    min-height:410px;
    padding:11px 7px;
    border-radius:22px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(5,1fr);
    gap:9px;
  }

  .nav-item{
    width:100%!important;
    height:auto!important;
    min-height:82px!important;
    border-radius:17px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
  }

  .nav-item span{font-size:27px!important}
  .nav-item small{font-size:11px!important;margin-top:0}
  .nav-item#navSearchBtn{
    align-self:stretch;
    justify-self:stretch;
    border-radius:18px;
  }
  .nav-item#navSearchBtn span{font-size:34px!important}

  .music-shell{
    padding-top:env(safe-area-inset-top);
  }

  .music-shell-bar{
    height:44px;
    min-height:44px;
    padding:5px 10px;
  }

  .music-shell-bar strong{
    font-size:12px;
    font-weight:750;
  }

  .music-shell iframe{
    height:calc(100% - 44px);
  }
}

@media (min-width:800px) and (max-width:1099px) and (orientation:landscape){
  .app-shell{
    width:calc(100% - 120px);
    margin-left:100px;
    margin-right:20px;
    padding-left:20px;
    padding-right:20px;
  }

  .topbar{
    height:52px;
    margin-bottom:22px;
  }

  main{gap:26px}

  .collection-grid-group{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }

  .bookmark-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }

  .music-shell-bar{
    height:42px;
    min-height:42px;
  }

  .music-shell iframe{
    height:calc(100% - 42px);
  }
}

/* Mobile-only controls and brand sizing stay independent from the desktop workspace. */
.brand-title strong{font-size:23px}
.brand-title span{font-size:13px}

@media(max-width:720px){
  .hero{display:none!important}
  .topbar{margin-bottom:14px}
  .collections-section > .section-heading{
    justify-content:flex-start;
    gap:10px;
    margin-bottom:8px;
  }
  .collection-vault-heading{margin-bottom:14px}
  .brand-title strong{font-size:22px}
  .brand-title span{font-size:12px}
}


/* Staging: make ferdz.music the full-screen surface. On compact touch
   layouts, LinkVault becomes a single bookmark-like escape control so the
   Music app keeps ownership of its own navigation and player controls. */
.music-shell{
  padding-top:0!important;
  overflow:hidden;
}
.music-shell iframe{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  min-height:0;
  border:0;
  z-index:1;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}

@media (max-width:799px){
  .music-shell{
    --music-escape-right:60px;
  }

  .music-shell-bar{
    position:absolute;
    top:calc(env(safe-area-inset-top) + 2px);
    right:var(--music-escape-right);
    left:auto;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    z-index:4;
  }

  .music-shell-bar > :first-child{
    display:grid!important;
    place-items:center;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    padding:0!important;
    border:0!important;
    border-radius:12px;
    background:transparent!important;
    color:#c94f3f!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    font-size:0!important;
    line-height:0!important;
  }

  .music-shell-bar > :first-child::before{
    content:"";
    width:12px;
    height:17px;
    background:currentColor;
    clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
    opacity:.95;
  }

  .music-shell-bar > :not(:first-child){
    display:none!important;
  }

  html[data-theme="dark"] .music-shell-bar > :first-child{
    background:transparent!important;
    color:#d65a45!important;
    border:0!important;
  }
}

@media (min-width:800px) and (orientation:landscape){
  .music-shell-bar{
    position:absolute;
    inset:0 0 auto 0;
    height:42px!important;
    min-height:42px!important;
    box-sizing:border-box;
    padding:5px 10px!important;
    background:rgba(34,39,46,.78)!important;
    border-bottom:1px solid rgba(81,88,89,.72)!important;
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
    z-index:3;
  }
}


/* First-use Music navigation coach mark. The mobile portrait treatment is intentionally
   larger and uses the bookmark as the visual anchor. Landscape/desktop keep their
   separate compact treatment below. */
.music-shell-tip-target{display:none!important}
.music-shell-tip-trail{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:6;
  overflow:visible;
  pointer-events:none;
}
.music-shell-tip-trail path{
  fill:none;
  stroke:#f0c84b;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1 9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
html[data-theme="dark"] .music-shell-tip-trail path{stroke:#f2ca4c}

.music-shell-tip{
  position:absolute;
  top:calc(env(safe-area-inset-top) + 76px);
  right:20px;
  z-index:7;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:4px 12px;
  width:min(310px,calc(100vw - 32px));
  padding:20px 18px;
  border:1px solid rgba(239,194,66,.55);
  border-radius:16px;
  background:rgba(248,211,91,.20);
  color:#17130b;
  box-shadow:0 10px 28px rgba(23,27,29,.22);
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
  text-align:left;
}
.music-shell-tip::before{display:none!important;}
.music-shell-tip-icon{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:center;
  width:22px;
  height:30px;
  background:#e04b3b;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);
  opacity:.96;
}
.music-shell-tip strong{
  grid-column:2;
  font-size:15px;
  line-height:1.2;
  font-weight:800;
}
.music-shell-tip span{
  grid-column:2;
  font-size:12px;
  line-height:1.4;
  color:#302b20;
}
.music-shell-tip::after{
  content:"Tap to dismiss";
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  padding:5px 7px;
  border-radius:8px;
  background:rgba(239,194,66,.24);
  color:#5f4300;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
html[data-theme="dark"] .music-shell-tip{
  border-color:rgba(242,202,76,.52);
  background:rgba(76,64,25,.48);
  color:#fff1c2;
}
html[data-theme="dark"] .music-shell-tip::before{display:none!important;}
html[data-theme="dark"] .music-shell-tip-icon{background:#ef5542;}
html[data-theme="dark"] .music-shell-tip span{color:#e9dfc4;}
html[data-theme="dark"] .music-shell-tip::after{
  background:rgba(242,202,76,.16);
  color:#f2ca4c;
}

/* Mobile portrait: make the coach mark deliberately noticeable while keeping
   the bookmark beside the instructional copy. This does not affect landscape. */
@media screen and (max-width:799px) and (orientation:portrait){
  .music-shell-tip{
    top:calc(env(safe-area-inset-top) + 88px);
    right:16px;
    width:min(320px,calc(100vw - 32px));
    min-height:140px;
    display:block;
    padding:20px 12px 18px 78px;
    border-color:rgba(239,194,66,.62);
    background:rgba(248,211,91,.30);
    box-shadow:0 14px 34px rgba(23,27,29,.24),0 0 22px rgba(239,194,66,.10);
    border-radius:22px;
    box-shadow:0 14px 34px rgba(23,27,29,.22);
    box-sizing:border-box;
  }

  /* Spotlight target for the Music header bookmark. The lens sits over the
     established header control position and visually connects back to the tip. */
  .music-shell-tip-icon{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:52px;
    background:#d44735;
  }

  .music-shell-tip strong{
    display:block;
    margin:0;
    font-size:20px;
    color:#17130b;
    line-height:1.18;
    letter-spacing:-.02em;
    text-align:left;
  }

  .music-shell-tip span:not(.music-shell-tip-icon):not(.music-shell-tip-connector){
    display:block;
    margin-top:8px;
    font-size:15px;
    line-height:1.42;
    color:#302b20;
    text-align:left;
  }

  .music-shell-tip::after{
    display:block;
    position:static;
    width:max-content;
    margin-top:13px;
    padding:5px 8px;
    border-radius:8px;
    font-size:11px;
    background:rgba(239,194,66,.30);
    color:#5f4300;
    line-height:1.2;
  }
}
@media (min-width:800px){
  .music-shell-tip{
    top:68px;
    right:24px;
    width:310px;
  }
}

/* Branded notifications: confirmation-card language with clear text hierarchy. */
.toast{position:fixed!important;left:50%!important;top:calc(24px + env(safe-area-inset-top))!important;transform:translateX(-50%)!important;display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;width:min(500px,calc(100vw - 28px))!important;min-height:92px!important;padding:17px 20px!important;border:1px solid rgba(255,255,255,.14)!important;border-left:5px solid #ff8a2a!important;border-radius:24px!important;background:#171b1d!important;color:#fff!important;box-shadow:0 24px 70px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.22)!important;font-size:15px!important;font-weight:800!important;line-height:1.4!important;text-align:left!important;pointer-events:none!important;overflow:hidden!important}.toast::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,138,42,.18),transparent 62%);pointer-events:none}.toast-icon{position:relative;z-index:2;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border-radius:14px!important;background:#2a2f33!important;border:1px solid rgba(255,255,255,.18)!important}.toast-icon:after{color:#ffb078!important;font-size:20px!important;font-weight:900!important}.toast-message{position:relative;z-index:2;display:block!important;min-width:0!important;color:#fff!important;opacity:1!important;visibility:visible!important}.toast-success{border-left-color:#63dfbc!important}.toast-success .toast-icon{background:#19352c!important;border-color:rgba(99,223,188,.30)!important}.toast-success .toast-icon:after{color:#63dfbc!important}.toast-error{border-left-color:#ff8b72!important}.toast-error .toast-icon{background:#3a281d!important;border-color:rgba(255,139,114,.30)!important}.toast-error .toast-icon:after{color:#ff9a82!important}html[data-theme="dark"] .toast{background:#f7f5ef!important;color:#171b1d!important;border:1px solid #d2ccc0!important;border-left:5px solid #a94700!important;box-shadow:0 24px 70px rgba(0,0,0,.58),0 8px 24px rgba(0,0,0,.28)!important}html[data-theme="dark"] .toast::before{background:linear-gradient(135deg,rgba(169,71,0,.12),transparent 62%)}html[data-theme="dark"] .toast-icon{background:#f3e7dc!important;border-color:rgba(169,71,0,.22)!important}html[data-theme="dark"] .toast-icon:after{color:#a94700!important}html[data-theme="dark"] .toast-message{color:#171b1d!important}.toast.hidden{display:none!important}@media(max-width:430px){.toast{top:calc(18px + env(safe-area-inset-top))!important;width:calc(100vw - 20px)!important;min-height:82px!important;padding:15px 16px!important;grid-template-columns:42px minmax(0,1fr)!important;gap:12px!important;border-radius:22px!important;font-size:14px!important}.toast-icon{width:42px!important;height:42px!important;border-radius:13px!important}}

/* Global Settings theme audit: every settings surface/text uses the active LinkVault theme. */
:root{
  --surface-solid:#FDFEFE!important;
  --settings-panel:#FDFEFE!important;
  --settings-panel-2:#E6E8EB!important;
  --settings-text:#25201E!important;
  --settings-muted:#60656A!important;
  --settings-border:#CECBC9!important;
}
html[data-theme="dark"]{
  --surface-solid:#2C3138!important;
  --settings-panel:#2C3138!important;
  --settings-panel-2:#343A42!important;
  --settings-text:#FDFEFE!important;
  --settings-muted:#D2D6DA!important;
  --settings-border:#515859!important;
}

/* Modal shell and Settings columns */
.settings-modal .modal-card{
  background:var(--settings-panel)!important;
  color:var(--settings-text)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal .modal-head h2,
.settings-modal .appearance-copy strong,
.settings-modal .setting-row strong,
.settings-modal .diagnostics-summary strong,
.settings-modal .diagnostics-meta strong,
.settings-modal .about-copy strong{
  color:var(--settings-text)!important;
}
.settings-modal .appearance-copy small,
.settings-modal .setting-row small,
.settings-modal .diagnostics-summary small,
.settings-modal .diagnostics-meta small,
.settings-modal .diagnostics-note,
.settings-modal .diagnostic-entry time,
.settings-modal .helper-text,
.settings-modal .about-copy p,
.settings-modal .status-pill{
  color:var(--settings-muted)!important;
}
.settings-modal .appearance-card,
.settings-modal .setting-row,
.settings-modal .diagnostics-card,
.settings-modal .about-card{
  background:var(--settings-panel)!important;
  color:var(--settings-text)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal .settings-stack{
  background:var(--settings-border)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal .diagnostics-meta>div{
  background:color-mix(in srgb,var(--settings-panel-2) 72%,transparent)!important;
}
.settings-modal .diagnostic-list,
.settings-modal .diagnostic-entry{
  border-color:var(--settings-border)!important;
}
.settings-modal .diagnostic-entry{
  color:var(--settings-text)!important;
}
.settings-modal .diagnostic-entry span{
  color:var(--settings-text)!important;
}
.settings-modal .theme-option{
  background:var(--settings-panel-2)!important;
  color:var(--settings-text)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal .theme-option b{
  color:var(--settings-text)!important;
}
.settings-modal .theme-option.active{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 1px var(--accent)!important;
}
.settings-modal .secondary-button{
  background:var(--settings-panel-2)!important;
  color:var(--settings-text)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal .primary-button{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
}
.settings-modal .danger-button{
  background:color-mix(in srgb,#b94b2b 22%,var(--settings-panel))!important;
  color:var(--settings-text)!important;
  border-color:color-mix(in srgb,#b94b2b 38%,var(--settings-border))!important;
}
.settings-modal input,
.settings-modal select,
.settings-modal textarea{
  background:var(--settings-panel-2)!important;
  color:var(--settings-text)!important;
  border-color:var(--settings-border)!important;
}
.settings-modal input::placeholder,
.settings-modal textarea::placeholder{
  color:var(--settings-muted)!important;
  opacity:.9;
}
.settings-modal .about-mark{
  background:var(--accent)!important;
  color:#fff!important;
}
html[data-theme="dark"] .settings-modal .diagnostics-card{
  background:#2C3138!important;
  color:#FDFEFE!important;
}
html[data-theme="light"] .settings-modal .diagnostics-card{
  background:#FDFEFE!important;
  color:#25201E!important;
}


/* Navigation parity: + Add must use the exact same treatment as Home, Search, and Settings. */
.bottom-nav .nav-item#navSearchBtn{
  width:auto!important;
  height:auto!important;
  min-height:78px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  border:0!important;
  border-radius:20px!important;
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
}
.bottom-nav .nav-item#navSearchBtn span{
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  font-size:31px!important;
  font-weight:800!important;
  line-height:1!important;
}
.bottom-nav .nav-item#navSearchBtn small{
  display:block!important;
  color:inherit!important;
  margin-top:7px!important;
  font-size:12px!important;
  font-weight:760!important;
}


/* Final navigation reset: no collection-style tiles or colored icon backgrounds.
   All four controls use the same neutral treatment. */
.bottom-nav .nav-item,
.bottom-nav .nav-item.active,
.bottom-nav .nav-item#navSearchBtn{
  width:auto!important;
  height:auto!important;
  min-height:78px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  border:0!important;
  border-radius:20px!important;
  background:transparent!important;
  color:var(--muted)!important;
  box-shadow:none!important;
}
.bottom-nav .nav-item span,
.bottom-nav .nav-item.active span,
.bottom-nav .nav-item#navSearchBtn span{
  width:auto!important;
  height:auto!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  font-size:31px!important;
  font-weight:800!important;
  line-height:1!important;
}
.bottom-nav .nav-item small,
.bottom-nav .nav-item.active small,
.bottom-nav .nav-item#navSearchBtn small{
  display:block!important;
  margin-top:7px!important;
  background:transparent!important;
  color:inherit!important;
  font-size:12px!important;
  font-weight:760!important;
}
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:active{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}


/* Canonical SynthIQ navigation reference set — six selectable styles.
   Every rule intentionally targets .nav-item uniformly, including + Add. */
:root{
  --synthiq-nav-accent:#F9792C;
  --synthiq-nav-accent-soft:#FFE5D6;
  --synthiq-nav-neutral:#53616c;
  --synthiq-nav-neutral-soft:#eef1f3;
}
html[data-theme="dark"]{
  --synthiq-nav-accent:#ff8a2a;
  --synthiq-nav-accent-soft:#4A1D08;
  --synthiq-nav-neutral:#aeb5ba;
  --synthiq-nav-neutral-soft:#22272e;
}

.bottom-nav.nav-style-minimal .nav-item,
.bottom-nav.nav-style-circular .nav-item,
.bottom-nav.nav-style-outlined .nav-item,
.bottom-nav.nav-style-square .nav-item,
.bottom-nav.nav-style-pill .nav-item,
.bottom-nav.nav-style-dots .nav-item{
  position:relative!important;
  min-height:78px!important;
  width:auto!important;
  height:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  display:grid!important;
  grid-template-rows:28px auto!important;
  align-content:center!important;
  justify-items:center!important;
  row-gap:7px!important;
  box-sizing:border-box!important;
  color:var(--synthiq-nav-neutral)!important;
  box-shadow:none!important;
}

/* 1 Minimal */
.bottom-nav.nav-style-minimal .nav-item{
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-minimal .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
}

/* 2 Circular Base */
.bottom-nav.nav-style-circular .nav-item{
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-circular .nav-item .nav-icon{
  width:48px!important;height:48px!important;
  border-radius:50%!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.bottom-nav.nav-style-circular .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
}
.bottom-nav.nav-style-circular .nav-item.active .nav-icon{
  background:var(--synthiq-nav-accent-soft)!important;
}

/* 3 Outlined — default */
.bottom-nav.nav-style-outlined .nav-item{
  border:1.5px solid color-mix(in srgb,var(--synthiq-nav-neutral) 42%,transparent)!important;
  border-radius:18px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-outlined .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
  border-color:var(--synthiq-nav-accent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--synthiq-nav-accent) 12%,transparent)!important;
}

/* 4 Rounded Square */
.bottom-nav.nav-style-square .nav-item{
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-square .nav-item .nav-icon{
  width:48px!important;height:48px!important;
  border-radius:14px!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.bottom-nav.nav-style-square .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
}
.bottom-nav.nav-style-square .nav-item.active .nav-icon{
  background:var(--synthiq-nav-accent-soft)!important;
}

/* 5 Pill Style */
.bottom-nav.nav-style-pill .nav-item{
  border:0!important;
  border-radius:999px!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.bottom-nav.nav-style-pill .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
  background:var(--synthiq-nav-accent-soft)!important;
}

/* 6 Dot Separator */
.bottom-nav.nav-style-dots .nav-item{
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-dots .nav-item:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:-2px!important;
  top:50%!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--synthiq-nav-neutral) 48%,transparent)!important;
  transform:translateY(-50%)!important;
}
.bottom-nav.nav-style-dots .nav-item.active{
  color:var(--synthiq-nav-accent)!important;
}

/* Shared icon/label treatment — never special-case Add. */
.bottom-nav.nav-style-minimal .nav-item .nav-icon,
.bottom-nav.nav-style-circular .nav-item .nav-icon,
.bottom-nav.nav-style-outlined .nav-item .nav-icon,
.bottom-nav.nav-style-square .nav-item .nav-icon,
.bottom-nav.nav-style-pill .nav-item .nav-icon,
.bottom-nav.nav-style-dots .nav-item .nav-icon{
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  color:inherit!important;
  border:0!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-minimal .nav-item .nav-icon,
.bottom-nav.nav-style-outlined .nav-item .nav-icon,
.bottom-nav.nav-style-dots .nav-item .nav-icon{
  width:28px!important;height:28px!important;
  background:transparent!important;
}
.bottom-nav.nav-style-circular .nav-item .nav-icon,
.bottom-nav.nav-style-square .nav-item .nav-icon{
  display:grid!important;
}
.bottom-nav.nav-style-pill .nav-item .nav-icon{
  width:28px!important;height:28px!important;
  background:transparent!important;
}
.bottom-nav .nav-item .nav-icon svg{
  width:28px!important;height:28px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.bottom-nav .nav-item small{
  margin:0!important;
  background:transparent!important;
  color:inherit!important;
  font-size:12px!important;
  font-weight:760!important;
  line-height:1!important;
}
.bottom-nav.nav-style-circular .nav-item small,
.bottom-nav.nav-style-square .nav-item small{
  margin-top:0!important;
}

/* Six matching Settings previews. */
.nav-style-preview-circular i,
.nav-style-preview-square i{
  background:var(--synthiq-nav-accent-soft)!important;
  border:0!important;
}
.nav-style-preview-circular b{
  border-radius:50%!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.nav-style-preview-circular em{
  border:0!important;
  border-radius:50%!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.nav-style-preview-circular strong{
  border-radius:50%!important;
  background:var(--synthiq-nav-neutral-soft)!important;
}
.nav-style-preview-square i{
  border-radius:6px!important;
}
.nav-style-preview-square b,
.nav-style-preview-square em,
.nav-style-preview-square strong{
  border-radius:5px!important;
  background:var(--synthiq-nav-neutral-soft)!important;
  border:0!important;
}
.nav-style-preview-pill{
  background:transparent!important;
  gap:3px!important;
}
.nav-style-preview-pill i,
.nav-style-preview-pill b,
.nav-style-preview-pill em,
.nav-style-preview-pill strong{
  width:17px!important;
  height:42px!important;
  border-radius:999px!important;
  background:var(--synthiq-nav-neutral-soft)!important;
  border:0!important;
}
.nav-style-preview-pill i{background:var(--synthiq-nav-accent-soft)!important}
.nav-style-preview-dots{background:transparent!important}
.nav-style-preview-dots i,
.nav-style-preview-dots b,
.nav-style-preview-dots em,
.nav-style-preview-dots strong{
  width:16px!important;height:16px!important;
  background:transparent!important;
  border:0!important;
}
.nav-style-preview-dots i{border:2px solid var(--synthiq-nav-accent)!important;border-radius:50%!important}
.nav-style-preview-dots:after{
  content:"•  •  •"!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  color:var(--synthiq-nav-neutral)!important;
  font-size:12px!important;
  letter-spacing:7px!important;
}

/* Remove legacy style-specific rules from the cascade for the live nav. */
.bottom-nav .nav-item#navSearchBtn{
  width:auto!important;
  height:auto!important;
  min-height:78px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
}


/* FINAL REFERENCE-ACCURATE NAVIGATION SYSTEM
   Source: supplied six-option reference image.
   Palette is intentionally monochrome: black ink, white surfaces, soft neutral gray bases,
   and neutral gray outlines/separators. + Add is never special-cased visually. */
:root{
  --reference-nav-ink:#000000;
  --reference-nav-white:#FEFEFE;
  --reference-nav-base:#F2F2F4;
  --reference-nav-outline:#D0D0D2;
  --reference-nav-divider:#D9D9DB;
  --reference-nav-dot:#B8B8BA;
  --synthiq-nav-accent:var(--reference-nav-ink);
  --synthiq-nav-accent-soft:var(--reference-nav-base);
  --synthiq-nav-neutral:var(--reference-nav-ink);
  --synthiq-nav-neutral-soft:var(--reference-nav-base);
}
html[data-theme="dark"]{
  --reference-nav-ink:#FDFEFE;
  --reference-nav-white:#2C3138;
  --reference-nav-base:#343A42;
  --reference-nav-outline:#515859;
  --reference-nav-divider:#515859;
  --reference-nav-dot:#858B90;
  --synthiq-nav-accent:var(--reference-nav-ink);
  --synthiq-nav-accent-soft:var(--reference-nav-base);
  --synthiq-nav-neutral:var(--reference-nav-ink);
  --synthiq-nav-neutral-soft:var(--reference-nav-base);
}

/* One identical baseline for Home / Search / Add / Settings. */
.bottom-nav.nav-style-minimal .nav-item,
.bottom-nav.nav-style-circular .nav-item,
.bottom-nav.nav-style-outlined .nav-item,
.bottom-nav.nav-style-square .nav-item,
.bottom-nav.nav-style-pill .nav-item,
.bottom-nav.nav-style-dots .nav-item,
.bottom-nav.nav-style-minimal .nav-item.active,
.bottom-nav.nav-style-circular .nav-item.active,
.bottom-nav.nav-style-outlined .nav-item.active,
.bottom-nav.nav-style-square .nav-item.active,
.bottom-nav.nav-style-pill .nav-item.active,
.bottom-nav.nav-style-dots .nav-item.active,
.bottom-nav.nav-style-minimal .nav-item#navSearchBtn,
.bottom-nav.nav-style-circular .nav-item#navSearchBtn,
.bottom-nav.nav-style-outlined .nav-item#navSearchBtn,
.bottom-nav.nav-style-square .nav-item#navSearchBtn,
.bottom-nav.nav-style-pill .nav-item#navSearchBtn,
.bottom-nav.nav-style-dots .nav-item#navSearchBtn{
  color:var(--reference-nav-ink)!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  width:auto!important;
  height:auto!important;
  min-height:78px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  border-radius:18px!important;
  transform:none!important;
}

.bottom-nav .nav-item .nav-icon,
.bottom-nav .nav-item#navSearchBtn .nav-icon{
  width:28px!important;
  height:28px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--reference-nav-ink)!important;
}

.bottom-nav .nav-item .nav-icon svg{
  width:28px!important;
  height:28px!important;
  fill:none!important;
  stroke:var(--reference-nav-ink)!important;
  stroke-width:2.15!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.bottom-nav .nav-item small,
.bottom-nav .nav-item#navSearchBtn small{
  display:block!important;
  margin:0!important;
  color:var(--reference-nav-ink)!important;
  background:transparent!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
}

/* 1 — Minimal: plain black controls with subtle neutral dividers. */
.bottom-nav.nav-style-minimal .nav-item{
  border:0!important;
  background:transparent!important;
}
.bottom-nav.nav-style-minimal .nav-item:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:-1px!important;
  top:16%!important;
  bottom:16%!important;
  width:1px!important;
  background:var(--reference-nav-divider)!important;
}
.bottom-nav.nav-style-minimal .nav-item.active{
  color:var(--reference-nav-ink)!important;
}

/* 2 — Circular Base: soft #F2F2F4 circular icon bases. */
.bottom-nav.nav-style-circular .nav-item{
  border:0!important;
  background:transparent!important;
}
.bottom-nav.nav-style-circular .nav-item .nav-icon{
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  background:var(--reference-nav-base)!important;
}
.bottom-nav.nav-style-circular .nav-item.active .nav-icon{
  background:var(--reference-nav-base)!important;
}

/* 3 — Outlined: neutral gray outline, black icon/text. DEFAULT. */
.bottom-nav.nav-style-outlined .nav-item{
  border:1.5px solid var(--reference-nav-outline)!important;
  background:var(--reference-nav-white)!important;
}
.bottom-nav.nav-style-outlined .nav-item.active{
  border-color:var(--reference-nav-outline)!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}

/* 4 — Rounded Square: soft #F2F2F4 rounded-square icon bases. */
.bottom-nav.nav-style-square .nav-item{
  border:0!important;
  background:transparent!important;
}
.bottom-nav.nav-style-square .nav-item .nav-icon{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  background:var(--reference-nav-base)!important;
}
.bottom-nav.nav-style-square .nav-item.active .nav-icon{
  background:var(--reference-nav-base)!important;
}

/* 5 — Pill Style: each control gets the same neutral pill. */
.bottom-nav.nav-style-pill .nav-item{
  border:0!important;
  border-radius:999px!important;
  background:var(--reference-nav-base)!important;
}
.bottom-nav.nav-style-pill .nav-item.active{
  background:var(--reference-nav-base)!important;
  color:var(--reference-nav-ink)!important;
}

/* 6 — Dot Separator: plain controls with tiny neutral separators. */
.bottom-nav.nav-style-dots .nav-item{
  border:0!important;
  background:transparent!important;
}
.bottom-nav.nav-style-dots .nav-item:not(:last-child)::after{
  content:""!important;
  position:absolute!important;
  right:-2px!important;
  top:50%!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:var(--reference-nav-dot)!important;
  transform:translateY(-50%)!important;
}
.bottom-nav.nav-style-dots .nav-item.active{
  color:var(--reference-nav-ink)!important;
}

/* Settings previews use the same reference palette; no orange navigation accents. */
.navigation-style-option.active{
  border-color:var(--reference-nav-ink)!important;
  box-shadow:0 0 0 1px var(--reference-nav-ink)!important;
}
.nav-style-preview i{
  background:var(--reference-nav-base)!important;
  border-color:var(--reference-nav-outline)!important;
}
.nav-style-preview b,
.nav-style-preview em,
.nav-style-preview strong{
  background:var(--reference-nav-base)!important;
  border-color:var(--reference-nav-outline)!important;
}
.nav-style-preview-minimal i{
  background:var(--reference-nav-ink)!important;
}
.nav-style-preview-minimal b,
.nav-style-preview-minimal em,
.nav-style-preview-minimal strong{
  background:transparent!important;
  border:0!important;
}
.nav-style-preview-outlined i,
.nav-style-preview-outlined b,
.nav-style-preview-outlined em,
.nav-style-preview-outlined strong{
  background:var(--reference-nav-white)!important;
  border:1.5px solid var(--reference-nav-outline)!important;
}
.nav-style-preview-pill i,
.nav-style-preview-pill b,
.nav-style-preview-pill em,
.nav-style-preview-pill strong{
  background:var(--reference-nav-base)!important;
  border:0!important;
}
.nav-style-preview-dots:after{
  color:var(--reference-nav-dot)!important;
}


/* FINAL ADD PARITY FIX
   The legacy #navSearchBtn selector has higher CSS specificity than .nav-style-*
   rules. These selectors intentionally mirror each option exactly, so Add cannot
   inherit the old special button treatment. */
.bottom-nav.nav-style-minimal .nav-item#navSearchBtn{
  border:0!important;
  background:transparent!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-circular .nav-item#navSearchBtn{
  border:0!important;
  background:transparent!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-circular .nav-item#navSearchBtn .nav-icon{
  width:48px!important;
  height:48px!important;
  border-radius:50%!important;
  background:var(--reference-nav-base)!important;
}
.bottom-nav.nav-style-outlined .nav-item#navSearchBtn{
  border:1.5px solid var(--reference-nav-outline)!important;
  border-radius:18px!important;
  background:var(--reference-nav-white)!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-square .nav-item#navSearchBtn{
  border:0!important;
  background:transparent!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-square .nav-item#navSearchBtn .nav-icon{
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  background:var(--reference-nav-base)!important;
}
.bottom-nav.nav-style-pill .nav-item#navSearchBtn{
  border:0!important;
  border-radius:999px!important;
  background:var(--reference-nav-base)!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}
.bottom-nav.nav-style-dots .nav-item#navSearchBtn{
  border:0!important;
  background:transparent!important;
  color:var(--reference-nav-ink)!important;
  box-shadow:none!important;
}