@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* fediim component classes (framework-free reference styling). Every value comes from a token in @fediim-dev/fds-tokens/tokens.css; load it first. Class prefix: fd- */

.fd-root { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-canvas); font-variant-numeric: tabular-nums; }
.fd-root *, .fd-root *::before, .fd-root *::after { box-sizing: border-box; }
.fd-root :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-icon { width: var(--size-icon); height: var(--size-icon); flex-shrink: 0; }
.fd-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* Button */
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--size-touch); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font: 600 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer; }
.fd-btn--primary { background: var(--action-primary); color: var(--on-action-primary); }
.fd-btn--primary:hover { opacity: 0.9; }
.fd-btn--secondary { border-color: var(--border-control); }
.fd-btn--secondary:hover, .fd-btn--tonal:hover, .fd-btn--ghost:hover { background: var(--bg-hover); }
.fd-btn--tonal { background: var(--bg-hover); }
.fd-btn--ghost { color: var(--accent); padding: 0 var(--space-3); }
.fd-btn--danger { background: var(--critical); color: var(--on-critical); }
.fd-btn--sm { min-height: var(--size-control-sm); padding: 0 var(--space-3); }
.fd-btn--block { width: 100%; }
.fd-btn:disabled, .fd-btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.fd-btn kbd { font: 400 13px/1 var(--font-sans); opacity: 0.8; }

/* Icon button */
.fd-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--size-touch); height: var(--size-touch); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; position: relative; }
.fd-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.fd-iconbtn--outlined { border-color: var(--border-default); }
.fd-iconbtn__dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--warning); }
.fd-iconbtn:disabled, .fd-iconbtn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* Segmented control */
.fd-seg { display: inline-flex; gap: 2px; padding: var(--space-1); border-radius: var(--radius-md); background: var(--bg-sunken); }
.fd-seg__item { min-height: 40px; padding: 0 var(--space-4); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: 500 14px/20px var(--font-sans); cursor: pointer; }
.fd-seg__item[aria-pressed="true"] { background: var(--bg-selected); color: var(--text-strong); font-weight: 600; box-shadow: 0 0 0 1px var(--border-control); }

/* Badge */
.fd-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--bg-hover); color: var(--text-primary); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.fd-badge--warning { background: var(--warning-soft); color: var(--warning); }
.fd-badge--critical { background: var(--critical-soft); color: var(--critical); }
.fd-badge--success { background: var(--success-soft); color: var(--success); }
.fd-badge--info { background: var(--accent-soft); color: var(--on-accent-soft); }

/* Icon tile */
.fd-tile { display: inline-flex; align-items: center; justify-content: center; width: var(--size-tile); height: var(--size-tile); flex-shrink: 0; border-radius: var(--radius-md); }
.fd-tile--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.fd-tile--amber { background: var(--tile-amber-bg); color: var(--tile-amber); }
.fd-tile--blue { background: var(--tile-blue-bg); color: var(--tile-blue); }
.fd-tile--purple { background: var(--tile-purple-bg); color: var(--tile-purple); }
.fd-tile--red { background: var(--tile-red-bg); color: var(--tile-red); }
.fd-tile--green { background: var(--tile-green-bg); color: var(--tile-green); }
.fd-tile--orange { background: var(--tile-orange-bg); color: var(--tile-orange); }

/* Card */
.fd-card { display: flex; flex-direction: column; gap: 14px; padding: 18px var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); }
.fd-card__head { display: flex; align-items: center; gap: 10px; }
.fd-card__title { margin: 0; flex-grow: 1; font: 500 16px/24px var(--font-sans); color: var(--text-strong); }
.fd-card__foot { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-link { color: var(--accent); font: 500 14px/20px var(--font-sans); text-decoration: none; }
.fd-link:hover { text-decoration: underline; }

/* Stat */
.fd-stat__value { display: flex; align-items: baseline; gap: var(--space-2); }
.fd-stat__num { font: 400 34px/40px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-strong); }
.fd-stat__sub { font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }

/* Stacked bar + legend */
.fd-bar { display: flex; gap: 3px; height: 10px; }
.fd-bar > span { flex-basis: 0; border-radius: 4px; }
.fd-bar__s1 { background: var(--chart-series-1); }
.fd-bar__s2 { background: var(--chart-series-2); }
.fd-bar__warn { background: var(--chart-warning); }
.fd-bar__track { background: var(--chart-track); }
.fd-legend { display: flex; flex-direction: column; gap: var(--space-2); font: 400 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; }
.fd-legend__row { display: flex; align-items: center; gap: var(--space-2); }
.fd-legend__key { width: 10px; height: 10px; border-radius: 3px; }
.fd-legend__label { flex-grow: 1; }
.fd-legend__val { font-weight: 600; color: var(--text-strong); }

