.floo {
  --floo-bg: var(--theme-color-surface);
  --floo-raised: var(--theme-color-surface-2);
  --floo-text: var(--theme-color-text);
  --floo-muted: var(--theme-color-muted);
  --floo-accent: var(--theme-color-accent);
  --floo-purple: var(--theme-color-accent-2);
  --floo-border: var(--theme-color-border);
  /* Floo powder burns emerald: the colour of "something new is waiting there". */
  --floo-green: #0e9f6e;
  --floo-green-rgb: 14, 159, 110;
  --floo-green-ink: #08744f;
  color: var(--floo-text); font-family: var(--theme-font-body); text-align: start;
  font-size: 14px; line-height: 1.8; -webkit-font-smoothing: antialiased;
}
[data-theme=dark] .floo { --floo-green: #3ee6a4; --floo-green-rgb: 62, 230, 164; --floo-green-ink: #3ee6a4; }
.floo *, .floo *::before, .floo *::after { box-sizing: border-box; }
.floo [hidden] { display: none !important; }
.floo svg { width: 22px; height: 22px; flex: 0 0 auto; }
.floo button, .floo input { font: inherit; }
.floo button { cursor: pointer; }
.floo a { color: inherit; text-decoration: none; }
.floo :is(button, a, input, summary):focus-visible { outline: 2px solid var(--floo-accent); outline-offset: 3px; }
.floo button:disabled { cursor: default; opacity: .45; }
.floo h1, .floo h2, .floo h3, .floo p, .floo dl, .floo dd { margin: 0; }
.floo :is(h1,h2,h3) { text-wrap: balance; }
.floo p { text-wrap: pretty; }
.floo kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--floo-border); border-block-end-width: 2px; background: var(--floo-raised); color: var(--floo-muted); font: 600 11px/1 var(--theme-font-body); box-shadow: none; }
.floo-eyebrow { display: flex; gap: 8px; align-items: center; color: var(--floo-accent); font-size: 11px; font-weight: 600; }
.floo-eyebrow svg { width: 16px; height: 16px; }

/* Buttons */
.floo-btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border-radius: 12px; border: 1px solid var(--floo-border); background: var(--floo-raised); color: var(--floo-text); font-size: 12px !important; font-weight: 600; white-space: nowrap; transition: background-color .18s, border-color .18s, box-shadow .18s, transform .12s; }
.floo-btn svg { width: 18px; height: 18px; }
.floo-btn:hover { border-color: var(--floo-accent); }
.floo button:active:not(:disabled) { transform: scale(.97); }
.floo-btn--primary { background: var(--floo-accent); color: var(--theme-color-on-accent, var(--theme-color-bg)); border-color: var(--floo-accent); }
.floo-btn--primary:hover { box-shadow: 0 6px 22px rgba(var(--theme-color-accent-rgb), .28); }
.floo a.floo-btn--ghost { background: none; color: var(--floo-accent); }
.floo-icon-btn { min-width: 36px; height: 36px; border: 0; background: none; color: var(--floo-muted); display: inline-grid; place-items: center; border-radius: 10px; padding: 7px; }
.floo-icon-btn:hover { color: var(--floo-accent); background: var(--floo-raised); }
.floo-icon-btn svg { width: 18px; height: 18px; }

/* Search */
.floo-search { display: flex; align-items: center; gap: 10px; flex: 1; padding-inline: 12px; min-height: 44px; background: var(--floo-bg); border: 1px solid var(--floo-border); border-radius: 12px; color: var(--floo-muted); margin: 0; transition: border-color .18s, box-shadow .18s; }
.floo-search svg { width: 18px; height: 18px; }
.floo .floo-search input { width: 100%; min-width: 0; border: 0; background: none; color: var(--floo-text); outline: 0; box-shadow: none; padding: 10px 0; font-size: 13px; }
.floo input::placeholder { color: var(--floo-muted); opacity: .8; }
.floo-search:focus-within { border-color: var(--floo-accent); box-shadow: 0 0 0 3px rgba(var(--theme-color-accent-rgb), .18); }
.floo-search:focus-within kbd { visibility: hidden; }

