/* Finance and Price Search form controls (both panels share them): a searchable fragrance picker, number fields with their unit inside, quick values,
   segmented controls and menus. Colours come from the shared tokens, so every palette and dark mode follows. */
:is(#panel-finance, #panel-prices) {
  --ff-ring: 0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent);
  --ff-radius: 16px;
}
:is(#panel-finance, #panel-prices) .fin-field { align-content: start; }
:is(#panel-finance, #panel-prices) .fin-label { display: block; font: 700 .64rem/1.2 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Number fields ---------- */
:is(#panel-finance, #panel-prices) .fin-input { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border: 1px solid var(--control-line); border-radius: var(--ff-radius); background: var(--bg-surface); cursor: text; transition: border-color .2s, box-shadow .2s, background .2s; }
:is(#panel-finance, #panel-prices) .fin-input:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
:is(#panel-finance, #panel-prices) .fin-input:focus-within { border-color: var(--accent-color); box-shadow: var(--ff-ring); background: var(--bg-card); }
:is(#panel-finance, #panel-prices) .fin-field .fin-input input { flex: 1; min-width: 0; min-height: 50px; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; outline: none; color: var(--ink); font: 600 1.02rem/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
:is(#panel-finance, #panel-prices) .fin-field .fin-input input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
:is(#panel-finance, #panel-prices) .fin-field .fin-input input::-webkit-inner-spin-button, :is(#panel-finance, #panel-prices) .fin-field .fin-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:is(#panel-finance, #panel-prices) .fin-affix { flex: 0 0 auto; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--muted); user-select: none; }
:is(#panel-finance, #panel-prices) .fin-affix-end { font-size: .8rem; letter-spacing: .02em; }
:is(#panel-finance, #panel-prices) .fin-search-icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-search-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
:is(#panel-finance, #panel-prices) .fin-input:focus-within .fin-affix, :is(#panel-finance, #panel-prices) .fin-input:focus-within .fin-search-icon { color: var(--accent-color); }
:is(#panel-finance, #panel-prices) .fin-quick-values { display: flex; flex-wrap: wrap; gap: 6px; }
:is(#panel-finance, #panel-prices) .fin-quick-values button { min-height: 30px; padding: 3px 13px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font: 600 .72rem/1 system-ui, sans-serif; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s var(--fin-ease); }
:is(#panel-finance, #panel-prices) .fin-quick-values button:hover { border-color: var(--accent-color); color: var(--ink); transform: translateY(-1px); }
:is(#panel-finance, #panel-prices) .fin-quick-values button[aria-pressed=true] { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent); color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-quick-values button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* ---------- Fragrance picker ---------- */
:is(#panel-finance, #panel-prices) .fin-combo { position: relative; }
:is(#panel-finance, #panel-prices) .fin-combo-box { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 10px 6px 8px; border: 1px solid var(--control-line); border-radius: 18px; background: var(--bg-surface); transition: border-color .2s, box-shadow .2s, background .2s; }
:is(#panel-finance, #panel-prices) .fin-combo-box:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
:is(#panel-finance, #panel-prices) .fin-combo.is-open .fin-combo-box, :is(#panel-finance, #panel-prices) .fin-combo-box:focus-within { border-color: var(--accent-color); box-shadow: var(--ff-ring); background: var(--bg-card); }
:is(#panel-finance, #panel-prices) .fin-combo-lead { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-combo-lead svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
:is(#panel-finance, #panel-prices) .fin-combo-lead.has-photo .cut-photo { border-radius: 13px; }
:is(#panel-finance, #panel-prices) .fin-combo input { flex: 1; min-width: 0; min-height: 46px; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; color: var(--ink); font: 600 1.02rem/1.2 system-ui, sans-serif; text-overflow: ellipsis; }
:is(#panel-finance, #panel-prices) .fin-combo input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); font-weight: 500; }
:is(#panel-finance, #panel-prices) .fin-combo-clear { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
:is(#panel-finance, #panel-prices) .fin-combo-clear:hover { background: var(--accent-color); color: var(--on-accent, #fff); }
:is(#panel-finance, #panel-prices) .fin-combo-clear[hidden] { display: none; }
:is(#panel-finance, #panel-prices) .fin-combo-list, :is(#panel-finance, #panel-prices) .fin-menu-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); max-height: min(430px, 62vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-card); box-shadow: var(--shadow-panel); scrollbar-width: thin; animation: ff-pop .2s var(--fin-ease); }
:is(#panel-finance, #panel-prices) .fin-combo-list[hidden], :is(#panel-finance, #panel-prices) .fin-menu-list[hidden] { display: none; }
:is(#panel-finance, #panel-prices) .fin-combo-group { padding: 12px 12px 6px; font: 700 .6rem/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-combo-group:first-child { padding-top: 6px; }
:is(#panel-finance, #panel-prices) .fin-combo-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 15px; cursor: pointer; transition: background .15s; }
:is(#panel-finance, #panel-prices) .fin-combo-row.is-active { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
:is(#panel-finance, #panel-prices) .fin-combo-row[aria-selected=true] .fin-combo-text strong::after { content: "✓"; margin-inline-start: 8px; font: 700 .8rem system-ui; color: var(--accent-color); }
:is(#panel-finance, #panel-prices) .fin-combo-row .cut-photo { border-radius: 13px; }
:is(#panel-finance, #panel-prices) .fin-combo-text { display: grid; gap: 2px; min-width: 0; }
:is(#panel-finance, #panel-prices) .fin-combo-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 1rem/1.25 var(--studio-serif); color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-combo-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-combo mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--accent-color) 24%, transparent); color: inherit; }
:is(#panel-finance, #panel-prices) .fin-combo-price { display: grid; text-align: end; font: 600 .95rem/1.15 var(--studio-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-combo-price small { font: 500 .66rem/1.2 system-ui, sans-serif; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-combo-empty { padding: 20px 14px; font-size: .86rem; line-height: 1.5; color: var(--muted); }

/* ---------- Segmented controls and menus ---------- */
:is(#panel-finance, #panel-prices) .fin-seg { display: flex; align-items: center; gap: 2px; width: 100%; min-height: 52px; padding: 4px; border: 1px solid var(--control-line); border-radius: 99px; background: var(--bg-surface); }
:is(#panel-finance, #panel-prices) .fin-seg button { flex: 1 1 0; min-height: 42px; padding: 0 12px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .82rem/1 system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
:is(#panel-finance, #panel-prices) .fin-seg button:hover { color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-seg button[aria-checked=true] { background: var(--bg-card); color: var(--ink); box-shadow: 0 5px 14px -8px var(--shadow-float), 0 0 0 1px var(--line); }
:is(#panel-finance, #panel-prices) .fin-seg button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
:is(#panel-finance, #panel-prices) .fin-menu { position: relative; }
:is(#panel-finance, #panel-prices) .fin-menu-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px 0 16px; border: 1px solid var(--control-line); border-radius: var(--ff-radius); background: var(--bg-surface); color: var(--ink); font: 600 .95rem/1.2 system-ui, sans-serif; text-align: start; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
:is(#panel-finance, #panel-prices) .fin-menu-trigger:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--control-line)); }
:is(#panel-finance, #panel-prices) .fin-menu-trigger[aria-expanded=true], :is(#panel-finance, #panel-prices) .fin-menu-trigger:focus-visible { outline: none; border-color: var(--accent-color); box-shadow: var(--ff-ring); background: var(--bg-card); }
:is(#panel-finance, #panel-prices) .fin-menu[data-filtered=true] .fin-menu-trigger { border-color: color-mix(in srgb, var(--accent-color) 60%, var(--control-line)); }
:is(#panel-finance, #panel-prices) .fin-menu-trigger svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: rotate .25s var(--fin-ease); }
:is(#panel-finance, #panel-prices) .fin-menu-trigger[aria-expanded=true] svg { rotate: 180deg; }
:is(#panel-finance, #panel-prices) .fin-menu-row { padding: 11px 14px; border-radius: 12px; font-size: .88rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: background .15s; }
:is(#panel-finance, #panel-prices) .fin-menu-row.is-active { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
:is(#panel-finance, #panel-prices) .fin-menu-row[aria-selected=true] { font-weight: 700; }
:is(#panel-finance, #panel-prices) .fin-menu-row[aria-selected=true]::after { content: "✓"; float: right; color: var(--accent-color); }

/* ---------- Layout of the explorer's filters ---------- */
:is(#panel-finance, #panel-prices) .fin-filters { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; padding: 16px; align-items: end; }
:is(#panel-finance, #panel-prices) .fin-filters > .fin-field { grid-column: span 4; min-width: 0; gap: 7px; }
:is(#panel-finance, #panel-prices) .fin-filters > .fin-search { grid-column: span 5; }
:is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(2) { grid-column: span 7; }
:is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(4) { grid-column: span 3; }
:is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(5) { grid-column: span 5; }
:is(#panel-finance, #panel-prices) .fin-filters label { display: block; margin: 0; }

@keyframes ff-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  :is(#panel-finance, #panel-prices) :is(.fin-combo-list, .fin-menu-list) { animation: none; }
  :is(#panel-finance, #panel-prices) :is(.fin-input, .fin-combo-box, .fin-seg button, .fin-menu-trigger, .fin-quick-values button, .fin-combo-row) { transition: none !important; }
}
html[data-motion=off] :is(#panel-finance, #panel-prices) :is(.fin-combo-list, .fin-menu-list) { animation: none; }
html[data-motion=off] :is(#panel-finance, #panel-prices) :is(.fin-input, .fin-combo-box, .fin-seg button, .fin-menu-trigger, .fin-quick-values button, .fin-combo-row) { transition: none !important; }

@media (max-width: 1100px) {
  :is(#panel-finance, #panel-prices) .fin-filters > .fin-field, :is(#panel-finance, #panel-prices) .fin-filters > .fin-search, :is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(n) { grid-column: span 6; }
  :is(#panel-finance, #panel-prices) .fin-filters > .fin-search, :is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(2) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :is(#panel-finance, #panel-prices) .fin-filters > .fin-field, :is(#panel-finance, #panel-prices) .fin-filters > .fin-search, :is(#panel-finance, #panel-prices) .fin-filters > .fin-field:nth-child(n) { grid-column: 1 / -1; }
  :is(#panel-finance, #panel-prices) .fin-combo-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
  :is(#panel-finance, #panel-prices) .fin-combo-list { max-height: min(380px, 55vh); }
}

/* ---------- Your collection in the picker ---------- */
:is(#panel-finance, #panel-prices) .fin-mono { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 22%, var(--bg-surface)), color-mix(in srgb, var(--tone-lavender, var(--accent-color)) 16%, var(--bg-surface))); color: color-mix(in srgb, var(--accent-color) 70%, var(--ink)); font: 700 .78rem/1 var(--studio-serif); letter-spacing: .04em; }
:is(#panel-finance, #panel-prices) .fin-combo-lead .fin-mono { width: 44px; height: 44px; }
:is(#panel-finance, #panel-prices) .fin-combo-scope { position: sticky; top: -8px; z-index: 1; display: flex; gap: 4px; margin: -8px -8px 4px; padding: 10px 10px 8px; background: var(--bg-card); border-bottom: 1px solid var(--line); }
:is(#panel-finance, #panel-prices) .fin-combo-scope button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--muted); font: 600 .76rem/1 system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
:is(#panel-finance, #panel-prices) .fin-combo-scope button:hover { color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-combo-scope button[aria-selected=true] { border-color: var(--line); background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-card)); color: var(--ink); }
:is(#panel-finance, #panel-prices) .fin-combo-scope i { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--accent-color); font: 700 .66rem/1 system-ui, sans-serif; font-style: normal; }
:is(#panel-finance, #panel-prices) .fin-combo-price.is-paid small { color: var(--accent-color); font-weight: 700; }
:is(#panel-finance, #panel-prices) .fin-combo-price.is-unpriced { max-width: 7.5em; text-align: end; }
:is(#panel-finance, #panel-prices) .fin-combo-row.is-own .fin-combo-text strong { font-size: 1rem; }

/* The shelf: every bottle you own, one tap each */
:is(#panel-finance, #panel-prices) .fin-shelf { display: grid; gap: 8px; min-width: 0; }
:is(#panel-finance, #panel-prices) .fin-shelf[hidden] { display: none; }
:is(#panel-finance, #panel-prices) .fin-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
:is(#panel-finance, #panel-prices) .fin-shelf-head span { font: 700 .62rem/1.2 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-shelf-head small { font-size: .7rem; color: var(--muted); }
:is(#panel-finance, #panel-prices) .fin-shelf-row { display: flex; gap: 8px; margin: 0 -4px; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
:is(#panel-finance, #panel-prices) .fin-shelf-chip { flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; width: 198px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); color: var(--ink); text-align: start; scroll-snap-align: start; cursor: pointer; transition: transform .25s var(--fin-ease, ease), border-color .2s, box-shadow .25s, background .2s; }
:is(#panel-finance, #panel-prices) .fin-shelf-chip:hover { transform: translateY(-2px); border-color: var(--accent-color); box-shadow: 0 14px 24px -18px color-mix(in srgb, var(--accent-color) 70%, transparent); }
:is(#panel-finance, #panel-prices) .fin-shelf-chip:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
:is(#panel-finance, #panel-prices) .fin-shelf-chip[aria-pressed=true] { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 16%, transparent); }
:is(#panel-finance, #panel-prices) .fin-shelf-chip .cut-photo { border-radius: 12px; }
:is(#panel-finance, #panel-prices) .fin-shelf-text { display: grid; gap: 2px; min-width: 0; }
:is(#panel-finance, #panel-prices) .fin-shelf-text strong, :is(#panel-finance, #panel-prices) .fin-shelf-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#panel-finance, #panel-prices) .fin-shelf-text strong { font-size: .84rem; }
:is(#panel-finance, #panel-prices) .fin-shelf-text small { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
:is(#panel-finance, #panel-prices) .fin-shelf-chip[aria-pressed=true] .fin-shelf-text small { color: var(--accent-color); font-weight: 600; }
@media (max-width: 560px) {
  :is(#panel-finance, #panel-prices) .fin-shelf-chip { width: 178px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#panel-finance, #panel-prices) :is(.fin-shelf-chip, .fin-combo-scope button) { transition: none !important; }
}
html[data-motion=off] :is(#panel-finance, #panel-prices) :is(.fin-shelf-chip, .fin-combo-scope button) { transition: none !important; }