/* Action list (Waiting for you) */
.fd-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.fd-list__head { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.fd-list__title { margin: 0; font: 500 17px/24px var(--font-sans); color: var(--text-strong); }
.fd-row { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px var(--space-5); }
.fd-row + .fd-row { border-top: 1px solid var(--border-subtle); }
.fd-row__body { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; min-width: 0; }
.fd-row__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-row__title { font: 500 15px/22px var(--font-sans); color: var(--text-strong); }
.fd-row__meta { font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-row--done .fd-row__meta { color: var(--text-secondary); }

/* Agenda + activity */
.fd-dayhead { font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.fd-agenda { display: flex; gap: var(--space-3); padding: var(--space-3) 14px; border-radius: var(--radius-lg); }
.fd-agenda--next { border: 1px solid var(--border-default); background: var(--bg-canvas); }
.fd-agenda__time { width: 44px; flex-shrink: 0; font: 600 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-agenda--next .fd-agenda__time { color: var(--accent); }
.fd-agenda__title { font: 500 15px/22px var(--font-sans); color: var(--text-primary); }
.fd-agenda__value { margin-left: auto; flex-shrink: 0; font: 600 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.fd-agenda__meta, .fd-activity__when { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-activity { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) 0; }
.fd-activity + .fd-activity { border-top: 1px solid var(--border-subtle); }
.fd-activity__what { font: 400 14px/20px var(--font-sans); color: var(--text-primary); }
.fd-activity--avatar { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.fd-activity__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Table */
.fd-table-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); overflow-x: auto; }
.fd-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); }
.fd-table th { padding: 10px var(--space-4); text-align: left; font: 600 12px/16px var(--font-sans); color: var(--text-secondary); border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.fd-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); white-space: nowrap; }
.fd-table tr:last-child td { border-bottom: none; }
.fd-table tbody tr:hover td { background: var(--bg-hover); }
.fd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fd-table__group th { position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-4); background: var(--bg-sunken); font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.fd-table tbody tr[aria-current="true"] td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.fd-table-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.fd-table-cards__group { margin: 0; font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.fd-table-cards__list + .fd-table-cards__group { margin-top: var(--space-3); }
.fd-table-cards__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-table-card[aria-current="true"] { box-shadow: inset 4px 0 0 var(--accent); }
.fd-table-card__fields { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; font: 400 14px/20px var(--font-sans); }
.fd-table-card__field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.fd-table-card__field dt { font: 600 12px/16px var(--font-sans); color: var(--text-secondary); }
.fd-table-card__field dd { margin: 0; text-align: right; color: var(--text-primary); }
.fd-table-card .num { font-variant-numeric: tabular-nums; }
.fd-table-card__action { display: flex; }
.fd-table-card__action .fd-btn--sm { min-height: var(--size-touch); padding: 0 var(--space-4); }

/* Fields */
.fd-field { display: flex; flex-direction: column; gap: 6px; }
.fd-field__label { font: 600 14px/20px var(--font-sans); color: var(--text-primary); }
.fd-field__help { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-field__error { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--critical); }
.fd-input, .fd-select { min-height: var(--size-touch); padding: 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--text-primary); font: 400 15px/22px var(--font-sans); }
.fd-input::placeholder { color: var(--text-tertiary); }
.fd-input[aria-invalid="true"] { border-color: var(--critical); }

/* Switch */
.fd-switch-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; }
.fd-switch-row__text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.fd-switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; padding: 0; border: 2px solid var(--border-control); border-radius: var(--radius-full); background: var(--bg-sunken); cursor: pointer; }
.fd-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--text-secondary); }
.fd-switch[aria-checked="true"] { border-color: var(--action-primary); background: var(--action-primary); }
.fd-switch[aria-checked="true"]::after { left: 20px; top: 2px; width: 18px; height: 18px; background: var(--on-action-primary); }

/* Command bar */
.fd-cmd { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-sunken); color: var(--text-secondary); }
.fd-cmd input { flex-grow: 1; min-width: 0; min-height: var(--size-touch); border: none; background: transparent; color: var(--text-primary); font: 400 16px/24px var(--font-sans); }
.fd-cmd input::placeholder { color: var(--text-tertiary); }