/* Page */
.floo--page { max-width: 1180px; margin: 0 auto 40px; }
.floo-breadcrumb { display: flex; gap: 12px; align-items: center; color: var(--floo-muted); font-size: 12px; margin-block: 16px; }
.floo-breadcrumb a:hover { color: var(--floo-accent); }

.floo-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 112px minmax(0,1fr) auto; grid-template-areas: "hearth copy stats" "command command command" "hint hint hint"; column-gap: 24px; align-items: center; padding: 26px 30px 20px; border-radius: 26px; background: var(--glass-bg); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-border); overflow: hidden; }
.floo-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 340px 220px at 92% 30%, rgba(var(--theme-color-accent-rgb), .16), transparent 70%), radial-gradient(ellipse 420px 260px at 10% 100%, rgba(var(--theme-color-accent-2-rgb), .14), transparent 70%); transition: background .6s; }
.floo.has-hot .floo-hero::before { background: radial-gradient(ellipse 340px 220px at 92% 30%, rgba(var(--floo-green-rgb), .2), transparent 70%), radial-gradient(ellipse 420px 260px at 10% 100%, rgba(var(--theme-color-accent-2-rgb), .14), transparent 70%); }
.floo-hearth { grid-area: hearth; color: var(--floo-accent); }
.floo-hearth svg { width: 112px; height: 112px; display: block; }
.floo-hearth-glow { fill: rgba(var(--theme-color-accent-rgb), .1); }
.floo-hearth-fire { fill: var(--floo-accent); transform-origin: 60px 100px; animation: floo-flicker 2.6s ease-in-out infinite; transition: fill .6s; }
.floo-hearth-core { fill: var(--theme-color-gold-light, #fff3c4); opacity: .85; }
.floo-hearth-sparks { opacity: .7; animation: floo-rise 3.2s ease-in infinite; }
.floo.has-hot .floo-hearth-fire { fill: var(--floo-green); }
.floo.has-hot .floo-hearth-glow { fill: rgba(var(--floo-green-rgb), .14); }
.floo.has-hot .floo-hearth { color: var(--floo-accent); }
@keyframes floo-flicker { 0%,100% { transform: scale(1, 1); } 30% { transform: scale(.96, 1.05); } 60% { transform: scale(1.03, .97); } }
@keyframes floo-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-14px); opacity: 0; } }
.floo-hero-copy { grid-area: copy; min-width: 0; }
.floo h1 { font-family: var(--theme-font-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.5; font-weight: 400; margin-block: 6px 6px; }
.floo-hero-copy > p { color: var(--floo-muted); max-width: 520px; font-size: 12.5px; line-height: 2.1; }
.floo-hero-copy kbd { height: 20px; font-size: 10px; }

.floo-stats { grid-area: stats; display: flex; gap: 8px; }
.floo-stats > div { min-width: 92px; padding: 10px 14px; border-radius: 16px; background: rgba(var(--theme-color-surface-rgb), .55); border: 1px solid var(--floo-border); text-align: center; }
.floo-stats dt { font-size: 10.5px; color: var(--floo-muted); font-weight: 500; white-space: nowrap; }
.floo-stats dd { font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--floo-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.floo-stats [data-floo-stat-latest] { font-size: 13px; line-height: 2.55; font-weight: 600; }
.floo-stat--green dd { color: var(--floo-green-ink); }
.floo-stat--green dt::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--floo-green); margin-inline-end: 6px; vertical-align: 1px; box-shadow: 0 0 8px var(--floo-green); }