/* Sidebar nav */
.fd-nav { display: flex; flex-direction: column; width: var(--layout-sidebar); padding: 14px 10px; background: var(--bg-nav); border-right: 1px solid var(--border-subtle); }
.fd-nav__body { flex: 1 1 auto; min-height: 0; margin: calc(-1 * var(--space-1)); padding: var(--space-1); overflow-y: auto; }
.fd-nav__section { padding: 22px 10px 8px; font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.fd-nav__item { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-secondary); font: 400 15px/22px var(--font-sans); text-decoration: none; }
.fd-nav__item:hover { background: var(--bg-hover); color: var(--text-primary); }
.fd-nav__item[aria-current="page"] { background: var(--bg-hover); color: var(--text-strong); font-weight: 500; box-shadow: inset 3px 0 0 var(--text-strong); }
.fd-nav__icon { display: flex; flex-shrink: 0; }
.fd-nav__text { display: contents; }
.fd-nav__count { margin-left: auto; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-nav__count--warning { color: var(--warning); font-weight: 600; }
.fd-nav__foot { display: flex; align-items: center; gap: var(--space-1); }
/* Rail (72px): 44px icon-only items; the label and count show as a tooltip on hover and keyboard focus, and stay the accessible name.
   The tooltip is position: fixed at --fd-nav-tip-x/y (the right edge and middle of the item box, set by script) so the scrolling body does not clip it. */
.fd-nav--rail { --fd-nav-tip-x: 0px; --fd-nav-tip-y: 0px; width: 72px; padding: 14px 13px 14px 14px; }
.fd-nav--rail .fd-nav__section { height: 1px; margin: var(--space-2) 0; padding: 0; overflow: hidden; background: var(--border-subtle); color: transparent; }
.fd-nav--rail .fd-nav__item { position: relative; justify-content: center; width: var(--size-touch); min-height: var(--size-touch); padding: 0; }
.fd-nav--rail .fd-nav__text { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.fd-nav--rail:not([data-tooltips="off"]) .fd-nav__item:is(:hover, :focus-visible) .fd-nav__text { position: fixed; z-index: 1; top: var(--fd-nav-tip-y); left: calc(var(--fd-nav-tip-x) + var(--space-4)); display: flex; align-items: center; gap: var(--space-2); width: auto; height: auto; overflow: visible; clip: auto; padding: var(--space-1) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font: 400 14px/20px var(--font-sans); transform: translateY(-50%); }
.fd-nav--rail .fd-nav__text::before { content: ""; position: absolute; top: 0; right: 100%; bottom: 0; width: var(--space-4); }
.fd-nav--rail .fd-nav__count { margin-left: 0; }
.fd-nav--rail .fd-nav__item:has(.fd-nav__count--warning)::after { content: ""; position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--warning); }
.fd-nav--rail .fd-nav__foot { flex-direction: column; }

/* Top bar */
.fd-topbar { display: flex; align-items: center; gap: 10px; height: var(--layout-topbar); padding: 0 var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--bg-canvas); }
.fd-topbar__context { flex-grow: 1; font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-topbar--appbar { height: var(--layout-appbar); padding: 0 var(--space-1); }
.fd-topbar__scope { display: flex; }
.fd-topbar__scope .fd-btn--ghost { color: var(--text-strong); }

/* Bottom nav (mobile) */
.fd-bottomnav { display: flex; align-items: stretch; height: calc(var(--layout-bottomnav) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--space-1) env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--border-default); background: var(--bg-nav); }
.fd-bottomnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: var(--size-touch); color: var(--text-secondary); font: 500 12px/16px var(--font-sans); text-decoration: none; }
.fd-bottomnav__pill { display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: var(--radius-md); }
.fd-bottomnav__item[aria-current="page"] { color: var(--text-strong); font-weight: 600; box-shadow: inset 0 3px 0 var(--text-strong); }
.fd-bottomnav__item[aria-current="page"] .fd-bottomnav__pill { background: var(--bg-hover); }
.fd-bottomnav__item:focus-visible { outline: none; }
.fd-bottomnav__item:focus-visible .fd-bottomnav__pill { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The optional centre Create: a button, not a destination, with the pill filled in action-primary. */
.fd-bottomnav__create { margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fd-bottomnav__create .fd-bottomnav__pill { background: var(--action-primary); color: var(--on-action-primary); }
.fd-bottomnav__create:hover .fd-bottomnav__pill { opacity: 0.9; }

/* Toast */
.fd-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4); border-radius: var(--radius-md); background: var(--action-primary); color: var(--on-action-primary); font: 400 14px/20px var(--font-sans); box-shadow: var(--shadow-toast); }
.fd-toast .fd-btn { color: var(--on-action-primary); text-decoration: underline; }
.fd-toast .fd-btn:hover { background: transparent; text-decoration-thickness: 2px; }
.fd-toast .fd-btn:focus-visible { outline-color: var(--on-action-primary); }

/* Dialog */
.fd-scrim { display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--scrim); }
.fd-dialog { display: flex; flex-direction: column; gap: var(--space-4); width: 440px; max-width: 100%; padding: var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-overlay); }
.fd-dialog--sheet { margin-top: auto; margin-bottom: 0; width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fd-dialog__title { margin: 0; font: 500 24px/32px var(--font-sans); letter-spacing: -0.01em; color: var(--text-strong); }
.fd-dialog__body { margin: 0; font: 400 15px/22px var(--font-sans); color: var(--text-secondary); }
.fd-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Banner */
.fd-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font: 400 14px/20px var(--font-sans); }
.fd-banner--warning { background: var(--warning-soft); color: var(--text-primary); }
.fd-banner--warning .fd-icon { color: var(--warning); }
.fd-banner--critical { background: var(--critical-soft); color: var(--text-primary); }
.fd-banner--critical .fd-icon { color: var(--critical); }
.fd-banner--info { background: var(--accent-soft); color: var(--text-primary); }
.fd-banner--info .fd-icon { color: var(--accent); }
.fd-banner__title { font-weight: 600; color: var(--text-strong); }
.fd-banner__action { margin-left: auto; align-self: center; }

/* Empty state */
.fd-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center; border: 1px dashed var(--border-default); border-radius: var(--radius-lg); }
.fd-empty__title { margin: 0; font: 500 17px/24px var(--font-sans); color: var(--text-strong); }
.fd-empty__body { margin: 0; max-width: 360px; font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }

/* Avatar */
.fd-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--size-avatar); height: var(--size-avatar); flex-shrink: 0; border-radius: var(--radius-full); background: var(--bg-hover); color: var(--text-strong); font: 600 12px/1 var(--font-sans); }

/* Sheet */
.fd-sheet-scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; }
.fd-sheet-scrim--overlay { justify-content: flex-end; align-items: stretch; }
.fd-sheet-scrim--bottom { justify-content: flex-start; align-items: flex-end; }
.fd-sheet { display: flex; flex-direction: column; background: var(--bg-card); color: var(--text-primary); box-sizing: border-box; }
.fd-sheet--docked { background: var(--bg-nav); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.fd-sheet--overlay { height: 100%; border-left: 1px solid var(--border-default); box-shadow: var(--shadow-overlay); }
.fd-sheet--bottom { width: 100%; border-top: 1px solid var(--border-default); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-overlay); padding-bottom: env(safe-area-inset-bottom, 0px); }
.fd-sheet--panel { width: var(--layout-panel); }
.fd-sheet--form { width: var(--layout-sheet); }
.fd-sheet__handle { width: 36px; height: 4px; margin: var(--space-2) auto 0; border-radius: var(--radius-full); background: var(--border-control); align-self: center; flex-shrink: 0; }
.fd-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.fd-sheet__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex-grow: 1; }
.fd-sheet__title { margin: 0; font: 500 17px/24px var(--font-sans); color: var(--text-strong); }
.fd-sheet__sub { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-sheet__close { margin: -6px -8px -6px 0; }
.fd-sheet__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.fd-sheet__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--bg-card); flex-shrink: 0; }
.fd-sheet--docked .fd-sheet__foot { background: var(--bg-nav); }

/* InputChip */
.fd-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--size-control-sm); padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-sunken); color: var(--text-primary); font: 500 13px/18px var(--font-sans); box-sizing: border-box; vertical-align: middle; position: relative; }
.fd-chip--with-icon { padding-left: var(--space-2); }
.fd-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--text-secondary); flex-shrink: 0; }
.fd-chip__icon svg, .fd-chip__icon .fd-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.fd-chip__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.fd-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; position: relative; }
.fd-chip__remove:hover { color: var(--text-primary); background: var(--bg-hover); }
.fd-chip__remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.fd-chip__remove::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: var(--size-touch); min-height: var(--size-touch); }
.fd-chip--disabled, .fd-chip[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }
.fd-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* PageHeader */
.fd-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.fd-pagehead--compact { gap: var(--space-3); }
.fd-pagehead__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.fd-pagehead__title { margin: 0; font: 600 24px/32px var(--font-sans); color: var(--text-strong); }
.fd-pagehead--compact .fd-pagehead__title { font: 600 20px/26px var(--font-sans); }
.fd-pagehead__intro { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-pagehead__controls { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; flex-shrink: 0; }

/* PeriodStepper */
.fd-stepper { display: inline-flex; align-items: center; gap: var(--space-1); box-sizing: border-box; }
.fd-stepper__period { font: 500 14px/20px var(--font-sans); color: var(--text-strong); padding: 0 var(--space-2); white-space: nowrap; user-select: none; }
.fd-stepper__trigger { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--size-touch); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; font: 500 14px/20px var(--font-sans); color: var(--text-strong); cursor: pointer; white-space: nowrap; }
.fd-stepper__trigger:hover { background: var(--bg-hover); }
.fd-stepper__trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-stepper--disabled { opacity: var(--opacity-disabled); pointer-events: none; }
 