.floo-command { grid-area: command; display: flex; gap: 10px; margin-block-start: 20px; }
.floo-search--hero { min-height: 52px; border-radius: 15px; padding-inline: 16px; background: var(--floo-bg); }
.floo-search--hero svg { width: 20px; height: 20px; color: var(--floo-accent); }
.floo .floo-search--hero input { font-size: 14px; }
.floo-command .floo-btn { min-height: 52px; border-radius: 15px; padding-inline: 20px; }
.floo-search-hint { grid-area: hint; margin-block-start: 10px !important; font-size: 11px; color: var(--floo-muted); }
.floo-search-hint kbd { height: 19px; min-width: 19px; font-size: 10px; }

/* Toolbar */
.floo-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block: 22px 14px; }
.floo-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 13px; background: var(--floo-raised); border: 1px solid var(--floo-border); }
.floo-seg button { border: 0; background: none; color: var(--floo-muted); border-radius: 10px; min-height: 36px; padding: 6px 13px; font-size: 12px !important; font-weight: 600; white-space: nowrap; transition: background-color .18s, color .18s; }
.floo-seg button[aria-pressed=true] { background: var(--floo-bg); color: var(--floo-accent); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.floo-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px; border-radius: 13px; border: 1px solid var(--floo-border); background: var(--floo-raised); color: var(--floo-muted); font-size: 12px !important; font-weight: 600; }
.floo-chip:hover { color: var(--floo-text); }
.floo-chip[aria-pressed=true] { color: var(--floo-green-ink); border-color: rgba(var(--floo-green-rgb), .6); background: rgba(var(--floo-green-rgb), .1); }
.floo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--floo-green); box-shadow: 0 0 0 3px rgba(var(--floo-green-rgb), .18); }
.floo-edit { margin-inline-start: auto; }
.floo.is-editing .floo-edit { border-color: var(--floo-accent); color: var(--floo-accent); }
.floo-edit-hint { color: var(--floo-muted); font-size: 11.5px; margin-block: -4px 12px !important; }