/* FileUpload */
.fd-fileupload { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; box-sizing: border-box; }
.fd-fileupload__dropzone { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); border: 1.5px dashed var(--border-control); border-radius: var(--radius-md); background: var(--bg-sunken); text-align: center; cursor: pointer; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; position: relative; width: 100%; }
.fd-fileupload__dropzone:hover { background: var(--bg-hover); }
.fd-fileupload__dropzone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-fileupload__dropzone--dragover, .fd-fileupload__dropzone.is-dragover { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.fd-fileupload__dropzone--disabled, .fd-fileupload__dropzone[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
.fd-fileupload__icon { display: flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); margin-bottom: var(--space-2); color: var(--text-secondary); }
.fd-fileupload__icon svg, .fd-fileupload__icon .fd-icon { width: var(--size-icon); height: var(--size-icon); }
.fd-fileupload__prompt { margin: 0; font: 500 15px/22px var(--font-sans); color: var(--text-strong); }
.fd-fileupload__help { margin: var(--space-1) 0 0; font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-fileupload__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fd-fileupload__list { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.fd-fileupload__item { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); position: relative; width: 100%; }
.fd-fileupload__item-icon { display: flex; align-items: center; justify-content: center; width: var(--size-icon); height: var(--size-icon); color: var(--text-secondary); flex-shrink: 0; }
.fd-fileupload__item-icon svg, .fd-fileupload__item-icon .fd-icon { width: var(--size-icon); height: var(--size-icon); }
.fd-fileupload__item-content { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.fd-fileupload__item-name { font: 500 14px/20px var(--font-sans); color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-fileupload__item-meta { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-fileupload__item--error .fd-fileupload__item-meta { color: var(--critical); }
.fd-fileupload__progress { width: 100%; height: 4px; background: var(--bg-hover); border-radius: var(--radius-sm); overflow: hidden; margin-top: 4px; }
.fd-fileupload__progress-bar { height: 100%; background: var(--accent); transition: width 0.2s ease; border-radius: var(--radius-sm); }
.fd-fileupload__item-actions { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; margin-left: auto; }
.fd-fileupload__retry { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-2); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: transparent; font: 500 13px/18px var(--font-sans); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.fd-fileupload__retry:hover { background: var(--bg-hover); }
.fd-fileupload__retry:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-fileupload__remove { display: inline-flex; align-items: center; justify-content: center; width: var(--size-touch); height: var(--size-touch); margin: -6px -8px -6px 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; }
.fd-fileupload__remove:hover { color: var(--text-primary); background: var(--bg-hover); }
.fd-fileupload__remove:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* BarList */
.fd-barlist { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; box-sizing: border-box; }
.fd-barlist__item { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
.fd-barlist__row { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; text-decoration: none; color: inherit; border-radius: var(--radius-sm); position: relative; background: transparent; border: none; padding: 0; text-align: left; }
.fd-barlist__row--interactive { padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.fd-barlist__row--interactive:hover { background: var(--bg-hover); }
.fd-barlist__row--interactive:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-barlist__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 24px; }
.fd-barlist__lead-group { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.fd-barlist__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--chart-series-1); flex-shrink: 0; }
.fd-barlist__label { font: 500 14px/20px var(--font-sans); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-barlist__values { display: inline-flex; align-items: baseline; gap: var(--space-2); flex-shrink: 0; }
.fd-barlist__val { font: 500 14px/20px var(--font-sans); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fd-barlist__share { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-barlist__track { width: 100%; height: 6px; background: var(--chart-track); border-radius: var(--radius-sm); overflow: hidden; }
.fd-barlist__bar { height: 100%; background: var(--chart-series-1); border-radius: var(--radius-sm); }

/* CalendarMonth */
.fd-calendar { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; box-sizing: border-box; }
.fd-calendar--week { gap: var(--space-2); }
.fd-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; }
.fd-calendar__title { margin: 0; font: 600 16px/24px var(--font-sans); color: var(--text-strong); }
.fd-calendar__controls { display: inline-flex; align-items: center; gap: var(--space-1); }
.fd-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; text-align: center; }
.fd-calendar__weekday { font: 500 12px/16px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-tertiary); padding: var(--space-1) 0; }
.fd-calendar__grid { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.fd-calendar__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.fd-calendar__cell { display: flex; min-width: 0; }
.fd-calendar__day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; min-height: 48px; padding: var(--space-1) 2px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; user-select: none; font-family: var(--font-sans); box-sizing: border-box; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.fd-calendar__day:hover { background: var(--bg-hover); }
.fd-calendar__day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-calendar__day--today .fd-calendar__date { background: var(--accent-soft); color: var(--on-accent-soft); font-weight: 600; }
.fd-calendar__day--selected { background: var(--bg-selected); border-color: var(--border-control); color: var(--text-strong); }
.fd-calendar__day--selected .fd-calendar__date { font-weight: 600; }
.fd-calendar__day--selected.fd-calendar__day--today .fd-calendar__date { background: var(--action-primary); color: var(--on-action-primary); }
.fd-calendar__day--outside { color: var(--text-tertiary); opacity: 0.5; }
.fd-calendar__day--outside .fd-calendar__date { color: var(--text-tertiary); }
.fd-calendar__date { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: var(--radius-full); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; color: inherit; }
.fd-calendar__markers { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 8px; margin-top: 2px; flex-wrap: wrap; }
.fd-calendar__marker { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); flex-shrink: 0; }
.fd-calendar__marker--amber { background: var(--tile-amber); }
.fd-calendar__marker--blue { background: var(--tile-blue); }
.fd-calendar__marker--purple { background: var(--tile-purple); }
.fd-calendar__marker--red { background: var(--tile-red); }
.fd-calendar__marker--green { background: var(--tile-green); }
.fd-calendar__marker--orange { background: var(--tile-orange); }
.fd-calendar__overflow { font: 600 10px/12px var(--font-sans); color: var(--text-secondary); margin-left: 1px; font-variant-numeric: tabular-nums; line-height: 1; }

/* SplitPane */
.fd-split { display: flex; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.fd-split--vertical { flex-direction: column; }
.fd-split__pane { min-width: 0; min-height: 0; padding: var(--space-4); font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-split__pane strong { display: block; font-weight: 500; color: var(--text-strong); }
.fd-split__handle { position: relative; flex: 0 0 12px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; cursor: col-resize; touch-action: none; user-select: none; }
.fd-split__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border-default); }
.fd-split__handle::after { content: ""; position: relative; width: 4px; height: 32px; border-radius: var(--radius-full); background: var(--border-control); }
.fd-split__handle:hover::after, .fd-split__handle--dragging::after { background: var(--text-strong); }
.fd-split__handle--dragging::before { background: var(--accent); }
.fd-split__handle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.fd-split--vertical > .fd-split__handle { cursor: row-resize; }
.fd-split--vertical > .fd-split__handle::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
.fd-split--vertical > .fd-split__handle::after { width: 32px; height: 4px; }

/* TreeView */
.fd-tree { --fd-tree-level: 0; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.fd-tree--dense .fd-tree__row { min-height: var(--size-control-sm); font-size: 13px; line-height: 18px; }
.fd-tree__row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); padding-right: var(--space-1); padding-left: calc(var(--space-1) + var(--fd-tree-level, 0) * 20px); border-radius: var(--radius-md); color: var(--text-primary); font: 400 15px/22px var(--font-sans); }
.fd-tree__toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; padding: 0; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; }
.fd-tree__row > .fd-icon { color: var(--text-secondary); }
.fd-tree__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-tree__meta { flex-grow: 1; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.fd-tree__actions { display: flex; }
.fd-tree__row:hover, .fd-tree__row--hover { background: var(--bg-hover); }
.fd-tree__row[aria-selected="true"] { background: var(--bg-hover); color: var(--text-strong); font-weight: 500; }
.fd-tree__row--drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--on-accent-soft); }
.fd-tree__row--drop .fd-tree__meta, .fd-tree__row--drop > .fd-icon, .fd-tree__row--drop .fd-tree__toggle { color: inherit; }
.fd-tree__row[aria-disabled="true"] { opacity: var(--opacity-disabled); }

/* PromptComposer */
.fd-prompt { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-sunken); }
.fd-prompt:focus-within { border-color: var(--border-control); }
.fd-prompt--error { border-color: var(--critical); }
.fd-prompt--disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.fd-prompt__input { min-height: 44px; padding: var(--space-1); border: none; outline: none; background: transparent; color: var(--text-primary); font: 400 16px/22px var(--font-sans); resize: none; }
.fd-prompt__input::placeholder { color: var(--text-tertiary); }
.fd-prompt__input:disabled { color: var(--text-secondary); cursor: not-allowed; }
.fd-prompt__bar { display: flex; align-items: center; gap: var(--space-2); }
.fd-prompt__lead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); flex-grow: 1; min-width: 0; font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-prompt--busy .fd-prompt__input { color: var(--text-secondary); }
.fd-prompt__suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fd-prompt__ring { width: 12px; height: 12px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: var(--radius-full); animation: fd-spin 1s linear infinite; }

/* RunSteps */
.fd-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.fd-steps__item { display: flex; gap: var(--space-3); font: 400 15px/22px var(--font-sans); color: var(--text-secondary); }
.fd-steps__mark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 22px; flex-shrink: 0; }
.fd-steps__ring { width: 12px; height: 12px; border: 2px solid var(--border-control); border-radius: var(--radius-full); box-sizing: border-box; }
.fd-steps__body { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.fd-steps__detail { font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-steps__time { font: 400 13px/22px var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.fd-steps__item--done .fd-steps__mark { color: var(--success); }
.fd-steps__item--active { color: var(--text-strong); font-weight: 500; }
.fd-steps__item--active .fd-steps__ring { border-color: var(--accent); border-top-color: transparent; }
.fd-steps__item--failed { color: var(--text-strong); font-weight: 500; }
.fd-steps__item--failed .fd-steps__mark, .fd-steps__item--failed .fd-steps__detail { color: var(--critical); }

/* Transcript */
.fd-transcript { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); }
.fd-msg { display: flex; flex-direction: column; gap: var(--space-2); max-width: 80%; font: 400 15px/22px var(--font-sans); color: var(--text-primary); }
.fd-msg--own { align-self: flex-end; padding: 10px 14px; border-radius: var(--radius-lg); background: var(--bg-hover); }
.fd-msg__meta { display: flex; align-items: center; gap: var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }
.fd-msg__name { font-weight: 600; color: var(--text-strong); }
.fd-msg__attachment { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-canvas); }
.fd-transcript__status { display: flex; align-items: center; gap: var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--text-secondary); }

/* CodeBlock */
.fd-code { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-sunken); overflow: hidden; }
.fd-code__head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); padding: 0 var(--space-1) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-card); }
.fd-code__title { flex-grow: 1; font: 500 14px/20px var(--font-mono); color: var(--text-primary); }
.fd-code__body { margin: 0; padding: var(--space-3) 0; overflow-x: auto; font: 400 13px/20px var(--font-mono); color: var(--text-primary); counter-reset: fd-line; }
.fd-code__body--wrap { white-space: pre-wrap; word-break: break-all; }
.fd-code__line { display: block; padding-right: var(--space-4); white-space: pre; }
.fd-code__body--wrap .fd-code__line { white-space: pre-wrap; }
.fd-code__line::before { counter-increment: fd-line; content: counter(fd-line); display: inline-block; width: 40px; margin-right: var(--space-3); text-align: right; color: var(--text-tertiary); }
.fd-code__body--no-numbers .fd-code__line::before { display: none; }
.fd-code__line--error { background: var(--critical-soft); box-shadow: inset 3px 0 0 var(--critical); }
.fd-code__foot { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-subtle); background: var(--bg-card); font: 400 13px/18px var(--font-sans); color: var(--critical); }
.fd-code__edit { display: flex; position: relative; background: var(--bg-sunken); overflow-x: auto; }
.fd-code__gutter { display: flex; flex-direction: column; padding: var(--space-3) 0; user-select: none; }
.fd-code__gutter-num { display: inline-block; width: 40px; margin-right: var(--space-3); text-align: right; font: 400 13px/20px var(--font-mono); color: var(--text-tertiary); }
.fd-code__textarea { flex-grow: 1; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) 0; border: none; background: transparent; color: var(--text-primary); font: 400 13px/20px var(--font-mono); resize: none; outline: none; white-space: pre; overflow-x: auto; }
.fd-code__textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* ColorField */
.fd-color { display: flex; align-items: center; gap: var(--space-2); }
.fd-color__swatch { width: var(--size-touch); height: var(--size-touch); flex-shrink: 0; padding: 0; border: 1px solid var(--border-control); border-radius: var(--radius-md); cursor: pointer; }
.fd-color__swatch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-color__swatch:disabled { cursor: not-allowed; }
.fd-color .fd-input { flex: 1 1 0; min-width: 0; font-family: var(--font-mono); font-size: 14px; }
.fd-colorpicker { display: flex; flex-direction: column; gap: var(--space-3); width: 264px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-overlay); }
.fd-colorpicker--sheet { width: 100%; max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.fd-colorpicker__area { position: relative; height: 132px; border-radius: var(--radius-sm); cursor: crosshair; user-select: none; }
.fd-colorpicker__area:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-colorpicker__slider { position: relative; height: 12px; border-radius: var(--radius-full); cursor: pointer; user-select: none; }
.fd-colorpicker__slider:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-colorpicker__thumb { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: var(--radius-full); box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }

/* NumberField */
.fd-number { display: flex; align-items: stretch; min-height: var(--size-touch); border: 1px solid var(--border-control); border-radius: var(--radius-md); background: var(--bg-sunken); overflow: hidden; }
.fd-number:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fd-number input { flex: 1 1 0; min-width: 0; padding: 0 var(--space-3); border: none; outline: none; background: transparent; color: var(--text-primary); font: 400 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.fd-number__unit { display: flex; align-items: center; padding-right: var(--space-3); font: 400 14px/20px var(--font-sans); color: var(--text-secondary); }
.fd-number__step { display: inline-flex; align-items: center; justify-content: center; width: var(--size-touch); padding: 0; border: none; border-left: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); cursor: pointer; }
.fd-number__step:hover { background: var(--bg-hover); color: var(--text-primary); }
.fd-number__step:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.fd-number--invalid { border-color: var(--critical); }

/* Tooltip */
.fd-tip-anchor { position: relative; display: inline-flex; }
.fd-tip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: var(--space-2); width: max-content; max-width: 240px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font: 400 13px/18px var(--font-sans); white-space: normal; box-sizing: border-box; pointer-events: none; }
.fd-tip kbd { font: 400 12px/16px var(--font-sans); color: var(--text-secondary); }
.fd-tip--top { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.fd-tip--bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.fd-tip--start { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.fd-tip--end { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }

/* Skeleton */
.fd-skeleton { display: block; background: var(--bg-hover); border-radius: var(--radius-md); animation: fd-skeleton-pulse 1500ms var(--ease-in-out) infinite; box-sizing: border-box; }
.fd-skeleton--text { height: 14px; width: 100%; border-radius: var(--radius-sm); }
.fd-skeleton--circle { border-radius: var(--radius-full); flex-shrink: 0; }
.fd-skeleton--rect { border-radius: var(--radius-md); }
@keyframes fd-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Motion, tactile :active states & <kbd> keycap */
.fd-btn, .fd-iconbtn, .fd-seg__item { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.fd-btn:active:not(:disabled):not([aria-disabled="true"]), .fd-iconbtn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(0.98); }
.fd-switch { transition: background-color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out); }
.fd-switch::after { transition: left var(--duration-normal) var(--ease-in-out), top var(--duration-normal) var(--ease-in-out), width var(--duration-normal) var(--ease-in-out), height var(--duration-normal) var(--ease-in-out), background-color var(--duration-normal) var(--ease-in-out); }
.fd-kbd { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 var(--space-1); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--text-secondary); font: 500 12px/16px var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .fd-btn:active:not(:disabled):not([aria-disabled="true"]), .fd-iconbtn:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
  .fd-skeleton { animation: none; }
}