/* Destination cards */
.floo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.floo-card { position: relative; display: flex; gap: 13px; align-items: flex-start; min-width: 0; padding: 16px; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 2px 8px rgba(var(--theme-color-bg-rgb), .08); transition: transform .2s, border-color .2s, background-color .2s, box-shadow .2s; }
.floo-card:hover { background: var(--glass-bg-hover); border-color: rgba(var(--theme-color-accent-rgb), .7); transform: translateY(-2px); }
.floo-card.is-unread { border-color: rgba(var(--floo-green-rgb), .45); box-shadow: 0 0 0 1px rgba(var(--floo-green-rgb), .12), 0 6px 22px rgba(var(--floo-green-rgb), .1); }
.floo-card.is-unread:hover { border-color: var(--floo-green); }
.floo-card.is-cold { opacity: .72; }
.floo-card.is-cold:hover { opacity: 1; }
.floo-card-icon, .floo-emblem, .floo-row-icon, .floo-pick-icon { position: relative; flex: 0 0 auto; display: grid; place-items: center; color: var(--floo-accent); }
.floo-card-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--floo-raised); border: 1px solid var(--floo-border); }
.floo-card-icon svg { width: 22px; height: 22px; }
.floo-card.is-cold .floo-card-icon { color: var(--floo-muted); }
.floo-flame { position: absolute; inset-block-end: -4px; inset-inline-end: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--floo-green); border: 2.5px solid var(--theme-color-surface); display: none; }
.floo-flame::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--floo-green); opacity: 0; animation: floo-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.is-unread > .floo-card-icon .floo-flame, .is-unread > .floo-row-icon .floo-flame, .is-unread > .floo-pick-icon .floo-flame { display: block; }
.is-unread > .floo-card-icon { color: var(--floo-green-ink); border-color: rgba(var(--floo-green-rgb), .35); background: rgba(var(--floo-green-rgb), .08); }
/* Forum art from newbb replaces the line icon wherever a forum has one. */
.floo-art { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
:is(.floo-card-icon, .floo-row-icon, .floo-pick-icon):has(> .floo-art) { background: none; border-color: transparent; }
.is-unread > :is(.floo-card-icon, .floo-row-icon, .floo-pick-icon) > .floo-art { box-shadow: 0 0 0 2px var(--floo-green); }
.floo-card.is-cold .floo-art { filter: saturate(.45); }
@keyframes floo-ping { 0% { transform: scale(.6); opacity: .8; } 80%,100% { transform: scale(1.5); opacity: 0; } }
.floo-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.floo-card-top { display: flex; align-items: flex-start; gap: 8px; }
.floo .floo-card-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--floo-text); overflow-wrap: anywhere; }
.floo .floo-card-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.floo .floo-card-title:focus-visible { outline: 0; }
.floo-card:has(.floo-card-title:focus-visible) { outline: 2px solid var(--floo-accent); outline-offset: 3px; }
.floo-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 20px; background: var(--floo-green); color: #04281b; font-size: 10.5px; font-weight: 700; line-height: 1.9; font-variant-numeric: tabular-nums; white-space: nowrap; }
.floo-card-sub { display: block; font-size: 11px; color: var(--floo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo .floo-card-last { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-block: 8px 2px; padding: 6px 9px; border-radius: 10px; background: rgba(var(--theme-color-surface-rgb), .5); border: 1px solid transparent; color: var(--floo-text); font-size: 11.5px; line-height: 1.7; transition: border-color .18s, color .18s; }
.floo .floo-card-last:hover { border-color: rgba(var(--theme-color-accent-rgb), .5); color: var(--floo-accent); }
.floo-card-last svg { width: 14px; height: 14px; color: var(--floo-muted); }
.floo-card-last span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-block-start: 4px; font-size: 10.5px; color: var(--floo-muted); font-variant-numeric: tabular-nums; }
.floo-card-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-card-meta span:last-child { flex: 0 0 auto; }
.floo-card-meta svg { width: 13px; height: 13px; }
.floo-card.is-unread .floo-card-meta span:first-child { color: var(--floo-green-ink); }
.floo-card.is-travelling { border-color: var(--floo-green); box-shadow: 0 0 0 4px rgba(var(--floo-green-rgb), .25), 0 0 40px rgba(var(--floo-green-rgb), .45); transform: scale(.98); }
.floo-card.is-travelling .floo-card-icon { color: var(--floo-green-ink); }

/* Editing */
.floo-card-actions { position: absolute; z-index: 2; inset-block-start: 8px; inset-inline-end: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--floo-bg); border: 1px solid var(--floo-border); box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.floo-card-actions .floo-icon-btn { min-width: 32px; height: 32px; padding: 6px; }
.floo-grip { cursor: grab !important; touch-action: none; }
.floo-grip:active { cursor: grabbing !important; }
.floo-remove:hover { color: var(--theme-color-danger) !important; }
.floo.is-editing .floo-card { padding-block-start: 52px; }
.floo.is-editing .floo-card:hover { transform: none; }
.floo.is-editing .floo-card-title::after { display: none; }
.floo-grid.is-sorting { cursor: grabbing; user-select: none; }
.floo-card.is-dragging { border-style: dashed; border-color: var(--floo-accent); opacity: .7; box-shadow: none; }

.floo-add-tile { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 18px; margin-block-start: 12px; width: 100%; border: 1px dashed var(--floo-border); border-radius: 18px; background: none; color: var(--floo-muted); font-size: 12px !important; min-height: 60px; transition: border-color .18s, color .18s; }
.floo-add-tile:hover { border-color: var(--floo-accent); color: var(--floo-accent); }
.floo-empty { padding: 44px 18px; text-align: center; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.floo-empty > svg { width: 46px; height: 46px; color: var(--floo-accent); }
.floo-empty h3 { font-size: 18px; margin-block: 12px 6px; }
.floo-empty p { color: var(--floo-muted); font-size: 12px; margin-block-end: 18px; }
.floo-no-results { padding: 26px; text-align: center; color: var(--floo-muted); font-size: 12.5px; }
.floo-savebar { position: sticky; bottom: 20px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; margin-block-start: 16px; background: var(--floo-bg); border: 1px solid var(--floo-accent); border-radius: 16px; box-shadow: var(--glass-shadow); animation: floo-up .25s cubic-bezier(.2,.8,.3,1); }
@keyframes floo-up { from { transform: translateY(12px); opacity: 0; } }
.floo-savebar > span { font-size: 12px; }
.floo-savebar > div { display: flex; gap: 8px; }
.floo-status { color: var(--floo-accent); font-size: 12px; min-height: 24px; margin-block-start: 10px !important; }
.floo-status.is-error { color: var(--theme-color-danger); }
.floo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-block-start: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--floo-border); }
.floo-save-note { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 320px; color: var(--floo-muted); }
.floo-save-note svg { width: 16px; height: 16px; margin-top: 4px; }
.floo-save-note p { font-size: 11.5px; line-height: 2; }
.floo .floo-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 12px; color: var(--floo-accent); font-weight: 600; }
.floo-text-link svg { width: 16px; height: 16px; }
.floo-reset { display: flex; gap: 8px; align-items: center; background: none; border: 0; min-height: 40px; padding: 8px 0; color: var(--floo-muted); font-size: 11.5px !important; }
.floo-reset svg { width: 16px; height: 16px; }
.floo-reset:hover { color: var(--floo-accent); }
.floo-clear { margin-inline-start: auto; }
.floo-clear:hover:not(:disabled) { color: var(--theme-color-danger); }