/* Material Design 3 Expressive & iOS 26 Liquid Glass idioms */
:is([data-ds="material"], [data-theme^="m3-"]).fd-root,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-root { letter-spacing: 0.015em; }
:is([data-ds="ios"], [data-theme^="ios-"]).fd-root,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-root { letter-spacing: -0.022em; }

/* Buttons & IconButtons: M3 = full stadium pill (morphs on press); iOS = 10px continuous squircle with tinted borderless secondary */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-btn,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-iconbtn { border-radius: var(--radius-full); font-weight: 500; letter-spacing: 0.03em; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-btn:active:not(:disabled):not([aria-disabled="true"]),
:is([data-ds="material"], [data-theme^="m3-"]) .fd-iconbtn:active:not(:disabled):not([aria-disabled="true"]) { border-radius: var(--radius-md); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-btn,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-iconbtn { border-radius: 10px; font-weight: 600; letter-spacing: -0.02em; }
:is([data-ds="material"], [data-theme^="m3-"], [data-ds="ios"], [data-theme^="ios-"]) .fd-btn--tonal { background: var(--accent-soft); color: var(--on-accent-soft); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-btn--secondary { background: color-mix(in srgb, var(--accent-soft) 78%, transparent); color: var(--accent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-iconbtn--outlined { background: color-mix(in srgb, var(--bg-card) 68%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: color-mix(in srgb, var(--border-default) 55%, rgba(255, 255, 255, 0.32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 0.12); }

/* SegmentedControl: M3 = joined outlined pill with 1px dividers; iOS = 9px sunken tray with 7px floating shadowed card thumb */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-seg { gap: 0; padding: 0; border: 1px solid var(--border-control); border-radius: var(--radius-full); background: transparent; overflow: hidden; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-seg__item { border-radius: 0; border-right: 1px solid var(--border-control); font-weight: 500; letter-spacing: 0.025em; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-seg__item:last-child { border-right: none; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-seg__item[aria-pressed="true"] { background: var(--accent-soft); color: var(--on-accent-soft); box-shadow: none; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-seg { padding: 3px; border-radius: 9px; background: color-mix(in srgb, var(--bg-sunken) 84%, transparent); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-seg__item { min-height: 34px; border-radius: 7px; letter-spacing: -0.015em; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-seg__item[aria-pressed="true"] { background: color-mix(in srgb, var(--bg-card) 92%, rgba(255, 255, 255, 0.22)); color: var(--text-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 2px 6px rgba(0, 0, 0, 0.18); }

/* Inputs & Selects: M3 = 4px top corners + flat bottom with 2px indicator bar; iOS = 10px continuous rounded rect */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-input,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-select,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-number { border-radius: 4px 4px 0 0; border-color: transparent; border-bottom: 2px solid var(--border-control); background: var(--bg-hover); }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-input:focus-visible,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-select:focus-visible,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-number:focus-within { outline: none; border-bottom-color: var(--action-primary); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-input,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-select,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-number { border-radius: 10px; border-color: color-mix(in srgb, var(--border-default) 60%, rgba(255, 255, 255, 0.22)); background: var(--bg-sunken); }

/* Cards & Surfaces: M3 = 12px flat tonal card; iOS = 20px inset grouped squircle with top specular rim */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-card:not([class*="fd-card--alert-"]),
:is([data-ds="material"], [data-theme^="m3-"]) .fd-split,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-list,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-transcript,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-code,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-table-wrap { border-radius: 12px; border-color: transparent; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-card,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-split,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-list,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-transcript,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-code,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-table-wrap { border-radius: 20px; border-color: color-mix(in srgb, var(--border-default) 45%, rgba(255, 255, 255, 0.28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-card__title,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-list__title,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-pagehead__title { font-weight: 600; letter-spacing: -0.025em; }

/* Chips, Badges & IconTiles: M3 = 8px rectangular chip & circular IconTile; iOS = full capsule chip & 10px App-Icon squircle tile */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-chip,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-fchip,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-badge { border-radius: 8px; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-tile { border-radius: var(--radius-full); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-badge,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-chip,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-fchip { border-radius: var(--radius-full); border-color: transparent; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-tile { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* Switch: M3 = 52x32px outlined track with 16px->24px thumb; iOS = 51x31px borderless green track with 27px circular white thumb */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-switch { width: 52px; height: 32px; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-switch::after { top: 6px; left: 6px; width: 16px; height: 16px; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-switch[aria-checked="true"]::after { top: 2px; left: 22px; width: 24px; height: 24px; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-switch { width: 51px; height: 31px; border-color: transparent; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-switch::after { top: 2px; left: 2px; width: 27px; height: 27px; background: var(--gray-0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.26); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-switch[aria-checked="true"] { border-color: var(--success); background: var(--success); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-switch[aria-checked="true"]::after { left: 22px; top: 2px; width: 27px; height: 27px; background: var(--gray-0); }

/* Navigation: M3 = full-pill drawer item & 64x32px BottomNav icon pill; iOS = 10px squircle sidebar item & direct accent-tinted BottomNav */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-nav { border-right-color: transparent; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-nav__item { border-radius: var(--radius-full); }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-nav__item[aria-current="page"] { background: var(--accent-soft); color: var(--on-accent-soft); box-shadow: none; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-topbar { background: var(--bg-nav); border-bottom-color: transparent; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-bottomnav { border-top-color: transparent; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-bottomnav__pill { width: 64px; height: 32px; border-radius: var(--radius-full); }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-bottomnav__item[aria-current="page"] { box-shadow: none; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-bottomnav__item[aria-current="page"] .fd-bottomnav__pill { background: var(--accent-soft); color: var(--on-accent-soft); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-nav { background: color-mix(in srgb, var(--bg-nav) 72%, transparent); backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%); border-right-color: transparent; box-shadow: inset -0.5px 0 0 rgba(255, 255, 255, 0.22); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-nav__item { border-radius: 10px; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-nav__item[aria-current="page"] { background: color-mix(in srgb, var(--accent-soft) 82%, transparent); color: var(--accent); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 2px 8px rgba(0, 0, 0, 0.1); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-topbar { background: color-mix(in srgb, var(--bg-nav) 68%, transparent); backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%); border-bottom-color: transparent; box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.22); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-bottomnav { margin: 0 var(--space-4) var(--space-2); border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--border-default) 50%, rgba(255, 255, 255, 0.32)); background: color-mix(in srgb, var(--bg-nav) 70%, transparent); backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), var(--shadow-overlay); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-bottomnav__pill { border-radius: 10px; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-bottomnav__item[aria-current="page"] { color: var(--accent); box-shadow: none; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-bottomnav__item[aria-current="page"] .fd-bottomnav__pill { background: transparent; color: var(--accent); box-shadow: none; }

/* CommandBar, Dialog, Sheet & Toast */
:is([data-ds="material"], [data-theme^="m3-"]) .fd-cmd { border-radius: var(--radius-full); background: var(--bg-hover); border-color: transparent; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-cmd { border-radius: 10px; background: color-mix(in srgb, var(--bg-sunken) 78%, transparent); backdrop-filter: blur(20px) saturate(185%); -webkit-backdrop-filter: blur(20px) saturate(185%); border-color: color-mix(in srgb, var(--border-default) 55%, rgba(255, 255, 255, 0.32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38); }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-dialog,
:is([data-ds="material"], [data-theme^="m3-"]) .fd-sheet--docked { border-radius: 28px; border-color: transparent; }
:is([data-ds="material"], [data-theme^="m3-"]) .fd-sheet--bottom { border-radius: 28px 28px 0 0; border-top-color: transparent; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-dialog { border-radius: 16px; text-align: center; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-dialog__actions { justify-content: center; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-sheet--docked { border-radius: 20px; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-sheet--bottom { border-radius: 20px 20px 0 0; }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-dialog,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-sheet,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-menu { background: color-mix(in srgb, var(--bg-card) 76%, transparent); backdrop-filter: blur(28px) saturate(190%); -webkit-backdrop-filter: blur(28px) saturate(190%); border-color: color-mix(in srgb, var(--border-default) 50%, rgba(255, 255, 255, 0.32)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), var(--shadow-overlay); }
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-toast,
:is([data-ds="ios"], [data-theme^="ios-"]) .fd-tip { border-radius: var(--radius-full); background: color-mix(in srgb, var(--bg-card) 76%, transparent); color: var(--text-strong); backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%); border: 1px solid color-mix(in srgb, var(--border-default) 50%, rgba(255, 255, 255, 0.34)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--shadow-toast); }