/* Picker dialog */
.floo-dialog { color: var(--floo-text); background: var(--floo-bg); border: 1px solid var(--floo-border); border-radius: 24px; padding: 24px; width: min(720px, calc(100% - 32px)); max-height: min(88dvh, 860px); overscroll-behavior: contain; box-shadow: var(--glass-shadow); margin: auto; }
.floo-dialog[open] { animation: floo-pop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes floo-pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.floo-dialog::backdrop { background: rgba(var(--theme-color-bg-rgb), .78); backdrop-filter: blur(6px); }
.floo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
.floo-dialog h2 { font-size: 22px; line-height: 1.8; margin-block-start: 2px; }
.floo-modes { display: flex; gap: 6px; margin-block-end: 12px; padding: 4px; border-radius: 14px; background: var(--floo-raised); }
.floo-modes button { flex: 1; border: 0; border-radius: 10px; min-height: 40px; padding: 8px 12px; background: none; color: var(--floo-muted); font-size: 12px !important; font-weight: 600; }
.floo-modes button[aria-pressed=true] { background: var(--floo-bg); color: var(--floo-accent); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.floo-filters { display: flex; gap: 6px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.floo-filters::-webkit-scrollbar { display: none; }
.floo-filter { border: 1px solid var(--floo-border); background: none; color: var(--floo-muted); border-radius: 24px; padding: 6px 13px; min-height: 36px; white-space: nowrap; font-size: 11px !important; }
.floo-filter[aria-pressed=true] { color: var(--floo-accent); border-color: var(--floo-accent); background: var(--floo-raised); }
.floo-catalog { max-height: 360px; overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 3px; scrollbar-width: thin; }
.floo-category-heading { grid-column: 1 / -1; position: sticky; top: -3px; z-index: 1; font-size: 12px; color: var(--floo-accent); margin: 6px 0 2px !important; padding-block: 6px; background: var(--floo-bg); border-block-end: 1px solid var(--floo-border); }
.floo-pick { min-height: 64px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--floo-border); border-radius: 13px; padding: 9px 11px; background: var(--floo-raised); color: var(--floo-text); text-align: start; transition: border-color .18s, background-color .18s; }
.floo-pick:hover { border-color: rgba(var(--theme-color-accent-rgb), .6); }
.floo-pick[aria-pressed=true] { border-color: var(--floo-accent); background: rgba(var(--theme-color-accent-rgb), .1); }
.floo-pick--child { margin-inline-start: 16px; }
.floo-pick-icon svg { width: 19px; height: 19px; }
.floo-pick-icon:has(> .floo-art) { width: 38px; height: 38px; border-radius: 10px; }
.floo-pick-icon .floo-flame { width: 10px; height: 10px; border-width: 2px; inset-block-end: -3px; inset-inline-end: -4px; }
.floo-pick > span:nth-child(2) { flex: 1; min-width: 0; }
.floo-pick strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.floo-pick small { display: block; font-size: 10px; color: var(--floo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-pick .floo-pick-mark { width: 26px; height: 26px; padding: 4px; border-radius: 50%; border: 1px solid var(--floo-border); color: var(--floo-muted); }
.floo-pick[aria-pressed=true] .floo-pick-mark { background: var(--floo-accent); border-color: var(--floo-accent); color: var(--theme-color-on-accent, var(--theme-color-bg)); }
.floo-catalog-empty { color: var(--floo-muted); font-size: 12px; padding: 14px 4px; }
.floo-custom { margin-block-start: 16px; border-block-start: 1px solid var(--floo-border); padding-block-start: 12px; }
.floo-custom summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; cursor: pointer; font-size: 12px; }
.floo-custom summary svg { width: 18px; height: 18px; }
.floo-custom form { display: grid; gap: 12px; padding-block: 12px; }
.floo-custom label { display: grid; gap: 6px; font-size: 11px; }
.floo-custom input { width: 100%; background: var(--floo-raised); color: var(--floo-text); border: 1px solid var(--floo-border); border-radius: 10px; min-height: 42px; padding: 8px 12px; font-size: 12px; }
.floo-custom p { font-size: 11px; color: var(--floo-muted); }
.floo-custom [data-floo-custom-status] { color: var(--theme-color-danger); }
.floo-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--floo-border); }
.floo-dialog-footer > span { color: var(--floo-muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Compact: sidebar block */
.floo--compact { display: flex; flex-direction: column; padding: 4px; min-height: 0; max-height: calc(100dvh - 220px); }
.floo--compact > * { flex-shrink: 0; }
.floo-mini-head { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; }
.floo-emblem { width: 38px; height: 38px; border-radius: 12px; background: var(--floo-raised); border: 1px solid var(--floo-border); }
.floo-emblem svg { width: 20px; height: 20px; }
.floo-mini-head > div:nth-child(2) { flex: 1; min-width: 0; }
.floo-mini-head strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-seg--mini { flex: 0 0 auto; }
.floo-mini-head p { font-size: 11px; color: var(--floo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-seg--mini button { min-height: 30px; padding: 4px 10px; font-size: 11px !important; }
.floo--compact .floo-search { flex: 0 0 auto; margin-block-end: 8px; min-height: 42px; }
.floo-rows { display: flex; flex-direction: column; gap: 2px; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--floo-border) transparent; padding: 3px; margin: -3px; }
.floo-rows:focus-visible { outline: 2px solid var(--floo-accent); outline-offset: 2px; }
.floo .floo-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 7px 8px; border-radius: 12px; color: var(--floo-text); border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.floo .floo-row:hover, .floo .floo-row:focus-visible { background: var(--floo-raised); border-color: var(--floo-border); }
.floo-row-icon { width: 36px; height: 36px; border-radius: 11px; background: var(--floo-raised); }
.floo-row-icon svg { width: 18px; height: 18px; }
.floo-row-icon .floo-flame { width: 11px; height: 11px; border-width: 2px; inset-block-end: -2px; inset-inline-end: -2px; }
.floo-row.is-unread .floo-row-icon { color: var(--floo-green-ink); background: rgba(var(--floo-green-rgb), .1); }
.floo-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.floo-row-copy strong { font-size: 12.5px; font-weight: 600; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-row-copy small { font-size: 10.5px; color: var(--floo-muted); line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floo-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; font-size: 10px; color: var(--floo-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.floo-row-side .floo-badge { font-size: 9.5px; padding: 0 7px; line-height: 1.8; }
.floo-row.is-unread .floo-row-side time { color: var(--floo-green-ink); font-weight: 600; }
.floo-row.is-travelling { background: rgba(var(--floo-green-rgb), .14); border-color: var(--floo-green); }
.floo--compact .floo-no-results { font-size: 12px; padding: 20px 10px; }
.floo-mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--floo-border); }
.floo-mini-actions .floo-btn { min-height: 40px; padding-inline: 10px; font-size: 11.5px !important; }
.floo-mini-actions .floo-btn svg { width: 16px; height: 16px; }
.floo-current.is-added { opacity: 1 !important; color: var(--floo-green-ink); border-color: rgba(var(--floo-green-rgb), .45); background: rgba(var(--floo-green-rgb), .08); }
.floo--compact .floo-status { min-height: 0; margin-block: 6px 0 !important; font-size: 11px; }
.floo--compact .floo-status:empty { display: none; }

.xp-ls-panel:has(.xp-ls-panel-box.xp-ls-active .floo--compact) { width: 420px; }
.xp-ls-panel-content:has(> .floo--compact) { max-height: none; overflow: hidden; }
@media (max-width: 991.98px) {
  .xp-ls-panel:has(.xp-ls-panel-box.xp-ls-active .floo--compact) { width: 100%; overflow: hidden; }
  .xp-ls-panel-content > .floo--compact { max-height: calc(80dvh - 112px - env(safe-area-inset-bottom, 0px)); }
}
/* Only truly short screens (landscape phones) fall back to one scrolling block; a phone browser with its toolbars is often under 600px tall and must keep the actions pinned below the list. */
@media (max-height: 480px) {
  .floo--compact, .xp-ls-panel-content > .floo--compact { display: block; max-height: none; }
  .floo-rows { overflow: visible; }
  .xp-ls-panel-content:has(> .floo--compact) { max-height: calc(100dvh - 200px); overflow-y: auto; }
}
@media (max-height: 480px) and (max-width: 991.98px) {
  .xp-ls-panel-content:has(> .floo--compact) { max-height: calc(80dvh - 100px); }
}
[data-surface=minimal] .floo-hero::before { display: none; }
[data-surface=minimal] .floo-card { box-shadow: none; }

/* Layout steps */
@media (max-width: 1199px) {
  .floo-hero { grid-template-columns: 96px minmax(0,1fr); grid-template-areas: "hearth copy" "stats stats" "command command" "hint hint"; }
  .floo-hearth svg { width: 96px; height: 96px; }
  .floo-stats { margin-block-start: 16px; }
  .floo-stats > div { flex: 1; }
  .floo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .floo--page { margin-inline: 0; }
  .floo-hero { grid-template-columns: 64px minmax(0,1fr); column-gap: 14px; padding: 20px 16px 16px; border-radius: 22px; }
  .floo-hearth svg { width: 64px; height: 64px; }
  .floo h1 { font-size: 24px; }
  .floo-hero-copy > p { font-size: 12px; line-height: 2; }
  .floo-hero-copy kbd, .floo-search-hint { display: none; }
  .floo-stats { gap: 6px; }
  .floo-stats > div { min-width: 0; padding: 8px 6px; border-radius: 13px; }
  .floo-stats dd { font-size: 18px; }
  .floo-stats [data-floo-stat-latest] { font-size: 11.5px; line-height: 2.3; }
  .floo-command { flex-direction: column; margin-block-start: 14px; gap: 8px; }
  .floo-search--hero kbd { display: none; }
  .floo-command .floo-btn { min-height: 46px; }
  .floo-toolbar { gap: 8px; margin-block: 16px 12px; }
  .floo-toolbar .floo-seg { flex: 1 1 100%; }
  .floo-toolbar .floo-seg button { flex: 1; }
  .floo-chip { flex: 1; justify-content: center; }
  .floo-grid { grid-template-columns: 1fr; gap: 8px; }
  .floo-card { padding: 13px; gap: 11px; }
  .floo-card-icon { width: 40px; height: 40px; border-radius: 12px; }
  .floo-savebar { bottom: calc(80px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .floo-savebar > div { width: 100%; justify-content: flex-end; }
  .floo-dialog { padding: 18px; border-radius: 20px; max-height: 90dvh; }
  .floo-dialog h2 { font-size: 20px; }
  .floo-catalog { grid-template-columns: minmax(0,1fr); max-height: 40dvh; }
}
/* Floo travel overlay: lives on <body>, outside .floo, so it carries its own colours. ~1.15s, then the next page loads. */
.floo-warp { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: all; cursor: progress; isolation: isolate; }
.floo-warp::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 110%, rgba(62,230,164,.55), rgba(5,46,31,.94) 58%, #01110b); opacity: 0; animation: floo-warp-dim .35s ease-out forwards; }
.floo-warp-fire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 18px rgba(62,230,164,.75)); }
.floo-warp-flame { transform-box: fill-box; transform-origin: 50% 100%; transform: translate(var(--x), 210px) scale(var(--w), .15); opacity: .92; mix-blend-mode: screen; animation: floo-warp-rise .7s cubic-bezier(.2,.7,.25,1) var(--d) forwards, floo-warp-lick .32s ease-in-out calc(var(--d) + .7s) infinite alternate; }
.floo-warp-flame.is-front { opacity: 1; }
.floo-warp-spark { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #c9ffe6; box-shadow: 0 0 10px 2px #3ee6a4; opacity: 0; animation: floo-warp-spark var(--t) ease-out var(--d) forwards; }
.floo-warp-flash { position: absolute; left: 50%; bottom: 0; width: 40vmax; height: 40vmax; margin-left: -20vmax; margin-bottom: -20vmax; border-radius: 50%; background: radial-gradient(circle, #f2fff9 0%, #9dffd3 30%, #2fd795 62%, rgba(10,122,82,0) 72%); transform: scale(0); opacity: 0; animation: floo-warp-flash .5s cubic-bezier(.5,0,.3,1) .62s forwards; }
.floo-warp-name { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #eafff5; font-family: var(--theme-font-display, inherit); font-size: clamp(26px, 6vw, 54px); line-height: 1.6; text-shadow: 0 0 18px #3ee6a4, 0 0 42px rgba(14,159,110,.9); opacity: 0; animation: floo-warp-name .9s ease-out .12s forwards; direction: rtl; }
@keyframes floo-warp-dim { to { opacity: 1; } }
@keyframes floo-warp-rise { 60% { opacity: 1; } to { transform: translate(var(--x), 0) scale(var(--w), 1.08); opacity: 1; } }
@keyframes floo-warp-lick { from { transform: translate(var(--x), 0) scale(var(--w), 1.08); } to { transform: translate(var(--x), -6px) scale(calc(var(--w) * .94), 1.16); } }
@keyframes floo-warp-spark { 15% { opacity: 1; } to { transform: translate(calc((var(--s) - 4px) * 6), -105vh); opacity: 0; } }
@keyframes floo-warp-flash { 30% { opacity: 1; } to { transform: scale(7); opacity: 1; } }
@keyframes floo-warp-name { 0% { opacity: 0; transform: scale(.85); filter: blur(6px); } 35% { opacity: 1; transform: scale(1); filter: blur(0); } 70% { opacity: 1; } to { opacity: 0; transform: scale(1.25); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .floo *, .floo *::before, .floo *::after { transition: none !important; animation: none !important; } }