/**
 * FINDBORG UI - Design System
 * Auto-generated bundle - Do not edit directly
 * Built: 2026-03-03T04:55:38.323Z
 * 
 * Includes: Phosphor Icons, Design Tokens, Base Styles, Components
 */

/* ========== vendor\Phosphor.css ========== */
@font-face {
  font-family: "Phosphor";
  src:
    url("/fonts/Phosphor/Phosphor.woff2") format("woff2"),
    url("/fonts/Phosphor/Phosphor.woff") format("woff"),
    url("/fonts/Phosphor/Phosphor.ttf") format("truetype"),
    url("/fonts/Phosphor/Phosphor.svg#Phosphor") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.ph {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph.ph-acorn:before {
  content: "\eb9a";
}
.ph.ph-address-book:before {
  content: "\e6f8";
}
.ph.ph-address-book-tabs:before {
  content: "\ee4e";
}
.ph.ph-air-traffic-control:before {
  content: "\ecd8";
}
.ph.ph-airplane:before {
  content: "\e002";
}
.ph.ph-airplane-in-flight:before {
  content: "\e4fe";
}
.ph.ph-airplane-landing:before {
  content: "\e502";
}
.ph.ph-airplane-takeoff:before {
  content: "\e504";
}
.ph.ph-airplane-taxiing:before {
  content: "\e500";
}
.ph.ph-airplane-tilt:before {
  content: "\e5d6";
}
.ph.ph-airplay:before {
  content: "\e004";
}
.ph.ph-alarm:before {
  content: "\e006";
}
.ph.ph-alien:before {
  content: "\e8a6";
}
.ph.ph-align-bottom:before {
  content: "\e506";
}
.ph.ph-align-bottom-simple:before {
  content: "\eb0c";
}
.ph.ph-align-center-horizontal:before {
  content: "\e50a";
}
.ph.ph-align-center-horizontal-simple:before {
  content: "\eb0e";
}
.ph.ph-align-center-vertical:before {
  content: "\e50c";
}
.ph.ph-align-center-vertical-simple:before {
  content: "\eb10";
}
.ph.ph-align-left:before {
  content: "\e50e";
}
.ph.ph-align-left-simple:before {
  content: "\eaee";
}
.ph.ph-align-right:before {
  content: "\e510";
}
.ph.ph-align-right-simple:before {
  content: "\eb12";
}
.ph.ph-align-top:before {
  content: "\e512";
}
.ph.ph-align-top-simple:before {
  content: "\eb14";
}
.ph.ph-amazon-logo:before {
  content: "\e96c";
}
.ph.ph-ambulance:before {
  content: "\e572";
}
.ph.ph-anchor:before {
  content: "\e514";
}
.ph.ph-anchor-simple:before {
  content: "\e5d8";
}
.ph.ph-android-logo:before {
  content: "\e008";
}
.ph.ph-angle:before {
  content: "\e7bc";
}
.ph.ph-angular-logo:before {
  content: "\eb80";
}
.ph.ph-aperture:before {
  content: "\e00a";
}
.ph.ph-app-store-logo:before {
  content: "\e974";
}
.ph.ph-app-window:before {
  content: "\e5da";
}
.ph.ph-apple-logo:before {
  content: "\e516";
}
.ph.ph-apple-podcasts-logo:before {
  content: "\eb96";
}
.ph.ph-approximate-equals:before {
  content: "\edaa";
}
.ph.ph-archive:before {
  content: "\e00c";
}
.ph.ph-armchair:before {
  content: "\e012";
}
.ph.ph-arrow-arc-left:before {
  content: "\e014";
}
.ph.ph-arrow-arc-right:before {
  content: "\e016";
}
.ph.ph-arrow-bend-double-up-left:before {
  content: "\e03a";
}
.ph.ph-arrow-bend-double-up-right:before {
  content: "\e03c";
}
.ph.ph-arrow-bend-down-left:before {
  content: "\e018";
}
.ph.ph-arrow-bend-down-right:before {
  content: "\e01a";
}
.ph.ph-arrow-bend-left-down:before {
  content: "\e01c";
}
.ph.ph-arrow-bend-left-up:before {
  content: "\e01e";
}
.ph.ph-arrow-bend-right-down:before {
  content: "\e020";
}
.ph.ph-arrow-bend-right-up:before {
  content: "\e022";
}
.ph.ph-arrow-bend-up-left:before {
  content: "\e024";
}
.ph.ph-arrow-bend-up-right:before {
  content: "\e026";
}
.ph.ph-arrow-circle-down:before {
  content: "\e028";
}
.ph.ph-arrow-circle-down-left:before {
  content: "\e02a";
}
.ph.ph-arrow-circle-down-right:before {
  content: "\e02c";
}
.ph.ph-arrow-circle-left:before {
  content: "\e05a";
}
.ph.ph-arrow-circle-right:before {
  content: "\e02e";
}
.ph.ph-arrow-circle-up:before {
  content: "\e030";
}
.ph.ph-arrow-circle-up-left:before {
  content: "\e032";
}
.ph.ph-arrow-circle-up-right:before {
  content: "\e034";
}
.ph.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph.ph-arrow-counter-clockwise:before {
  content: "\e038";
}
.ph.ph-arrow-down:before {
  content: "\e03e";
}
.ph.ph-arrow-down-left:before {
  content: "\e040";
}
.ph.ph-arrow-down-right:before {
  content: "\e042";
}
.ph.ph-arrow-elbow-down-left:before {
  content: "\e044";
}
.ph.ph-arrow-elbow-down-right:before {
  content: "\e046";
}
.ph.ph-arrow-elbow-left:before {
  content: "\e048";
}
.ph.ph-arrow-elbow-left-down:before {
  content: "\e04a";
}
.ph.ph-arrow-elbow-left-up:before {
  content: "\e04c";
}
.ph.ph-arrow-elbow-right:before {
  content: "\e04e";
}
.ph.ph-arrow-elbow-right-down:before {
  content: "\e050";
}
.ph.ph-arrow-elbow-right-up:before {
  content: "\e052";
}
.ph.ph-arrow-elbow-up-left:before {
  content: "\e054";
}
.ph.ph-arrow-elbow-up-right:before {
  content: "\e056";
}
.ph.ph-arrow-fat-down:before {
  content: "\e518";
}
.ph.ph-arrow-fat-left:before {
  content: "\e51a";
}
.ph.ph-arrow-fat-line-down:before {
  content: "\e51c";
}
.ph.ph-arrow-fat-line-left:before {
  content: "\e51e";
}
.ph.ph-arrow-fat-line-right:before {
  content: "\e520";
}
.ph.ph-arrow-fat-line-up:before {
  content: "\e522";
}
.ph.ph-arrow-fat-lines-down:before {
  content: "\e524";
}
.ph.ph-arrow-fat-lines-left:before {
  content: "\e526";
}
.ph.ph-arrow-fat-lines-right:before {
  content: "\e528";
}
.ph.ph-arrow-fat-lines-up:before {
  content: "\e52a";
}
.ph.ph-arrow-fat-right:before {
  content: "\e52c";
}
.ph.ph-arrow-fat-up:before {
  content: "\e52e";
}
.ph.ph-arrow-left:before {
  content: "\e058";
}
.ph.ph-arrow-line-down:before {
  content: "\e05c";
}
.ph.ph-arrow-line-down-left:before {
  content: "\e05e";
}
.ph.ph-arrow-line-down-right:before {
  content: "\e060";
}
.ph.ph-arrow-line-left:before {
  content: "\e062";
}
.ph.ph-arrow-line-right:before {
  content: "\e064";
}
.ph.ph-arrow-line-up:before {
  content: "\e066";
}
.ph.ph-arrow-line-up-left:before {
  content: "\e068";
}
.ph.ph-arrow-line-up-right:before {
  content: "\e06a";
}
.ph.ph-arrow-right:before {
  content: "\e06c";
}
.ph.ph-arrow-square-down:before {
  content: "\e06e";
}
.ph.ph-arrow-square-down-left:before {
  content: "\e070";
}
.ph.ph-arrow-square-down-right:before {
  content: "\e072";
}
.ph.ph-arrow-square-in:before {
  content: "\e5dc";
}
.ph.ph-arrow-square-left:before {
  content: "\e074";
}
.ph.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph.ph-arrow-square-right:before {
  content: "\e076";
}
.ph.ph-arrow-square-up:before {
  content: "\e078";
}
.ph.ph-arrow-square-up-left:before {
  content: "\e07a";
}
.ph.ph-arrow-square-up-right:before {
  content: "\e07c";
}
.ph.ph-arrow-u-down-left:before {
  content: "\e07e";
}
.ph.ph-arrow-u-down-right:before {
  content: "\e080";
}
.ph.ph-arrow-u-left-down:before {
  content: "\e082";
}
.ph.ph-arrow-u-left-up:before {
  content: "\e084";
}
.ph.ph-arrow-u-right-down:before {
  content: "\e086";
}
.ph.ph-arrow-u-right-up:before {
  content: "\e088";
}
.ph.ph-arrow-u-up-left:before {
  content: "\e08a";
}
.ph.ph-arrow-u-up-right:before {
  content: "\e08c";
}
.ph.ph-arrow-up:before {
  content: "\e08e";
}
.ph.ph-arrow-up-left:before {
  content: "\e090";
}
.ph.ph-arrow-up-right:before {
  content: "\e092";
}
.ph.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph.ph-arrows-counter-clockwise:before {
  content: "\e096";
}
.ph.ph-arrows-down-up:before {
  content: "\e098";
}
.ph.ph-arrows-horizontal:before {
  content: "\eb06";
}
.ph.ph-arrows-in:before {
  content: "\e09a";
}
.ph.ph-arrows-in-cardinal:before {
  content: "\e09c";
}
.ph.ph-arrows-in-line-horizontal:before {
  content: "\e530";
}
.ph.ph-arrows-in-line-vertical:before {
  content: "\e532";
}
.ph.ph-arrows-in-simple:before {
  content: "\e09e";
}
.ph.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph.ph-arrows-merge:before {
  content: "\ed3e";
}
.ph.ph-arrows-out:before {
  content: "\e0a2";
}
.ph.ph-arrows-out-cardinal:before {
  content: "\e0a4";
}
.ph.ph-arrows-out-line-horizontal:before {
  content: "\e534";
}
.ph.ph-arrows-out-line-vertical:before {
  content: "\e536";
}
.ph.ph-arrows-out-simple:before {
  content: "\e0a6";
}
.ph.ph-arrows-split:before {
  content: "\ed3c";
}
.ph.ph-arrows-vertical:before {
  content: "\eb04";
}
.ph.ph-article:before {
  content: "\e0a8";
}
.ph.ph-article-medium:before {
  content: "\e5e0";
}
.ph.ph-article-ny-times:before {
  content: "\e5e2";
}
.ph.ph-asclepius:before {
  content: "\ee34";
}
.ph.ph-caduceus:before {
  content: "\ee34";
}
.ph.ph-asterisk:before {
  content: "\e0aa";
}
.ph.ph-asterisk-simple:before {
  content: "\e832";
}
.ph.ph-at:before {
  content: "\e0ac";
}
.ph.ph-atom:before {
  content: "\e5e4";
}
.ph.ph-avocado:before {
  content: "\ee04";
}
.ph.ph-axe:before {
  content: "\e9fc";
}
.ph.ph-baby:before {
  content: "\e774";
}
.ph.ph-baby-carriage:before {
  content: "\e818";
}
.ph.ph-backpack:before {
  content: "\e922";
}
.ph.ph-backspace:before {
  content: "\e0ae";
}
.ph.ph-bag:before {
  content: "\e0b0";
}
.ph.ph-bag-simple:before {
  content: "\e5e6";
}
.ph.ph-balloon:before {
  content: "\e76c";
}
.ph.ph-bandaids:before {
  content: "\e0b2";
}
.ph.ph-bank:before {
  content: "\e0b4";
}
.ph.ph-barbell:before {
  content: "\e0b6";
}
.ph.ph-barcode:before {
  content: "\e0b8";
}
.ph.ph-barn:before {
  content: "\ec72";
}
.ph.ph-barricade:before {
  content: "\e948";
}
.ph.ph-baseball:before {
  content: "\e71a";
}
.ph.ph-baseball-cap:before {
  content: "\ea28";
}
.ph.ph-baseball-helmet:before {
  content: "\ee4a";
}
.ph.ph-basket:before {
  content: "\e964";
}
.ph.ph-basketball:before {
  content: "\e724";
}
.ph.ph-bathtub:before {
  content: "\e81e";
}
.ph.ph-battery-charging:before {
  content: "\e0ba";
}
.ph.ph-battery-charging-vertical:before {
  content: "\e0bc";
}
.ph.ph-battery-empty:before {
  content: "\e0be";
}
.ph.ph-battery-full:before {
  content: "\e0c0";
}
.ph.ph-battery-high:before {
  content: "\e0c2";
}
.ph.ph-battery-low:before {
  content: "\e0c4";
}
.ph.ph-battery-medium:before {
  content: "\e0c6";
}
.ph.ph-battery-plus:before {
  content: "\e808";
}
.ph.ph-battery-plus-vertical:before {
  content: "\ec50";
}
.ph.ph-battery-vertical-empty:before {
  content: "\e7c6";
}
.ph.ph-battery-vertical-full:before {
  content: "\e7c4";
}
.ph.ph-battery-vertical-high:before {
  content: "\e7c2";
}
.ph.ph-battery-vertical-low:before {
  content: "\e7be";
}
.ph.ph-battery-vertical-medium:before {
  content: "\e7c0";
}
.ph.ph-battery-warning:before {
  content: "\e0c8";
}
.ph.ph-battery-warning-vertical:before {
  content: "\e0ca";
}
.ph.ph-beach-ball:before {
  content: "\ed24";
}
.ph.ph-beanie:before {
  content: "\ea2a";
}
.ph.ph-bed:before {
  content: "\e0cc";
}
.ph.ph-beer-bottle:before {
  content: "\e7b0";
}
.ph.ph-beer-stein:before {
  content: "\eb62";
}
.ph.ph-behance-logo:before {
  content: "\e7f4";
}
.ph.ph-bell:before {
  content: "\e0ce";
}
.ph.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph.ph-bell-simple:before {
  content: "\e0d0";
}
.ph.ph-bell-simple-ringing:before {
  content: "\e5ea";
}
.ph.ph-bell-simple-slash:before {
  content: "\e0d2";
}
.ph.ph-bell-simple-z:before {
  content: "\e5ec";
}
.ph.ph-bell-slash:before {
  content: "\e0d4";
}
.ph.ph-bell-z:before {
  content: "\e5ee";
}
.ph.ph-belt:before {
  content: "\ea2c";
}
.ph.ph-bezier-curve:before {
  content: "\eb00";
}
.ph.ph-bicycle:before {
  content: "\e0d6";
}
.ph.ph-binary:before {
  content: "\ee60";
}
.ph.ph-binoculars:before {
  content: "\ea64";
}
.ph.ph-biohazard:before {
  content: "\e9e0";
}
.ph.ph-bird:before {
  content: "\e72c";
}
.ph.ph-blueprint:before {
  content: "\eda0";
}
.ph.ph-bluetooth:before {
  content: "\e0da";
}
.ph.ph-bluetooth-connected:before {
  content: "\e0dc";
}
.ph.ph-bluetooth-slash:before {
  content: "\e0de";
}
.ph.ph-bluetooth-x:before {
  content: "\e0e0";
}
.ph.ph-boat:before {
  content: "\e786";
}
.ph.ph-bomb:before {
  content: "\ee0a";
}
.ph.ph-bone:before {
  content: "\e7f2";
}
.ph.ph-book:before {
  content: "\e0e2";
}
.ph.ph-book-bookmark:before {
  content: "\e0e4";
}
.ph.ph-book-open:before {
  content: "\e0e6";
}
.ph.ph-book-open-text:before {
  content: "\e8f2";
}
.ph.ph-book-open-user:before {
  content: "\ede0";
}
.ph.ph-bookmark:before {
  content: "\e0e8";
}
.ph.ph-bookmark-simple:before {
  content: "\e0ea";
}
.ph.ph-bookmarks:before {
  content: "\e0ec";
}
.ph.ph-bookmarks-simple:before {
  content: "\e5f0";
}
.ph.ph-books:before {
  content: "\e758";
}
.ph.ph-boot:before {
  content: "\ecca";
}
.ph.ph-boules:before {
  content: "\e722";
}
.ph.ph-bounding-box:before {
  content: "\e6ce";
}
.ph.ph-bowl-food:before {
  content: "\eaa4";
}
.ph.ph-bowl-steam:before {
  content: "\e8e4";
}
.ph.ph-bowling-ball:before {
  content: "\ea34";
}
.ph.ph-box-arrow-down:before {
  content: "\e00e";
}
.ph.ph-archive-box:before {
  content: "\e00e";
}
.ph.ph-box-arrow-up:before {
  content: "\ee54";
}
.ph.ph-boxing-glove:before {
  content: "\ea36";
}
.ph.ph-brackets-angle:before {
  content: "\e862";
}
.ph.ph-brackets-curly:before {
  content: "\e860";
}
.ph.ph-brackets-round:before {
  content: "\e864";
}
.ph.ph-brackets-square:before {
  content: "\e85e";
}
.ph.ph-brain:before {
  content: "\e74e";
}
.ph.ph-brandy:before {
  content: "\e6b4";
}
.ph.ph-bread:before {
  content: "\e81c";
}
.ph.ph-bridge:before {
  content: "\ea68";
}
.ph.ph-briefcase:before {
  content: "\e0ee";
}
.ph.ph-briefcase-metal:before {
  content: "\e5f2";
}
.ph.ph-broadcast:before {
  content: "\e0f2";
}
.ph.ph-broom:before {
  content: "\ec54";
}
.ph.ph-browser:before {
  content: "\e0f4";
}
.ph.ph-browsers:before {
  content: "\e0f6";
}
.ph.ph-bug:before {
  content: "\e5f4";
}
.ph.ph-bug-beetle:before {
  content: "\e5f6";
}
.ph.ph-bug-droid:before {
  content: "\e5f8";
}
.ph.ph-building:before {
  content: "\e100";
}
.ph.ph-building-apartment:before {
  content: "\e0fe";
}
.ph.ph-building-office:before {
  content: "\e0ff";
}
.ph.ph-buildings:before {
  content: "\e102";
}
.ph.ph-bulldozer:before {
  content: "\ec6c";
}
.ph.ph-bus:before {
  content: "\e106";
}
.ph.ph-butterfly:before {
  content: "\ea6e";
}
.ph.ph-cable-car:before {
  content: "\e49c";
}
.ph.ph-cactus:before {
  content: "\e918";
}
.ph.ph-cake:before {
  content: "\e780";
}
.ph.ph-calculator:before {
  content: "\e538";
}
.ph.ph-calendar:before {
  content: "\e108";
}
.ph.ph-calendar-blank:before {
  content: "\e10a";
}
.ph.ph-calendar-check:before {
  content: "\e712";
}
.ph.ph-calendar-dot:before {
  content: "\e7b2";
}
.ph.ph-calendar-dots:before {
  content: "\e7b4";
}
.ph.ph-calendar-heart:before {
  content: "\e8b0";
}
.ph.ph-calendar-minus:before {
  content: "\ea14";
}
.ph.ph-calendar-plus:before {
  content: "\e714";
}
.ph.ph-calendar-slash:before {
  content: "\ea12";
}
.ph.ph-calendar-star:before {
  content: "\e8b2";
}
.ph.ph-calendar-x:before {
  content: "\e10c";
}
.ph.ph-call-bell:before {
  content: "\e7de";
}
.ph.ph-camera:before {
  content: "\e10e";
}
.ph.ph-camera-plus:before {
  content: "\ec58";
}
.ph.ph-camera-rotate:before {
  content: "\e7a4";
}
.ph.ph-camera-slash:before {
  content: "\e110";
}
.ph.ph-campfire:before {
  content: "\e9d8";
}
.ph.ph-car:before {
  content: "\e112";
}
.ph.ph-car-battery:before {
  content: "\ee30";
}
.ph.ph-car-profile:before {
  content: "\e8cc";
}
.ph.ph-car-simple:before {
  content: "\e114";
}
.ph.ph-cardholder:before {
  content: "\e5fa";
}
.ph.ph-cards:before {
  content: "\e0f8";
}
.ph.ph-cards-three:before {
  content: "\ee50";
}
.ph.ph-caret-circle-double-down:before {
  content: "\e116";
}
.ph.ph-caret-circle-double-left:before {
  content: "\e118";
}
.ph.ph-caret-circle-double-right:before {
  content: "\e11a";
}
.ph.ph-caret-circle-double-up:before {
  content: "\e11c";
}
.ph.ph-caret-circle-down:before {
  content: "\e11e";
}
.ph.ph-caret-circle-left:before {
  content: "\e120";
}
.ph.ph-caret-circle-right:before {
  content: "\e122";
}
.ph.ph-caret-circle-up:before {
  content: "\e124";
}
.ph.ph-caret-circle-up-down:before {
  content: "\e13e";
}
.ph.ph-caret-double-down:before {
  content: "\e126";
}
.ph.ph-caret-double-left:before {
  content: "\e128";
}
.ph.ph-caret-double-right:before {
  content: "\e12a";
}
.ph.ph-caret-double-up:before {
  content: "\e12c";
}
.ph.ph-caret-down:before {
  content: "\e136";
}
.ph.ph-caret-left:before {
  content: "\e138";
}
.ph.ph-caret-line-down:before {
  content: "\e134";
}
.ph.ph-caret-line-left:before {
  content: "\e132";
}
.ph.ph-caret-line-right:before {
  content: "\e130";
}
.ph.ph-caret-line-up:before {
  content: "\e12e";
}
.ph.ph-caret-right:before {
  content: "\e13a";
}
.ph.ph-caret-up:before {
  content: "\e13c";
}
.ph.ph-caret-up-down:before {
  content: "\e140";
}
.ph.ph-carrot:before {
  content: "\ed38";
}
.ph.ph-cash-register:before {
  content: "\ed80";
}
.ph.ph-cassette-tape:before {
  content: "\ed2e";
}
.ph.ph-castle-turret:before {
  content: "\e9d0";
}
.ph.ph-cat:before {
  content: "\e748";
}
.ph.ph-cell-signal-full:before {
  content: "\e142";
}
.ph.ph-cell-signal-high:before {
  content: "\e144";
}
.ph.ph-cell-signal-low:before {
  content: "\e146";
}
.ph.ph-cell-signal-medium:before {
  content: "\e148";
}
.ph.ph-cell-signal-none:before {
  content: "\e14a";
}
.ph.ph-cell-signal-slash:before {
  content: "\e14c";
}
.ph.ph-cell-signal-x:before {
  content: "\e14e";
}
.ph.ph-cell-tower:before {
  content: "\ebaa";
}
.ph.ph-certificate:before {
  content: "\e766";
}
.ph.ph-chair:before {
  content: "\e950";
}
.ph.ph-chalkboard:before {
  content: "\e5fc";
}
.ph.ph-chalkboard-simple:before {
  content: "\e5fe";
}
.ph.ph-chalkboard-teacher:before {
  content: "\e600";
}
.ph.ph-champagne:before {
  content: "\eaca";
}
.ph.ph-charging-station:before {
  content: "\e8d0";
}
.ph.ph-chart-bar:before {
  content: "\e150";
}
.ph.ph-chart-bar-horizontal:before {
  content: "\e152";
}
.ph.ph-chart-donut:before {
  content: "\eaa6";
}
.ph.ph-chart-line:before {
  content: "\e154";
}
.ph.ph-chart-line-down:before {
  content: "\e8b6";
}
.ph.ph-chart-line-up:before {
  content: "\e156";
}
.ph.ph-chart-pie:before {
  content: "\e158";
}
.ph.ph-chart-pie-slice:before {
  content: "\e15a";
}
.ph.ph-chart-polar:before {
  content: "\eaa8";
}
.ph.ph-chart-scatter:before {
  content: "\eaac";
}
.ph.ph-chat:before {
  content: "\e15c";
}
.ph.ph-chat-centered:before {
  content: "\e160";
}
.ph.ph-chat-centered-dots:before {
  content: "\e164";
}
.ph.ph-chat-centered-slash:before {
  content: "\e162";
}
.ph.ph-chat-centered-text:before {
  content: "\e166";
}
.ph.ph-chat-circle:before {
  content: "\e168";
}
.ph.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph.ph-chat-circle-slash:before {
  content: "\e16a";
}
.ph.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph.ph-chat-dots:before {
  content: "\e170";
}
.ph.ph-chat-slash:before {
  content: "\e15e";
}
.ph.ph-chat-teardrop:before {
  content: "\e172";
}
.ph.ph-chat-teardrop-dots:before {
  content: "\e176";
}
.ph.ph-chat-teardrop-slash:before {
  content: "\e174";
}
.ph.ph-chat-teardrop-text:before {
  content: "\e178";
}
.ph.ph-chat-text:before {
  content: "\e17a";
}
.ph.ph-chats:before {
  content: "\e17c";
}
.ph.ph-chats-circle:before {
  content: "\e17e";
}
.ph.ph-chats-teardrop:before {
  content: "\e180";
}
.ph.ph-check:before {
  content: "\e182";
}
.ph.ph-check-circle:before {
  content: "\e184";
}
.ph.ph-check-fat:before {
  content: "\eba6";
}
.ph.ph-check-square:before {
  content: "\e186";
}
.ph.ph-check-square-offset:before {
  content: "\e188";
}
.ph.ph-checkerboard:before {
  content: "\e8c4";
}
.ph.ph-checks:before {
  content: "\e53a";
}
.ph.ph-cheers:before {
  content: "\ea4a";
}
.ph.ph-cheese:before {
  content: "\e9fe";
}
.ph.ph-chef-hat:before {
  content: "\ed8e";
}
.ph.ph-cherries:before {
  content: "\e830";
}
.ph.ph-church:before {
  content: "\ecea";
}
.ph.ph-cigarette:before {
  content: "\ed90";
}
.ph.ph-cigarette-slash:before {
  content: "\ed92";
}
.ph.ph-circle:before {
  content: "\e18a";
}
.ph.ph-circle-dashed:before {
  content: "\e602";
}
.ph.ph-circle-half:before {
  content: "\e18c";
}
.ph.ph-circle-half-tilt:before {
  content: "\e18e";
}
.ph.ph-circle-notch:before {
  content: "\eb44";
}
.ph.ph-circles-four:before {
  content: "\e190";
}
.ph.ph-circles-three:before {
  content: "\e192";
}
.ph.ph-circles-three-plus:before {
  content: "\e194";
}
.ph.ph-circuitry:before {
  content: "\e9c2";
}
.ph.ph-city:before {
  content: "\ea6a";
}
.ph.ph-clipboard:before {
  content: "\e196";
}
.ph.ph-clipboard-text:before {
  content: "\e198";
}
.ph.ph-clock:before {
  content: "\e19a";
}
.ph.ph-clock-afternoon:before {
  content: "\e19c";
}
.ph.ph-clock-clockwise:before {
  content: "\e19e";
}
.ph.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph.ph-clock-counter-clockwise:before {
  content: "\e1a0";
}
.ph.ph-clock-user:before {
  content: "\edec";
}
.ph.ph-closed-captioning:before {
  content: "\e1a4";
}
.ph.ph-cloud:before {
  content: "\e1aa";
}
.ph.ph-cloud-arrow-down:before {
  content: "\e1ac";
}
.ph.ph-cloud-arrow-up:before {
  content: "\e1ae";
}
.ph.ph-cloud-check:before {
  content: "\e1b0";
}
.ph.ph-cloud-fog:before {
  content: "\e53c";
}
.ph.ph-cloud-lightning:before {
  content: "\e1b2";
}
.ph.ph-cloud-moon:before {
  content: "\e53e";
}
.ph.ph-cloud-rain:before {
  content: "\e1b4";
}
.ph.ph-cloud-slash:before {
  content: "\e1b6";
}
.ph.ph-cloud-snow:before {
  content: "\e1b8";
}
.ph.ph-cloud-sun:before {
  content: "\e540";
}
.ph.ph-cloud-warning:before {
  content: "\ea98";
}
.ph.ph-cloud-x:before {
  content: "\ea96";
}
.ph.ph-clover:before {
  content: "\edc8";
}
.ph.ph-club:before {
  content: "\e1ba";
}
.ph.ph-coat-hanger:before {
  content: "\e7fe";
}
.ph.ph-coda-logo:before {
  content: "\e7ce";
}
.ph.ph-code:before {
  content: "\e1bc";
}
.ph.ph-code-block:before {
  content: "\eafe";
}
.ph.ph-code-simple:before {
  content: "\e1be";
}
.ph.ph-codepen-logo:before {
  content: "\e978";
}
.ph.ph-codesandbox-logo:before {
  content: "\ea06";
}
.ph.ph-coffee:before {
  content: "\e1c2";
}
.ph.ph-coffee-bean:before {
  content: "\e1c0";
}
.ph.ph-coin:before {
  content: "\e60e";
}
.ph.ph-coin-vertical:before {
  content: "\eb48";
}
.ph.ph-coins:before {
  content: "\e78e";
}
.ph.ph-columns:before {
  content: "\e546";
}
.ph.ph-columns-plus-left:before {
  content: "\e544";
}
.ph.ph-columns-plus-right:before {
  content: "\e542";
}
.ph.ph-command:before {
  content: "\e1c4";
}
.ph.ph-compass:before {
  content: "\e1c8";
}
.ph.ph-compass-rose:before {
  content: "\e1c6";
}
.ph.ph-compass-tool:before {
  content: "\ea0e";
}
.ph.ph-computer-tower:before {
  content: "\e548";
}
.ph.ph-confetti:before {
  content: "\e81a";
}
.ph.ph-contactless-payment:before {
  content: "\ed42";
}
.ph.ph-control:before {
  content: "\eca6";
}
.ph.ph-cookie:before {
  content: "\e6ca";
}
.ph.ph-cooking-pot:before {
  content: "\e764";
}
.ph.ph-copy:before {
  content: "\e1ca";
}
.ph.ph-copy-simple:before {
  content: "\e1cc";
}
.ph.ph-copyleft:before {
  content: "\e86a";
}
.ph.ph-copyright:before {
  content: "\e54a";
}
.ph.ph-corners-in:before {
  content: "\e1ce";
}
.ph.ph-corners-out:before {
  content: "\e1d0";
}
.ph.ph-couch:before {
  content: "\e7f6";
}
.ph.ph-court-basketball:before {
  content: "\ee36";
}
.ph.ph-cow:before {
  content: "\eabe";
}
.ph.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph.ph-cpu:before {
  content: "\e610";
}
.ph.ph-crane:before {
  content: "\ed48";
}
.ph.ph-crane-tower:before {
  content: "\ed49";
}
.ph.ph-credit-card:before {
  content: "\e1d2";
}
.ph.ph-cricket:before {
  content: "\ee12";
}
.ph.ph-crop:before {
  content: "\e1d4";
}
.ph.ph-cross:before {
  content: "\e8a0";
}
.ph.ph-crosshair:before {
  content: "\e1d6";
}
.ph.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph.ph-crown:before {
  content: "\e614";
}
.ph.ph-crown-cross:before {
  content: "\ee5e";
}
.ph.ph-crown-simple:before {
  content: "\e616";
}
.ph.ph-cube:before {
  content: "\e1da";
}
.ph.ph-cube-focus:before {
  content: "\ed0a";
}
.ph.ph-cube-transparent:before {
  content: "\ec7c";
}
.ph.ph-currency-btc:before {
  content: "\e618";
}
.ph.ph-currency-circle-dollar:before {
  content: "\e54c";
}
.ph.ph-currency-cny:before {
  content: "\e54e";
}
.ph.ph-currency-dollar:before {
  content: "\e550";
}
.ph.ph-currency-dollar-simple:before {
  content: "\e552";
}
.ph.ph-currency-eth:before {
  content: "\eada";
}
.ph.ph-currency-eur:before {
  content: "\e554";
}
.ph.ph-currency-gbp:before {
  content: "\e556";
}
.ph.ph-currency-inr:before {
  content: "\e558";
}
.ph.ph-currency-jpy:before {
  content: "\e55a";
}
.ph.ph-currency-krw:before {
  content: "\e55c";
}
.ph.ph-currency-kzt:before {
  content: "\ec4c";
}
.ph.ph-currency-ngn:before {
  content: "\eb52";
}
.ph.ph-currency-rub:before {
  content: "\e55e";
}
.ph.ph-cursor:before {
  content: "\e1dc";
}
.ph.ph-cursor-click:before {
  content: "\e7c8";
}
.ph.ph-cursor-text:before {
  content: "\e7d8";
}
.ph.ph-cylinder:before {
  content: "\e8fc";
}
.ph.ph-database:before {
  content: "\e1de";
}
.ph.ph-desk:before {
  content: "\ed16";
}
.ph.ph-desktop:before {
  content: "\e560";
}
.ph.ph-desktop-tower:before {
  content: "\e562";
}
.ph.ph-detective:before {
  content: "\e83e";
}
.ph.ph-dev-to-logo:before {
  content: "\ed0e";
}
.ph.ph-device-mobile:before {
  content: "\e1e0";
}
.ph.ph-device-mobile-camera:before {
  content: "\e1e2";
}
.ph.ph-device-mobile-slash:before {
  content: "\ee46";
}
.ph.ph-device-mobile-speaker:before {
  content: "\e1e4";
}
.ph.ph-device-rotate:before {
  content: "\edf2";
}
.ph.ph-device-tablet:before {
  content: "\e1e6";
}
.ph.ph-device-tablet-camera:before {
  content: "\e1e8";
}
.ph.ph-device-tablet-speaker:before {
  content: "\e1ea";
}
.ph.ph-devices:before {
  content: "\eba4";
}
.ph.ph-diamond:before {
  content: "\e1ec";
}
.ph.ph-diamonds-four:before {
  content: "\e8f4";
}
.ph.ph-dice-five:before {
  content: "\e1ee";
}
.ph.ph-dice-four:before {
  content: "\e1f0";
}
.ph.ph-dice-one:before {
  content: "\e1f2";
}
.ph.ph-dice-six:before {
  content: "\e1f4";
}
.ph.ph-dice-three:before {
  content: "\e1f6";
}
.ph.ph-dice-two:before {
  content: "\e1f8";
}
.ph.ph-disc:before {
  content: "\e564";
}
.ph.ph-disco-ball:before {
  content: "\ed98";
}
.ph.ph-discord-logo:before {
  content: "\e61a";
}
.ph.ph-divide:before {
  content: "\e1fa";
}
.ph.ph-dna:before {
  content: "\e924";
}
.ph.ph-dog:before {
  content: "\e74a";
}
.ph.ph-door:before {
  content: "\e61c";
}
.ph.ph-door-open:before {
  content: "\e7e6";
}
.ph.ph-dot:before {
  content: "\ecde";
}
.ph.ph-dot-outline:before {
  content: "\ece0";
}
.ph.ph-dots-nine:before {
  content: "\e1fc";
}
.ph.ph-dots-six:before {
  content: "\e794";
}
.ph.ph-dots-six-vertical:before {
  content: "\eae2";
}
.ph.ph-dots-three:before {
  content: "\e1fe";
}
.ph.ph-dots-three-circle:before {
  content: "\e200";
}
.ph.ph-dots-three-circle-vertical:before {
  content: "\e202";
}
.ph.ph-dots-three-outline:before {
  content: "\e204";
}
.ph.ph-dots-three-outline-vertical:before {
  content: "\e206";
}
.ph.ph-dots-three-vertical:before {
  content: "\e208";
}
.ph.ph-download:before {
  content: "\e20a";
}
.ph.ph-download-simple:before {
  content: "\e20c";
}
.ph.ph-dress:before {
  content: "\ea7e";
}
.ph.ph-dresser:before {
  content: "\e94e";
}
.ph.ph-dribbble-logo:before {
  content: "\e20e";
}
.ph.ph-drone:before {
  content: "\ed74";
}
.ph.ph-drop:before {
  content: "\e210";
}
.ph.ph-drop-half:before {
  content: "\e566";
}
.ph.ph-drop-half-bottom:before {
  content: "\eb40";
}
.ph.ph-drop-simple:before {
  content: "\ee32";
}
.ph.ph-drop-slash:before {
  content: "\e954";
}
.ph.ph-dropbox-logo:before {
  content: "\e7d0";
}
.ph.ph-ear:before {
  content: "\e70c";
}
.ph.ph-ear-slash:before {
  content: "\e70e";
}
.ph.ph-egg:before {
  content: "\e812";
}
.ph.ph-egg-crack:before {
  content: "\eb64";
}
.ph.ph-eject:before {
  content: "\e212";
}
.ph.ph-eject-simple:before {
  content: "\e6ae";
}
.ph.ph-elevator:before {
  content: "\ecc0";
}
.ph.ph-empty:before {
  content: "\edbc";
}
.ph.ph-engine:before {
  content: "\ea80";
}
.ph.ph-envelope:before {
  content: "\e214";
}
.ph.ph-envelope-open:before {
  content: "\e216";
}
.ph.ph-envelope-simple:before {
  content: "\e218";
}
.ph.ph-envelope-simple-open:before {
  content: "\e21a";
}
.ph.ph-equalizer:before {
  content: "\ebbc";
}
.ph.ph-equals:before {
  content: "\e21c";
}
.ph.ph-eraser:before {
  content: "\e21e";
}
.ph.ph-escalator-down:before {
  content: "\ecba";
}
.ph.ph-escalator-up:before {
  content: "\ecbc";
}
.ph.ph-exam:before {
  content: "\e742";
}
.ph.ph-exclamation-mark:before {
  content: "\ee44";
}
.ph.ph-exclude:before {
  content: "\e882";
}
.ph.ph-exclude-square:before {
  content: "\e880";
}
.ph.ph-export:before {
  content: "\eaf0";
}
.ph.ph-eye:before {
  content: "\e220";
}
.ph.ph-eye-closed:before {
  content: "\e222";
}
.ph.ph-eye-slash:before {
  content: "\e224";
}
.ph.ph-eyedropper:before {
  content: "\e568";
}
.ph.ph-eyedropper-sample:before {
  content: "\eac4";
}
.ph.ph-eyeglasses:before {
  content: "\e7ba";
}
.ph.ph-eyes:before {
  content: "\ee5c";
}
.ph.ph-face-mask:before {
  content: "\e56a";
}
.ph.ph-facebook-logo:before {
  content: "\e226";
}
.ph.ph-factory:before {
  content: "\e760";
}
.ph.ph-faders:before {
  content: "\e228";
}
.ph.ph-faders-horizontal:before {
  content: "\e22a";
}
.ph.ph-fallout-shelter:before {
  content: "\e9de";
}
.ph.ph-fan:before {
  content: "\e9f2";
}
.ph.ph-farm:before {
  content: "\ec70";
}
.ph.ph-fast-forward:before {
  content: "\e6a6";
}
.ph.ph-fast-forward-circle:before {
  content: "\e22c";
}
.ph.ph-feather:before {
  content: "\e9c0";
}
.ph.ph-fediverse-logo:before {
  content: "\ed66";
}
.ph.ph-figma-logo:before {
  content: "\e22e";
}
.ph.ph-file:before {
  content: "\e230";
}
.ph.ph-file-archive:before {
  content: "\eb2a";
}
.ph.ph-file-arrow-down:before {
  content: "\e232";
}
.ph.ph-file-arrow-up:before {
  content: "\e61e";
}
.ph.ph-file-audio:before {
  content: "\ea20";
}
.ph.ph-file-c:before {
  content: "\eb32";
}
.ph.ph-file-c-sharp:before {
  content: "\eb30";
}
.ph.ph-file-cloud:before {
  content: "\e95e";
}
.ph.ph-file-code:before {
  content: "\e914";
}
.ph.ph-file-cpp:before {
  content: "\eb2e";
}
.ph.ph-file-css:before {
  content: "\eb34";
}
.ph.ph-file-csv:before {
  content: "\eb1c";
}
.ph.ph-file-dashed:before {
  content: "\e704";
}
.ph.ph-file-dotted:before {
  content: "\e704";
}
.ph.ph-file-doc:before {
  content: "\eb1e";
}
.ph.ph-file-html:before {
  content: "\eb38";
}
.ph.ph-file-image:before {
  content: "\ea24";
}
.ph.ph-file-ini:before {
  content: "\eb33";
}
.ph.ph-file-jpg:before {
  content: "\eb1a";
}
.ph.ph-file-js:before {
  content: "\eb24";
}
.ph.ph-file-jsx:before {
  content: "\eb3a";
}
.ph.ph-file-lock:before {
  content: "\e95c";
}
.ph.ph-file-magnifying-glass:before {
  content: "\e238";
}
.ph.ph-file-search:before {
  content: "\e238";
}
.ph.ph-file-md:before {
  content: "\ed50";
}
.ph.ph-file-minus:before {
  content: "\e234";
}
.ph.ph-file-pdf:before {
  content: "\e702";
}
.ph.ph-file-plus:before {
  content: "\e236";
}
.ph.ph-file-png:before {
  content: "\eb18";
}
.ph.ph-file-ppt:before {
  content: "\eb20";
}
.ph.ph-file-py:before {
  content: "\eb2c";
}
.ph.ph-file-rs:before {
  content: "\eb28";
}
.ph.ph-file-sql:before {
  content: "\ed4e";
}
.ph.ph-file-svg:before {
  content: "\ed08";
}
.ph.ph-file-text:before {
  content: "\e23a";
}
.ph.ph-file-ts:before {
  content: "\eb26";
}
.ph.ph-file-tsx:before {
  content: "\eb3c";
}
.ph.ph-file-txt:before {
  content: "\eb35";
}
.ph.ph-file-video:before {
  content: "\ea22";
}
.ph.ph-file-vue:before {
  content: "\eb3e";
}
.ph.ph-file-x:before {
  content: "\e23c";
}
.ph.ph-file-xls:before {
  content: "\eb22";
}
.ph.ph-file-zip:before {
  content: "\e958";
}
.ph.ph-files:before {
  content: "\e710";
}
.ph.ph-film-reel:before {
  content: "\e8c0";
}
.ph.ph-film-script:before {
  content: "\eb50";
}
.ph.ph-film-slate:before {
  content: "\e8c2";
}
.ph.ph-film-strip:before {
  content: "\e792";
}
.ph.ph-fingerprint:before {
  content: "\e23e";
}
.ph.ph-fingerprint-simple:before {
  content: "\e240";
}
.ph.ph-finn-the-human:before {
  content: "\e56c";
}
.ph.ph-fire:before {
  content: "\e242";
}
.ph.ph-fire-extinguisher:before {
  content: "\e9e8";
}
.ph.ph-fire-simple:before {
  content: "\e620";
}
.ph.ph-fire-truck:before {
  content: "\e574";
}
.ph.ph-first-aid:before {
  content: "\e56e";
}
.ph.ph-first-aid-kit:before {
  content: "\e570";
}
.ph.ph-fish:before {
  content: "\e728";
}
.ph.ph-fish-simple:before {
  content: "\e72a";
}
.ph.ph-flag:before {
  content: "\e244";
}
.ph.ph-flag-banner:before {
  content: "\e622";
}
.ph.ph-flag-banner-fold:before {
  content: "\ecf2";
}
.ph.ph-flag-checkered:before {
  content: "\ea38";
}
.ph.ph-flag-pennant:before {
  content: "\ecf0";
}
.ph.ph-flame:before {
  content: "\e624";
}
.ph.ph-flashlight:before {
  content: "\e246";
}
.ph.ph-flask:before {
  content: "\e79e";
}
.ph.ph-flip-horizontal:before {
  content: "\ed6a";
}
.ph.ph-flip-vertical:before {
  content: "\ed6c";
}
.ph.ph-floppy-disk:before {
  content: "\e248";
}
.ph.ph-floppy-disk-back:before {
  content: "\eaf4";
}
.ph.ph-flow-arrow:before {
  content: "\e6ec";
}
.ph.ph-flower:before {
  content: "\e75e";
}
.ph.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph.ph-flower-tulip:before {
  content: "\eacc";
}
.ph.ph-flying-saucer:before {
  content: "\eb4a";
}
.ph.ph-folder:before {
  content: "\e24a";
}
.ph.ph-folder-notch:before {
  content: "\e24a";
}
.ph.ph-folder-dashed:before {
  content: "\e8f8";
}
.ph.ph-folder-dotted:before {
  content: "\e8f8";
}
.ph.ph-folder-lock:before {
  content: "\ea3c";
}
.ph.ph-folder-minus:before {
  content: "\e254";
}
.ph.ph-folder-notch-minus:before {
  content: "\e254";
}
.ph.ph-folder-open:before {
  content: "\e256";
}
.ph.ph-folder-notch-open:before {
  content: "\e256";
}
.ph.ph-folder-plus:before {
  content: "\e258";
}
.ph.ph-folder-notch-plus:before {
  content: "\e258";
}
.ph.ph-folder-simple:before {
  content: "\e25a";
}
.ph.ph-folder-simple-dashed:before {
  content: "\ec2a";
}
.ph.ph-folder-simple-dotted:before {
  content: "\ec2a";
}
.ph.ph-folder-simple-lock:before {
  content: "\eb5e";
}
.ph.ph-folder-simple-minus:before {
  content: "\e25c";
}
.ph.ph-folder-simple-plus:before {
  content: "\e25e";
}
.ph.ph-folder-simple-star:before {
  content: "\ec2e";
}
.ph.ph-folder-simple-user:before {
  content: "\eb60";
}
.ph.ph-folder-star:before {
  content: "\ea86";
}
.ph.ph-folder-user:before {
  content: "\eb46";
}
.ph.ph-folders:before {
  content: "\e260";
}
.ph.ph-football:before {
  content: "\e718";
}
.ph.ph-football-helmet:before {
  content: "\ee4c";
}
.ph.ph-footprints:before {
  content: "\ea88";
}
.ph.ph-fork-knife:before {
  content: "\e262";
}
.ph.ph-four-k:before {
  content: "\ea5c";
}
.ph.ph-frame-corners:before {
  content: "\e626";
}
.ph.ph-framer-logo:before {
  content: "\e264";
}
.ph.ph-function:before {
  content: "\ebe4";
}
.ph.ph-funnel:before {
  content: "\e266";
}
.ph.ph-funnel-simple:before {
  content: "\e268";
}
.ph.ph-funnel-simple-x:before {
  content: "\e26a";
}
.ph.ph-funnel-x:before {
  content: "\e26c";
}
.ph.ph-game-controller:before {
  content: "\e26e";
}
.ph.ph-garage:before {
  content: "\ecd6";
}
.ph.ph-gas-can:before {
  content: "\e8ce";
}
.ph.ph-gas-pump:before {
  content: "\e768";
}
.ph.ph-gauge:before {
  content: "\e628";
}
.ph.ph-gavel:before {
  content: "\ea32";
}
.ph.ph-gear:before {
  content: "\e270";
}
.ph.ph-gear-fine:before {
  content: "\e87c";
}
.ph.ph-gear-six:before {
  content: "\e272";
}
.ph.ph-gender-female:before {
  content: "\e6e0";
}
.ph.ph-gender-intersex:before {
  content: "\e6e6";
}
.ph.ph-gender-male:before {
  content: "\e6e2";
}
.ph.ph-gender-neuter:before {
  content: "\e6ea";
}
.ph.ph-gender-nonbinary:before {
  content: "\e6e4";
}
.ph.ph-gender-transgender:before {
  content: "\e6e8";
}
.ph.ph-ghost:before {
  content: "\e62a";
}
.ph.ph-gif:before {
  content: "\e274";
}
.ph.ph-gift:before {
  content: "\e276";
}
.ph.ph-git-branch:before {
  content: "\e278";
}
.ph.ph-git-commit:before {
  content: "\e27a";
}
.ph.ph-git-diff:before {
  content: "\e27c";
}
.ph.ph-git-fork:before {
  content: "\e27e";
}
.ph.ph-git-merge:before {
  content: "\e280";
}
.ph.ph-git-pull-request:before {
  content: "\e282";
}
.ph.ph-github-logo:before {
  content: "\e576";
}
.ph.ph-gitlab-logo:before {
  content: "\e694";
}
.ph.ph-gitlab-logo-simple:before {
  content: "\e696";
}
.ph.ph-globe:before {
  content: "\e288";
}
.ph.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph.ph-globe-simple:before {
  content: "\e28e";
}
.ph.ph-globe-simple-x:before {
  content: "\e284";
}
.ph.ph-globe-stand:before {
  content: "\e290";
}
.ph.ph-globe-x:before {
  content: "\e286";
}
.ph.ph-goggles:before {
  content: "\ecb4";
}
.ph.ph-golf:before {
  content: "\ea3e";
}
.ph.ph-goodreads-logo:before {
  content: "\ed10";
}
.ph.ph-google-cardboard-logo:before {
  content: "\e7b6";
}
.ph.ph-google-chrome-logo:before {
  content: "\e976";
}
.ph.ph-google-drive-logo:before {
  content: "\e8f6";
}
.ph.ph-google-logo:before {
  content: "\e292";
}
.ph.ph-google-photos-logo:before {
  content: "\eb92";
}
.ph.ph-google-play-logo:before {
  content: "\e294";
}
.ph.ph-google-podcasts-logo:before {
  content: "\eb94";
}
.ph.ph-gps:before {
  content: "\edd8";
}
.ph.ph-gps-fix:before {
  content: "\edd6";
}
.ph.ph-gps-slash:before {
  content: "\edd4";
}
.ph.ph-gradient:before {
  content: "\eb42";
}
.ph.ph-graduation-cap:before {
  content: "\e62c";
}
.ph.ph-grains:before {
  content: "\ec68";
}
.ph.ph-grains-slash:before {
  content: "\ec6a";
}
.ph.ph-graph:before {
  content: "\eb58";
}
.ph.ph-graphics-card:before {
  content: "\e612";
}
.ph.ph-greater-than:before {
  content: "\edc4";
}
.ph.ph-greater-than-or-equal:before {
  content: "\eda2";
}
.ph.ph-grid-four:before {
  content: "\e296";
}
.ph.ph-grid-nine:before {
  content: "\ec8c";
}
.ph.ph-guitar:before {
  content: "\ea8a";
}
.ph.ph-hair-dryer:before {
  content: "\ea66";
}
.ph.ph-hamburger:before {
  content: "\e790";
}
.ph.ph-hammer:before {
  content: "\e80e";
}
.ph.ph-hand:before {
  content: "\e298";
}
.ph.ph-hand-arrow-down:before {
  content: "\ea4e";
}
.ph.ph-hand-arrow-up:before {
  content: "\ee5a";
}
.ph.ph-hand-coins:before {
  content: "\ea8c";
}
.ph.ph-hand-deposit:before {
  content: "\ee82";
}
.ph.ph-hand-eye:before {
  content: "\ea4c";
}
.ph.ph-hand-fist:before {
  content: "\e57a";
}
.ph.ph-hand-grabbing:before {
  content: "\e57c";
}
.ph.ph-hand-heart:before {
  content: "\e810";
}
.ph.ph-hand-palm:before {
  content: "\e57e";
}
.ph.ph-hand-peace:before {
  content: "\e7cc";
}
.ph.ph-hand-pointing:before {
  content: "\e29a";
}
.ph.ph-hand-soap:before {
  content: "\e630";
}
.ph.ph-hand-swipe-left:before {
  content: "\ec94";
}
.ph.ph-hand-swipe-right:before {
  content: "\ec92";
}
.ph.ph-hand-tap:before {
  content: "\ec90";
}
.ph.ph-hand-waving:before {
  content: "\e580";
}
.ph.ph-hand-withdraw:before {
  content: "\ee80";
}
.ph.ph-handbag:before {
  content: "\e29c";
}
.ph.ph-handbag-simple:before {
  content: "\e62e";
}
.ph.ph-hands-clapping:before {
  content: "\e6a0";
}
.ph.ph-hands-praying:before {
  content: "\ecc8";
}
.ph.ph-handshake:before {
  content: "\e582";
}
.ph.ph-hard-drive:before {
  content: "\e29e";
}
.ph.ph-hard-drives:before {
  content: "\e2a0";
}
.ph.ph-hard-hat:before {
  content: "\ed46";
}
.ph.ph-hash:before {
  content: "\e2a2";
}
.ph.ph-hash-straight:before {
  content: "\e2a4";
}
.ph.ph-head-circuit:before {
  content: "\e7d4";
}
.ph.ph-headlights:before {
  content: "\e6fe";
}
.ph.ph-headphones:before {
  content: "\e2a6";
}
.ph.ph-headset:before {
  content: "\e584";
}
.ph.ph-heart:before {
  content: "\e2a8";
}
.ph.ph-heart-break:before {
  content: "\ebe8";
}
.ph.ph-heart-half:before {
  content: "\ec48";
}
.ph.ph-heart-straight:before {
  content: "\e2aa";
}
.ph.ph-heart-straight-break:before {
  content: "\eb98";
}
.ph.ph-heartbeat:before {
  content: "\e2ac";
}
.ph.ph-hexagon:before {
  content: "\e2ae";
}
.ph.ph-high-definition:before {
  content: "\ea8e";
}
.ph.ph-high-heel:before {
  content: "\e8e8";
}
.ph.ph-highlighter:before {
  content: "\ec76";
}
.ph.ph-highlighter-circle:before {
  content: "\e632";
}
.ph.ph-hockey:before {
  content: "\ec86";
}
.ph.ph-hoodie:before {
  content: "\ecd0";
}
.ph.ph-horse:before {
  content: "\e2b0";
}
.ph.ph-hospital:before {
  content: "\e844";
}
.ph.ph-hourglass:before {
  content: "\e2b2";
}
.ph.ph-hourglass-high:before {
  content: "\e2b4";
}
.ph.ph-hourglass-low:before {
  content: "\e2b6";
}
.ph.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph.ph-hourglass-simple:before {
  content: "\e2ba";
}
.ph.ph-hourglass-simple-high:before {
  content: "\e2bc";
}
.ph.ph-hourglass-simple-low:before {
  content: "\e2be";
}
.ph.ph-hourglass-simple-medium:before {
  content: "\e2c0";
}
.ph.ph-house:before {
  content: "\e2c2";
}
.ph.ph-house-line:before {
  content: "\e2c4";
}
.ph.ph-house-simple:before {
  content: "\e2c6";
}
.ph.ph-hurricane:before {
  content: "\e88e";
}
.ph.ph-ice-cream:before {
  content: "\e804";
}
.ph.ph-identification-badge:before {
  content: "\e6f6";
}
.ph.ph-identification-card:before {
  content: "\e2c8";
}
.ph.ph-image:before {
  content: "\e2ca";
}
.ph.ph-image-broken:before {
  content: "\e7a8";
}
.ph.ph-image-square:before {
  content: "\e2cc";
}
.ph.ph-images:before {
  content: "\e836";
}
.ph.ph-images-square:before {
  content: "\e834";
}
.ph.ph-infinity:before {
  content: "\e634";
}
.ph.ph-lemniscate:before {
  content: "\e634";
}
.ph.ph-info:before {
  content: "\e2ce";
}
.ph.ph-instagram-logo:before {
  content: "\e2d0";
}
.ph.ph-intersect:before {
  content: "\e2d2";
}
.ph.ph-intersect-square:before {
  content: "\e87a";
}
.ph.ph-intersect-three:before {
  content: "\ecc4";
}
.ph.ph-intersection:before {
  content: "\edba";
}
.ph.ph-invoice:before {
  content: "\ee42";
}
.ph.ph-island:before {
  content: "\ee06";
}
.ph.ph-jar:before {
  content: "\e7e0";
}
.ph.ph-jar-label:before {
  content: "\e7e1";
}
.ph.ph-jeep:before {
  content: "\e2d4";
}
.ph.ph-joystick:before {
  content: "\ea5e";
}
.ph.ph-kanban:before {
  content: "\eb54";
}
.ph.ph-key:before {
  content: "\e2d6";
}
.ph.ph-key-return:before {
  content: "\e782";
}
.ph.ph-keyboard:before {
  content: "\e2d8";
}
.ph.ph-keyhole:before {
  content: "\ea78";
}
.ph.ph-knife:before {
  content: "\e636";
}
.ph.ph-ladder:before {
  content: "\e9e4";
}
.ph.ph-ladder-simple:before {
  content: "\ec26";
}
.ph.ph-lamp:before {
  content: "\e638";
}
.ph.ph-lamp-pendant:before {
  content: "\ee2e";
}
.ph.ph-laptop:before {
  content: "\e586";
}
.ph.ph-lasso:before {
  content: "\edc6";
}
.ph.ph-lastfm-logo:before {
  content: "\e842";
}
.ph.ph-layout:before {
  content: "\e6d6";
}
.ph.ph-leaf:before {
  content: "\e2da";
}
.ph.ph-lectern:before {
  content: "\e95a";
}
.ph.ph-lego:before {
  content: "\e8c6";
}
.ph.ph-lego-smiley:before {
  content: "\e8c7";
}
.ph.ph-less-than:before {
  content: "\edac";
}
.ph.ph-less-than-or-equal:before {
  content: "\eda4";
}
.ph.ph-letter-circle-h:before {
  content: "\ebf8";
}
.ph.ph-letter-circle-p:before {
  content: "\ec08";
}
.ph.ph-letter-circle-v:before {
  content: "\ec14";
}
.ph.ph-lifebuoy:before {
  content: "\e63a";
}
.ph.ph-lightbulb:before {
  content: "\e2dc";
}
.ph.ph-lightbulb-filament:before {
  content: "\e63c";
}
.ph.ph-lighthouse:before {
  content: "\e9f6";
}
.ph.ph-lightning:before {
  content: "\e2de";
}
.ph.ph-lightning-a:before {
  content: "\ea84";
}
.ph.ph-lightning-slash:before {
  content: "\e2e0";
}
.ph.ph-line-segment:before {
  content: "\e6d2";
}
.ph.ph-line-segments:before {
  content: "\e6d4";
}
.ph.ph-line-vertical:before {
  content: "\ed70";
}
.ph.ph-link:before {
  content: "\e2e2";
}
.ph.ph-link-break:before {
  content: "\e2e4";
}
.ph.ph-link-simple:before {
  content: "\e2e6";
}
.ph.ph-link-simple-break:before {
  content: "\e2e8";
}
.ph.ph-link-simple-horizontal:before {
  content: "\e2ea";
}
.ph.ph-link-simple-horizontal-break:before {
  content: "\e2ec";
}
.ph.ph-linkedin-logo:before {
  content: "\e2ee";
}
.ph.ph-linktree-logo:before {
  content: "\edee";
}
.ph.ph-linux-logo:before {
  content: "\eb02";
}
.ph.ph-list:before {
  content: "\e2f0";
}
.ph.ph-list-bullets:before {
  content: "\e2f2";
}
.ph.ph-list-checks:before {
  content: "\eadc";
}
.ph.ph-list-dashes:before {
  content: "\e2f4";
}
.ph.ph-list-heart:before {
  content: "\ebde";
}
.ph.ph-list-magnifying-glass:before {
  content: "\ebe0";
}
.ph.ph-list-numbers:before {
  content: "\e2f6";
}
.ph.ph-list-plus:before {
  content: "\e2f8";
}
.ph.ph-list-star:before {
  content: "\ebdc";
}
.ph.ph-lock:before {
  content: "\e2fa";
}
.ph.ph-lock-key:before {
  content: "\e2fe";
}
.ph.ph-lock-key-open:before {
  content: "\e300";
}
.ph.ph-lock-laminated:before {
  content: "\e302";
}
.ph.ph-lock-laminated-open:before {
  content: "\e304";
}
.ph.ph-lock-open:before {
  content: "\e306";
}
.ph.ph-lock-simple:before {
  content: "\e308";
}
.ph.ph-lock-simple-open:before {
  content: "\e30a";
}
.ph.ph-lockers:before {
  content: "\ecb8";
}
.ph.ph-log:before {
  content: "\ed82";
}
.ph.ph-magic-wand:before {
  content: "\e6b6";
}
.ph.ph-magnet:before {
  content: "\e680";
}
.ph.ph-magnet-straight:before {
  content: "\e682";
}
.ph.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph.ph-magnifying-glass-minus:before {
  content: "\e30e";
}
.ph.ph-magnifying-glass-plus:before {
  content: "\e310";
}
.ph.ph-mailbox:before {
  content: "\ec1e";
}
.ph.ph-map-pin:before {
  content: "\e316";
}
.ph.ph-map-pin-area:before {
  content: "\ee3a";
}
.ph.ph-map-pin-line:before {
  content: "\e318";
}
.ph.ph-map-pin-plus:before {
  content: "\e314";
}
.ph.ph-map-pin-simple:before {
  content: "\ee3e";
}
.ph.ph-map-pin-simple-area:before {
  content: "\ee3c";
}
.ph.ph-map-pin-simple-line:before {
  content: "\ee38";
}
.ph.ph-map-trifold:before {
  content: "\e31a";
}
.ph.ph-markdown-logo:before {
  content: "\e508";
}
.ph.ph-marker-circle:before {
  content: "\e640";
}
.ph.ph-martini:before {
  content: "\e31c";
}
.ph.ph-mask-happy:before {
  content: "\e9f4";
}
.ph.ph-mask-sad:before {
  content: "\eb9e";
}
.ph.ph-mastodon-logo:before {
  content: "\ed68";
}
.ph.ph-math-operations:before {
  content: "\e31e";
}
.ph.ph-matrix-logo:before {
  content: "\ed64";
}
.ph.ph-medal:before {
  content: "\e320";
}
.ph.ph-medal-military:before {
  content: "\ecfc";
}
.ph.ph-medium-logo:before {
  content: "\e322";
}
.ph.ph-megaphone:before {
  content: "\e324";
}
.ph.ph-megaphone-simple:before {
  content: "\e642";
}
.ph.ph-member-of:before {
  content: "\edc2";
}
.ph.ph-memory:before {
  content: "\e9c4";
}
.ph.ph-messenger-logo:before {
  content: "\e6d8";
}
.ph.ph-meta-logo:before {
  content: "\ed02";
}
.ph.ph-meteor:before {
  content: "\e9ba";
}
.ph.ph-metronome:before {
  content: "\ec8e";
}
.ph.ph-microphone:before {
  content: "\e326";
}
.ph.ph-microphone-slash:before {
  content: "\e328";
}
.ph.ph-microphone-stage:before {
  content: "\e75c";
}
.ph.ph-microscope:before {
  content: "\ec7a";
}
.ph.ph-microsoft-excel-logo:before {
  content: "\eb6c";
}
.ph.ph-microsoft-outlook-logo:before {
  content: "\eb70";
}
.ph.ph-microsoft-powerpoint-logo:before {
  content: "\eace";
}
.ph.ph-microsoft-teams-logo:before {
  content: "\eb66";
}
.ph.ph-microsoft-word-logo:before {
  content: "\eb6a";
}
.ph.ph-minus:before {
  content: "\e32a";
}
.ph.ph-minus-circle:before {
  content: "\e32c";
}
.ph.ph-minus-square:before {
  content: "\ed4c";
}
.ph.ph-money:before {
  content: "\e588";
}
.ph.ph-money-wavy:before {
  content: "\ee68";
}
.ph.ph-monitor:before {
  content: "\e32e";
}
.ph.ph-monitor-arrow-up:before {
  content: "\e58a";
}
.ph.ph-monitor-play:before {
  content: "\e58c";
}
.ph.ph-moon:before {
  content: "\e330";
}
.ph.ph-moon-stars:before {
  content: "\e58e";
}
.ph.ph-moped:before {
  content: "\e824";
}
.ph.ph-moped-front:before {
  content: "\e822";
}
.ph.ph-mosque:before {
  content: "\ecee";
}
.ph.ph-motorcycle:before {
  content: "\e80a";
}
.ph.ph-mountains:before {
  content: "\e7ae";
}
.ph.ph-mouse:before {
  content: "\e33a";
}
.ph.ph-mouse-left-click:before {
  content: "\e334";
}
.ph.ph-mouse-middle-click:before {
  content: "\e338";
}
.ph.ph-mouse-right-click:before {
  content: "\e336";
}
.ph.ph-mouse-scroll:before {
  content: "\e332";
}
.ph.ph-mouse-simple:before {
  content: "\e644";
}
.ph.ph-music-note:before {
  content: "\e33c";
}
.ph.ph-music-note-simple:before {
  content: "\e33e";
}
.ph.ph-music-notes:before {
  content: "\e340";
}
.ph.ph-music-notes-minus:before {
  content: "\ee0c";
}
.ph.ph-music-notes-plus:before {
  content: "\eb7c";
}
.ph.ph-music-notes-simple:before {
  content: "\e342";
}
.ph.ph-navigation-arrow:before {
  content: "\eade";
}
.ph.ph-needle:before {
  content: "\e82e";
}
.ph.ph-network:before {
  content: "\edde";
}
.ph.ph-network-slash:before {
  content: "\eddc";
}
.ph.ph-network-x:before {
  content: "\edda";
}
.ph.ph-newspaper:before {
  content: "\e344";
}
.ph.ph-newspaper-clipping:before {
  content: "\e346";
}
.ph.ph-not-equals:before {
  content: "\eda6";
}
.ph.ph-not-member-of:before {
  content: "\edae";
}
.ph.ph-not-subset-of:before {
  content: "\edb0";
}
.ph.ph-not-superset-of:before {
  content: "\edb2";
}
.ph.ph-notches:before {
  content: "\ed3a";
}
.ph.ph-note:before {
  content: "\e348";
}
.ph.ph-note-blank:before {
  content: "\e34a";
}
.ph.ph-note-pencil:before {
  content: "\e34c";
}
.ph.ph-notebook:before {
  content: "\e34e";
}
.ph.ph-notepad:before {
  content: "\e63e";
}
.ph.ph-notification:before {
  content: "\e6fa";
}
.ph.ph-notion-logo:before {
  content: "\e9a0";
}
.ph.ph-nuclear-plant:before {
  content: "\ed7c";
}
.ph.ph-number-circle-eight:before {
  content: "\e352";
}
.ph.ph-number-circle-five:before {
  content: "\e358";
}
.ph.ph-number-circle-four:before {
  content: "\e35e";
}
.ph.ph-number-circle-nine:before {
  content: "\e364";
}
.ph.ph-number-circle-one:before {
  content: "\e36a";
}
.ph.ph-number-circle-seven:before {
  content: "\e370";
}
.ph.ph-number-circle-six:before {
  content: "\e376";
}
.ph.ph-number-circle-three:before {
  content: "\e37c";
}
.ph.ph-number-circle-two:before {
  content: "\e382";
}
.ph.ph-number-circle-zero:before {
  content: "\e388";
}
.ph.ph-number-eight:before {
  content: "\e350";
}
.ph.ph-number-five:before {
  content: "\e356";
}
.ph.ph-number-four:before {
  content: "\e35c";
}
.ph.ph-number-nine:before {
  content: "\e362";
}
.ph.ph-number-one:before {
  content: "\e368";
}
.ph.ph-number-seven:before {
  content: "\e36e";
}
.ph.ph-number-six:before {
  content: "\e374";
}
.ph.ph-number-square-eight:before {
  content: "\e354";
}
.ph.ph-number-square-five:before {
  content: "\e35a";
}
.ph.ph-number-square-four:before {
  content: "\e360";
}
.ph.ph-number-square-nine:before {
  content: "\e366";
}
.ph.ph-number-square-one:before {
  content: "\e36c";
}
.ph.ph-number-square-seven:before {
  content: "\e372";
}
.ph.ph-number-square-six:before {
  content: "\e378";
}
.ph.ph-number-square-three:before {
  content: "\e37e";
}
.ph.ph-number-square-two:before {
  content: "\e384";
}
.ph.ph-number-square-zero:before {
  content: "\e38a";
}
.ph.ph-number-three:before {
  content: "\e37a";
}
.ph.ph-number-two:before {
  content: "\e380";
}
.ph.ph-number-zero:before {
  content: "\e386";
}
.ph.ph-numpad:before {
  content: "\e3c8";
}
.ph.ph-nut:before {
  content: "\e38c";
}
.ph.ph-ny-times-logo:before {
  content: "\e646";
}
.ph.ph-octagon:before {
  content: "\e38e";
}
.ph.ph-office-chair:before {
  content: "\ea46";
}
.ph.ph-onigiri:before {
  content: "\ee2c";
}
.ph.ph-open-ai-logo:before {
  content: "\e7d2";
}
.ph.ph-option:before {
  content: "\e8a8";
}
.ph.ph-orange:before {
  content: "\ee40";
}
.ph.ph-orange-slice:before {
  content: "\ed36";
}
.ph.ph-oven:before {
  content: "\ed8c";
}
.ph.ph-package:before {
  content: "\e390";
}
.ph.ph-paint-brush:before {
  content: "\e6f0";
}
.ph.ph-paint-brush-broad:before {
  content: "\e590";
}
.ph.ph-paint-brush-household:before {
  content: "\e6f2";
}
.ph.ph-paint-bucket:before {
  content: "\e392";
}
.ph.ph-paint-roller:before {
  content: "\e6f4";
}
.ph.ph-palette:before {
  content: "\e6c8";
}
.ph.ph-panorama:before {
  content: "\eaa2";
}
.ph.ph-pants:before {
  content: "\ec88";
}
.ph.ph-paper-plane:before {
  content: "\e394";
}
.ph.ph-paper-plane-right:before {
  content: "\e396";
}
.ph.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph.ph-paperclip:before {
  content: "\e39a";
}
.ph.ph-paperclip-horizontal:before {
  content: "\e592";
}
.ph.ph-parachute:before {
  content: "\ea7c";
}
.ph.ph-paragraph:before {
  content: "\e960";
}
.ph.ph-parallelogram:before {
  content: "\ecc6";
}
.ph.ph-park:before {
  content: "\ecb2";
}
.ph.ph-password:before {
  content: "\e752";
}
.ph.ph-path:before {
  content: "\e39c";
}
.ph.ph-patreon-logo:before {
  content: "\e98a";
}
.ph.ph-pause:before {
  content: "\e39e";
}
.ph.ph-pause-circle:before {
  content: "\e3a0";
}
.ph.ph-paw-print:before {
  content: "\e648";
}
.ph.ph-paypal-logo:before {
  content: "\e98c";
}
.ph.ph-peace:before {
  content: "\e3a2";
}
.ph.ph-pen:before {
  content: "\e3aa";
}
.ph.ph-pen-nib:before {
  content: "\e3ac";
}
.ph.ph-pen-nib-straight:before {
  content: "\e64a";
}
.ph.ph-pencil:before {
  content: "\e3ae";
}
.ph.ph-pencil-circle:before {
  content: "\e3b0";
}
.ph.ph-pencil-line:before {
  content: "\e3b2";
}
.ph.ph-pencil-ruler:before {
  content: "\e906";
}
.ph.ph-pencil-simple:before {
  content: "\e3b4";
}
.ph.ph-pencil-simple-line:before {
  content: "\ebc6";
}
.ph.ph-pencil-simple-slash:before {
  content: "\ecf6";
}
.ph.ph-pencil-slash:before {
  content: "\ecf8";
}
.ph.ph-pentagon:before {
  content: "\ec7e";
}
.ph.ph-pentagram:before {
  content: "\ec5c";
}
.ph.ph-pepper:before {
  content: "\e94a";
}
.ph.ph-percent:before {
  content: "\e3b6";
}
.ph.ph-person:before {
  content: "\e3a8";
}
.ph.ph-person-arms-spread:before {
  content: "\ecfe";
}
.ph.ph-person-simple:before {
  content: "\e72e";
}
.ph.ph-person-simple-bike:before {
  content: "\e734";
}
.ph.ph-person-simple-circle:before {
  content: "\ee58";
}
.ph.ph-person-simple-hike:before {
  content: "\ed54";
}
.ph.ph-person-simple-run:before {
  content: "\e730";
}
.ph.ph-person-simple-ski:before {
  content: "\e71c";
}
.ph.ph-person-simple-snowboard:before {
  content: "\e71e";
}
.ph.ph-person-simple-swim:before {
  content: "\e736";
}
.ph.ph-person-simple-tai-chi:before {
  content: "\ed5c";
}
.ph.ph-person-simple-throw:before {
  content: "\e732";
}
.ph.ph-person-simple-walk:before {
  content: "\e73a";
}
.ph.ph-perspective:before {
  content: "\ebe6";
}
.ph.ph-phone:before {
  content: "\e3b8";
}
.ph.ph-phone-call:before {
  content: "\e3ba";
}
.ph.ph-phone-disconnect:before {
  content: "\e3bc";
}
.ph.ph-phone-incoming:before {
  content: "\e3be";
}
.ph.ph-phone-list:before {
  content: "\e3cc";
}
.ph.ph-phone-outgoing:before {
  content: "\e3c0";
}
.ph.ph-phone-pause:before {
  content: "\e3ca";
}
.ph.ph-phone-plus:before {
  content: "\ec56";
}
.ph.ph-phone-slash:before {
  content: "\e3c2";
}
.ph.ph-phone-transfer:before {
  content: "\e3c6";
}
.ph.ph-phone-x:before {
  content: "\e3c4";
}
.ph.ph-phosphor-logo:before {
  content: "\e3ce";
}
.ph.ph-pi:before {
  content: "\ec80";
}
.ph.ph-piano-keys:before {
  content: "\e9c8";
}
.ph.ph-picnic-table:before {
  content: "\ee26";
}
.ph.ph-picture-in-picture:before {
  content: "\e64c";
}
.ph.ph-piggy-bank:before {
  content: "\ea04";
}
.ph.ph-pill:before {
  content: "\e700";
}
.ph.ph-ping-pong:before {
  content: "\ea42";
}
.ph.ph-pint-glass:before {
  content: "\edd0";
}
.ph.ph-pinterest-logo:before {
  content: "\e64e";
}
.ph.ph-pinwheel:before {
  content: "\eb9c";
}
.ph.ph-pipe:before {
  content: "\ed86";
}
.ph.ph-pipe-wrench:before {
  content: "\ed88";
}
.ph.ph-pix-logo:before {
  content: "\ecc2";
}
.ph.ph-pizza:before {
  content: "\e796";
}
.ph.ph-placeholder:before {
  content: "\e650";
}
.ph.ph-planet:before {
  content: "\e652";
}
.ph.ph-plant:before {
  content: "\ebae";
}
.ph.ph-play:before {
  content: "\e3d0";
}
.ph.ph-play-circle:before {
  content: "\e3d2";
}
.ph.ph-play-pause:before {
  content: "\e8be";
}
.ph.ph-playlist:before {
  content: "\e6aa";
}
.ph.ph-plug:before {
  content: "\e946";
}
.ph.ph-plug-charging:before {
  content: "\eb5c";
}
.ph.ph-plugs:before {
  content: "\eb56";
}
.ph.ph-plugs-connected:before {
  content: "\eb5a";
}
.ph.ph-plus:before {
  content: "\e3d4";
}
.ph.ph-plus-circle:before {
  content: "\e3d6";
}
.ph.ph-plus-minus:before {
  content: "\e3d8";
}
.ph.ph-plus-square:before {
  content: "\ed4a";
}
.ph.ph-poker-chip:before {
  content: "\e594";
}
.ph.ph-police-car:before {
  content: "\ec4a";
}
.ph.ph-polygon:before {
  content: "\e6d0";
}
.ph.ph-popcorn:before {
  content: "\eb4e";
}
.ph.ph-popsicle:before {
  content: "\ebbe";
}
.ph.ph-potted-plant:before {
  content: "\ec22";
}
.ph.ph-power:before {
  content: "\e3da";
}
.ph.ph-prescription:before {
  content: "\e7a2";
}
.ph.ph-presentation:before {
  content: "\e654";
}
.ph.ph-presentation-chart:before {
  content: "\e656";
}
.ph.ph-printer:before {
  content: "\e3dc";
}
.ph.ph-prohibit:before {
  content: "\e3de";
}
.ph.ph-prohibit-inset:before {
  content: "\e3e0";
}
.ph.ph-projector-screen:before {
  content: "\e658";
}
.ph.ph-projector-screen-chart:before {
  content: "\e65a";
}
.ph.ph-pulse:before {
  content: "\e000";
}
.ph.ph-activity:before {
  content: "\e000";
}
.ph.ph-push-pin:before {
  content: "\e3e2";
}
.ph.ph-push-pin-simple:before {
  content: "\e65c";
}
.ph.ph-push-pin-simple-slash:before {
  content: "\e65e";
}
.ph.ph-push-pin-slash:before {
  content: "\e3e4";
}
.ph.ph-puzzle-piece:before {
  content: "\e596";
}
.ph.ph-qr-code:before {
  content: "\e3e6";
}
.ph.ph-question:before {
  content: "\e3e8";
}
.ph.ph-question-mark:before {
  content: "\e3e9";
}
.ph.ph-queue:before {
  content: "\e6ac";
}
.ph.ph-quotes:before {
  content: "\e660";
}
.ph.ph-rabbit:before {
  content: "\eac2";
}
.ph.ph-racquet:before {
  content: "\ee02";
}
.ph.ph-radical:before {
  content: "\e3ea";
}
.ph.ph-radio:before {
  content: "\e77e";
}
.ph.ph-radio-button:before {
  content: "\eb08";
}
.ph.ph-radioactive:before {
  content: "\e9dc";
}
.ph.ph-rainbow:before {
  content: "\e598";
}
.ph.ph-rainbow-cloud:before {
  content: "\e59a";
}
.ph.ph-ranking:before {
  content: "\ed62";
}
.ph.ph-read-cv-logo:before {
  content: "\ed0c";
}
.ph.ph-receipt:before {
  content: "\e3ec";
}
.ph.ph-receipt-x:before {
  content: "\ed40";
}
.ph.ph-record:before {
  content: "\e3ee";
}
.ph.ph-rectangle:before {
  content: "\e3f0";
}
.ph.ph-rectangle-dashed:before {
  content: "\e3f2";
}
.ph.ph-recycle:before {
  content: "\e75a";
}
.ph.ph-reddit-logo:before {
  content: "\e59c";
}
.ph.ph-repeat:before {
  content: "\e3f6";
}
.ph.ph-repeat-once:before {
  content: "\e3f8";
}
.ph.ph-replit-logo:before {
  content: "\eb8a";
}
.ph.ph-resize:before {
  content: "\ed6e";
}
.ph.ph-rewind:before {
  content: "\e6a8";
}
.ph.ph-rewind-circle:before {
  content: "\e3fa";
}
.ph.ph-road-horizon:before {
  content: "\e838";
}
.ph.ph-robot:before {
  content: "\e762";
}
.ph.ph-rocket:before {
  content: "\e3fc";
}
.ph.ph-rocket-launch:before {
  content: "\e3fe";
}
.ph.ph-rows:before {
  content: "\e5a2";
}
.ph.ph-rows-plus-bottom:before {
  content: "\e59e";
}
.ph.ph-rows-plus-top:before {
  content: "\e5a0";
}
.ph.ph-rss:before {
  content: "\e400";
}
.ph.ph-rss-simple:before {
  content: "\e402";
}
.ph.ph-rug:before {
  content: "\ea1a";
}
.ph.ph-ruler:before {
  content: "\e6b8";
}
.ph.ph-sailboat:before {
  content: "\e78a";
}
.ph.ph-scales:before {
  content: "\e750";
}
.ph.ph-scan:before {
  content: "\ebb6";
}
.ph.ph-scan-smiley:before {
  content: "\ebb4";
}
.ph.ph-scissors:before {
  content: "\eae0";
}
.ph.ph-scooter:before {
  content: "\e820";
}
.ph.ph-screencast:before {
  content: "\e404";
}
.ph.ph-screwdriver:before {
  content: "\e86e";
}
.ph.ph-scribble:before {
  content: "\e806";
}
.ph.ph-scribble-loop:before {
  content: "\e662";
}
.ph.ph-scroll:before {
  content: "\eb7a";
}
.ph.ph-seal:before {
  content: "\e604";
}
.ph.ph-circle-wavy:before {
  content: "\e604";
}
.ph.ph-seal-check:before {
  content: "\e606";
}
.ph.ph-circle-wavy-check:before {
  content: "\e606";
}
.ph.ph-seal-percent:before {
  content: "\e60a";
}
.ph.ph-seal-question:before {
  content: "\e608";
}
.ph.ph-circle-wavy-question:before {
  content: "\e608";
}
.ph.ph-seal-warning:before {
  content: "\e60c";
}
.ph.ph-circle-wavy-warning:before {
  content: "\e60c";
}
.ph.ph-seat:before {
  content: "\eb8e";
}
.ph.ph-seatbelt:before {
  content: "\edfe";
}
.ph.ph-security-camera:before {
  content: "\eca4";
}
.ph.ph-selection:before {
  content: "\e69a";
}
.ph.ph-selection-all:before {
  content: "\e746";
}
.ph.ph-selection-background:before {
  content: "\eaf8";
}
.ph.ph-selection-foreground:before {
  content: "\eaf6";
}
.ph.ph-selection-inverse:before {
  content: "\e744";
}
.ph.ph-selection-plus:before {
  content: "\e69c";
}
.ph.ph-selection-slash:before {
  content: "\e69e";
}
.ph.ph-shapes:before {
  content: "\ec5e";
}
.ph.ph-share:before {
  content: "\e406";
}
.ph.ph-share-fat:before {
  content: "\ed52";
}
.ph.ph-share-network:before {
  content: "\e408";
}
.ph.ph-shield:before {
  content: "\e40a";
}
.ph.ph-shield-check:before {
  content: "\e40c";
}
.ph.ph-shield-checkered:before {
  content: "\e708";
}
.ph.ph-shield-chevron:before {
  content: "\e40e";
}
.ph.ph-shield-plus:before {
  content: "\e706";
}
.ph.ph-shield-slash:before {
  content: "\e410";
}
.ph.ph-shield-star:before {
  content: "\ec34";
}
.ph.ph-shield-warning:before {
  content: "\e412";
}
.ph.ph-shipping-container:before {
  content: "\e78c";
}
.ph.ph-shirt-folded:before {
  content: "\ea92";
}
.ph.ph-shooting-star:before {
  content: "\ecfa";
}
.ph.ph-shopping-bag:before {
  content: "\e416";
}
.ph.ph-shopping-bag-open:before {
  content: "\e418";
}
.ph.ph-shopping-cart:before {
  content: "\e41e";
}
.ph.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph.ph-shovel:before {
  content: "\e9e6";
}
.ph.ph-shower:before {
  content: "\e776";
}
.ph.ph-shrimp:before {
  content: "\eab4";
}
.ph.ph-shuffle:before {
  content: "\e422";
}
.ph.ph-shuffle-angular:before {
  content: "\e424";
}
.ph.ph-shuffle-simple:before {
  content: "\e426";
}
.ph.ph-sidebar:before {
  content: "\eab6";
}
.ph.ph-sidebar-simple:before {
  content: "\ec24";
}
.ph.ph-sigma:before {
  content: "\eab8";
}
.ph.ph-sign-in:before {
  content: "\e428";
}
.ph.ph-sign-out:before {
  content: "\e42a";
}
.ph.ph-signature:before {
  content: "\ebac";
}
.ph.ph-signpost:before {
  content: "\e89c";
}
.ph.ph-sim-card:before {
  content: "\e664";
}
.ph.ph-siren:before {
  content: "\e9b8";
}
.ph.ph-sketch-logo:before {
  content: "\e42c";
}
.ph.ph-skip-back:before {
  content: "\e5a4";
}
.ph.ph-skip-back-circle:before {
  content: "\e42e";
}
.ph.ph-skip-forward:before {
  content: "\e5a6";
}
.ph.ph-skip-forward-circle:before {
  content: "\e430";
}
.ph.ph-skull:before {
  content: "\e916";
}
.ph.ph-skype-logo:before {
  content: "\e8dc";
}
.ph.ph-slack-logo:before {
  content: "\e5a8";
}
.ph.ph-sliders:before {
  content: "\e432";
}
.ph.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph.ph-slideshow:before {
  content: "\ed32";
}
.ph.ph-smiley:before {
  content: "\e436";
}
.ph.ph-smiley-angry:before {
  content: "\ec62";
}
.ph.ph-smiley-blank:before {
  content: "\e438";
}
.ph.ph-smiley-meh:before {
  content: "\e43a";
}
.ph.ph-smiley-melting:before {
  content: "\ee56";
}
.ph.ph-smiley-nervous:before {
  content: "\e43c";
}
.ph.ph-smiley-sad:before {
  content: "\e43e";
}
.ph.ph-smiley-sticker:before {
  content: "\e440";
}
.ph.ph-smiley-wink:before {
  content: "\e666";
}
.ph.ph-smiley-x-eyes:before {
  content: "\e442";
}
.ph.ph-snapchat-logo:before {
  content: "\e668";
}
.ph.ph-sneaker:before {
  content: "\e80c";
}
.ph.ph-sneaker-move:before {
  content: "\ed60";
}
.ph.ph-snowflake:before {
  content: "\e5aa";
}
.ph.ph-soccer-ball:before {
  content: "\e716";
}
.ph.ph-sock:before {
  content: "\ecce";
}
.ph.ph-solar-panel:before {
  content: "\ed7a";
}
.ph.ph-solar-roof:before {
  content: "\ed7b";
}
.ph.ph-sort-ascending:before {
  content: "\e444";
}
.ph.ph-sort-descending:before {
  content: "\e446";
}
.ph.ph-soundcloud-logo:before {
  content: "\e8de";
}
.ph.ph-spade:before {
  content: "\e448";
}
.ph.ph-sparkle:before {
  content: "\e6a2";
}
.ph.ph-speaker-hifi:before {
  content: "\ea08";
}
.ph.ph-speaker-high:before {
  content: "\e44a";
}
.ph.ph-speaker-low:before {
  content: "\e44c";
}
.ph.ph-speaker-none:before {
  content: "\e44e";
}
.ph.ph-speaker-simple-high:before {
  content: "\e450";
}
.ph.ph-speaker-simple-low:before {
  content: "\e452";
}
.ph.ph-speaker-simple-none:before {
  content: "\e454";
}
.ph.ph-speaker-simple-slash:before {
  content: "\e456";
}
.ph.ph-speaker-simple-x:before {
  content: "\e458";
}
.ph.ph-speaker-slash:before {
  content: "\e45a";
}
.ph.ph-speaker-x:before {
  content: "\e45c";
}
.ph.ph-speedometer:before {
  content: "\ee74";
}
.ph.ph-sphere:before {
  content: "\ee66";
}
.ph.ph-spinner:before {
  content: "\e66a";
}
.ph.ph-spinner-ball:before {
  content: "\ee28";
}
.ph.ph-spinner-gap:before {
  content: "\e66c";
}
.ph.ph-spiral:before {
  content: "\e9fa";
}
.ph.ph-split-horizontal:before {
  content: "\e872";
}
.ph.ph-split-vertical:before {
  content: "\e876";
}
.ph.ph-spotify-logo:before {
  content: "\e66e";
}
.ph.ph-spray-bottle:before {
  content: "\e7e4";
}
.ph.ph-square:before {
  content: "\e45e";
}
.ph.ph-square-half:before {
  content: "\e462";
}
.ph.ph-square-half-bottom:before {
  content: "\eb16";
}
.ph.ph-square-logo:before {
  content: "\e690";
}
.ph.ph-square-split-horizontal:before {
  content: "\e870";
}
.ph.ph-square-split-vertical:before {
  content: "\e874";
}
.ph.ph-squares-four:before {
  content: "\e464";
}
.ph.ph-stack:before {
  content: "\e466";
}
.ph.ph-stack-minus:before {
  content: "\edf4";
}
.ph.ph-stack-overflow-logo:before {
  content: "\eb78";
}
.ph.ph-stack-plus:before {
  content: "\edf6";
}
.ph.ph-stack-simple:before {
  content: "\e468";
}
.ph.ph-stairs:before {
  content: "\e8ec";
}
.ph.ph-stamp:before {
  content: "\ea48";
}
.ph.ph-standard-definition:before {
  content: "\ea90";
}
.ph.ph-star:before {
  content: "\e46a";
}
.ph.ph-star-and-crescent:before {
  content: "\ecf4";
}
.ph.ph-star-four:before {
  content: "\e6a4";
}
.ph.ph-star-half:before {
  content: "\e70a";
}
.ph.ph-star-of-david:before {
  content: "\e89e";
}
.ph.ph-steam-logo:before {
  content: "\ead4";
}
.ph.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph.ph-steps:before {
  content: "\ecbe";
}
.ph.ph-stethoscope:before {
  content: "\e7ea";
}
.ph.ph-sticker:before {
  content: "\e5ac";
}
.ph.ph-stool:before {
  content: "\ea44";
}
.ph.ph-stop:before {
  content: "\e46c";
}
.ph.ph-stop-circle:before {
  content: "\e46e";
}
.ph.ph-storefront:before {
  content: "\e470";
}
.ph.ph-strategy:before {
  content: "\ea3a";
}
.ph.ph-stripe-logo:before {
  content: "\e698";
}
.ph.ph-student:before {
  content: "\e73e";
}
.ph.ph-subset-of:before {
  content: "\edc0";
}
.ph.ph-subset-proper-of:before {
  content: "\edb6";
}
.ph.ph-subtitles:before {
  content: "\e1a8";
}
.ph.ph-subtitles-slash:before {
  content: "\e1a6";
}
.ph.ph-subtract:before {
  content: "\ebd6";
}
.ph.ph-subtract-square:before {
  content: "\ebd4";
}
.ph.ph-subway:before {
  content: "\e498";
}
.ph.ph-suitcase:before {
  content: "\e5ae";
}
.ph.ph-suitcase-rolling:before {
  content: "\e9b0";
}
.ph.ph-suitcase-simple:before {
  content: "\e5b0";
}
.ph.ph-sun:before {
  content: "\e472";
}
.ph.ph-sun-dim:before {
  content: "\e474";
}
.ph.ph-sun-horizon:before {
  content: "\e5b6";
}
.ph.ph-sunglasses:before {
  content: "\e816";
}
.ph.ph-superset-of:before {
  content: "\edb8";
}
.ph.ph-superset-proper-of:before {
  content: "\edb4";
}
.ph.ph-swap:before {
  content: "\e83c";
}
.ph.ph-swatches:before {
  content: "\e5b8";
}
.ph.ph-swimming-pool:before {
  content: "\ecb6";
}
.ph.ph-sword:before {
  content: "\e5ba";
}
.ph.ph-synagogue:before {
  content: "\ecec";
}
.ph.ph-syringe:before {
  content: "\e968";
}
.ph.ph-t-shirt:before {
  content: "\e670";
}
.ph.ph-table:before {
  content: "\e476";
}
.ph.ph-tabs:before {
  content: "\e778";
}
.ph.ph-tag:before {
  content: "\e478";
}
.ph.ph-tag-chevron:before {
  content: "\e672";
}
.ph.ph-tag-simple:before {
  content: "\e47a";
}
.ph.ph-target:before {
  content: "\e47c";
}
.ph.ph-taxi:before {
  content: "\e902";
}
.ph.ph-tea-bag:before {
  content: "\e8e6";
}
.ph.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph.ph-television:before {
  content: "\e754";
}
.ph.ph-television-simple:before {
  content: "\eae6";
}
.ph.ph-tennis-ball:before {
  content: "\e720";
}
.ph.ph-tent:before {
  content: "\e8ba";
}
.ph.ph-terminal:before {
  content: "\e47e";
}
.ph.ph-terminal-window:before {
  content: "\eae8";
}
.ph.ph-test-tube:before {
  content: "\e7a0";
}
.ph.ph-text-a-underline:before {
  content: "\ed34";
}
.ph.ph-text-aa:before {
  content: "\e6ee";
}
.ph.ph-text-align-center:before {
  content: "\e480";
}
.ph.ph-text-align-justify:before {
  content: "\e482";
}
.ph.ph-text-align-left:before {
  content: "\e484";
}
.ph.ph-text-align-right:before {
  content: "\e486";
}
.ph.ph-text-b:before {
  content: "\e5be";
}
.ph.ph-text-bolder:before {
  content: "\e5be";
}
.ph.ph-text-columns:before {
  content: "\ec96";
}
.ph.ph-text-h:before {
  content: "\e6ba";
}
.ph.ph-text-h-five:before {
  content: "\e6c4";
}
.ph.ph-text-h-four:before {
  content: "\e6c2";
}
.ph.ph-text-h-one:before {
  content: "\e6bc";
}
.ph.ph-text-h-six:before {
  content: "\e6c6";
}
.ph.ph-text-h-three:before {
  content: "\e6c0";
}
.ph.ph-text-h-two:before {
  content: "\e6be";
}
.ph.ph-text-indent:before {
  content: "\ea1e";
}
.ph.ph-text-italic:before {
  content: "\e5c0";
}
.ph.ph-text-outdent:before {
  content: "\ea1c";
}
.ph.ph-text-strikethrough:before {
  content: "\e5c2";
}
.ph.ph-text-subscript:before {
  content: "\ec98";
}
.ph.ph-text-superscript:before {
  content: "\ec9a";
}
.ph.ph-text-t:before {
  content: "\e48a";
}
.ph.ph-text-t-slash:before {
  content: "\e488";
}
.ph.ph-text-underline:before {
  content: "\e5c4";
}
.ph.ph-textbox:before {
  content: "\eb0a";
}
.ph.ph-thermometer:before {
  content: "\e5c6";
}
.ph.ph-thermometer-cold:before {
  content: "\e5c8";
}
.ph.ph-thermometer-hot:before {
  content: "\e5ca";
}
.ph.ph-thermometer-simple:before {
  content: "\e5cc";
}
.ph.ph-threads-logo:before {
  content: "\ed9e";
}
.ph.ph-three-d:before {
  content: "\ea5a";
}
.ph.ph-thumbs-down:before {
  content: "\e48c";
}
.ph.ph-thumbs-up:before {
  content: "\e48e";
}
.ph.ph-ticket:before {
  content: "\e490";
}
.ph.ph-tidal-logo:before {
  content: "\ed1c";
}
.ph.ph-tiktok-logo:before {
  content: "\eaf2";
}
.ph.ph-tilde:before {
  content: "\eda8";
}
.ph.ph-timer:before {
  content: "\e492";
}
.ph.ph-tip-jar:before {
  content: "\e7e2";
}
.ph.ph-tipi:before {
  content: "\ed30";
}
.ph.ph-tire:before {
  content: "\edd2";
}
.ph.ph-toggle-left:before {
  content: "\e674";
}
.ph.ph-toggle-right:before {
  content: "\e676";
}
.ph.ph-toilet:before {
  content: "\e79a";
}
.ph.ph-toilet-paper:before {
  content: "\e79c";
}
.ph.ph-toolbox:before {
  content: "\eca0";
}
.ph.ph-tooth:before {
  content: "\e9cc";
}
.ph.ph-tornado:before {
  content: "\e88c";
}
.ph.ph-tote:before {
  content: "\e494";
}
.ph.ph-tote-simple:before {
  content: "\e678";
}
.ph.ph-towel:before {
  content: "\ede6";
}
.ph.ph-tractor:before {
  content: "\ec6e";
}
.ph.ph-trademark:before {
  content: "\e9f0";
}
.ph.ph-trademark-registered:before {
  content: "\e3f4";
}
.ph.ph-traffic-cone:before {
  content: "\e9a8";
}
.ph.ph-traffic-sign:before {
  content: "\e67a";
}
.ph.ph-traffic-signal:before {
  content: "\e9aa";
}
.ph.ph-train:before {
  content: "\e496";
}
.ph.ph-train-regional:before {
  content: "\e49e";
}
.ph.ph-train-simple:before {
  content: "\e4a0";
}
.ph.ph-tram:before {
  content: "\e9ec";
}
.ph.ph-translate:before {
  content: "\e4a2";
}
.ph.ph-trash:before {
  content: "\e4a6";
}
.ph.ph-trash-simple:before {
  content: "\e4a8";
}
.ph.ph-tray:before {
  content: "\e4aa";
}
.ph.ph-tray-arrow-down:before {
  content: "\e010";
}
.ph.ph-archive-tray:before {
  content: "\e010";
}
.ph.ph-tray-arrow-up:before {
  content: "\ee52";
}
.ph.ph-treasure-chest:before {
  content: "\ede2";
}
.ph.ph-tree:before {
  content: "\e6da";
}
.ph.ph-tree-evergreen:before {
  content: "\e6dc";
}
.ph.ph-tree-palm:before {
  content: "\e91a";
}
.ph.ph-tree-structure:before {
  content: "\e67c";
}
.ph.ph-tree-view:before {
  content: "\ee48";
}
.ph.ph-trend-down:before {
  content: "\e4ac";
}
.ph.ph-trend-up:before {
  content: "\e4ae";
}
.ph.ph-triangle:before {
  content: "\e4b0";
}
.ph.ph-triangle-dashed:before {
  content: "\e4b2";
}
.ph.ph-trolley:before {
  content: "\e5b2";
}
.ph.ph-trolley-suitcase:before {
  content: "\e5b4";
}
.ph.ph-trophy:before {
  content: "\e67e";
}
.ph.ph-truck:before {
  content: "\e4b4";
}
.ph.ph-truck-trailer:before {
  content: "\e4b6";
}
.ph.ph-tumblr-logo:before {
  content: "\e8d4";
}
.ph.ph-twitch-logo:before {
  content: "\e5ce";
}
.ph.ph-twitter-logo:before {
  content: "\e4ba";
}
.ph.ph-umbrella:before {
  content: "\e684";
}
.ph.ph-umbrella-simple:before {
  content: "\e686";
}
.ph.ph-union:before {
  content: "\edbe";
}
.ph.ph-unite:before {
  content: "\e87e";
}
.ph.ph-unite-square:before {
  content: "\e878";
}
.ph.ph-upload:before {
  content: "\e4be";
}
.ph.ph-upload-simple:before {
  content: "\e4c0";
}
.ph.ph-usb:before {
  content: "\e956";
}
.ph.ph-user:before {
  content: "\e4c2";
}
.ph.ph-user-check:before {
  content: "\eafa";
}
.ph.ph-user-circle:before {
  content: "\e4c4";
}
.ph.ph-user-circle-check:before {
  content: "\ec38";
}
.ph.ph-user-circle-dashed:before {
  content: "\ec36";
}
.ph.ph-user-circle-gear:before {
  content: "\e4c6";
}
.ph.ph-user-circle-minus:before {
  content: "\e4c8";
}
.ph.ph-user-circle-plus:before {
  content: "\e4ca";
}
.ph.ph-user-focus:before {
  content: "\e6fc";
}
.ph.ph-user-gear:before {
  content: "\e4cc";
}
.ph.ph-user-list:before {
  content: "\e73c";
}
.ph.ph-user-minus:before {
  content: "\e4ce";
}
.ph.ph-user-plus:before {
  content: "\e4d0";
}
.ph.ph-user-rectangle:before {
  content: "\e4d2";
}
.ph.ph-user-sound:before {
  content: "\eca8";
}
.ph.ph-user-square:before {
  content: "\e4d4";
}
.ph.ph-user-switch:before {
  content: "\e756";
}
.ph.ph-users:before {
  content: "\e4d6";
}
.ph.ph-users-four:before {
  content: "\e68c";
}
.ph.ph-users-three:before {
  content: "\e68e";
}
.ph.ph-van:before {
  content: "\e826";
}
.ph.ph-vault:before {
  content: "\e76e";
}
.ph.ph-vector-three:before {
  content: "\ee62";
}
.ph.ph-vector-two:before {
  content: "\ee64";
}
.ph.ph-vibrate:before {
  content: "\e4d8";
}
.ph.ph-video:before {
  content: "\e740";
}
.ph.ph-video-camera:before {
  content: "\e4da";
}
.ph.ph-video-camera-slash:before {
  content: "\e4dc";
}
.ph.ph-video-conference:before {
  content: "\edce";
}
.ph.ph-vignette:before {
  content: "\eba2";
}
.ph.ph-vinyl-record:before {
  content: "\ecac";
}
.ph.ph-virtual-reality:before {
  content: "\e7b8";
}
.ph.ph-virus:before {
  content: "\e7d6";
}
.ph.ph-visor:before {
  content: "\ee2a";
}
.ph.ph-voicemail:before {
  content: "\e4de";
}
.ph.ph-volleyball:before {
  content: "\e726";
}
.ph.ph-wall:before {
  content: "\e688";
}
.ph.ph-wallet:before {
  content: "\e68a";
}
.ph.ph-warehouse:before {
  content: "\ecd4";
}
.ph.ph-warning:before {
  content: "\e4e0";
}
.ph.ph-warning-circle:before {
  content: "\e4e2";
}
.ph.ph-warning-diamond:before {
  content: "\e7fc";
}
.ph.ph-warning-octagon:before {
  content: "\e4e4";
}
.ph.ph-washing-machine:before {
  content: "\ede8";
}
.ph.ph-watch:before {
  content: "\e4e6";
}
.ph.ph-wave-sawtooth:before {
  content: "\ea9c";
}
.ph.ph-wave-sine:before {
  content: "\ea9a";
}
.ph.ph-wave-square:before {
  content: "\ea9e";
}
.ph.ph-wave-triangle:before {
  content: "\eaa0";
}
.ph.ph-waveform:before {
  content: "\e802";
}
.ph.ph-waveform-slash:before {
  content: "\e800";
}
.ph.ph-waves:before {
  content: "\e6de";
}
.ph.ph-webcam:before {
  content: "\e9b2";
}
.ph.ph-webcam-slash:before {
  content: "\ecdc";
}
.ph.ph-webhooks-logo:before {
  content: "\ecae";
}
.ph.ph-wechat-logo:before {
  content: "\e8d2";
}
.ph.ph-whatsapp-logo:before {
  content: "\e5d0";
}
.ph.ph-wheelchair:before {
  content: "\e4e8";
}
.ph.ph-wheelchair-motion:before {
  content: "\e89a";
}
.ph.ph-wifi-high:before {
  content: "\e4ea";
}
.ph.ph-wifi-low:before {
  content: "\e4ec";
}
.ph.ph-wifi-medium:before {
  content: "\e4ee";
}
.ph.ph-wifi-none:before {
  content: "\e4f0";
}
.ph.ph-wifi-slash:before {
  content: "\e4f2";
}
.ph.ph-wifi-x:before {
  content: "\e4f4";
}
.ph.ph-wind:before {
  content: "\e5d2";
}
.ph.ph-windmill:before {
  content: "\e9f8";
}
.ph.ph-windows-logo:before {
  content: "\e692";
}
.ph.ph-wine:before {
  content: "\e6b2";
}
.ph.ph-wrench:before {
  content: "\e5d4";
}
.ph.ph-x:before {
  content: "\e4f6";
}
.ph.ph-x-circle:before {
  content: "\e4f8";
}
.ph.ph-x-logo:before {
  content: "\e4bc";
}
.ph.ph-x-square:before {
  content: "\e4fa";
}
.ph.ph-yarn:before {
  content: "\ed9a";
}
.ph.ph-yin-yang:before {
  content: "\e92a";
}
.ph.ph-youtube-logo:before {
  content: "\e4fc";
}

/* ========== vendor\Phosphor-Fill.css ========== */
@font-face {
  font-family: "Phosphor-Fill";
  src:
    url("/fonts/Phosphor-Fill/Phosphor-Fill.woff2") format("woff2"),
    url("/fonts/Phosphor-Fill/Phosphor-Fill.woff") format("woff"),
    url("/fonts/Phosphor-Fill/Phosphor-Fill.ttf") format("truetype"),
    url("/fonts/Phosphor-Fill/Phosphor-Fill.svg#Phosphor-Fill") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-fill {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Phosphor-Fill" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph-fill.ph-acorn:before {
  content: "\eb9a";
}
.ph-fill.ph-address-book:before {
  content: "\e6f8";
}
.ph-fill.ph-address-book-tabs:before {
  content: "\ee4e";
}
.ph-fill.ph-air-traffic-control:before {
  content: "\ecd8";
}
.ph-fill.ph-airplane:before {
  content: "\e002";
}
.ph-fill.ph-airplane-in-flight:before {
  content: "\e4fe";
}
.ph-fill.ph-airplane-landing:before {
  content: "\e502";
}
.ph-fill.ph-airplane-takeoff:before {
  content: "\e504";
}
.ph-fill.ph-airplane-taxiing:before {
  content: "\e500";
}
.ph-fill.ph-airplane-tilt:before {
  content: "\e5d6";
}
.ph-fill.ph-airplay:before {
  content: "\e004";
}
.ph-fill.ph-alarm:before {
  content: "\e006";
}
.ph-fill.ph-alien:before {
  content: "\e8a6";
}
.ph-fill.ph-align-bottom:before {
  content: "\e506";
}
.ph-fill.ph-align-bottom-simple:before {
  content: "\eb0c";
}
.ph-fill.ph-align-center-horizontal:before {
  content: "\e50a";
}
.ph-fill.ph-align-center-horizontal-simple:before {
  content: "\eb0e";
}
.ph-fill.ph-align-center-vertical:before {
  content: "\e50c";
}
.ph-fill.ph-align-center-vertical-simple:before {
  content: "\eb10";
}
.ph-fill.ph-align-left:before {
  content: "\e50e";
}
.ph-fill.ph-align-left-simple:before {
  content: "\eaee";
}
.ph-fill.ph-align-right:before {
  content: "\e510";
}
.ph-fill.ph-align-right-simple:before {
  content: "\eb12";
}
.ph-fill.ph-align-top:before {
  content: "\e512";
}
.ph-fill.ph-align-top-simple:before {
  content: "\eb14";
}
.ph-fill.ph-amazon-logo:before {
  content: "\e96c";
}
.ph-fill.ph-ambulance:before {
  content: "\e572";
}
.ph-fill.ph-anchor:before {
  content: "\e514";
}
.ph-fill.ph-anchor-simple:before {
  content: "\e5d8";
}
.ph-fill.ph-android-logo:before {
  content: "\e008";
}
.ph-fill.ph-angle:before {
  content: "\e7bc";
}
.ph-fill.ph-angular-logo:before {
  content: "\eb80";
}
.ph-fill.ph-aperture:before {
  content: "\e00a";
}
.ph-fill.ph-app-store-logo:before {
  content: "\e974";
}
.ph-fill.ph-app-window:before {
  content: "\e5da";
}
.ph-fill.ph-apple-logo:before {
  content: "\e516";
}
.ph-fill.ph-apple-podcasts-logo:before {
  content: "\eb96";
}
.ph-fill.ph-approximate-equals:before {
  content: "\edaa";
}
.ph-fill.ph-archive:before {
  content: "\e00c";
}
.ph-fill.ph-armchair:before {
  content: "\e012";
}
.ph-fill.ph-arrow-arc-left:before {
  content: "\e014";
}
.ph-fill.ph-arrow-arc-right:before {
  content: "\e016";
}
.ph-fill.ph-arrow-bend-double-up-left:before {
  content: "\e03a";
}
.ph-fill.ph-arrow-bend-double-up-right:before {
  content: "\e03c";
}
.ph-fill.ph-arrow-bend-down-left:before {
  content: "\e018";
}
.ph-fill.ph-arrow-bend-down-right:before {
  content: "\e01a";
}
.ph-fill.ph-arrow-bend-left-down:before {
  content: "\e01c";
}
.ph-fill.ph-arrow-bend-left-up:before {
  content: "\e01e";
}
.ph-fill.ph-arrow-bend-right-down:before {
  content: "\e020";
}
.ph-fill.ph-arrow-bend-right-up:before {
  content: "\e022";
}
.ph-fill.ph-arrow-bend-up-left:before {
  content: "\e024";
}
.ph-fill.ph-arrow-bend-up-right:before {
  content: "\e026";
}
.ph-fill.ph-arrow-circle-down:before {
  content: "\e028";
}
.ph-fill.ph-arrow-circle-down-left:before {
  content: "\e02a";
}
.ph-fill.ph-arrow-circle-down-right:before {
  content: "\e02c";
}
.ph-fill.ph-arrow-circle-left:before {
  content: "\e05a";
}
.ph-fill.ph-arrow-circle-right:before {
  content: "\e02e";
}
.ph-fill.ph-arrow-circle-up:before {
  content: "\e030";
}
.ph-fill.ph-arrow-circle-up-left:before {
  content: "\e032";
}
.ph-fill.ph-arrow-circle-up-right:before {
  content: "\e034";
}
.ph-fill.ph-arrow-clockwise:before {
  content: "\e036";
}
.ph-fill.ph-arrow-counter-clockwise:before {
  content: "\e038";
}
.ph-fill.ph-arrow-down:before {
  content: "\e03e";
}
.ph-fill.ph-arrow-down-left:before {
  content: "\e040";
}
.ph-fill.ph-arrow-down-right:before {
  content: "\e042";
}
.ph-fill.ph-arrow-elbow-down-left:before {
  content: "\e044";
}
.ph-fill.ph-arrow-elbow-down-right:before {
  content: "\e046";
}
.ph-fill.ph-arrow-elbow-left:before {
  content: "\e048";
}
.ph-fill.ph-arrow-elbow-left-down:before {
  content: "\e04a";
}
.ph-fill.ph-arrow-elbow-left-up:before {
  content: "\e04c";
}
.ph-fill.ph-arrow-elbow-right:before {
  content: "\e04e";
}
.ph-fill.ph-arrow-elbow-right-down:before {
  content: "\e050";
}
.ph-fill.ph-arrow-elbow-right-up:before {
  content: "\e052";
}
.ph-fill.ph-arrow-elbow-up-left:before {
  content: "\e054";
}
.ph-fill.ph-arrow-elbow-up-right:before {
  content: "\e056";
}
.ph-fill.ph-arrow-fat-down:before {
  content: "\e518";
}
.ph-fill.ph-arrow-fat-left:before {
  content: "\e51a";
}
.ph-fill.ph-arrow-fat-line-down:before {
  content: "\e51c";
}
.ph-fill.ph-arrow-fat-line-left:before {
  content: "\e51e";
}
.ph-fill.ph-arrow-fat-line-right:before {
  content: "\e520";
}
.ph-fill.ph-arrow-fat-line-up:before {
  content: "\e522";
}
.ph-fill.ph-arrow-fat-lines-down:before {
  content: "\e524";
}
.ph-fill.ph-arrow-fat-lines-left:before {
  content: "\e526";
}
.ph-fill.ph-arrow-fat-lines-right:before {
  content: "\e528";
}
.ph-fill.ph-arrow-fat-lines-up:before {
  content: "\e52a";
}
.ph-fill.ph-arrow-fat-right:before {
  content: "\e52c";
}
.ph-fill.ph-arrow-fat-up:before {
  content: "\e52e";
}
.ph-fill.ph-arrow-left:before {
  content: "\e058";
}
.ph-fill.ph-arrow-line-down:before {
  content: "\e05c";
}
.ph-fill.ph-arrow-line-down-left:before {
  content: "\e05e";
}
.ph-fill.ph-arrow-line-down-right:before {
  content: "\e060";
}
.ph-fill.ph-arrow-line-left:before {
  content: "\e062";
}
.ph-fill.ph-arrow-line-right:before {
  content: "\e064";
}
.ph-fill.ph-arrow-line-up:before {
  content: "\e066";
}
.ph-fill.ph-arrow-line-up-left:before {
  content: "\e068";
}
.ph-fill.ph-arrow-line-up-right:before {
  content: "\e06a";
}
.ph-fill.ph-arrow-right:before {
  content: "\e06c";
}
.ph-fill.ph-arrow-square-down:before {
  content: "\e06e";
}
.ph-fill.ph-arrow-square-down-left:before {
  content: "\e070";
}
.ph-fill.ph-arrow-square-down-right:before {
  content: "\e072";
}
.ph-fill.ph-arrow-square-in:before {
  content: "\e5dc";
}
.ph-fill.ph-arrow-square-left:before {
  content: "\e074";
}
.ph-fill.ph-arrow-square-out:before {
  content: "\e5de";
}
.ph-fill.ph-arrow-square-right:before {
  content: "\e076";
}
.ph-fill.ph-arrow-square-up:before {
  content: "\e078";
}
.ph-fill.ph-arrow-square-up-left:before {
  content: "\e07a";
}
.ph-fill.ph-arrow-square-up-right:before {
  content: "\e07c";
}
.ph-fill.ph-arrow-u-down-left:before {
  content: "\e07e";
}
.ph-fill.ph-arrow-u-down-right:before {
  content: "\e080";
}
.ph-fill.ph-arrow-u-left-down:before {
  content: "\e082";
}
.ph-fill.ph-arrow-u-left-up:before {
  content: "\e084";
}
.ph-fill.ph-arrow-u-right-down:before {
  content: "\e086";
}
.ph-fill.ph-arrow-u-right-up:before {
  content: "\e088";
}
.ph-fill.ph-arrow-u-up-left:before {
  content: "\e08a";
}
.ph-fill.ph-arrow-u-up-right:before {
  content: "\e08c";
}
.ph-fill.ph-arrow-up:before {
  content: "\e08e";
}
.ph-fill.ph-arrow-up-left:before {
  content: "\e090";
}
.ph-fill.ph-arrow-up-right:before {
  content: "\e092";
}
.ph-fill.ph-arrows-clockwise:before {
  content: "\e094";
}
.ph-fill.ph-arrows-counter-clockwise:before {
  content: "\e096";
}
.ph-fill.ph-arrows-down-up:before {
  content: "\e098";
}
.ph-fill.ph-arrows-horizontal:before {
  content: "\eb06";
}
.ph-fill.ph-arrows-in:before {
  content: "\e09a";
}
.ph-fill.ph-arrows-in-cardinal:before {
  content: "\e09c";
}
.ph-fill.ph-arrows-in-line-horizontal:before {
  content: "\e530";
}
.ph-fill.ph-arrows-in-line-vertical:before {
  content: "\e532";
}
.ph-fill.ph-arrows-in-simple:before {
  content: "\e09e";
}
.ph-fill.ph-arrows-left-right:before {
  content: "\e0a0";
}
.ph-fill.ph-arrows-merge:before {
  content: "\ed3e";
}
.ph-fill.ph-arrows-out:before {
  content: "\e0a2";
}
.ph-fill.ph-arrows-out-cardinal:before {
  content: "\e0a4";
}
.ph-fill.ph-arrows-out-line-horizontal:before {
  content: "\e534";
}
.ph-fill.ph-arrows-out-line-vertical:before {
  content: "\e536";
}
.ph-fill.ph-arrows-out-simple:before {
  content: "\e0a6";
}
.ph-fill.ph-arrows-split:before {
  content: "\ed3c";
}
.ph-fill.ph-arrows-vertical:before {
  content: "\eb04";
}
.ph-fill.ph-article:before {
  content: "\e0a8";
}
.ph-fill.ph-article-medium:before {
  content: "\e5e0";
}
.ph-fill.ph-article-ny-times:before {
  content: "\e5e2";
}
.ph-fill.ph-asclepius:before {
  content: "\ee34";
}
.ph-fill.ph-caduceus:before {
  content: "\ee34";
}
.ph-fill.ph-asterisk:before {
  content: "\e0aa";
}
.ph-fill.ph-asterisk-simple:before {
  content: "\e832";
}
.ph-fill.ph-at:before {
  content: "\e0ac";
}
.ph-fill.ph-atom:before {
  content: "\e5e4";
}
.ph-fill.ph-avocado:before {
  content: "\ee04";
}
.ph-fill.ph-axe:before {
  content: "\e9fc";
}
.ph-fill.ph-baby:before {
  content: "\e774";
}
.ph-fill.ph-baby-carriage:before {
  content: "\e818";
}
.ph-fill.ph-backpack:before {
  content: "\e922";
}
.ph-fill.ph-backspace:before {
  content: "\e0ae";
}
.ph-fill.ph-bag:before {
  content: "\e0b0";
}
.ph-fill.ph-bag-simple:before {
  content: "\e5e6";
}
.ph-fill.ph-balloon:before {
  content: "\e76c";
}
.ph-fill.ph-bandaids:before {
  content: "\e0b2";
}
.ph-fill.ph-bank:before {
  content: "\e0b4";
}
.ph-fill.ph-barbell:before {
  content: "\e0b6";
}
.ph-fill.ph-barcode:before {
  content: "\e0b8";
}
.ph-fill.ph-barn:before {
  content: "\ec72";
}
.ph-fill.ph-barricade:before {
  content: "\e948";
}
.ph-fill.ph-baseball:before {
  content: "\e71a";
}
.ph-fill.ph-baseball-cap:before {
  content: "\ea28";
}
.ph-fill.ph-baseball-helmet:before {
  content: "\ee4a";
}
.ph-fill.ph-basket:before {
  content: "\e964";
}
.ph-fill.ph-basketball:before {
  content: "\e724";
}
.ph-fill.ph-bathtub:before {
  content: "\e81e";
}
.ph-fill.ph-battery-charging:before {
  content: "\e0ba";
}
.ph-fill.ph-battery-charging-vertical:before {
  content: "\e0bc";
}
.ph-fill.ph-battery-empty:before {
  content: "\e0be";
}
.ph-fill.ph-battery-full:before {
  content: "\e0c0";
}
.ph-fill.ph-battery-high:before {
  content: "\e0c2";
}
.ph-fill.ph-battery-low:before {
  content: "\e0c4";
}
.ph-fill.ph-battery-medium:before {
  content: "\e0c6";
}
.ph-fill.ph-battery-plus:before {
  content: "\e808";
}
.ph-fill.ph-battery-plus-vertical:before {
  content: "\ec50";
}
.ph-fill.ph-battery-vertical-empty:before {
  content: "\e7c6";
}
.ph-fill.ph-battery-vertical-full:before {
  content: "\e7c4";
}
.ph-fill.ph-battery-vertical-high:before {
  content: "\e7c2";
}
.ph-fill.ph-battery-vertical-low:before {
  content: "\e7be";
}
.ph-fill.ph-battery-vertical-medium:before {
  content: "\e7c0";
}
.ph-fill.ph-battery-warning:before {
  content: "\e0c8";
}
.ph-fill.ph-battery-warning-vertical:before {
  content: "\e0ca";
}
.ph-fill.ph-beach-ball:before {
  content: "\ed24";
}
.ph-fill.ph-beanie:before {
  content: "\ea2a";
}
.ph-fill.ph-bed:before {
  content: "\e0cc";
}
.ph-fill.ph-beer-bottle:before {
  content: "\e7b0";
}
.ph-fill.ph-beer-stein:before {
  content: "\eb62";
}
.ph-fill.ph-behance-logo:before {
  content: "\e7f4";
}
.ph-fill.ph-bell:before {
  content: "\e0ce";
}
.ph-fill.ph-bell-ringing:before {
  content: "\e5e8";
}
.ph-fill.ph-bell-simple:before {
  content: "\e0d0";
}
.ph-fill.ph-bell-simple-ringing:before {
  content: "\e5ea";
}
.ph-fill.ph-bell-simple-slash:before {
  content: "\e0d2";
}
.ph-fill.ph-bell-simple-z:before {
  content: "\e5ec";
}
.ph-fill.ph-bell-slash:before {
  content: "\e0d4";
}
.ph-fill.ph-bell-z:before {
  content: "\e5ee";
}
.ph-fill.ph-belt:before {
  content: "\ea2c";
}
.ph-fill.ph-bezier-curve:before {
  content: "\eb00";
}
.ph-fill.ph-bicycle:before {
  content: "\e0d6";
}
.ph-fill.ph-binary:before {
  content: "\ee60";
}
.ph-fill.ph-binoculars:before {
  content: "\ea64";
}
.ph-fill.ph-biohazard:before {
  content: "\e9e0";
}
.ph-fill.ph-bird:before {
  content: "\e72c";
}
.ph-fill.ph-blueprint:before {
  content: "\eda0";
}
.ph-fill.ph-bluetooth:before {
  content: "\e0da";
}
.ph-fill.ph-bluetooth-connected:before {
  content: "\e0dc";
}
.ph-fill.ph-bluetooth-slash:before {
  content: "\e0de";
}
.ph-fill.ph-bluetooth-x:before {
  content: "\e0e0";
}
.ph-fill.ph-boat:before {
  content: "\e786";
}
.ph-fill.ph-bomb:before {
  content: "\ee0a";
}
.ph-fill.ph-bone:before {
  content: "\e7f2";
}
.ph-fill.ph-book:before {
  content: "\e0e2";
}
.ph-fill.ph-book-bookmark:before {
  content: "\e0e4";
}
.ph-fill.ph-book-open:before {
  content: "\e0e6";
}
.ph-fill.ph-book-open-text:before {
  content: "\e8f2";
}
.ph-fill.ph-book-open-user:before {
  content: "\ede0";
}
.ph-fill.ph-bookmark:before {
  content: "\e0e8";
}
.ph-fill.ph-bookmark-simple:before {
  content: "\e0ea";
}
.ph-fill.ph-bookmarks:before {
  content: "\e0ec";
}
.ph-fill.ph-bookmarks-simple:before {
  content: "\e5f0";
}
.ph-fill.ph-books:before {
  content: "\e758";
}
.ph-fill.ph-boot:before {
  content: "\ecca";
}
.ph-fill.ph-boules:before {
  content: "\e722";
}
.ph-fill.ph-bounding-box:before {
  content: "\e6ce";
}
.ph-fill.ph-bowl-food:before {
  content: "\eaa4";
}
.ph-fill.ph-bowl-steam:before {
  content: "\e8e4";
}
.ph-fill.ph-bowling-ball:before {
  content: "\ea34";
}
.ph-fill.ph-box-arrow-down:before {
  content: "\e00e";
}
.ph-fill.ph-archive-box:before {
  content: "\e00e";
}
.ph-fill.ph-box-arrow-up:before {
  content: "\ee54";
}
.ph-fill.ph-boxing-glove:before {
  content: "\ea36";
}
.ph-fill.ph-brackets-angle:before {
  content: "\e862";
}
.ph-fill.ph-brackets-curly:before {
  content: "\e860";
}
.ph-fill.ph-brackets-round:before {
  content: "\e864";
}
.ph-fill.ph-brackets-square:before {
  content: "\e85e";
}
.ph-fill.ph-brain:before {
  content: "\e74e";
}
.ph-fill.ph-brandy:before {
  content: "\e6b4";
}
.ph-fill.ph-bread:before {
  content: "\e81c";
}
.ph-fill.ph-bridge:before {
  content: "\ea68";
}
.ph-fill.ph-briefcase:before {
  content: "\e0ee";
}
.ph-fill.ph-briefcase-metal:before {
  content: "\e5f2";
}
.ph-fill.ph-broadcast:before {
  content: "\e0f2";
}
.ph-fill.ph-broom:before {
  content: "\ec54";
}
.ph-fill.ph-browser:before {
  content: "\e0f4";
}
.ph-fill.ph-browsers:before {
  content: "\e0f6";
}
.ph-fill.ph-bug:before {
  content: "\e5f4";
}
.ph-fill.ph-bug-beetle:before {
  content: "\e5f6";
}
.ph-fill.ph-bug-droid:before {
  content: "\e5f8";
}
.ph-fill.ph-building:before {
  content: "\e100";
}
.ph-fill.ph-building-apartment:before {
  content: "\e0fe";
}
.ph-fill.ph-building-office:before {
  content: "\e0ff";
}
.ph-fill.ph-buildings:before {
  content: "\e102";
}
.ph-fill.ph-bulldozer:before {
  content: "\ec6c";
}
.ph-fill.ph-bus:before {
  content: "\e106";
}
.ph-fill.ph-butterfly:before {
  content: "\ea6e";
}
.ph-fill.ph-cable-car:before {
  content: "\e49c";
}
.ph-fill.ph-cactus:before {
  content: "\e918";
}
.ph-fill.ph-cake:before {
  content: "\e780";
}
.ph-fill.ph-calculator:before {
  content: "\e538";
}
.ph-fill.ph-calendar:before {
  content: "\e108";
}
.ph-fill.ph-calendar-blank:before {
  content: "\e10a";
}
.ph-fill.ph-calendar-check:before {
  content: "\e712";
}
.ph-fill.ph-calendar-dot:before {
  content: "\e7b2";
}
.ph-fill.ph-calendar-dots:before {
  content: "\e7b4";
}
.ph-fill.ph-calendar-heart:before {
  content: "\e8b0";
}
.ph-fill.ph-calendar-minus:before {
  content: "\ea14";
}
.ph-fill.ph-calendar-plus:before {
  content: "\e714";
}
.ph-fill.ph-calendar-slash:before {
  content: "\ea12";
}
.ph-fill.ph-calendar-star:before {
  content: "\e8b2";
}
.ph-fill.ph-calendar-x:before {
  content: "\e10c";
}
.ph-fill.ph-call-bell:before {
  content: "\e7de";
}
.ph-fill.ph-camera:before {
  content: "\e10e";
}
.ph-fill.ph-camera-plus:before {
  content: "\ec58";
}
.ph-fill.ph-camera-rotate:before {
  content: "\e7a4";
}
.ph-fill.ph-camera-slash:before {
  content: "\e110";
}
.ph-fill.ph-campfire:before {
  content: "\e9d8";
}
.ph-fill.ph-car:before {
  content: "\e112";
}
.ph-fill.ph-car-battery:before {
  content: "\ee30";
}
.ph-fill.ph-car-profile:before {
  content: "\e8cc";
}
.ph-fill.ph-car-simple:before {
  content: "\e114";
}
.ph-fill.ph-cardholder:before {
  content: "\e5fa";
}
.ph-fill.ph-cards:before {
  content: "\e0f8";
}
.ph-fill.ph-cards-three:before {
  content: "\ee50";
}
.ph-fill.ph-caret-circle-double-down:before {
  content: "\e116";
}
.ph-fill.ph-caret-circle-double-left:before {
  content: "\e118";
}
.ph-fill.ph-caret-circle-double-right:before {
  content: "\e11a";
}
.ph-fill.ph-caret-circle-double-up:before {
  content: "\e11c";
}
.ph-fill.ph-caret-circle-down:before {
  content: "\e11e";
}
.ph-fill.ph-caret-circle-left:before {
  content: "\e120";
}
.ph-fill.ph-caret-circle-right:before {
  content: "\e122";
}
.ph-fill.ph-caret-circle-up:before {
  content: "\e124";
}
.ph-fill.ph-caret-circle-up-down:before {
  content: "\e13e";
}
.ph-fill.ph-caret-double-down:before {
  content: "\e126";
}
.ph-fill.ph-caret-double-left:before {
  content: "\e128";
}
.ph-fill.ph-caret-double-right:before {
  content: "\e12a";
}
.ph-fill.ph-caret-double-up:before {
  content: "\e12c";
}
.ph-fill.ph-caret-down:before {
  content: "\e136";
}
.ph-fill.ph-caret-left:before {
  content: "\e138";
}
.ph-fill.ph-caret-line-down:before {
  content: "\e134";
}
.ph-fill.ph-caret-line-left:before {
  content: "\e132";
}
.ph-fill.ph-caret-line-right:before {
  content: "\e130";
}
.ph-fill.ph-caret-line-up:before {
  content: "\e12e";
}
.ph-fill.ph-caret-right:before {
  content: "\e13a";
}
.ph-fill.ph-caret-up:before {
  content: "\e13c";
}
.ph-fill.ph-caret-up-down:before {
  content: "\e140";
}
.ph-fill.ph-carrot:before {
  content: "\ed38";
}
.ph-fill.ph-cash-register:before {
  content: "\ed80";
}
.ph-fill.ph-cassette-tape:before {
  content: "\ed2e";
}
.ph-fill.ph-castle-turret:before {
  content: "\e9d0";
}
.ph-fill.ph-cat:before {
  content: "\e748";
}
.ph-fill.ph-cell-signal-full:before {
  content: "\e142";
}
.ph-fill.ph-cell-signal-high:before {
  content: "\e144";
}
.ph-fill.ph-cell-signal-low:before {
  content: "\e146";
}
.ph-fill.ph-cell-signal-medium:before {
  content: "\e148";
}
.ph-fill.ph-cell-signal-none:before {
  content: "\e14a";
}
.ph-fill.ph-cell-signal-slash:before {
  content: "\e14c";
}
.ph-fill.ph-cell-signal-x:before {
  content: "\e14e";
}
.ph-fill.ph-cell-tower:before {
  content: "\ebaa";
}
.ph-fill.ph-certificate:before {
  content: "\e766";
}
.ph-fill.ph-chair:before {
  content: "\e950";
}
.ph-fill.ph-chalkboard:before {
  content: "\e5fc";
}
.ph-fill.ph-chalkboard-simple:before {
  content: "\e5fe";
}
.ph-fill.ph-chalkboard-teacher:before {
  content: "\e600";
}
.ph-fill.ph-champagne:before {
  content: "\eaca";
}
.ph-fill.ph-charging-station:before {
  content: "\e8d0";
}
.ph-fill.ph-chart-bar:before {
  content: "\e150";
}
.ph-fill.ph-chart-bar-horizontal:before {
  content: "\e152";
}
.ph-fill.ph-chart-donut:before {
  content: "\eaa6";
}
.ph-fill.ph-chart-line:before {
  content: "\e154";
}
.ph-fill.ph-chart-line-down:before {
  content: "\e8b6";
}
.ph-fill.ph-chart-line-up:before {
  content: "\e156";
}
.ph-fill.ph-chart-pie:before {
  content: "\e158";
}
.ph-fill.ph-chart-pie-slice:before {
  content: "\e15a";
}
.ph-fill.ph-chart-polar:before {
  content: "\eaa8";
}
.ph-fill.ph-chart-scatter:before {
  content: "\eaac";
}
.ph-fill.ph-chat:before {
  content: "\e15c";
}
.ph-fill.ph-chat-centered:before {
  content: "\e160";
}
.ph-fill.ph-chat-centered-dots:before {
  content: "\e164";
}
.ph-fill.ph-chat-centered-slash:before {
  content: "\e162";
}
.ph-fill.ph-chat-centered-text:before {
  content: "\e166";
}
.ph-fill.ph-chat-circle:before {
  content: "\e168";
}
.ph-fill.ph-chat-circle-dots:before {
  content: "\e16c";
}
.ph-fill.ph-chat-circle-slash:before {
  content: "\e16a";
}
.ph-fill.ph-chat-circle-text:before {
  content: "\e16e";
}
.ph-fill.ph-chat-dots:before {
  content: "\e170";
}
.ph-fill.ph-chat-slash:before {
  content: "\e15e";
}
.ph-fill.ph-chat-teardrop:before {
  content: "\e172";
}
.ph-fill.ph-chat-teardrop-dots:before {
  content: "\e176";
}
.ph-fill.ph-chat-teardrop-slash:before {
  content: "\e174";
}
.ph-fill.ph-chat-teardrop-text:before {
  content: "\e178";
}
.ph-fill.ph-chat-text:before {
  content: "\e17a";
}
.ph-fill.ph-chats:before {
  content: "\e17c";
}
.ph-fill.ph-chats-circle:before {
  content: "\e17e";
}
.ph-fill.ph-chats-teardrop:before {
  content: "\e180";
}
.ph-fill.ph-check:before {
  content: "\e182";
}
.ph-fill.ph-check-circle:before {
  content: "\e184";
}
.ph-fill.ph-check-fat:before {
  content: "\eba6";
}
.ph-fill.ph-check-square:before {
  content: "\e186";
}
.ph-fill.ph-check-square-offset:before {
  content: "\e188";
}
.ph-fill.ph-checkerboard:before {
  content: "\e8c4";
}
.ph-fill.ph-checks:before {
  content: "\e53a";
}
.ph-fill.ph-cheers:before {
  content: "\ea4a";
}
.ph-fill.ph-cheese:before {
  content: "\e9fe";
}
.ph-fill.ph-chef-hat:before {
  content: "\ed8e";
}
.ph-fill.ph-cherries:before {
  content: "\e830";
}
.ph-fill.ph-church:before {
  content: "\ecea";
}
.ph-fill.ph-cigarette:before {
  content: "\ed90";
}
.ph-fill.ph-cigarette-slash:before {
  content: "\ed92";
}
.ph-fill.ph-circle:before {
  content: "\e18a";
}
.ph-fill.ph-circle-dashed:before {
  content: "\e602";
}
.ph-fill.ph-circle-half:before {
  content: "\e18c";
}
.ph-fill.ph-circle-half-tilt:before {
  content: "\e18e";
}
.ph-fill.ph-circle-notch:before {
  content: "\eb44";
}
.ph-fill.ph-circles-four:before {
  content: "\e190";
}
.ph-fill.ph-circles-three:before {
  content: "\e192";
}
.ph-fill.ph-circles-three-plus:before {
  content: "\e194";
}
.ph-fill.ph-circuitry:before {
  content: "\e9c2";
}
.ph-fill.ph-city:before {
  content: "\ea6a";
}
.ph-fill.ph-clipboard:before {
  content: "\e196";
}
.ph-fill.ph-clipboard-text:before {
  content: "\e198";
}
.ph-fill.ph-clock:before {
  content: "\e19a";
}
.ph-fill.ph-clock-afternoon:before {
  content: "\e19c";
}
.ph-fill.ph-clock-clockwise:before {
  content: "\e19e";
}
.ph-fill.ph-clock-countdown:before {
  content: "\ed2c";
}
.ph-fill.ph-clock-counter-clockwise:before {
  content: "\e1a0";
}
.ph-fill.ph-clock-user:before {
  content: "\edec";
}
.ph-fill.ph-closed-captioning:before {
  content: "\e1a4";
}
.ph-fill.ph-cloud:before {
  content: "\e1aa";
}
.ph-fill.ph-cloud-arrow-down:before {
  content: "\e1ac";
}
.ph-fill.ph-cloud-arrow-up:before {
  content: "\e1ae";
}
.ph-fill.ph-cloud-check:before {
  content: "\e1b0";
}
.ph-fill.ph-cloud-fog:before {
  content: "\e53c";
}
.ph-fill.ph-cloud-lightning:before {
  content: "\e1b2";
}
.ph-fill.ph-cloud-moon:before {
  content: "\e53e";
}
.ph-fill.ph-cloud-rain:before {
  content: "\e1b4";
}
.ph-fill.ph-cloud-slash:before {
  content: "\e1b6";
}
.ph-fill.ph-cloud-snow:before {
  content: "\e1b8";
}
.ph-fill.ph-cloud-sun:before {
  content: "\e540";
}
.ph-fill.ph-cloud-warning:before {
  content: "\ea98";
}
.ph-fill.ph-cloud-x:before {
  content: "\ea96";
}
.ph-fill.ph-clover:before {
  content: "\edc8";
}
.ph-fill.ph-club:before {
  content: "\e1ba";
}
.ph-fill.ph-coat-hanger:before {
  content: "\e7fe";
}
.ph-fill.ph-coda-logo:before {
  content: "\e7ce";
}
.ph-fill.ph-code:before {
  content: "\e1bc";
}
.ph-fill.ph-code-block:before {
  content: "\eafe";
}
.ph-fill.ph-code-simple:before {
  content: "\e1be";
}
.ph-fill.ph-codepen-logo:before {
  content: "\e978";
}
.ph-fill.ph-codesandbox-logo:before {
  content: "\ea06";
}
.ph-fill.ph-coffee:before {
  content: "\e1c2";
}
.ph-fill.ph-coffee-bean:before {
  content: "\e1c0";
}
.ph-fill.ph-coin:before {
  content: "\e60e";
}
.ph-fill.ph-coin-vertical:before {
  content: "\eb48";
}
.ph-fill.ph-coins:before {
  content: "\e78e";
}
.ph-fill.ph-columns:before {
  content: "\e546";
}
.ph-fill.ph-columns-plus-left:before {
  content: "\e544";
}
.ph-fill.ph-columns-plus-right:before {
  content: "\e542";
}
.ph-fill.ph-command:before {
  content: "\e1c4";
}
.ph-fill.ph-compass:before {
  content: "\e1c8";
}
.ph-fill.ph-compass-rose:before {
  content: "\e1c6";
}
.ph-fill.ph-compass-tool:before {
  content: "\ea0e";
}
.ph-fill.ph-computer-tower:before {
  content: "\e548";
}
.ph-fill.ph-confetti:before {
  content: "\e81a";
}
.ph-fill.ph-contactless-payment:before {
  content: "\ed42";
}
.ph-fill.ph-control:before {
  content: "\eca6";
}
.ph-fill.ph-cookie:before {
  content: "\e6ca";
}
.ph-fill.ph-cooking-pot:before {
  content: "\e764";
}
.ph-fill.ph-copy:before {
  content: "\e1ca";
}
.ph-fill.ph-copy-simple:before {
  content: "\e1cc";
}
.ph-fill.ph-copyleft:before {
  content: "\e86a";
}
.ph-fill.ph-copyright:before {
  content: "\e54a";
}
.ph-fill.ph-corners-in:before {
  content: "\e1ce";
}
.ph-fill.ph-corners-out:before {
  content: "\e1d0";
}
.ph-fill.ph-couch:before {
  content: "\e7f6";
}
.ph-fill.ph-court-basketball:before {
  content: "\ee36";
}
.ph-fill.ph-cow:before {
  content: "\eabe";
}
.ph-fill.ph-cowboy-hat:before {
  content: "\ed12";
}
.ph-fill.ph-cpu:before {
  content: "\e610";
}
.ph-fill.ph-crane:before {
  content: "\ed48";
}
.ph-fill.ph-crane-tower:before {
  content: "\ed49";
}
.ph-fill.ph-credit-card:before {
  content: "\e1d2";
}
.ph-fill.ph-cricket:before {
  content: "\ee12";
}
.ph-fill.ph-crop:before {
  content: "\e1d4";
}
.ph-fill.ph-cross:before {
  content: "\e8a0";
}
.ph-fill.ph-crosshair:before {
  content: "\e1d6";
}
.ph-fill.ph-crosshair-simple:before {
  content: "\e1d8";
}
.ph-fill.ph-crown:before {
  content: "\e614";
}
.ph-fill.ph-crown-cross:before {
  content: "\ee5e";
}
.ph-fill.ph-crown-simple:before {
  content: "\e616";
}
.ph-fill.ph-cube:before {
  content: "\e1da";
}
.ph-fill.ph-cube-focus:before {
  content: "\ed0a";
}
.ph-fill.ph-cube-transparent:before {
  content: "\ec7c";
}
.ph-fill.ph-currency-btc:before {
  content: "\e618";
}
.ph-fill.ph-currency-circle-dollar:before {
  content: "\e54c";
}
.ph-fill.ph-currency-cny:before {
  content: "\e54e";
}
.ph-fill.ph-currency-dollar:before {
  content: "\e550";
}
.ph-fill.ph-currency-dollar-simple:before {
  content: "\e552";
}
.ph-fill.ph-currency-eth:before {
  content: "\eada";
}
.ph-fill.ph-currency-eur:before {
  content: "\e554";
}
.ph-fill.ph-currency-gbp:before {
  content: "\e556";
}
.ph-fill.ph-currency-inr:before {
  content: "\e558";
}
.ph-fill.ph-currency-jpy:before {
  content: "\e55a";
}
.ph-fill.ph-currency-krw:before {
  content: "\e55c";
}
.ph-fill.ph-currency-kzt:before {
  content: "\ec4c";
}
.ph-fill.ph-currency-ngn:before {
  content: "\eb52";
}
.ph-fill.ph-currency-rub:before {
  content: "\e55e";
}
.ph-fill.ph-cursor:before {
  content: "\e1dc";
}
.ph-fill.ph-cursor-click:before {
  content: "\e7c8";
}
.ph-fill.ph-cursor-text:before {
  content: "\e7d8";
}
.ph-fill.ph-cylinder:before {
  content: "\e8fc";
}
.ph-fill.ph-database:before {
  content: "\e1de";
}
.ph-fill.ph-desk:before {
  content: "\ed16";
}
.ph-fill.ph-desktop:before {
  content: "\e560";
}
.ph-fill.ph-desktop-tower:before {
  content: "\e562";
}
.ph-fill.ph-detective:before {
  content: "\e83e";
}
.ph-fill.ph-dev-to-logo:before {
  content: "\ed0e";
}
.ph-fill.ph-device-mobile:before {
  content: "\e1e0";
}
.ph-fill.ph-device-mobile-camera:before {
  content: "\e1e2";
}
.ph-fill.ph-device-mobile-slash:before {
  content: "\ee46";
}
.ph-fill.ph-device-mobile-speaker:before {
  content: "\e1e4";
}
.ph-fill.ph-device-rotate:before {
  content: "\edf2";
}
.ph-fill.ph-device-tablet:before {
  content: "\e1e6";
}
.ph-fill.ph-device-tablet-camera:before {
  content: "\e1e8";
}
.ph-fill.ph-device-tablet-speaker:before {
  content: "\e1ea";
}
.ph-fill.ph-devices:before {
  content: "\eba4";
}
.ph-fill.ph-diamond:before {
  content: "\e1ec";
}
.ph-fill.ph-diamonds-four:before {
  content: "\e8f4";
}
.ph-fill.ph-dice-five:before {
  content: "\e1ee";
}
.ph-fill.ph-dice-four:before {
  content: "\e1f0";
}
.ph-fill.ph-dice-one:before {
  content: "\e1f2";
}
.ph-fill.ph-dice-six:before {
  content: "\e1f4";
}
.ph-fill.ph-dice-three:before {
  content: "\e1f6";
}
.ph-fill.ph-dice-two:before {
  content: "\e1f8";
}
.ph-fill.ph-disc:before {
  content: "\e564";
}
.ph-fill.ph-disco-ball:before {
  content: "\ed98";
}
.ph-fill.ph-discord-logo:before {
  content: "\e61a";
}
.ph-fill.ph-divide:before {
  content: "\e1fa";
}
.ph-fill.ph-dna:before {
  content: "\e924";
}
.ph-fill.ph-dog:before {
  content: "\e74a";
}
.ph-fill.ph-door:before {
  content: "\e61c";
}
.ph-fill.ph-door-open:before {
  content: "\e7e6";
}
.ph-fill.ph-dot:before {
  content: "\ecde";
}
.ph-fill.ph-dot-outline:before {
  content: "\ece0";
}
.ph-fill.ph-dots-nine:before {
  content: "\e1fc";
}
.ph-fill.ph-dots-six:before {
  content: "\e794";
}
.ph-fill.ph-dots-six-vertical:before {
  content: "\eae2";
}
.ph-fill.ph-dots-three:before {
  content: "\e1fe";
}
.ph-fill.ph-dots-three-circle:before {
  content: "\e200";
}
.ph-fill.ph-dots-three-circle-vertical:before {
  content: "\e202";
}
.ph-fill.ph-dots-three-outline:before {
  content: "\e204";
}
.ph-fill.ph-dots-three-outline-vertical:before {
  content: "\e206";
}
.ph-fill.ph-dots-three-vertical:before {
  content: "\e208";
}
.ph-fill.ph-download:before {
  content: "\e20a";
}
.ph-fill.ph-download-simple:before {
  content: "\e20c";
}
.ph-fill.ph-dress:before {
  content: "\ea7e";
}
.ph-fill.ph-dresser:before {
  content: "\e94e";
}
.ph-fill.ph-dribbble-logo:before {
  content: "\e20e";
}
.ph-fill.ph-drone:before {
  content: "\ed74";
}
.ph-fill.ph-drop:before {
  content: "\e210";
}
.ph-fill.ph-drop-half:before {
  content: "\e566";
}
.ph-fill.ph-drop-half-bottom:before {
  content: "\eb40";
}
.ph-fill.ph-drop-simple:before {
  content: "\ee32";
}
.ph-fill.ph-drop-slash:before {
  content: "\e954";
}
.ph-fill.ph-dropbox-logo:before {
  content: "\e7d0";
}
.ph-fill.ph-ear:before {
  content: "\e70c";
}
.ph-fill.ph-ear-slash:before {
  content: "\e70e";
}
.ph-fill.ph-egg:before {
  content: "\e812";
}
.ph-fill.ph-egg-crack:before {
  content: "\eb64";
}
.ph-fill.ph-eject:before {
  content: "\e212";
}
.ph-fill.ph-eject-simple:before {
  content: "\e6ae";
}
.ph-fill.ph-elevator:before {
  content: "\ecc0";
}
.ph-fill.ph-empty:before {
  content: "\edbc";
}
.ph-fill.ph-engine:before {
  content: "\ea80";
}
.ph-fill.ph-envelope:before {
  content: "\e214";
}
.ph-fill.ph-envelope-open:before {
  content: "\e216";
}
.ph-fill.ph-envelope-simple:before {
  content: "\e218";
}
.ph-fill.ph-envelope-simple-open:before {
  content: "\e21a";
}
.ph-fill.ph-equalizer:before {
  content: "\ebbc";
}
.ph-fill.ph-equals:before {
  content: "\e21c";
}
.ph-fill.ph-eraser:before {
  content: "\e21e";
}
.ph-fill.ph-escalator-down:before {
  content: "\ecba";
}
.ph-fill.ph-escalator-up:before {
  content: "\ecbc";
}
.ph-fill.ph-exam:before {
  content: "\e742";
}
.ph-fill.ph-exclamation-mark:before {
  content: "\ee44";
}
.ph-fill.ph-exclude:before {
  content: "\e882";
}
.ph-fill.ph-exclude-square:before {
  content: "\e880";
}
.ph-fill.ph-export:before {
  content: "\eaf0";
}
.ph-fill.ph-eye:before {
  content: "\e220";
}
.ph-fill.ph-eye-closed:before {
  content: "\e222";
}
.ph-fill.ph-eye-slash:before {
  content: "\e224";
}
.ph-fill.ph-eyedropper:before {
  content: "\e568";
}
.ph-fill.ph-eyedropper-sample:before {
  content: "\eac4";
}
.ph-fill.ph-eyeglasses:before {
  content: "\e7ba";
}
.ph-fill.ph-eyes:before {
  content: "\ee5c";
}
.ph-fill.ph-face-mask:before {
  content: "\e56a";
}
.ph-fill.ph-facebook-logo:before {
  content: "\e226";
}
.ph-fill.ph-factory:before {
  content: "\e760";
}
.ph-fill.ph-faders:before {
  content: "\e228";
}
.ph-fill.ph-faders-horizontal:before {
  content: "\e22a";
}
.ph-fill.ph-fallout-shelter:before {
  content: "\e9de";
}
.ph-fill.ph-fan:before {
  content: "\e9f2";
}
.ph-fill.ph-farm:before {
  content: "\ec70";
}
.ph-fill.ph-fast-forward:before {
  content: "\e6a6";
}
.ph-fill.ph-fast-forward-circle:before {
  content: "\e22c";
}
.ph-fill.ph-feather:before {
  content: "\e9c0";
}
.ph-fill.ph-fediverse-logo:before {
  content: "\ed66";
}
.ph-fill.ph-figma-logo:before {
  content: "\e22e";
}
.ph-fill.ph-file:before {
  content: "\e230";
}
.ph-fill.ph-file-archive:before {
  content: "\eb2a";
}
.ph-fill.ph-file-arrow-down:before {
  content: "\e232";
}
.ph-fill.ph-file-arrow-up:before {
  content: "\e61e";
}
.ph-fill.ph-file-audio:before {
  content: "\ea20";
}
.ph-fill.ph-file-c:before {
  content: "\eb32";
}
.ph-fill.ph-file-c-sharp:before {
  content: "\eb30";
}
.ph-fill.ph-file-cloud:before {
  content: "\e95e";
}
.ph-fill.ph-file-code:before {
  content: "\e914";
}
.ph-fill.ph-file-cpp:before {
  content: "\eb2e";
}
.ph-fill.ph-file-css:before {
  content: "\eb34";
}
.ph-fill.ph-file-csv:before {
  content: "\eb1c";
}
.ph-fill.ph-file-dashed:before {
  content: "\e704";
}
.ph-fill.ph-file-dotted:before {
  content: "\e704";
}
.ph-fill.ph-file-doc:before {
  content: "\eb1e";
}
.ph-fill.ph-file-html:before {
  content: "\eb38";
}
.ph-fill.ph-file-image:before {
  content: "\ea24";
}
.ph-fill.ph-file-ini:before {
  content: "\eb33";
}
.ph-fill.ph-file-jpg:before {
  content: "\eb1a";
}
.ph-fill.ph-file-js:before {
  content: "\eb24";
}
.ph-fill.ph-file-jsx:before {
  content: "\eb3a";
}
.ph-fill.ph-file-lock:before {
  content: "\e95c";
}
.ph-fill.ph-file-magnifying-glass:before {
  content: "\e238";
}
.ph-fill.ph-file-search:before {
  content: "\e238";
}
.ph-fill.ph-file-md:before {
  content: "\ed50";
}
.ph-fill.ph-file-minus:before {
  content: "\e234";
}
.ph-fill.ph-file-pdf:before {
  content: "\e702";
}
.ph-fill.ph-file-plus:before {
  content: "\e236";
}
.ph-fill.ph-file-png:before {
  content: "\eb18";
}
.ph-fill.ph-file-ppt:before {
  content: "\eb20";
}
.ph-fill.ph-file-py:before {
  content: "\eb2c";
}
.ph-fill.ph-file-rs:before {
  content: "\eb28";
}
.ph-fill.ph-file-sql:before {
  content: "\ed4e";
}
.ph-fill.ph-file-svg:before {
  content: "\ed08";
}
.ph-fill.ph-file-text:before {
  content: "\e23a";
}
.ph-fill.ph-file-ts:before {
  content: "\eb26";
}
.ph-fill.ph-file-tsx:before {
  content: "\eb3c";
}
.ph-fill.ph-file-txt:before {
  content: "\eb35";
}
.ph-fill.ph-file-video:before {
  content: "\ea22";
}
.ph-fill.ph-file-vue:before {
  content: "\eb3e";
}
.ph-fill.ph-file-x:before {
  content: "\e23c";
}
.ph-fill.ph-file-xls:before {
  content: "\eb22";
}
.ph-fill.ph-file-zip:before {
  content: "\e958";
}
.ph-fill.ph-files:before {
  content: "\e710";
}
.ph-fill.ph-film-reel:before {
  content: "\e8c0";
}
.ph-fill.ph-film-script:before {
  content: "\eb50";
}
.ph-fill.ph-film-slate:before {
  content: "\e8c2";
}
.ph-fill.ph-film-strip:before {
  content: "\e792";
}
.ph-fill.ph-fingerprint:before {
  content: "\e23e";
}
.ph-fill.ph-fingerprint-simple:before {
  content: "\e240";
}
.ph-fill.ph-finn-the-human:before {
  content: "\e56c";
}
.ph-fill.ph-fire:before {
  content: "\e242";
}
.ph-fill.ph-fire-extinguisher:before {
  content: "\e9e8";
}
.ph-fill.ph-fire-simple:before {
  content: "\e620";
}
.ph-fill.ph-fire-truck:before {
  content: "\e574";
}
.ph-fill.ph-first-aid:before {
  content: "\e56e";
}
.ph-fill.ph-first-aid-kit:before {
  content: "\e570";
}
.ph-fill.ph-fish:before {
  content: "\e728";
}
.ph-fill.ph-fish-simple:before {
  content: "\e72a";
}
.ph-fill.ph-flag:before {
  content: "\e244";
}
.ph-fill.ph-flag-banner:before {
  content: "\e622";
}
.ph-fill.ph-flag-banner-fold:before {
  content: "\ecf2";
}
.ph-fill.ph-flag-checkered:before {
  content: "\ea38";
}
.ph-fill.ph-flag-pennant:before {
  content: "\ecf0";
}
.ph-fill.ph-flame:before {
  content: "\e624";
}
.ph-fill.ph-flashlight:before {
  content: "\e246";
}
.ph-fill.ph-flask:before {
  content: "\e79e";
}
.ph-fill.ph-flip-horizontal:before {
  content: "\ed6a";
}
.ph-fill.ph-flip-vertical:before {
  content: "\ed6c";
}
.ph-fill.ph-floppy-disk:before {
  content: "\e248";
}
.ph-fill.ph-floppy-disk-back:before {
  content: "\eaf4";
}
.ph-fill.ph-flow-arrow:before {
  content: "\e6ec";
}
.ph-fill.ph-flower:before {
  content: "\e75e";
}
.ph-fill.ph-flower-lotus:before {
  content: "\e6cc";
}
.ph-fill.ph-flower-tulip:before {
  content: "\eacc";
}
.ph-fill.ph-flying-saucer:before {
  content: "\eb4a";
}
.ph-fill.ph-folder:before {
  content: "\e24a";
}
.ph-fill.ph-folder-notch:before {
  content: "\e24a";
}
.ph-fill.ph-folder-dashed:before {
  content: "\e8f8";
}
.ph-fill.ph-folder-dotted:before {
  content: "\e8f8";
}
.ph-fill.ph-folder-lock:before {
  content: "\ea3c";
}
.ph-fill.ph-folder-minus:before {
  content: "\e254";
}
.ph-fill.ph-folder-notch-minus:before {
  content: "\e254";
}
.ph-fill.ph-folder-open:before {
  content: "\e256";
}
.ph-fill.ph-folder-notch-open:before {
  content: "\e256";
}
.ph-fill.ph-folder-plus:before {
  content: "\e258";
}
.ph-fill.ph-folder-notch-plus:before {
  content: "\e258";
}
.ph-fill.ph-folder-simple:before {
  content: "\e25a";
}
.ph-fill.ph-folder-simple-dashed:before {
  content: "\ec2a";
}
.ph-fill.ph-folder-simple-dotted:before {
  content: "\ec2a";
}
.ph-fill.ph-folder-simple-lock:before {
  content: "\eb5e";
}
.ph-fill.ph-folder-simple-minus:before {
  content: "\e25c";
}
.ph-fill.ph-folder-simple-plus:before {
  content: "\e25e";
}
.ph-fill.ph-folder-simple-star:before {
  content: "\ec2e";
}
.ph-fill.ph-folder-simple-user:before {
  content: "\eb60";
}
.ph-fill.ph-folder-star:before {
  content: "\ea86";
}
.ph-fill.ph-folder-user:before {
  content: "\eb46";
}
.ph-fill.ph-folders:before {
  content: "\e260";
}
.ph-fill.ph-football:before {
  content: "\e718";
}
.ph-fill.ph-football-helmet:before {
  content: "\ee4c";
}
.ph-fill.ph-footprints:before {
  content: "\ea88";
}
.ph-fill.ph-fork-knife:before {
  content: "\e262";
}
.ph-fill.ph-four-k:before {
  content: "\ea5c";
}
.ph-fill.ph-frame-corners:before {
  content: "\e626";
}
.ph-fill.ph-framer-logo:before {
  content: "\e264";
}
.ph-fill.ph-function:before {
  content: "\ebe4";
}
.ph-fill.ph-funnel:before {
  content: "\e266";
}
.ph-fill.ph-funnel-simple:before {
  content: "\e268";
}
.ph-fill.ph-funnel-simple-x:before {
  content: "\e26a";
}
.ph-fill.ph-funnel-x:before {
  content: "\e26c";
}
.ph-fill.ph-game-controller:before {
  content: "\e26e";
}
.ph-fill.ph-garage:before {
  content: "\ecd6";
}
.ph-fill.ph-gas-can:before {
  content: "\e8ce";
}
.ph-fill.ph-gas-pump:before {
  content: "\e768";
}
.ph-fill.ph-gauge:before {
  content: "\e628";
}
.ph-fill.ph-gavel:before {
  content: "\ea32";
}
.ph-fill.ph-gear:before {
  content: "\e270";
}
.ph-fill.ph-gear-fine:before {
  content: "\e87c";
}
.ph-fill.ph-gear-six:before {
  content: "\e272";
}
.ph-fill.ph-gender-female:before {
  content: "\e6e0";
}
.ph-fill.ph-gender-intersex:before {
  content: "\e6e6";
}
.ph-fill.ph-gender-male:before {
  content: "\e6e2";
}
.ph-fill.ph-gender-neuter:before {
  content: "\e6ea";
}
.ph-fill.ph-gender-nonbinary:before {
  content: "\e6e4";
}
.ph-fill.ph-gender-transgender:before {
  content: "\e6e8";
}
.ph-fill.ph-ghost:before {
  content: "\e62a";
}
.ph-fill.ph-gif:before {
  content: "\e274";
}
.ph-fill.ph-gift:before {
  content: "\e276";
}
.ph-fill.ph-git-branch:before {
  content: "\e278";
}
.ph-fill.ph-git-commit:before {
  content: "\e27a";
}
.ph-fill.ph-git-diff:before {
  content: "\e27c";
}
.ph-fill.ph-git-fork:before {
  content: "\e27e";
}
.ph-fill.ph-git-merge:before {
  content: "\e280";
}
.ph-fill.ph-git-pull-request:before {
  content: "\e282";
}
.ph-fill.ph-github-logo:before {
  content: "\e576";
}
.ph-fill.ph-gitlab-logo:before {
  content: "\e694";
}
.ph-fill.ph-gitlab-logo-simple:before {
  content: "\e696";
}
.ph-fill.ph-globe:before {
  content: "\e288";
}
.ph-fill.ph-globe-hemisphere-east:before {
  content: "\e28a";
}
.ph-fill.ph-globe-hemisphere-west:before {
  content: "\e28c";
}
.ph-fill.ph-globe-simple:before {
  content: "\e28e";
}
.ph-fill.ph-globe-simple-x:before {
  content: "\e284";
}
.ph-fill.ph-globe-stand:before {
  content: "\e290";
}
.ph-fill.ph-globe-x:before {
  content: "\e286";
}
.ph-fill.ph-goggles:before {
  content: "\ecb4";
}
.ph-fill.ph-golf:before {
  content: "\ea3e";
}
.ph-fill.ph-goodreads-logo:before {
  content: "\ed10";
}
.ph-fill.ph-google-cardboard-logo:before {
  content: "\e7b6";
}
.ph-fill.ph-google-chrome-logo:before {
  content: "\e976";
}
.ph-fill.ph-google-drive-logo:before {
  content: "\e8f6";
}
.ph-fill.ph-google-logo:before {
  content: "\e292";
}
.ph-fill.ph-google-photos-logo:before {
  content: "\eb92";
}
.ph-fill.ph-google-play-logo:before {
  content: "\e294";
}
.ph-fill.ph-google-podcasts-logo:before {
  content: "\eb94";
}
.ph-fill.ph-gps:before {
  content: "\edd8";
}
.ph-fill.ph-gps-fix:before {
  content: "\edd6";
}
.ph-fill.ph-gps-slash:before {
  content: "\edd4";
}
.ph-fill.ph-gradient:before {
  content: "\eb42";
}
.ph-fill.ph-graduation-cap:before {
  content: "\e62c";
}
.ph-fill.ph-grains:before {
  content: "\ec68";
}
.ph-fill.ph-grains-slash:before {
  content: "\ec6a";
}
.ph-fill.ph-graph:before {
  content: "\eb58";
}
.ph-fill.ph-graphics-card:before {
  content: "\e612";
}
.ph-fill.ph-greater-than:before {
  content: "\edc4";
}
.ph-fill.ph-greater-than-or-equal:before {
  content: "\eda2";
}
.ph-fill.ph-grid-four:before {
  content: "\e296";
}
.ph-fill.ph-grid-nine:before {
  content: "\ec8c";
}
.ph-fill.ph-guitar:before {
  content: "\ea8a";
}
.ph-fill.ph-hair-dryer:before {
  content: "\ea66";
}
.ph-fill.ph-hamburger:before {
  content: "\e790";
}
.ph-fill.ph-hammer:before {
  content: "\e80e";
}
.ph-fill.ph-hand:before {
  content: "\e298";
}
.ph-fill.ph-hand-arrow-down:before {
  content: "\ea4e";
}
.ph-fill.ph-hand-arrow-up:before {
  content: "\ee5a";
}
.ph-fill.ph-hand-coins:before {
  content: "\ea8c";
}
.ph-fill.ph-hand-deposit:before {
  content: "\ee82";
}
.ph-fill.ph-hand-eye:before {
  content: "\ea4c";
}
.ph-fill.ph-hand-fist:before {
  content: "\e57a";
}
.ph-fill.ph-hand-grabbing:before {
  content: "\e57c";
}
.ph-fill.ph-hand-heart:before {
  content: "\e810";
}
.ph-fill.ph-hand-palm:before {
  content: "\e57e";
}
.ph-fill.ph-hand-peace:before {
  content: "\e7cc";
}
.ph-fill.ph-hand-pointing:before {
  content: "\e29a";
}
.ph-fill.ph-hand-soap:before {
  content: "\e630";
}
.ph-fill.ph-hand-swipe-left:before {
  content: "\ec94";
}
.ph-fill.ph-hand-swipe-right:before {
  content: "\ec92";
}
.ph-fill.ph-hand-tap:before {
  content: "\ec90";
}
.ph-fill.ph-hand-waving:before {
  content: "\e580";
}
.ph-fill.ph-hand-withdraw:before {
  content: "\ee80";
}
.ph-fill.ph-handbag:before {
  content: "\e29c";
}
.ph-fill.ph-handbag-simple:before {
  content: "\e62e";
}
.ph-fill.ph-hands-clapping:before {
  content: "\e6a0";
}
.ph-fill.ph-hands-praying:before {
  content: "\ecc8";
}
.ph-fill.ph-handshake:before {
  content: "\e582";
}
.ph-fill.ph-hard-drive:before {
  content: "\e29e";
}
.ph-fill.ph-hard-drives:before {
  content: "\e2a0";
}
.ph-fill.ph-hard-hat:before {
  content: "\ed46";
}
.ph-fill.ph-hash:before {
  content: "\e2a2";
}
.ph-fill.ph-hash-straight:before {
  content: "\e2a4";
}
.ph-fill.ph-head-circuit:before {
  content: "\e7d4";
}
.ph-fill.ph-headlights:before {
  content: "\e6fe";
}
.ph-fill.ph-headphones:before {
  content: "\e2a6";
}
.ph-fill.ph-headset:before {
  content: "\e584";
}
.ph-fill.ph-heart:before {
  content: "\e2a8";
}
.ph-fill.ph-heart-break:before {
  content: "\ebe8";
}
.ph-fill.ph-heart-half:before {
  content: "\ec48";
}
.ph-fill.ph-heart-straight:before {
  content: "\e2aa";
}
.ph-fill.ph-heart-straight-break:before {
  content: "\eb98";
}
.ph-fill.ph-heartbeat:before {
  content: "\e2ac";
}
.ph-fill.ph-hexagon:before {
  content: "\e2ae";
}
.ph-fill.ph-high-definition:before {
  content: "\ea8e";
}
.ph-fill.ph-high-heel:before {
  content: "\e8e8";
}
.ph-fill.ph-highlighter:before {
  content: "\ec76";
}
.ph-fill.ph-highlighter-circle:before {
  content: "\e632";
}
.ph-fill.ph-hockey:before {
  content: "\ec86";
}
.ph-fill.ph-hoodie:before {
  content: "\ecd0";
}
.ph-fill.ph-horse:before {
  content: "\e2b0";
}
.ph-fill.ph-hospital:before {
  content: "\e844";
}
.ph-fill.ph-hourglass:before {
  content: "\e2b2";
}
.ph-fill.ph-hourglass-high:before {
  content: "\e2b4";
}
.ph-fill.ph-hourglass-low:before {
  content: "\e2b6";
}
.ph-fill.ph-hourglass-medium:before {
  content: "\e2b8";
}
.ph-fill.ph-hourglass-simple:before {
  content: "\e2ba";
}
.ph-fill.ph-hourglass-simple-high:before {
  content: "\e2bc";
}
.ph-fill.ph-hourglass-simple-low:before {
  content: "\e2be";
}
.ph-fill.ph-hourglass-simple-medium:before {
  content: "\e2c0";
}
.ph-fill.ph-house:before {
  content: "\e2c2";
}
.ph-fill.ph-house-line:before {
  content: "\e2c4";
}
.ph-fill.ph-house-simple:before {
  content: "\e2c6";
}
.ph-fill.ph-hurricane:before {
  content: "\e88e";
}
.ph-fill.ph-ice-cream:before {
  content: "\e804";
}
.ph-fill.ph-identification-badge:before {
  content: "\e6f6";
}
.ph-fill.ph-identification-card:before {
  content: "\e2c8";
}
.ph-fill.ph-image:before {
  content: "\e2ca";
}
.ph-fill.ph-image-broken:before {
  content: "\e7a8";
}
.ph-fill.ph-image-square:before {
  content: "\e2cc";
}
.ph-fill.ph-images:before {
  content: "\e836";
}
.ph-fill.ph-images-square:before {
  content: "\e834";
}
.ph-fill.ph-infinity:before {
  content: "\e634";
}
.ph-fill.ph-lemniscate:before {
  content: "\e634";
}
.ph-fill.ph-info:before {
  content: "\e2ce";
}
.ph-fill.ph-instagram-logo:before {
  content: "\e2d0";
}
.ph-fill.ph-intersect:before {
  content: "\e2d2";
}
.ph-fill.ph-intersect-square:before {
  content: "\e87a";
}
.ph-fill.ph-intersect-three:before {
  content: "\ecc4";
}
.ph-fill.ph-intersection:before {
  content: "\edba";
}
.ph-fill.ph-invoice:before {
  content: "\ee42";
}
.ph-fill.ph-island:before {
  content: "\ee06";
}
.ph-fill.ph-jar:before {
  content: "\e7e0";
}
.ph-fill.ph-jar-label:before {
  content: "\e7e1";
}
.ph-fill.ph-jeep:before {
  content: "\e2d4";
}
.ph-fill.ph-joystick:before {
  content: "\ea5e";
}
.ph-fill.ph-kanban:before {
  content: "\eb54";
}
.ph-fill.ph-key:before {
  content: "\e2d6";
}
.ph-fill.ph-key-return:before {
  content: "\e782";
}
.ph-fill.ph-keyboard:before {
  content: "\e2d8";
}
.ph-fill.ph-keyhole:before {
  content: "\ea78";
}
.ph-fill.ph-knife:before {
  content: "\e636";
}
.ph-fill.ph-ladder:before {
  content: "\e9e4";
}
.ph-fill.ph-ladder-simple:before {
  content: "\ec26";
}
.ph-fill.ph-lamp:before {
  content: "\e638";
}
.ph-fill.ph-lamp-pendant:before {
  content: "\ee2e";
}
.ph-fill.ph-laptop:before {
  content: "\e586";
}
.ph-fill.ph-lasso:before {
  content: "\edc6";
}
.ph-fill.ph-lastfm-logo:before {
  content: "\e842";
}
.ph-fill.ph-layout:before {
  content: "\e6d6";
}
.ph-fill.ph-leaf:before {
  content: "\e2da";
}
.ph-fill.ph-lectern:before {
  content: "\e95a";
}
.ph-fill.ph-lego:before {
  content: "\e8c6";
}
.ph-fill.ph-lego-smiley:before {
  content: "\e8c7";
}
.ph-fill.ph-less-than:before {
  content: "\edac";
}
.ph-fill.ph-less-than-or-equal:before {
  content: "\eda4";
}
.ph-fill.ph-letter-circle-h:before {
  content: "\ebf8";
}
.ph-fill.ph-letter-circle-p:before {
  content: "\ec08";
}
.ph-fill.ph-letter-circle-v:before {
  content: "\ec14";
}
.ph-fill.ph-lifebuoy:before {
  content: "\e63a";
}
.ph-fill.ph-lightbulb:before {
  content: "\e2dc";
}
.ph-fill.ph-lightbulb-filament:before {
  content: "\e63c";
}
.ph-fill.ph-lighthouse:before {
  content: "\e9f6";
}
.ph-fill.ph-lightning:before {
  content: "\e2de";
}
.ph-fill.ph-lightning-a:before {
  content: "\ea84";
}
.ph-fill.ph-lightning-slash:before {
  content: "\e2e0";
}
.ph-fill.ph-line-segment:before {
  content: "\e6d2";
}
.ph-fill.ph-line-segments:before {
  content: "\e6d4";
}
.ph-fill.ph-line-vertical:before {
  content: "\ed70";
}
.ph-fill.ph-link:before {
  content: "\e2e2";
}
.ph-fill.ph-link-break:before {
  content: "\e2e4";
}
.ph-fill.ph-link-simple:before {
  content: "\e2e6";
}
.ph-fill.ph-link-simple-break:before {
  content: "\e2e8";
}
.ph-fill.ph-link-simple-horizontal:before {
  content: "\e2ea";
}
.ph-fill.ph-link-simple-horizontal-break:before {
  content: "\e2ec";
}
.ph-fill.ph-linkedin-logo:before {
  content: "\e2ee";
}
.ph-fill.ph-linktree-logo:before {
  content: "\edee";
}
.ph-fill.ph-linux-logo:before {
  content: "\eb02";
}
.ph-fill.ph-list:before {
  content: "\e2f0";
}
.ph-fill.ph-list-bullets:before {
  content: "\e2f2";
}
.ph-fill.ph-list-checks:before {
  content: "\eadc";
}
.ph-fill.ph-list-dashes:before {
  content: "\e2f4";
}
.ph-fill.ph-list-heart:before {
  content: "\ebde";
}
.ph-fill.ph-list-magnifying-glass:before {
  content: "\ebe0";
}
.ph-fill.ph-list-numbers:before {
  content: "\e2f6";
}
.ph-fill.ph-list-plus:before {
  content: "\e2f8";
}
.ph-fill.ph-list-star:before {
  content: "\ebdc";
}
.ph-fill.ph-lock:before {
  content: "\e2fa";
}
.ph-fill.ph-lock-key:before {
  content: "\e2fe";
}
.ph-fill.ph-lock-key-open:before {
  content: "\e300";
}
.ph-fill.ph-lock-laminated:before {
  content: "\e302";
}
.ph-fill.ph-lock-laminated-open:before {
  content: "\e304";
}
.ph-fill.ph-lock-open:before {
  content: "\e306";
}
.ph-fill.ph-lock-simple:before {
  content: "\e308";
}
.ph-fill.ph-lock-simple-open:before {
  content: "\e30a";
}
.ph-fill.ph-lockers:before {
  content: "\ecb8";
}
.ph-fill.ph-log:before {
  content: "\ed82";
}
.ph-fill.ph-magic-wand:before {
  content: "\e6b6";
}
.ph-fill.ph-magnet:before {
  content: "\e680";
}
.ph-fill.ph-magnet-straight:before {
  content: "\e682";
}
.ph-fill.ph-magnifying-glass:before {
  content: "\e30c";
}
.ph-fill.ph-magnifying-glass-minus:before {
  content: "\e30e";
}
.ph-fill.ph-magnifying-glass-plus:before {
  content: "\e310";
}
.ph-fill.ph-mailbox:before {
  content: "\ec1e";
}
.ph-fill.ph-map-pin:before {
  content: "\e316";
}
.ph-fill.ph-map-pin-area:before {
  content: "\ee3a";
}
.ph-fill.ph-map-pin-line:before {
  content: "\e318";
}
.ph-fill.ph-map-pin-plus:before {
  content: "\e314";
}
.ph-fill.ph-map-pin-simple:before {
  content: "\ee3e";
}
.ph-fill.ph-map-pin-simple-area:before {
  content: "\ee3c";
}
.ph-fill.ph-map-pin-simple-line:before {
  content: "\ee38";
}
.ph-fill.ph-map-trifold:before {
  content: "\e31a";
}
.ph-fill.ph-markdown-logo:before {
  content: "\e508";
}
.ph-fill.ph-marker-circle:before {
  content: "\e640";
}
.ph-fill.ph-martini:before {
  content: "\e31c";
}
.ph-fill.ph-mask-happy:before {
  content: "\e9f4";
}
.ph-fill.ph-mask-sad:before {
  content: "\eb9e";
}
.ph-fill.ph-mastodon-logo:before {
  content: "\ed68";
}
.ph-fill.ph-math-operations:before {
  content: "\e31e";
}
.ph-fill.ph-matrix-logo:before {
  content: "\ed64";
}
.ph-fill.ph-medal:before {
  content: "\e320";
}
.ph-fill.ph-medal-military:before {
  content: "\ecfc";
}
.ph-fill.ph-medium-logo:before {
  content: "\e322";
}
.ph-fill.ph-megaphone:before {
  content: "\e324";
}
.ph-fill.ph-megaphone-simple:before {
  content: "\e642";
}
.ph-fill.ph-member-of:before {
  content: "\edc2";
}
.ph-fill.ph-memory:before {
  content: "\e9c4";
}
.ph-fill.ph-messenger-logo:before {
  content: "\e6d8";
}
.ph-fill.ph-meta-logo:before {
  content: "\ed02";
}
.ph-fill.ph-meteor:before {
  content: "\e9ba";
}
.ph-fill.ph-metronome:before {
  content: "\ec8e";
}
.ph-fill.ph-microphone:before {
  content: "\e326";
}
.ph-fill.ph-microphone-slash:before {
  content: "\e328";
}
.ph-fill.ph-microphone-stage:before {
  content: "\e75c";
}
.ph-fill.ph-microscope:before {
  content: "\ec7a";
}
.ph-fill.ph-microsoft-excel-logo:before {
  content: "\eb6c";
}
.ph-fill.ph-microsoft-outlook-logo:before {
  content: "\eb70";
}
.ph-fill.ph-microsoft-powerpoint-logo:before {
  content: "\eace";
}
.ph-fill.ph-microsoft-teams-logo:before {
  content: "\eb66";
}
.ph-fill.ph-microsoft-word-logo:before {
  content: "\eb6a";
}
.ph-fill.ph-minus:before {
  content: "\e32a";
}
.ph-fill.ph-minus-circle:before {
  content: "\e32c";
}
.ph-fill.ph-minus-square:before {
  content: "\ed4c";
}
.ph-fill.ph-money:before {
  content: "\e588";
}
.ph-fill.ph-money-wavy:before {
  content: "\ee68";
}
.ph-fill.ph-monitor:before {
  content: "\e32e";
}
.ph-fill.ph-monitor-arrow-up:before {
  content: "\e58a";
}
.ph-fill.ph-monitor-play:before {
  content: "\e58c";
}
.ph-fill.ph-moon:before {
  content: "\e330";
}
.ph-fill.ph-moon-stars:before {
  content: "\e58e";
}
.ph-fill.ph-moped:before {
  content: "\e824";
}
.ph-fill.ph-moped-front:before {
  content: "\e822";
}
.ph-fill.ph-mosque:before {
  content: "\ecee";
}
.ph-fill.ph-motorcycle:before {
  content: "\e80a";
}
.ph-fill.ph-mountains:before {
  content: "\e7ae";
}
.ph-fill.ph-mouse:before {
  content: "\e33a";
}
.ph-fill.ph-mouse-left-click:before {
  content: "\e334";
}
.ph-fill.ph-mouse-middle-click:before {
  content: "\e338";
}
.ph-fill.ph-mouse-right-click:before {
  content: "\e336";
}
.ph-fill.ph-mouse-scroll:before {
  content: "\e332";
}
.ph-fill.ph-mouse-simple:before {
  content: "\e644";
}
.ph-fill.ph-music-note:before {
  content: "\e33c";
}
.ph-fill.ph-music-note-simple:before {
  content: "\e33e";
}
.ph-fill.ph-music-notes:before {
  content: "\e340";
}
.ph-fill.ph-music-notes-minus:before {
  content: "\ee0c";
}
.ph-fill.ph-music-notes-plus:before {
  content: "\eb7c";
}
.ph-fill.ph-music-notes-simple:before {
  content: "\e342";
}
.ph-fill.ph-navigation-arrow:before {
  content: "\eade";
}
.ph-fill.ph-needle:before {
  content: "\e82e";
}
.ph-fill.ph-network:before {
  content: "\edde";
}
.ph-fill.ph-network-slash:before {
  content: "\eddc";
}
.ph-fill.ph-network-x:before {
  content: "\edda";
}
.ph-fill.ph-newspaper:before {
  content: "\e344";
}
.ph-fill.ph-newspaper-clipping:before {
  content: "\e346";
}
.ph-fill.ph-not-equals:before {
  content: "\eda6";
}
.ph-fill.ph-not-member-of:before {
  content: "\edae";
}
.ph-fill.ph-not-subset-of:before {
  content: "\edb0";
}
.ph-fill.ph-not-superset-of:before {
  content: "\edb2";
}
.ph-fill.ph-notches:before {
  content: "\ed3a";
}
.ph-fill.ph-note:before {
  content: "\e348";
}
.ph-fill.ph-note-blank:before {
  content: "\e34a";
}
.ph-fill.ph-note-pencil:before {
  content: "\e34c";
}
.ph-fill.ph-notebook:before {
  content: "\e34e";
}
.ph-fill.ph-notepad:before {
  content: "\e63e";
}
.ph-fill.ph-notification:before {
  content: "\e6fa";
}
.ph-fill.ph-notion-logo:before {
  content: "\e9a0";
}
.ph-fill.ph-nuclear-plant:before {
  content: "\ed7c";
}
.ph-fill.ph-number-circle-eight:before {
  content: "\e352";
}
.ph-fill.ph-number-circle-five:before {
  content: "\e358";
}
.ph-fill.ph-number-circle-four:before {
  content: "\e35e";
}
.ph-fill.ph-number-circle-nine:before {
  content: "\e364";
}
.ph-fill.ph-number-circle-one:before {
  content: "\e36a";
}
.ph-fill.ph-number-circle-seven:before {
  content: "\e370";
}
.ph-fill.ph-number-circle-six:before {
  content: "\e376";
}
.ph-fill.ph-number-circle-three:before {
  content: "\e37c";
}
.ph-fill.ph-number-circle-two:before {
  content: "\e382";
}
.ph-fill.ph-number-circle-zero:before {
  content: "\e388";
}
.ph-fill.ph-number-eight:before {
  content: "\e350";
}
.ph-fill.ph-number-five:before {
  content: "\e356";
}
.ph-fill.ph-number-four:before {
  content: "\e35c";
}
.ph-fill.ph-number-nine:before {
  content: "\e362";
}
.ph-fill.ph-number-one:before {
  content: "\e368";
}
.ph-fill.ph-number-seven:before {
  content: "\e36e";
}
.ph-fill.ph-number-six:before {
  content: "\e374";
}
.ph-fill.ph-number-square-eight:before {
  content: "\e354";
}
.ph-fill.ph-number-square-five:before {
  content: "\e35a";
}
.ph-fill.ph-number-square-four:before {
  content: "\e360";
}
.ph-fill.ph-number-square-nine:before {
  content: "\e366";
}
.ph-fill.ph-number-square-one:before {
  content: "\e36c";
}
.ph-fill.ph-number-square-seven:before {
  content: "\e372";
}
.ph-fill.ph-number-square-six:before {
  content: "\e378";
}
.ph-fill.ph-number-square-three:before {
  content: "\e37e";
}
.ph-fill.ph-number-square-two:before {
  content: "\e384";
}
.ph-fill.ph-number-square-zero:before {
  content: "\e38a";
}
.ph-fill.ph-number-three:before {
  content: "\e37a";
}
.ph-fill.ph-number-two:before {
  content: "\e380";
}
.ph-fill.ph-number-zero:before {
  content: "\e386";
}
.ph-fill.ph-numpad:before {
  content: "\e3c8";
}
.ph-fill.ph-nut:before {
  content: "\e38c";
}
.ph-fill.ph-ny-times-logo:before {
  content: "\e646";
}
.ph-fill.ph-octagon:before {
  content: "\e38e";
}
.ph-fill.ph-office-chair:before {
  content: "\ea46";
}
.ph-fill.ph-onigiri:before {
  content: "\ee2c";
}
.ph-fill.ph-open-ai-logo:before {
  content: "\e7d2";
}
.ph-fill.ph-option:before {
  content: "\e8a8";
}
.ph-fill.ph-orange:before {
  content: "\ee40";
}
.ph-fill.ph-orange-slice:before {
  content: "\ed36";
}
.ph-fill.ph-oven:before {
  content: "\ed8c";
}
.ph-fill.ph-package:before {
  content: "\e390";
}
.ph-fill.ph-paint-brush:before {
  content: "\e6f0";
}
.ph-fill.ph-paint-brush-broad:before {
  content: "\e590";
}
.ph-fill.ph-paint-brush-household:before {
  content: "\e6f2";
}
.ph-fill.ph-paint-bucket:before {
  content: "\e392";
}
.ph-fill.ph-paint-roller:before {
  content: "\e6f4";
}
.ph-fill.ph-palette:before {
  content: "\e6c8";
}
.ph-fill.ph-panorama:before {
  content: "\eaa2";
}
.ph-fill.ph-pants:before {
  content: "\ec88";
}
.ph-fill.ph-paper-plane:before {
  content: "\e394";
}
.ph-fill.ph-paper-plane-right:before {
  content: "\e396";
}
.ph-fill.ph-paper-plane-tilt:before {
  content: "\e398";
}
.ph-fill.ph-paperclip:before {
  content: "\e39a";
}
.ph-fill.ph-paperclip-horizontal:before {
  content: "\e592";
}
.ph-fill.ph-parachute:before {
  content: "\ea7c";
}
.ph-fill.ph-paragraph:before {
  content: "\e960";
}
.ph-fill.ph-parallelogram:before {
  content: "\ecc6";
}
.ph-fill.ph-park:before {
  content: "\ecb2";
}
.ph-fill.ph-password:before {
  content: "\e752";
}
.ph-fill.ph-path:before {
  content: "\e39c";
}
.ph-fill.ph-patreon-logo:before {
  content: "\e98a";
}
.ph-fill.ph-pause:before {
  content: "\e39e";
}
.ph-fill.ph-pause-circle:before {
  content: "\e3a0";
}
.ph-fill.ph-paw-print:before {
  content: "\e648";
}
.ph-fill.ph-paypal-logo:before {
  content: "\e98c";
}
.ph-fill.ph-peace:before {
  content: "\e3a2";
}
.ph-fill.ph-pen:before {
  content: "\e3aa";
}
.ph-fill.ph-pen-nib:before {
  content: "\e3ac";
}
.ph-fill.ph-pen-nib-straight:before {
  content: "\e64a";
}
.ph-fill.ph-pencil:before {
  content: "\e3ae";
}
.ph-fill.ph-pencil-circle:before {
  content: "\e3b0";
}
.ph-fill.ph-pencil-line:before {
  content: "\e3b2";
}
.ph-fill.ph-pencil-ruler:before {
  content: "\e906";
}
.ph-fill.ph-pencil-simple:before {
  content: "\e3b4";
}
.ph-fill.ph-pencil-simple-line:before {
  content: "\ebc6";
}
.ph-fill.ph-pencil-simple-slash:before {
  content: "\ecf6";
}
.ph-fill.ph-pencil-slash:before {
  content: "\ecf8";
}
.ph-fill.ph-pentagon:before {
  content: "\ec7e";
}
.ph-fill.ph-pentagram:before {
  content: "\ec5c";
}
.ph-fill.ph-pepper:before {
  content: "\e94a";
}
.ph-fill.ph-percent:before {
  content: "\e3b6";
}
.ph-fill.ph-person:before {
  content: "\e3a8";
}
.ph-fill.ph-person-arms-spread:before {
  content: "\ecfe";
}
.ph-fill.ph-person-simple:before {
  content: "\e72e";
}
.ph-fill.ph-person-simple-bike:before {
  content: "\e734";
}
.ph-fill.ph-person-simple-circle:before {
  content: "\ee58";
}
.ph-fill.ph-person-simple-hike:before {
  content: "\ed54";
}
.ph-fill.ph-person-simple-run:before {
  content: "\e730";
}
.ph-fill.ph-person-simple-ski:before {
  content: "\e71c";
}
.ph-fill.ph-person-simple-snowboard:before {
  content: "\e71e";
}
.ph-fill.ph-person-simple-swim:before {
  content: "\e736";
}
.ph-fill.ph-person-simple-tai-chi:before {
  content: "\ed5c";
}
.ph-fill.ph-person-simple-throw:before {
  content: "\e732";
}
.ph-fill.ph-person-simple-walk:before {
  content: "\e73a";
}
.ph-fill.ph-perspective:before {
  content: "\ebe6";
}
.ph-fill.ph-phone:before {
  content: "\e3b8";
}
.ph-fill.ph-phone-call:before {
  content: "\e3ba";
}
.ph-fill.ph-phone-disconnect:before {
  content: "\e3bc";
}
.ph-fill.ph-phone-incoming:before {
  content: "\e3be";
}
.ph-fill.ph-phone-list:before {
  content: "\e3cc";
}
.ph-fill.ph-phone-outgoing:before {
  content: "\e3c0";
}
.ph-fill.ph-phone-pause:before {
  content: "\e3ca";
}
.ph-fill.ph-phone-plus:before {
  content: "\ec56";
}
.ph-fill.ph-phone-slash:before {
  content: "\e3c2";
}
.ph-fill.ph-phone-transfer:before {
  content: "\e3c6";
}
.ph-fill.ph-phone-x:before {
  content: "\e3c4";
}
.ph-fill.ph-phosphor-logo:before {
  content: "\e3ce";
}
.ph-fill.ph-pi:before {
  content: "\ec80";
}
.ph-fill.ph-piano-keys:before {
  content: "\e9c8";
}
.ph-fill.ph-picnic-table:before {
  content: "\ee26";
}
.ph-fill.ph-picture-in-picture:before {
  content: "\e64c";
}
.ph-fill.ph-piggy-bank:before {
  content: "\ea04";
}
.ph-fill.ph-pill:before {
  content: "\e700";
}
.ph-fill.ph-ping-pong:before {
  content: "\ea42";
}
.ph-fill.ph-pint-glass:before {
  content: "\edd0";
}
.ph-fill.ph-pinterest-logo:before {
  content: "\e64e";
}
.ph-fill.ph-pinwheel:before {
  content: "\eb9c";
}
.ph-fill.ph-pipe:before {
  content: "\ed86";
}
.ph-fill.ph-pipe-wrench:before {
  content: "\ed88";
}
.ph-fill.ph-pix-logo:before {
  content: "\ecc2";
}
.ph-fill.ph-pizza:before {
  content: "\e796";
}
.ph-fill.ph-placeholder:before {
  content: "\e650";
}
.ph-fill.ph-planet:before {
  content: "\e652";
}
.ph-fill.ph-plant:before {
  content: "\ebae";
}
.ph-fill.ph-play:before {
  content: "\e3d0";
}
.ph-fill.ph-play-circle:before {
  content: "\e3d2";
}
.ph-fill.ph-play-pause:before {
  content: "\e8be";
}
.ph-fill.ph-playlist:before {
  content: "\e6aa";
}
.ph-fill.ph-plug:before {
  content: "\e946";
}
.ph-fill.ph-plug-charging:before {
  content: "\eb5c";
}
.ph-fill.ph-plugs:before {
  content: "\eb56";
}
.ph-fill.ph-plugs-connected:before {
  content: "\eb5a";
}
.ph-fill.ph-plus:before {
  content: "\e3d4";
}
.ph-fill.ph-plus-circle:before {
  content: "\e3d6";
}
.ph-fill.ph-plus-minus:before {
  content: "\e3d8";
}
.ph-fill.ph-plus-square:before {
  content: "\ed4a";
}
.ph-fill.ph-poker-chip:before {
  content: "\e594";
}
.ph-fill.ph-police-car:before {
  content: "\ec4a";
}
.ph-fill.ph-polygon:before {
  content: "\e6d0";
}
.ph-fill.ph-popcorn:before {
  content: "\eb4e";
}
.ph-fill.ph-popsicle:before {
  content: "\ebbe";
}
.ph-fill.ph-potted-plant:before {
  content: "\ec22";
}
.ph-fill.ph-power:before {
  content: "\e3da";
}
.ph-fill.ph-prescription:before {
  content: "\e7a2";
}
.ph-fill.ph-presentation:before {
  content: "\e654";
}
.ph-fill.ph-presentation-chart:before {
  content: "\e656";
}
.ph-fill.ph-printer:before {
  content: "\e3dc";
}
.ph-fill.ph-prohibit:before {
  content: "\e3de";
}
.ph-fill.ph-prohibit-inset:before {
  content: "\e3e0";
}
.ph-fill.ph-projector-screen:before {
  content: "\e658";
}
.ph-fill.ph-projector-screen-chart:before {
  content: "\e65a";
}
.ph-fill.ph-pulse:before {
  content: "\e000";
}
.ph-fill.ph-activity:before {
  content: "\e000";
}
.ph-fill.ph-push-pin:before {
  content: "\e3e2";
}
.ph-fill.ph-push-pin-simple:before {
  content: "\e65c";
}
.ph-fill.ph-push-pin-simple-slash:before {
  content: "\e65e";
}
.ph-fill.ph-push-pin-slash:before {
  content: "\e3e4";
}
.ph-fill.ph-puzzle-piece:before {
  content: "\e596";
}
.ph-fill.ph-qr-code:before {
  content: "\e3e6";
}
.ph-fill.ph-question:before {
  content: "\e3e8";
}
.ph-fill.ph-question-mark:before {
  content: "\e3e9";
}
.ph-fill.ph-queue:before {
  content: "\e6ac";
}
.ph-fill.ph-quotes:before {
  content: "\e660";
}
.ph-fill.ph-rabbit:before {
  content: "\eac2";
}
.ph-fill.ph-racquet:before {
  content: "\ee02";
}
.ph-fill.ph-radical:before {
  content: "\e3ea";
}
.ph-fill.ph-radio:before {
  content: "\e77e";
}
.ph-fill.ph-radio-button:before {
  content: "\eb08";
}
.ph-fill.ph-radioactive:before {
  content: "\e9dc";
}
.ph-fill.ph-rainbow:before {
  content: "\e598";
}
.ph-fill.ph-rainbow-cloud:before {
  content: "\e59a";
}
.ph-fill.ph-ranking:before {
  content: "\ed62";
}
.ph-fill.ph-read-cv-logo:before {
  content: "\ed0c";
}
.ph-fill.ph-receipt:before {
  content: "\e3ec";
}
.ph-fill.ph-receipt-x:before {
  content: "\ed40";
}
.ph-fill.ph-record:before {
  content: "\e3ee";
}
.ph-fill.ph-rectangle:before {
  content: "\e3f0";
}
.ph-fill.ph-rectangle-dashed:before {
  content: "\e3f2";
}
.ph-fill.ph-recycle:before {
  content: "\e75a";
}
.ph-fill.ph-reddit-logo:before {
  content: "\e59c";
}
.ph-fill.ph-repeat:before {
  content: "\e3f6";
}
.ph-fill.ph-repeat-once:before {
  content: "\e3f8";
}
.ph-fill.ph-replit-logo:before {
  content: "\eb8a";
}
.ph-fill.ph-resize:before {
  content: "\ed6e";
}
.ph-fill.ph-rewind:before {
  content: "\e6a8";
}
.ph-fill.ph-rewind-circle:before {
  content: "\e3fa";
}
.ph-fill.ph-road-horizon:before {
  content: "\e838";
}
.ph-fill.ph-robot:before {
  content: "\e762";
}
.ph-fill.ph-rocket:before {
  content: "\e3fc";
}
.ph-fill.ph-rocket-launch:before {
  content: "\e3fe";
}
.ph-fill.ph-rows:before {
  content: "\e5a2";
}
.ph-fill.ph-rows-plus-bottom:before {
  content: "\e59e";
}
.ph-fill.ph-rows-plus-top:before {
  content: "\e5a0";
}
.ph-fill.ph-rss:before {
  content: "\e400";
}
.ph-fill.ph-rss-simple:before {
  content: "\e402";
}
.ph-fill.ph-rug:before {
  content: "\ea1a";
}
.ph-fill.ph-ruler:before {
  content: "\e6b8";
}
.ph-fill.ph-sailboat:before {
  content: "\e78a";
}
.ph-fill.ph-scales:before {
  content: "\e750";
}
.ph-fill.ph-scan:before {
  content: "\ebb6";
}
.ph-fill.ph-scan-smiley:before {
  content: "\ebb4";
}
.ph-fill.ph-scissors:before {
  content: "\eae0";
}
.ph-fill.ph-scooter:before {
  content: "\e820";
}
.ph-fill.ph-screencast:before {
  content: "\e404";
}
.ph-fill.ph-screwdriver:before {
  content: "\e86e";
}
.ph-fill.ph-scribble:before {
  content: "\e806";
}
.ph-fill.ph-scribble-loop:before {
  content: "\e662";
}
.ph-fill.ph-scroll:before {
  content: "\eb7a";
}
.ph-fill.ph-seal:before {
  content: "\e604";
}
.ph-fill.ph-circle-wavy:before {
  content: "\e604";
}
.ph-fill.ph-seal-check:before {
  content: "\e606";
}
.ph-fill.ph-circle-wavy-check:before {
  content: "\e606";
}
.ph-fill.ph-seal-percent:before {
  content: "\e60a";
}
.ph-fill.ph-seal-question:before {
  content: "\e608";
}
.ph-fill.ph-circle-wavy-question:before {
  content: "\e608";
}
.ph-fill.ph-seal-warning:before {
  content: "\e60c";
}
.ph-fill.ph-circle-wavy-warning:before {
  content: "\e60c";
}
.ph-fill.ph-seat:before {
  content: "\eb8e";
}
.ph-fill.ph-seatbelt:before {
  content: "\edfe";
}
.ph-fill.ph-security-camera:before {
  content: "\eca4";
}
.ph-fill.ph-selection:before {
  content: "\e69a";
}
.ph-fill.ph-selection-all:before {
  content: "\e746";
}
.ph-fill.ph-selection-background:before {
  content: "\eaf8";
}
.ph-fill.ph-selection-foreground:before {
  content: "\eaf6";
}
.ph-fill.ph-selection-inverse:before {
  content: "\e744";
}
.ph-fill.ph-selection-plus:before {
  content: "\e69c";
}
.ph-fill.ph-selection-slash:before {
  content: "\e69e";
}
.ph-fill.ph-shapes:before {
  content: "\ec5e";
}
.ph-fill.ph-share:before {
  content: "\e406";
}
.ph-fill.ph-share-fat:before {
  content: "\ed52";
}
.ph-fill.ph-share-network:before {
  content: "\e408";
}
.ph-fill.ph-shield:before {
  content: "\e40a";
}
.ph-fill.ph-shield-check:before {
  content: "\e40c";
}
.ph-fill.ph-shield-checkered:before {
  content: "\e708";
}
.ph-fill.ph-shield-chevron:before {
  content: "\e40e";
}
.ph-fill.ph-shield-plus:before {
  content: "\e706";
}
.ph-fill.ph-shield-slash:before {
  content: "\e410";
}
.ph-fill.ph-shield-star:before {
  content: "\ec34";
}
.ph-fill.ph-shield-warning:before {
  content: "\e412";
}
.ph-fill.ph-shipping-container:before {
  content: "\e78c";
}
.ph-fill.ph-shirt-folded:before {
  content: "\ea92";
}
.ph-fill.ph-shooting-star:before {
  content: "\ecfa";
}
.ph-fill.ph-shopping-bag:before {
  content: "\e416";
}
.ph-fill.ph-shopping-bag-open:before {
  content: "\e418";
}
.ph-fill.ph-shopping-cart:before {
  content: "\e41e";
}
.ph-fill.ph-shopping-cart-simple:before {
  content: "\e420";
}
.ph-fill.ph-shovel:before {
  content: "\e9e6";
}
.ph-fill.ph-shower:before {
  content: "\e776";
}
.ph-fill.ph-shrimp:before {
  content: "\eab4";
}
.ph-fill.ph-shuffle:before {
  content: "\e422";
}
.ph-fill.ph-shuffle-angular:before {
  content: "\e424";
}
.ph-fill.ph-shuffle-simple:before {
  content: "\e426";
}
.ph-fill.ph-sidebar:before {
  content: "\eab6";
}
.ph-fill.ph-sidebar-simple:before {
  content: "\ec24";
}
.ph-fill.ph-sigma:before {
  content: "\eab8";
}
.ph-fill.ph-sign-in:before {
  content: "\e428";
}
.ph-fill.ph-sign-out:before {
  content: "\e42a";
}
.ph-fill.ph-signature:before {
  content: "\ebac";
}
.ph-fill.ph-signpost:before {
  content: "\e89c";
}
.ph-fill.ph-sim-card:before {
  content: "\e664";
}
.ph-fill.ph-siren:before {
  content: "\e9b8";
}
.ph-fill.ph-sketch-logo:before {
  content: "\e42c";
}
.ph-fill.ph-skip-back:before {
  content: "\e5a4";
}
.ph-fill.ph-skip-back-circle:before {
  content: "\e42e";
}
.ph-fill.ph-skip-forward:before {
  content: "\e5a6";
}
.ph-fill.ph-skip-forward-circle:before {
  content: "\e430";
}
.ph-fill.ph-skull:before {
  content: "\e916";
}
.ph-fill.ph-skype-logo:before {
  content: "\e8dc";
}
.ph-fill.ph-slack-logo:before {
  content: "\e5a8";
}
.ph-fill.ph-sliders:before {
  content: "\e432";
}
.ph-fill.ph-sliders-horizontal:before {
  content: "\e434";
}
.ph-fill.ph-slideshow:before {
  content: "\ed32";
}
.ph-fill.ph-smiley:before {
  content: "\e436";
}
.ph-fill.ph-smiley-angry:before {
  content: "\ec62";
}
.ph-fill.ph-smiley-blank:before {
  content: "\e438";
}
.ph-fill.ph-smiley-meh:before {
  content: "\e43a";
}
.ph-fill.ph-smiley-melting:before {
  content: "\ee56";
}
.ph-fill.ph-smiley-nervous:before {
  content: "\e43c";
}
.ph-fill.ph-smiley-sad:before {
  content: "\e43e";
}
.ph-fill.ph-smiley-sticker:before {
  content: "\e440";
}
.ph-fill.ph-smiley-wink:before {
  content: "\e666";
}
.ph-fill.ph-smiley-x-eyes:before {
  content: "\e442";
}
.ph-fill.ph-snapchat-logo:before {
  content: "\e668";
}
.ph-fill.ph-sneaker:before {
  content: "\e80c";
}
.ph-fill.ph-sneaker-move:before {
  content: "\ed60";
}
.ph-fill.ph-snowflake:before {
  content: "\e5aa";
}
.ph-fill.ph-soccer-ball:before {
  content: "\e716";
}
.ph-fill.ph-sock:before {
  content: "\ecce";
}
.ph-fill.ph-solar-panel:before {
  content: "\ed7a";
}
.ph-fill.ph-solar-roof:before {
  content: "\ed7b";
}
.ph-fill.ph-sort-ascending:before {
  content: "\e444";
}
.ph-fill.ph-sort-descending:before {
  content: "\e446";
}
.ph-fill.ph-soundcloud-logo:before {
  content: "\e8de";
}
.ph-fill.ph-spade:before {
  content: "\e448";
}
.ph-fill.ph-sparkle:before {
  content: "\e6a2";
}
.ph-fill.ph-speaker-hifi:before {
  content: "\ea08";
}
.ph-fill.ph-speaker-high:before {
  content: "\e44a";
}
.ph-fill.ph-speaker-low:before {
  content: "\e44c";
}
.ph-fill.ph-speaker-none:before {
  content: "\e44e";
}
.ph-fill.ph-speaker-simple-high:before {
  content: "\e450";
}
.ph-fill.ph-speaker-simple-low:before {
  content: "\e452";
}
.ph-fill.ph-speaker-simple-none:before {
  content: "\e454";
}
.ph-fill.ph-speaker-simple-slash:before {
  content: "\e456";
}
.ph-fill.ph-speaker-simple-x:before {
  content: "\e458";
}
.ph-fill.ph-speaker-slash:before {
  content: "\e45a";
}
.ph-fill.ph-speaker-x:before {
  content: "\e45c";
}
.ph-fill.ph-speedometer:before {
  content: "\ee74";
}
.ph-fill.ph-sphere:before {
  content: "\ee66";
}
.ph-fill.ph-spinner:before {
  content: "\e66a";
}
.ph-fill.ph-spinner-ball:before {
  content: "\ee28";
}
.ph-fill.ph-spinner-gap:before {
  content: "\e66c";
}
.ph-fill.ph-spiral:before {
  content: "\e9fa";
}
.ph-fill.ph-split-horizontal:before {
  content: "\e872";
}
.ph-fill.ph-split-vertical:before {
  content: "\e876";
}
.ph-fill.ph-spotify-logo:before {
  content: "\e66e";
}
.ph-fill.ph-spray-bottle:before {
  content: "\e7e4";
}
.ph-fill.ph-square:before {
  content: "\e45e";
}
.ph-fill.ph-square-half:before {
  content: "\e462";
}
.ph-fill.ph-square-half-bottom:before {
  content: "\eb16";
}
.ph-fill.ph-square-logo:before {
  content: "\e690";
}
.ph-fill.ph-square-split-horizontal:before {
  content: "\e870";
}
.ph-fill.ph-square-split-vertical:before {
  content: "\e874";
}
.ph-fill.ph-squares-four:before {
  content: "\e464";
}
.ph-fill.ph-stack:before {
  content: "\e466";
}
.ph-fill.ph-stack-minus:before {
  content: "\edf4";
}
.ph-fill.ph-stack-overflow-logo:before {
  content: "\eb78";
}
.ph-fill.ph-stack-plus:before {
  content: "\edf6";
}
.ph-fill.ph-stack-simple:before {
  content: "\e468";
}
.ph-fill.ph-stairs:before {
  content: "\e8ec";
}
.ph-fill.ph-stamp:before {
  content: "\ea48";
}
.ph-fill.ph-standard-definition:before {
  content: "\ea90";
}
.ph-fill.ph-star:before {
  content: "\e46a";
}
.ph-fill.ph-star-and-crescent:before {
  content: "\ecf4";
}
.ph-fill.ph-star-four:before {
  content: "\e6a4";
}
.ph-fill.ph-star-half:before {
  content: "\e70a";
}
.ph-fill.ph-star-of-david:before {
  content: "\e89e";
}
.ph-fill.ph-steam-logo:before {
  content: "\ead4";
}
.ph-fill.ph-steering-wheel:before {
  content: "\e9ac";
}
.ph-fill.ph-steps:before {
  content: "\ecbe";
}
.ph-fill.ph-stethoscope:before {
  content: "\e7ea";
}
.ph-fill.ph-sticker:before {
  content: "\e5ac";
}
.ph-fill.ph-stool:before {
  content: "\ea44";
}
.ph-fill.ph-stop:before {
  content: "\e46c";
}
.ph-fill.ph-stop-circle:before {
  content: "\e46e";
}
.ph-fill.ph-storefront:before {
  content: "\e470";
}
.ph-fill.ph-strategy:before {
  content: "\ea3a";
}
.ph-fill.ph-stripe-logo:before {
  content: "\e698";
}
.ph-fill.ph-student:before {
  content: "\e73e";
}
.ph-fill.ph-subset-of:before {
  content: "\edc0";
}
.ph-fill.ph-subset-proper-of:before {
  content: "\edb6";
}
.ph-fill.ph-subtitles:before {
  content: "\e1a8";
}
.ph-fill.ph-subtitles-slash:before {
  content: "\e1a6";
}
.ph-fill.ph-subtract:before {
  content: "\ebd6";
}
.ph-fill.ph-subtract-square:before {
  content: "\ebd4";
}
.ph-fill.ph-subway:before {
  content: "\e498";
}
.ph-fill.ph-suitcase:before {
  content: "\e5ae";
}
.ph-fill.ph-suitcase-rolling:before {
  content: "\e9b0";
}
.ph-fill.ph-suitcase-simple:before {
  content: "\e5b0";
}
.ph-fill.ph-sun:before {
  content: "\e472";
}
.ph-fill.ph-sun-dim:before {
  content: "\e474";
}
.ph-fill.ph-sun-horizon:before {
  content: "\e5b6";
}
.ph-fill.ph-sunglasses:before {
  content: "\e816";
}
.ph-fill.ph-superset-of:before {
  content: "\edb8";
}
.ph-fill.ph-superset-proper-of:before {
  content: "\edb4";
}
.ph-fill.ph-swap:before {
  content: "\e83c";
}
.ph-fill.ph-swatches:before {
  content: "\e5b8";
}
.ph-fill.ph-swimming-pool:before {
  content: "\ecb6";
}
.ph-fill.ph-sword:before {
  content: "\e5ba";
}
.ph-fill.ph-synagogue:before {
  content: "\ecec";
}
.ph-fill.ph-syringe:before {
  content: "\e968";
}
.ph-fill.ph-t-shirt:before {
  content: "\e670";
}
.ph-fill.ph-table:before {
  content: "\e476";
}
.ph-fill.ph-tabs:before {
  content: "\e778";
}
.ph-fill.ph-tag:before {
  content: "\e478";
}
.ph-fill.ph-tag-chevron:before {
  content: "\e672";
}
.ph-fill.ph-tag-simple:before {
  content: "\e47a";
}
.ph-fill.ph-target:before {
  content: "\e47c";
}
.ph-fill.ph-taxi:before {
  content: "\e902";
}
.ph-fill.ph-tea-bag:before {
  content: "\e8e6";
}
.ph-fill.ph-telegram-logo:before {
  content: "\e5bc";
}
.ph-fill.ph-television:before {
  content: "\e754";
}
.ph-fill.ph-television-simple:before {
  content: "\eae6";
}
.ph-fill.ph-tennis-ball:before {
  content: "\e720";
}
.ph-fill.ph-tent:before {
  content: "\e8ba";
}
.ph-fill.ph-terminal:before {
  content: "\e47e";
}
.ph-fill.ph-terminal-window:before {
  content: "\eae8";
}
.ph-fill.ph-test-tube:before {
  content: "\e7a0";
}
.ph-fill.ph-text-a-underline:before {
  content: "\ed34";
}
.ph-fill.ph-text-aa:before {
  content: "\e6ee";
}
.ph-fill.ph-text-align-center:before {
  content: "\e480";
}
.ph-fill.ph-text-align-justify:before {
  content: "\e482";
}
.ph-fill.ph-text-align-left:before {
  content: "\e484";
}
.ph-fill.ph-text-align-right:before {
  content: "\e486";
}
.ph-fill.ph-text-b:before {
  content: "\e5be";
}
.ph-fill.ph-text-bolder:before {
  content: "\e5be";
}
.ph-fill.ph-text-columns:before {
  content: "\ec96";
}
.ph-fill.ph-text-h:before {
  content: "\e6ba";
}
.ph-fill.ph-text-h-five:before {
  content: "\e6c4";
}
.ph-fill.ph-text-h-four:before {
  content: "\e6c2";
}
.ph-fill.ph-text-h-one:before {
  content: "\e6bc";
}
.ph-fill.ph-text-h-six:before {
  content: "\e6c6";
}
.ph-fill.ph-text-h-three:before {
  content: "\e6c0";
}
.ph-fill.ph-text-h-two:before {
  content: "\e6be";
}
.ph-fill.ph-text-indent:before {
  content: "\ea1e";
}
.ph-fill.ph-text-italic:before {
  content: "\e5c0";
}
.ph-fill.ph-text-outdent:before {
  content: "\ea1c";
}
.ph-fill.ph-text-strikethrough:before {
  content: "\e5c2";
}
.ph-fill.ph-text-subscript:before {
  content: "\ec98";
}
.ph-fill.ph-text-superscript:before {
  content: "\ec9a";
}
.ph-fill.ph-text-t:before {
  content: "\e48a";
}
.ph-fill.ph-text-t-slash:before {
  content: "\e488";
}
.ph-fill.ph-text-underline:before {
  content: "\e5c4";
}
.ph-fill.ph-textbox:before {
  content: "\eb0a";
}
.ph-fill.ph-thermometer:before {
  content: "\e5c6";
}
.ph-fill.ph-thermometer-cold:before {
  content: "\e5c8";
}
.ph-fill.ph-thermometer-hot:before {
  content: "\e5ca";
}
.ph-fill.ph-thermometer-simple:before {
  content: "\e5cc";
}
.ph-fill.ph-threads-logo:before {
  content: "\ed9e";
}
.ph-fill.ph-three-d:before {
  content: "\ea5a";
}
.ph-fill.ph-thumbs-down:before {
  content: "\e48c";
}
.ph-fill.ph-thumbs-up:before {
  content: "\e48e";
}
.ph-fill.ph-ticket:before {
  content: "\e490";
}
.ph-fill.ph-tidal-logo:before {
  content: "\ed1c";
}
.ph-fill.ph-tiktok-logo:before {
  content: "\eaf2";
}
.ph-fill.ph-tilde:before {
  content: "\eda8";
}
.ph-fill.ph-timer:before {
  content: "\e492";
}
.ph-fill.ph-tip-jar:before {
  content: "\e7e2";
}
.ph-fill.ph-tipi:before {
  content: "\ed30";
}
.ph-fill.ph-tire:before {
  content: "\edd2";
}
.ph-fill.ph-toggle-left:before {
  content: "\e674";
}
.ph-fill.ph-toggle-right:before {
  content: "\e676";
}
.ph-fill.ph-toilet:before {
  content: "\e79a";
}
.ph-fill.ph-toilet-paper:before {
  content: "\e79c";
}
.ph-fill.ph-toolbox:before {
  content: "\eca0";
}
.ph-fill.ph-tooth:before {
  content: "\e9cc";
}
.ph-fill.ph-tornado:before {
  content: "\e88c";
}
.ph-fill.ph-tote:before {
  content: "\e494";
}
.ph-fill.ph-tote-simple:before {
  content: "\e678";
}
.ph-fill.ph-towel:before {
  content: "\ede6";
}
.ph-fill.ph-tractor:before {
  content: "\ec6e";
}
.ph-fill.ph-trademark:before {
  content: "\e9f0";
}
.ph-fill.ph-trademark-registered:before {
  content: "\e3f4";
}
.ph-fill.ph-traffic-cone:before {
  content: "\e9a8";
}
.ph-fill.ph-traffic-sign:before {
  content: "\e67a";
}
.ph-fill.ph-traffic-signal:before {
  content: "\e9aa";
}
.ph-fill.ph-train:before {
  content: "\e496";
}
.ph-fill.ph-train-regional:before {
  content: "\e49e";
}
.ph-fill.ph-train-simple:before {
  content: "\e4a0";
}
.ph-fill.ph-tram:before {
  content: "\e9ec";
}
.ph-fill.ph-translate:before {
  content: "\e4a2";
}
.ph-fill.ph-trash:before {
  content: "\e4a6";
}
.ph-fill.ph-trash-simple:before {
  content: "\e4a8";
}
.ph-fill.ph-tray:before {
  content: "\e4aa";
}
.ph-fill.ph-tray-arrow-down:before {
  content: "\e010";
}
.ph-fill.ph-archive-tray:before {
  content: "\e010";
}
.ph-fill.ph-tray-arrow-up:before {
  content: "\ee52";
}
.ph-fill.ph-treasure-chest:before {
  content: "\ede2";
}
.ph-fill.ph-tree:before {
  content: "\e6da";
}
.ph-fill.ph-tree-evergreen:before {
  content: "\e6dc";
}
.ph-fill.ph-tree-palm:before {
  content: "\e91a";
}
.ph-fill.ph-tree-structure:before {
  content: "\e67c";
}
.ph-fill.ph-tree-view:before {
  content: "\ee48";
}
.ph-fill.ph-trend-down:before {
  content: "\e4ac";
}
.ph-fill.ph-trend-up:before {
  content: "\e4ae";
}
.ph-fill.ph-triangle:before {
  content: "\e4b0";
}
.ph-fill.ph-triangle-dashed:before {
  content: "\e4b2";
}
.ph-fill.ph-trolley:before {
  content: "\e5b2";
}
.ph-fill.ph-trolley-suitcase:before {
  content: "\e5b4";
}
.ph-fill.ph-trophy:before {
  content: "\e67e";
}
.ph-fill.ph-truck:before {
  content: "\e4b4";
}
.ph-fill.ph-truck-trailer:before {
  content: "\e4b6";
}
.ph-fill.ph-tumblr-logo:before {
  content: "\e8d4";
}
.ph-fill.ph-twitch-logo:before {
  content: "\e5ce";
}
.ph-fill.ph-twitter-logo:before {
  content: "\e4ba";
}
.ph-fill.ph-umbrella:before {
  content: "\e684";
}
.ph-fill.ph-umbrella-simple:before {
  content: "\e686";
}
.ph-fill.ph-union:before {
  content: "\edbe";
}
.ph-fill.ph-unite:before {
  content: "\e87e";
}
.ph-fill.ph-unite-square:before {
  content: "\e878";
}
.ph-fill.ph-upload:before {
  content: "\e4be";
}
.ph-fill.ph-upload-simple:before {
  content: "\e4c0";
}
.ph-fill.ph-usb:before {
  content: "\e956";
}
.ph-fill.ph-user:before {
  content: "\e4c2";
}
.ph-fill.ph-user-check:before {
  content: "\eafa";
}
.ph-fill.ph-user-circle:before {
  content: "\e4c4";
}
.ph-fill.ph-user-circle-check:before {
  content: "\ec38";
}
.ph-fill.ph-user-circle-dashed:before {
  content: "\ec36";
}
.ph-fill.ph-user-circle-gear:before {
  content: "\e4c6";
}
.ph-fill.ph-user-circle-minus:before {
  content: "\e4c8";
}
.ph-fill.ph-user-circle-plus:before {
  content: "\e4ca";
}
.ph-fill.ph-user-focus:before {
  content: "\e6fc";
}
.ph-fill.ph-user-gear:before {
  content: "\e4cc";
}
.ph-fill.ph-user-list:before {
  content: "\e73c";
}
.ph-fill.ph-user-minus:before {
  content: "\e4ce";
}
.ph-fill.ph-user-plus:before {
  content: "\e4d0";
}
.ph-fill.ph-user-rectangle:before {
  content: "\e4d2";
}
.ph-fill.ph-user-sound:before {
  content: "\eca8";
}
.ph-fill.ph-user-square:before {
  content: "\e4d4";
}
.ph-fill.ph-user-switch:before {
  content: "\e756";
}
.ph-fill.ph-users:before {
  content: "\e4d6";
}
.ph-fill.ph-users-four:before {
  content: "\e68c";
}
.ph-fill.ph-users-three:before {
  content: "\e68e";
}
.ph-fill.ph-van:before {
  content: "\e826";
}
.ph-fill.ph-vault:before {
  content: "\e76e";
}
.ph-fill.ph-vector-three:before {
  content: "\ee62";
}
.ph-fill.ph-vector-two:before {
  content: "\ee64";
}
.ph-fill.ph-vibrate:before {
  content: "\e4d8";
}
.ph-fill.ph-video:before {
  content: "\e740";
}
.ph-fill.ph-video-camera:before {
  content: "\e4da";
}
.ph-fill.ph-video-camera-slash:before {
  content: "\e4dc";
}
.ph-fill.ph-video-conference:before {
  content: "\edce";
}
.ph-fill.ph-vignette:before {
  content: "\eba2";
}
.ph-fill.ph-vinyl-record:before {
  content: "\ecac";
}
.ph-fill.ph-virtual-reality:before {
  content: "\e7b8";
}
.ph-fill.ph-virus:before {
  content: "\e7d6";
}
.ph-fill.ph-visor:before {
  content: "\ee2a";
}
.ph-fill.ph-voicemail:before {
  content: "\e4de";
}
.ph-fill.ph-volleyball:before {
  content: "\e726";
}
.ph-fill.ph-wall:before {
  content: "\e688";
}
.ph-fill.ph-wallet:before {
  content: "\e68a";
}
.ph-fill.ph-warehouse:before {
  content: "\ecd4";
}
.ph-fill.ph-warning:before {
  content: "\e4e0";
}
.ph-fill.ph-warning-circle:before {
  content: "\e4e2";
}
.ph-fill.ph-warning-diamond:before {
  content: "\e7fc";
}
.ph-fill.ph-warning-octagon:before {
  content: "\e4e4";
}
.ph-fill.ph-washing-machine:before {
  content: "\ede8";
}
.ph-fill.ph-watch:before {
  content: "\e4e6";
}
.ph-fill.ph-wave-sawtooth:before {
  content: "\ea9c";
}
.ph-fill.ph-wave-sine:before {
  content: "\ea9a";
}
.ph-fill.ph-wave-square:before {
  content: "\ea9e";
}
.ph-fill.ph-wave-triangle:before {
  content: "\eaa0";
}
.ph-fill.ph-waveform:before {
  content: "\e802";
}
.ph-fill.ph-waveform-slash:before {
  content: "\e800";
}
.ph-fill.ph-waves:before {
  content: "\e6de";
}
.ph-fill.ph-webcam:before {
  content: "\e9b2";
}
.ph-fill.ph-webcam-slash:before {
  content: "\ecdc";
}
.ph-fill.ph-webhooks-logo:before {
  content: "\ecae";
}
.ph-fill.ph-wechat-logo:before {
  content: "\e8d2";
}
.ph-fill.ph-whatsapp-logo:before {
  content: "\e5d0";
}
.ph-fill.ph-wheelchair:before {
  content: "\e4e8";
}
.ph-fill.ph-wheelchair-motion:before {
  content: "\e89a";
}
.ph-fill.ph-wifi-high:before {
  content: "\e4ea";
}
.ph-fill.ph-wifi-low:before {
  content: "\e4ec";
}
.ph-fill.ph-wifi-medium:before {
  content: "\e4ee";
}
.ph-fill.ph-wifi-none:before {
  content: "\e4f0";
}
.ph-fill.ph-wifi-slash:before {
  content: "\e4f2";
}
.ph-fill.ph-wifi-x:before {
  content: "\e4f4";
}
.ph-fill.ph-wind:before {
  content: "\e5d2";
}
.ph-fill.ph-windmill:before {
  content: "\e9f8";
}
.ph-fill.ph-windows-logo:before {
  content: "\e692";
}
.ph-fill.ph-wine:before {
  content: "\e6b2";
}
.ph-fill.ph-wrench:before {
  content: "\e5d4";
}
.ph-fill.ph-x:before {
  content: "\e4f6";
}
.ph-fill.ph-x-circle:before {
  content: "\e4f8";
}
.ph-fill.ph-x-logo:before {
  content: "\e4bc";
}
.ph-fill.ph-x-square:before {
  content: "\e4fa";
}
.ph-fill.ph-yarn:before {
  content: "\ed9a";
}
.ph-fill.ph-yin-yang:before {
  content: "\e92a";
}
.ph-fill.ph-youtube-logo:before {
  content: "\e4fc";
}

/* ========== tokens\colors.css ========== */
/**
 * FINDBORG UI - COLOR TOKENS
 * Design tokens for the Findborg design system
 *
 * BEACH COLOR STORY (Hernando Beach, FL):
 * - Brand-1 (Blue): Water/Ocean
 * - Brand-2 (Green): Seagrass/Beach Vegetation
 * - Brand-3 (Orange): Sunset/Sunrise
 * - Brand-4 (Red): Sun
 * - Brand-5 (Cyan): Shallow Tropical Water/Clear Sky
 *
 * All brand colors use OKLCH with hex fallbacks for:
 * - Perceptually uniform shading (0-10 scale)
 * - Wider color gamut on modern displays
 * - Better accessibility (consistent contrast)
 */

:root {
  /* ============================================
     BRAND 1 - BLUE (Water/Ocean)
     11 shades from lightest (0) to darkest (10)
     ============================================ */

  --brand-1-0:  #e3eff9; --brand-1-0:  oklch(0.93 0.02 250);
  --brand-1-1:  #c7dff4; --brand-1-1:  oklch(0.87 0.05 250);
  --brand-1-2:  #a3caf0; --brand-1-2:  oklch(0.80 0.08 250);
  --brand-1-3:  #7bb1e8; --brand-1-3:  oklch(0.72 0.11 250);
  --brand-1-4:  #5a8fe0; --brand-1-4:  oklch(0.63 0.13 250);
  --brand-1-5:  #306ac0; --brand-1-5:  oklch(0.52 0.15 250); /* BASE */
  --brand-1-6:  #275aa6; --brand-1-6:  oklch(0.45 0.14 250);
  --brand-1-7:  #1f4a8a; --brand-1-7:  oklch(0.38 0.12 250);
  --brand-1-8:  #183a6e; --brand-1-8:  oklch(0.31 0.10 250);
  --brand-1-9:  #112b53; --brand-1-9:  oklch(0.24 0.08 250);
  --brand-1-10: #0a1c38; --brand-1-10: oklch(0.17 0.05 250);

  /* Legacy aliases for backwards compatibility */
  --brand-1-light: var(--brand-1-4);
  --brand-1: var(--brand-1-5);
  --brand-1-dark: var(--brand-1-6);

  /* ============================================
     BRAND 2 - GREEN (Seagrass/Vegetation)
     ============================================ */

  --brand-2-0:  #d9f5db; --brand-2-0:  oklch(0.93 0.05 145);
  --brand-2-1:  #b3ecb8; --brand-2-1:  oklch(0.87 0.09 145);
  --brand-2-2:  #85dd8e; --brand-2-2:  oklch(0.80 0.12 145);
  --brand-2-3:  #4ece67; --brand-2-3:  oklch(0.72 0.15 145);
  --brand-2-4:  #00c107; --brand-2-4:  oklch(0.64 0.17 145);
  --brand-2-5:  #009105; --brand-2-5:  oklch(0.50 0.18 145); /* BASE */
  --brand-2-6:  #007a04; --brand-2-6:  oklch(0.43 0.16 145);
  --brand-2-7:  #006303; --brand-2-7:  oklch(0.36 0.14 145);
  --brand-2-8:  #004d03; --brand-2-8:  oklch(0.29 0.11 145);
  --brand-2-9:  #003702; --brand-2-9:  oklch(0.22 0.08 145);
  --brand-2-10: #002201; --brand-2-10: oklch(0.15 0.05 145);

  /* Legacy aliases */
  --brand-2-light: var(--brand-2-4);
  --brand-2: var(--brand-2-5);
  --brand-2-dark: var(--brand-2-6);

  /* ============================================
     BRAND 3 - ORANGE (Sunset/Sunrise)
     ============================================ */

  --brand-3-0:  #ffe9dd; --brand-3-0:  oklch(0.93 0.04 45);
  --brand-3-1:  #ffd3bb; --brand-3-1:  oklch(0.87 0.08 45);
  --brand-3-2:  #ffb88f; --brand-3-2:  oklch(0.80 0.12 45);
  --brand-3-3:  #ff9d63; --brand-3-3:  oklch(0.74 0.16 45);
  --brand-3-4:  #ff8544; --brand-3-4:  oklch(0.70 0.18 45);
  --brand-3-5:  #ff6311; --brand-3-5:  oklch(0.68 0.20 45); /* BASE */
  --brand-3-6:  #e04f00; --brand-3-6:  oklch(0.58 0.19 45);
  --brand-3-7:  #ba4100; --brand-3-7:  oklch(0.49 0.17 45);
  --brand-3-8:  #943300; --brand-3-8:  oklch(0.40 0.14 45);
  --brand-3-9:  #6e2600; --brand-3-9:  oklch(0.31 0.11 45);
  --brand-3-10: #491900; --brand-3-10: oklch(0.22 0.08 45);

  /* Legacy aliases */
  --brand-3-light: var(--brand-3-4);
  --brand-3: var(--brand-3-5);
  --brand-3-dark: var(--brand-3-6);

  /* ============================================
     BRAND 4 - RED (Sun)
     ============================================ */

  --brand-4-0:  #f9dddd; --brand-4-0:  oklch(0.90 0.05 25);
  --brand-4-1:  #f2bbbb; --brand-4-1:  oklch(0.82 0.09 25);
  --brand-4-2:  #ea9090; --brand-4-2:  oklch(0.72 0.13 25);
  --brand-4-3:  #e06360; --brand-4-3:  oklch(0.63 0.17 25);
  --brand-4-4:  #d93432; --brand-4-4:  oklch(0.55 0.20 25);
  --brand-4-5:  #b91412; --brand-4-5:  oklch(0.47 0.22 25); /* BASE */
  --brand-4-6:  #9f1110; --brand-4-6:  oklch(0.40 0.20 25);
  --brand-4-7:  #850e0d; --brand-4-7:  oklch(0.33 0.17 25);
  --brand-4-8:  #6b0b0b; --brand-4-8:  oklch(0.26 0.14 25);
  --brand-4-9:  #520808; --brand-4-9:  oklch(0.20 0.11 25);
  --brand-4-10: #380606; --brand-4-10: oklch(0.14 0.08 25);

  /* Legacy aliases */
  --brand-4-light: var(--brand-4-4);
  --brand-4: var(--brand-4-5);
  --brand-4-dark: var(--brand-4-6);

  /* ============================================
     BRAND 5 - CYAN (Shallow Tropical Water) ✨ NEW
     ============================================ */

  --brand-5-0:  #e0f7fa; --brand-5-0:  oklch(0.95 0.02 200);
  --brand-5-1:  #b2ebf2; --brand-5-1:  oklch(0.90 0.05 200);
  --brand-5-2:  #80deea; --brand-5-2:  oklch(0.85 0.07 200);
  --brand-5-3:  #4dd0e1; --brand-5-3:  oklch(0.79 0.10 200);
  --brand-5-4:  #26c6da; --brand-5-4:  oklch(0.74 0.12 200);
  --brand-5-5:  #00bcd4; --brand-5-5:  oklch(0.72 0.13 200); /* BASE */
  --brand-5-6:  #00acc1; --brand-5-6:  oklch(0.66 0.12 200);
  --brand-5-7:  #0097a7; --brand-5-7:  oklch(0.58 0.11 200);
  --brand-5-8:  #00838f; --brand-5-8:  oklch(0.50 0.10 200);
  --brand-5-9:  #006064; --brand-5-9:  oklch(0.38 0.08 200);
  --brand-5-10: #004d56; --brand-5-10: oklch(0.30 0.06 200);

  /* Aliases for consistency */
  --brand-5-light: var(--brand-5-4);
  --brand-5: var(--brand-5-5);
  --brand-5-dark: var(--brand-5-6);

  /* ============================================
     NEUTRAL PALETTE
     Grayscale for text, borders, backgrounds
     ============================================ */

  --neutral-0: #ffffff;
  --neutral-50: #f9fafb;
  --neutral-100: #f3f4f6;
  --neutral-200: #e5e7eb;
  --neutral-300: #d1d5db;
  --neutral-400: #9ca3af;
  --neutral-500: #6b7280;
  --neutral-600: #4b5563;
  --neutral-700: #374151;
  --neutral-800: #1f2937;
  --neutral-900: #111827;

  /* ============================================
     SEMANTIC TOKENS - Light Mode
     These change based on light/dark theme
     ============================================ */

  /* Text colors */
  --color-text: var(--neutral-800);
  --color-text-subtle: var(--neutral-600);
  --color-text-muted: var(--neutral-600);  /* Changed from 500 to 600 for better contrast (WCAG AA) */

  /* Background colors */
  --color-background: var(--neutral-0);
  --color-surface: var(--neutral-50);
  --color-surface-raised: var(--neutral-0);

  /* Border colors */
  --color-border: var(--neutral-200);
  --color-border-subtle: var(--neutral-100);

  /* Surface containers */
  --color-surface-container: var(--neutral-100);

  /* Brand semantics */
  --color-primary: var(--brand-1-5);
  --color-primary-hover: var(--brand-1-4);
  --color-primary-active: var(--brand-1-6);

  --color-secondary: var(--brand-5-5);
  --color-secondary-hover: var(--brand-5-4);
  --color-secondary-active: var(--brand-5-6);

  /* Functional colors */
  --color-error: var(--brand-4-5);
  --color-success: var(--brand-2-5);
  --color-warning: var(--brand-3-5);
  --color-info: var(--brand-5-5);

  /* Interactive states */
  --color-hover: rgba(0, 0, 0, 0.04);
  --color-active: rgba(0, 0, 0, 0.08);
  --color-focus: var(--brand-1-5);
}

/* ============================================
   DARK MODE - System Preference
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Text colors */
    --color-text: var(--neutral-100);
    --color-text-subtle: var(--neutral-400);
    --color-text-muted: var(--neutral-500);

    /* Background colors */
    --color-background: var(--neutral-900);
    --color-surface: var(--neutral-800);
    --color-surface-raised: var(--neutral-700);

    /* Border colors */
    --color-border: var(--neutral-700);
    --color-border-subtle: var(--neutral-800);

    /* Surface containers */
    --color-surface-container: var(--neutral-800);

    /* Brand semantics - lighter shades for dark mode (WCAG AA contrast) */
    --color-primary: var(--brand-1-3);
    --color-primary-hover: var(--brand-1-2);
    --color-primary-active: var(--brand-1-4);

    --color-secondary: var(--brand-5-3);
    --color-secondary-hover: var(--brand-5-2);
    --color-secondary-active: var(--brand-5-4);

    /* Functional colors - lighter for visibility */
    --color-error: var(--brand-4-3);
    --color-success: var(--brand-2-3);
    --color-warning: var(--brand-3-3);
    --color-info: var(--brand-5-3);

    /* Interactive states */
    --color-hover: rgba(255, 255, 255, 0.08);
    --color-active: rgba(255, 255, 255, 0.12);
  }
}

/* ============================================
   MANUAL THEME OVERRIDES
   ============================================ */

body.light {
  color-scheme: light;

  --color-text: var(--neutral-800);
  --color-text-subtle: var(--neutral-600);
  --color-text-muted: var(--neutral-600);  /* Better contrast */
  --color-background: var(--neutral-0);
  --color-surface: var(--neutral-50);
  --color-surface-raised: var(--neutral-0);
  --color-surface-container: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-subtle: var(--neutral-100);
  --color-hover: rgba(0, 0, 0, 0.04);
  --color-active: rgba(0, 0, 0, 0.08);
}

body.dark {
  color-scheme: dark;

  --color-text: var(--neutral-100);
  --color-text-subtle: var(--neutral-400);
  --color-text-muted: var(--neutral-500);
  --color-background: var(--neutral-900);
  --color-surface: var(--neutral-800);
  --color-surface-raised: var(--neutral-700);
  --color-surface-container: var(--neutral-800);
  --color-border: var(--neutral-700);
  --color-border-subtle: var(--neutral-800);

  /* Brand semantics - lighter shades for dark mode */
  --color-primary: var(--brand-1-3);
  --color-primary-hover: var(--brand-1-2);
  --color-primary-active: var(--brand-1-4);

  --color-secondary: var(--brand-5-3);
  --color-secondary-hover: var(--brand-5-2);
  --color-secondary-active: var(--brand-5-4);

  --color-error: var(--brand-4-3);
  --color-success: var(--brand-2-3);
  --color-warning: var(--brand-3-3);
  --color-info: var(--brand-5-3);

  --color-hover: rgba(255, 255, 255, 0.08);
  --color-active: rgba(255, 255, 255, 0.12);
}

/* ========== tokens\spacing.css ========== */
/**
 * FINDBORG UI - SPACING TOKENS
 * 8px grid system for consistent spacing
 * 
 * File: src/styles/findborg-ui/tokens/spacing.css
 */

:root {
  /* ============================================
     SPACING SCALE - 8px Grid System
     ============================================ */
  
  --space-0: 0;
  --space-xs: 0.25rem;   /* 4px  - Tight spacing, icon gaps */
  --space-sm: 0.5rem;    /* 8px  - Small gaps, compact layouts */
  --space-md: 1rem;      /* 16px - Default spacing (your go-to!) */
  --space-lg: 1.5rem;    /* 24px - Comfortable spacing, card padding */
  --space-xl: 2rem;      /* 32px - Section spacing, page padding */
  --space-2xl: 2.5rem;   /* 40px - Large section breaks */
  --space-3xl: 3rem;     /* 48px - Major layout divisions */
  --space-4xl: 4rem;     /* 64px - Hero sections, dramatic spacing */
  --space-5xl: 5rem;     /* 80px - Extra large spacing */
  --space-6xl: 6rem;     /* 96px - Maximum spacing */
  
  /* ============================================
     CONVENIENCE ALIASES
     ============================================ */
  
  --space: var(--space-md);      /* Default spacing */
  --gap: var(--space-md);        /* Default gap for flex/grid */
  --padding: var(--space-md);    /* Default padding */
  --margin: var(--space-md);     /* Default margin */
  
  /* ============================================
     CONTAINER WIDTHS
     ============================================ */
  
  --container-sm: 40rem;    /* 640px - Small content */
  --container-md: 48rem;    /* 768px - Medium content */
  --container-lg: 64rem;    /* 1024px - Large content */
  --container-xl: 80rem;    /* 1280px - Extra large content */
  --container-2xl: 96rem;   /* 1536px - Maximum width */
  
  --container: var(--container-lg);  /* Default max-width */
}

/* ========== tokens\typography.css ========== */
/**
 * FINDBORG UI - TYPOGRAPHY TOKENS
 * Type scale, font families, and responsive typography
 * 
 * File: src/styles/findborg-ui/tokens/typography.css
 */

:root {
  /* ============================================
     FONT FAMILIES
     ============================================ */
  
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", "Arial", sans-serif;
  --font-headline: InterVariable, Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Consolas", "Monaco", monospace;
  
  --font: var(--font-body);  /* Default font */
  
  /* ============================================
     TYPE SCALE - Display
     ============================================ */
  
  --typescale_display-large_size: 4.071rem;      /* 65px */
  --typescale_display-large_height: 4.571rem;    /* 73px */
  --typescale_display-large_weight: 400;
  
  --typescale_display-medium_size: 3.214rem;     /* 51px */
  --typescale_display-medium_height: 3.714rem;   /* 59px */
  --typescale_display-medium_weight: 400;
  
  --typescale_display-small_size: 2.571rem;      /* 41px */
  --typescale_display-small_height: 3.143rem;    /* 50px */
  --typescale_display-small_weight: 400;
  
  /* ============================================
     TYPE SCALE - Headline
     ============================================ */
  
  --typescale_headline-large_size: 2.286rem;     /* 37px */
  --typescale_headline-large_height: 2.857rem;   /* 46px */
  --typescale_headline-large_weight: 400;
  
  --typescale_headline-medium_size: 2rem;        /* 32px */
  --typescale_headline-medium_height: 2.571rem;  /* 41px */
  --typescale_headline-medium_weight: 400;
  
  --typescale_headline-small_size: 1.714rem;     /* 27px */
  --typescale_headline-small_height: 2.286rem;   /* 37px */
  --typescale_headline-small_weight: 400;
  
  /* ============================================
     TYPE SCALE - Title
     ============================================ */
  
  --typescale_title-large_size: 1.571rem;        /* 25px */
  --typescale_title-large_height: 2rem;          /* 32px */
  --typescale_title-large_weight: 500;
  
  --typescale_title-medium_size: 1.375rem;       /* 22px */
  --typescale_title-medium_height: 1.75rem;      /* 28px */
  --typescale_title-medium_weight: 500;

  --typescale_title-small_size: 1.143rem;        /* 18px */
  --typescale_title-small_height: 1.714rem;      /* 27px */
  --typescale_title-small_weight: 500;
  
  /* ============================================
     TYPE SCALE - Label
     ============================================ */
  
  --typescale_label-large_size: 1rem;            /* 16px */
  --typescale_label-large_height: 1.429rem;      /* 23px */
  --typescale_label-large_weight: 500;
  
  --typescale_label-medium_size: 0.875rem;       /* 14px */
  --typescale_label-medium_height: 1.143rem;     /* 18px */
  --typescale_label-medium_weight: 500;
  
  --typescale_label-small_size: 0.786rem;        /* 13px */
  --typescale_label-small_height: 1.143rem;      /* 18px */
  --typescale_label-small_weight: 500;
  
  /* ============================================
     TYPE SCALE - Body
     ============================================ */
  
  --typescale_body-large_size: 1.143rem;         /* 18px */
  --typescale_body-large_height: 1.714rem;       /* 27px */
  --typescale_body-large_weight: 400;
  
  --typescale_body-medium_size: 1rem;            /* 16px */
  --typescale_body-medium_height: 1.429rem;      /* 23px */
  --typescale_body-medium_weight: 400;
  
  --typescale_body-small_size: 0.857rem;         /* 14px */
  --typescale_body-small_height: 1.143rem;       /* 18px */
  --typescale_body-small_weight: 400;
  
  /* ============================================
     LETTER SPACING
     ============================================ */
  
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  
  /* ============================================
     FONT RENDERING
     ============================================ */

  --font-smoothing-auto: auto;
  --font-smoothing-antialiased: antialiased;

  /* ============================================
     OPENTYPE FEATURES
     Enables ligatures and kerning for better readability
     ============================================ */

  --font-features: "kern" 1, "liga" 1, "calt" 1;
}

/* Apply font features globally for better typography */
body {
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== tokens\elevation.css ========== */
/**
 * FINDBORG UI - ELEVATION TOKENS
 * Shadows and depth levels
 * 
 * File: src/styles/findborg-ui/tokens/elevation.css
 */

:root {
  /* ============================================
     ELEVATION LEVELS
     Material Design inspired shadows
     ============================================ */
  
  --elevation-0: none;
  
  --elevation-1: 
    0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.14), 
    0 0.0625rem 0.3125rem 0 rgb(0 0 0 / 0.12), 
    0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 0.2);
  
  --elevation-2: 
    0 0.375rem 0.625rem 0 rgb(0 0 0 / 0.14), 
    0 0.0625rem 1.125rem 0 rgb(0 0 0 / 0.12), 
    0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.3);
  
  --elevation-3: 
    0 0.625rem 1rem 0 rgb(0 0 0 / 0.14), 
    0 0.0625rem 1.9375rem 0 rgb(0 0 0 / 0.12), 
    0 0.1875rem 0.5625rem 0 rgb(0 0 0 / 0.4);
  
  --elevation-4:
    0 1rem 1.5rem 0 rgb(0 0 0 / 0.14),
    0 0.125rem 2.5rem 0 rgb(0 0 0 / 0.12),
    0 0.25rem 1rem 0 rgb(0 0 0 / 0.4);
  
  /* ============================================
     SEMANTIC ALIASES
     ============================================ */
  
  --shadow-sm: var(--elevation-1);   /* Cards, buttons */
  --shadow-md: var(--elevation-2);   /* Dropdowns, popovers */
  --shadow-lg: var(--elevation-3);   /* Modals, dialogs */
  --shadow-xl: var(--elevation-4);   /* Full-screen overlays */
  
  /* ============================================
     FOCUS RINGS
     ============================================ */
  
  --focus-ring: 0 0 0 3px rgba(48, 106, 192, 0.2);  /* Blue focus */
  --focus-ring-error: 0 0 0 3px rgba(185, 20, 18, 0.2);  /* Red focus */
  
  /* ============================================
     Z-INDEX SCALE
     Consistent stacking contexts
     ============================================ */

  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Fully rounded */
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --speed-1: 0.1s;
  --speed-2: 0.2s;
  --speed-3: 0.3s;
  --speed-4: 0.4s;
  
  --transition-fast: all var(--speed-1) ease;
  --transition-base: all var(--speed-2) ease;
  --transition-slow: all var(--speed-3) ease;
}

/* ============================================
   REDUCED MOTION SUPPORT (WCAG)
   Respects user's motion preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --speed-1: 0.01ms;
    --speed-2: 0.01ms;
    --speed-3: 0.01ms;
    --speed-4: 0.01ms;
    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== base\reset.css ========== */
/**
 * FINDBORG UI - RESET
 * Minimal, modern CSS reset
 * 
 * File: src/styles/findborg-ui/base/reset.css
 */

/* ============================================
   BOX SIZING
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================
   DOCUMENT & BODY
   ============================================ */

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  font-weight: var(--typescale_body-medium_weight);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   TYPOGRAPHY DEFAULTS
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-headline);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Smart hover underline: only on inline text links, not on buttons, cards, or icon links */
a:hover:not(.button):not(.icon-link):not(.no-underline):not(.card):not(.block) {
  text-decoration: underline;
}

/* Don't underline icon elements inside links, even if parent link gets underlined */
a:hover > .ph,
a:hover > i[class*="ph-"] {
  text-decoration: none;
}

/* ============================================
   LISTS
   ============================================ */

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ============================================
   MEDIA
   ============================================ */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================
   FORMS
   ============================================ */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  cursor: pointer;
}

button:disabled,
[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ============================================
   TABLES
   ============================================ */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================
   MISC
   ============================================ */

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

abbr[title] {
  text-decoration: underline dotted;
}

/* ========== base\layout.css ========== */
/**
 * FINDBORG UI - LAYOUT UTILITIES
 * Simple, powerful layout classes
 * 
 * File: src/styles/findborg-ui/base/layout.css
 */

/* ============================================
   FLEX LAYOUTS - Beer CSS Style
   ============================================ */

/* Row - Horizontal flex container */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* Column - Vertical flex container */
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ============================================
   FLEX CHILDREN
   ============================================ */

/* Max - Takes all available space */
.max {
  flex: 1 1 auto;
}

/* No flex - Don't grow or shrink */
.none {
  flex: 0 0 auto;
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

/* Basic grid */
.grid {
  display: grid;
  gap: var(--gap);
}

/* Auto-fit columns - minimum 250px */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

/* Fixed column grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* Responsive grids */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   CONTAINERS
   ============================================ */

/* Max-width container with auto margins */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Container size variants */
.container-sm {
  max-width: var(--container-sm);
}

.container-md {
  max-width: var(--container-md);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-xl {
  max-width: var(--container-xl);
}

.container-2xl {
  max-width: var(--container-2xl);
}

/* Full width - no padding */
.container-fluid {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* ============================================
   ALIGNMENT
   ============================================ */

/* Horizontal alignment */
.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

/* Vertical alignment */
.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

/* Center everything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================
   GAP SIZES
   ============================================ */

.gap-0 {
  gap: var(--space-0);
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-md {
  gap: var(--space-md);
}

.gap-lg {
  gap: var(--space-lg);
}

.gap-xl {
  gap: var(--space-xl);
}

/* ============================================
   WRAPPING
   ============================================ */

.wrap {
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

/* ============================================
   POSITIONING
   ============================================ */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: 0;
}

/* ============================================
   OVERFLOW
   ============================================ */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

/* ============================================
   DISPLAY
   ============================================ */

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.hidden {
  display: none;
}

/* ============================================
   WIDTH & HEIGHT
   ============================================ */

.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-screen {
  height: 100vh;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

/* Hide on desktop */
@media (min-width: 769px) {
  .hide-desktop {
    display: none;
  }
}

/* ========== base\typography.css ========== */
/**
 * FINDBORG UI - TYPOGRAPHY CLASSES
 * Utility classes for responsive typography
 *
 * File: src/styles/findborg-ui/base/typography.css
 */

/* ============================================
   DISPLAY CLASSES
   ============================================ */

.display-large {
  font-family: var(--font-headline);
  font-size: var(--typescale_display-large_size);
  line-height: var(--typescale_display-large_height);
  font-weight: var(--typescale_display-large_weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-large.responsive {
  font-size: calc(1.525rem + 3.3vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-large.responsive {
    font-size: var(--typescale_display-large_size);
  }
}

.display-medium {
  font-family: var(--font-headline);
  font-size: var(--typescale_display-medium_size);
  line-height: var(--typescale_display-medium_height);
  font-weight: var(--typescale_display-medium_weight);
}

.display-medium.responsive {
  font-size: calc(1.375rem + 2.5vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-medium.responsive {
    font-size: var(--typescale_display-medium_size);
  }
}

.display-small {
  font-family: var(--font-headline);
  font-size: var(--typescale_display-small_size);
  line-height: var(--typescale_display-small_height);
  font-weight: var(--typescale_display-small_weight);
}

.display-small.responsive {
  font-size: calc(1.375rem + 1.5vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .display-small.responsive {
    font-size: var(--typescale_display-small_size);
  }
}

/* ============================================
   HEADLINE CLASSES
   ============================================ */

.headline-large {
  font-family: var(--font-headline);
  font-size: var(--typescale_headline-large_size);
  line-height: var(--typescale_headline-large_height);
  font-weight: var(--typescale_headline-large_weight);
}

.headline-large.responsive {
  font-size: calc(1.375rem + 1.15vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .headline-large.responsive {
    font-size: var(--typescale_headline-large_size);
  }
}

.headline-medium {
  font-family: var(--font-headline);
  font-size: var(--typescale_headline-medium_size);
  line-height: var(--typescale_headline-medium_height);
  font-weight: var(--typescale_headline-medium_weight);
}

.headline-medium.responsive {
  font-size: calc(1.325rem + .9vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .headline-medium.responsive {
    font-size: var(--typescale_headline-medium_size);
  }
}

.headline-small {
  font-family: var(--font-headline);
  font-size: var(--typescale_headline-small_size);
  line-height: var(--typescale_headline-small_height);
  font-weight: var(--typescale_headline-small_weight);
}

.headline-small.responsive {
  font-size: calc(1.2rem + .7vw);
  line-height: 1.2;
}

@media (min-width: 1200px) {
  .headline-small.responsive {
    font-size: var(--typescale_headline-small_size);
  }
}

/* ============================================
   TITLE CLASSES
   ============================================ */

.title-large {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  line-height: var(--typescale_title-large_height);
  font-weight: var(--typescale_title-large_weight);
}

.title-large.responsive {
  font-size: calc(1.25rem + 0.5vw);
  line-height: 1.3;
}

@media (min-width: 1200px) {
  .title-large.responsive {
    font-size: var(--typescale_title-large_size);
  }
}

.title-medium {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-medium_size);
  line-height: var(--typescale_title-medium_height);
  font-weight: var(--typescale_title-medium_weight);
}

.title-medium.responsive {
  font-size: calc(1.1rem + 0.3vw);
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .title-medium.responsive {
    font-size: var(--typescale_title-medium_size);
  }
}

.title-small {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-small_size);
  line-height: var(--typescale_title-small_height);
  font-weight: var(--typescale_title-small_weight);
}

.title-small.responsive {
  font-size: calc(0.95rem + 0.2vw);
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .title-small.responsive {
    font-size: var(--typescale_title-small_size);
  }
}

/* ============================================
   LABEL CLASSES
   ============================================ */

.label-large {
  font-family: var(--font-headline);
  font-size: var(--typescale_label-large_size);
  line-height: var(--typescale_label-large_height);
  font-weight: var(--typescale_label-large_weight);
}

.label-large.responsive {
  font-size: calc(0.95rem + 0.15vw);
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .label-large.responsive {
    font-size: var(--typescale_label-large_size);
  }
}

.label-medium {
  font-family: var(--font-headline);
  font-size: var(--typescale_label-medium_size);
  line-height: var(--typescale_label-medium_height);
  font-weight: var(--typescale_label-medium_weight);
}

.label-medium.responsive {
  font-size: calc(0.85rem + 0.1vw);
  line-height: 1.3;
}

@media (min-width: 1200px) {
  .label-medium.responsive {
    font-size: var(--typescale_label-medium_size);
  }
}

.label-small {
  font-family: var(--font-headline);
  font-size: var(--typescale_label-small_size);
  line-height: var(--typescale_label-small_height);
  font-weight: var(--typescale_label-small_weight);
}

.label-small.responsive {
  font-size: calc(0.75rem + 0.08vw);
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .label-small.responsive {
    font-size: var(--typescale_label-small_size);
  }
}

/* ============================================
   BODY CLASSES
   ============================================ */

.body-large {
  font-size: var(--typescale_body-large_size);
  line-height: var(--typescale_body-large_height);
  font-weight: var(--typescale_body-large_weight);
}

.body-large.responsive {
  font-size: calc(1rem + 0.2vw);
  line-height: 1.5;
}

@media (min-width: 1200px) {
  .body-large.responsive {
    font-size: var(--typescale_body-large_size);
  }
}

.body-medium {
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  font-weight: var(--typescale_body-medium_weight);
}

.body-medium.responsive {
  font-size: calc(0.95rem + 0.1vw);
  line-height: 1.4;
}

@media (min-width: 1200px) {
  .body-medium.responsive {
    font-size: var(--typescale_body-medium_size);
  }
}

.body-small {
  font-size: var(--typescale_body-small_size);
  line-height: var(--typescale_body-small_height);
  font-weight: var(--typescale_body-small_weight);
}

.body-small.responsive {
  font-size: calc(0.85rem + 0.05vw);
  line-height: 1.3;
}

@media (min-width: 1200px) {
  .body-small.responsive {
    font-size: var(--typescale_body-small_size);
  }
}

/* ========== base\utilities.css ========== */
/**
 * FINDBORG UI - UTILITY CLASSES
 * Common helper classes
 * 
 * File: src/styles/findborg-ui/base/utilities.css
 */

/* ============================================
   SPACING UTILITIES - Padding
   ============================================ */

.p-0 { padding: var(--space-0); }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

/* Padding X (left and right) */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* Padding Y (top and bottom) */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.py-5xl { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }
.py-6xl { padding-top: var(--space-6xl); padding-bottom: var(--space-6xl); }

/* Padding X (left and right) - Extended */
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }

/* Padding - All sides extended */
.p-3xl { padding: var(--space-3xl); }
.p-4xl { padding: var(--space-4xl); }
.p-5xl { padding: var(--space-5xl); }
.p-6xl { padding: var(--space-6xl); }

/* Padding Top */
.pt-0 { padding-top: var(--space-0); }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }
.pt-4xl { padding-top: var(--space-4xl); }

/* Padding Bottom */
.pb-0 { padding-bottom: var(--space-0); }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }
.pb-4xl { padding-bottom: var(--space-4xl); }

/* Padding Left */
.pl-0 { padding-left: var(--space-0); }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }

/* Padding Right */
.pr-0 { padding-right: var(--space-0); }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }

/* ============================================
   SPACING UTILITIES - Margin
   ============================================ */

.m-0 { margin: var(--space-0); }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }

/* Margin X (left and right) */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

/* Margin Left */
.ml-0 { margin-left: var(--space-0); }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }

/* Margin Right */
.mr-0 { margin-right: var(--space-0); }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }

/* Margin Y (top and bottom) */
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

/* Margin Top */
.mt-0 { margin-top: var(--space-0); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mt-4xl { margin-top: var(--space-4xl); }

/* Margin Bottom */
.mb-0 { margin-bottom: var(--space-0); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mb-4xl { margin-bottom: var(--space-4xl); }

/* Margin X (left and right) - Extended */
.mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }

/* Margin Y (top and bottom) - Extended */
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Font sizes */
.text-xs { font-size: var(--typescale_label-small_size); }
.text-sm { font-size: var(--typescale_body-small_size); }
.text-md { font-size: var(--typescale_body-medium_size); }
.text-lg { font-size: var(--typescale_body-large_size); }
.text-xl { font-size: var(--typescale_title-large_size); }
.text-2xl { font-size: 1.5rem; }      /* 24px - Large headings, icons */
.text-3xl { font-size: 2rem; }        /* 32px - Major headings, large icons */
.text-4xl { font-size: 2.5rem; }      /* 40px - Hero text, extra large icons */
.text-5xl { font-size: 3rem; }        /* 48px - Display text */

/* Font weights */
.text-normal { font-weight: 400; }
.text-medium { font-weight: 500; }
.text-semibold { font-weight: 600; }
.text-bold { font-weight: 700; }

/* Text colors - Semantic */
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-white { color: var(--neutral-0); }

/* Text colors - On colored backgrounds (inheritable) */
.text-on-primary { color: var(--neutral-0); }
.text-on-primary h1, .text-on-primary h2, .text-on-primary h3,
.text-on-primary h4, .text-on-primary h5, .text-on-primary h6,
.text-on-primary p, .text-on-primary span { color: inherit; }

/* Text colors - Brand */
.text-brand-1 { color: var(--brand-1-5); }
.text-brand-2 { color: var(--brand-2-5); }
.text-brand-3 { color: var(--brand-3-5); }
.text-brand-4 { color: var(--brand-4-5); }
.text-brand-5 { color: var(--brand-5-5); }

/* Text transforms */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* Text styles */
.italic { font-style: italic; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

/* Semantic backgrounds */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--neutral-0); }
.bg-surface { background-color: var(--color-surface); }
.bg-primary { background-color: var(--color-primary); }

/* Brand backgrounds - Base (5) */
.bg-brand-1 { background-color: var(--brand-1-5); }
.bg-brand-2 { background-color: var(--brand-2-5); }
.bg-brand-3 { background-color: var(--brand-3-5); }
.bg-brand-4 { background-color: var(--brand-4-5); }
.bg-brand-5 { background-color: var(--brand-5-5); }

/* Brand backgrounds - Light (2) - for soft colored surfaces */
.bg-brand-1-light { background-color: var(--brand-1-2); }
.bg-brand-2-light { background-color: var(--brand-2-2); }
.bg-brand-3-light { background-color: var(--brand-3-2); }
.bg-brand-4-light { background-color: var(--brand-4-2); }
.bg-brand-5-light { background-color: var(--brand-5-2); }

/* ============================================
   BORDER UTILITIES
   ============================================ */

.border { border: 1px solid var(--color-border); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================
   SHADOW UTILITIES
   ============================================ */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ============================================
   INTERACTION UTILITIES
   ============================================ */

.pointer { cursor: pointer; }
.not-allowed { cursor: not-allowed; }

.select-none { user-select: none; }
.select-text { user-select: text; }

.transition { transition: var(--transition-base); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

.visible { visibility: visible; }
.invisible { visibility: hidden; }

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ============================================
   SCROLLBAR - HIDDEN UNTIL HOVER
   Apply: .scroll-on-hover
   ============================================ */

.scroll-on-hover {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.scroll-on-hover::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

.scroll-on-hover::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 9999px;
  transition: background 0.2s;
}

/* Show on hover */
.scroll-on-hover:hover {
  scrollbar-width: thin; /* Firefox */
}

.scroll-on-hover:hover::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

.scroll-on-hover:hover::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Horizontal variant */
.scroll-x-on-hover {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-x-on-hover::-webkit-scrollbar {
  height: 8px;
  background: transparent;
}

.scroll-x-on-hover::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 9999px;
}

.scroll-x-on-hover:hover {
  scrollbar-width: thin;
}

.scroll-x-on-hover:hover::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }

/* ============================================
   MAX-WIDTH UTILITIES
   Constrain content width within sections
   ============================================ */

.max-w-xs { max-width: 25rem; }     /* 400px - Very narrow content */
.max-w-sm { max-width: 31.25rem; }  /* 500px - Narrow content */
.max-w-md { max-width: 37.5rem; }   /* 600px - Comfortable reading width */
.max-w-lg { max-width: 43.75rem; }  /* 700px - Standard content */
.max-w-xl { max-width: 50rem; }     /* 800px - Wide content */
.max-w-2xl { max-width: 56.25rem; } /* 900px - Very wide content */
.max-w-3xl { max-width: 62.5rem; }  /* 1000px - Extra wide */

/* Max-width with auto margins (centered content blocks) */
.max-w-xs.mx-auto, .max-w-sm.mx-auto, .max-w-md.mx-auto,
.max-w-lg.mx-auto, .max-w-xl.mx-auto, .max-w-2xl.mx-auto,
.max-w-3xl.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   DISPLAY UTILITIES - EXTENDED
   ============================================ */

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

/* Flex direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.shrink-0 { flex-shrink: 0; }
.grow-0 { flex-grow: 0; }

/* Justify content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Align items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Gap (for flex and grid) */
.gap-0 { gap: var(--space-0); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }

/* ============================================
   LIST UTILITIES
   ============================================ */

.list-none {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* ============================================
   ASPECT RATIO UTILITIES
   Modern aspect-ratio property with fallback
   ============================================ */

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 1) {
  .aspect-square::before {
    content: '';
    display: block;
    padding-bottom: 100%;
  }

  .aspect-video::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */
  }

  .aspect-4-3::before {
    content: '';
    display: block;
    padding-bottom: 75%; /* 3/4 = 0.75 */
  }
}

/* ============================================
   ICON SIZE UTILITIES
   For icons and decorative elements
   ============================================ */

.icon-xs { font-size: 1rem; }      /* 16px - Tiny icons */
.icon-sm { font-size: 1.5rem; }    /* 24px - Small icons */
.icon-md { font-size: 2rem; }      /* 32px - Medium icons */
.icon-lg { font-size: 2.5rem; }    /* 40px - Large icons */
.icon-xl { font-size: 3rem; }      /* 48px - Extra large icons */

/* Icon display helper - makes icon behave like a block with spacing */
.icon-block {
  display: block;
  margin-bottom: var(--space-md);
}

/* ============================================
   OVERFLOW UTILITIES
   ============================================ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ============================================
   POSITION UTILITIES
   ============================================ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   Z-INDEX UTILITIES
   ============================================ */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ============================================
   TEXT DECORATION UTILITIES
   ============================================ */

.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }

/* Icon links - prevents hover underline on icon-only or icon-heavy links */
.icon-link,
a.icon-link:hover {
  text-decoration: none;
}

/* ============================================
   BACKGROUND - SURFACE CONTAINERS
   ============================================ */

.bg-surface-container { background-color: var(--color-surface-container, var(--neutral-100)); }

/* ============================================
   COLOR SWATCH (Style Guide)
   Used in /developers/ color palette pages
   ============================================ */

.fui-color-swatch {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-xs);
}

.fui-color-swatch--semantic {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

/* ========== components\button.css ========== */
/**
 * FINDBORG UI - BUTTON STYLES
 * Global styles - works with Qwik components AND WordPress content
 * 
 * File: src/styles/findborg-ui/components/button.css
 */

/* Base button styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-headline);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background var(--speed-2) ease,
              transform var(--speed-1) ease,
              box-shadow var(--speed-2) ease,
              border-color var(--speed-2) ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;

  /* Default to medium size if no size class is specified */
  min-height: 2.5rem; /* 40px */
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--typescale_label-medium_size);
  line-height: var(--typescale_label-medium_height);
}

.button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ============================================
   SIZES
   Material Design 3 standard button heights:
   - Small: 32px
   - Medium: 40px (default)
   - Large: 48px
   ============================================ */

.button-sm {
  min-height: 2rem; /* 32px */
  padding: var(--space-xs) var(--space-md);
  font-size: var(--typescale_label-small_size);
  line-height: var(--typescale_label-small_height);
  border-radius: var(--radius-lg);
}

.button-md {
  min-height: 2.5rem; /* 40px */
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--typescale_label-medium_size);
  line-height: var(--typescale_label-medium_height);
}

.button-lg {
  min-height: 3rem; /* 48px */
  padding: var(--space-md) var(--space-xl);
  font-size: var(--typescale_label-large_size);
  line-height: var(--typescale_label-large_height);
}

/* ============================================
   VARIANTS
   ============================================ */

/* Primary */
.button-primary {
  background: var(--color-primary);
  color: var(--neutral-0);
}

.button-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.button-primary:active:not(:disabled) {
  background: var(--color-primary-active);
  transform: scale(0.98);
}

/* Secondary */
.button-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.button-secondary:hover:not(:disabled) {
  background: var(--color-hover);
  border-color: var(--color-primary);
}

.button-secondary:active:not(:disabled) {
  background: var(--color-active);
  transform: scale(0.98);
}

/* Outline */
.button-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.button-outline:hover:not(:disabled) {
  background: var(--color-primary);
  color: var(--neutral-0);
}

.button-outline:active:not(:disabled) {
  transform: scale(0.98);
}

/* Ghost */
.button-ghost {
  background: transparent;
  color: var(--color-text);
}

.button-ghost:hover:not(:disabled) {
  background: var(--color-hover);
}

.button-ghost:active:not(:disabled) {
  background: var(--color-active);
  transform: scale(0.98);
}

/* Text */
.button-text {
  background: transparent;
  color: var(--color-primary);
  padding: var(--space-xs) var(--space-sm);
}

.button-text:hover:not(:disabled) {
  text-decoration: underline;
}

.button-text:active:not(:disabled) {
  opacity: 0.8;
}

/* ========== components\card.css ========== */
/**
 * FINDBORG UI - CARD STYLES
 * Global styles - works with Qwik components AND WordPress content
 * 
 * File: src/styles/findborg-ui/components/card.css
 */

/* Base card styles */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

/* ============================================
   VARIANTS
   ============================================ */

/* Default - subtle background */
.card-default {
  background: var(--color-surface);
}

/* Outlined - border with transparent background */
.card-outlined {
  background: transparent;
  border: 1px solid var(--color-border);
}

/* Elevated - shadow for depth */
.card-elevated {
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.card-elevated:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ============================================
   PADDING VARIANTS
   ============================================ */

.card-padding-sm {
  padding: var(--space-sm);
}

.card-padding-md {
  padding: var(--space-lg);
}

.card-padding-lg {
  padding: var(--space-xl);
}

/* ============================================
   CARD HEADER/BODY/FOOTER
   Optional sub-components
   ============================================ */

.card-header {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.card-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  font-weight: 500;
  color: var(--color-text);
}

.card-subtitle {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-subtle);
}

.card-body {
  /* Default spacing, can be overridden */
}

.card-footer {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ========== components\search-box.css ========== */
/**
 * FINDBORG UI - SEARCH BOX STYLES
 * Global styles - works with Qwik components AND WordPress content
 * 
 * File: src/styles/findborg-ui/components/search-box.css
 */

/* Base search box */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-2xl);
  transition: var(--transition-base);
  width: 100%;
  max-width: 600px;
}

.search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ============================================
   SIZES
   ============================================ */

.search-box-sm {
  padding: var(--space-xs) var(--space-md);
}

.search-box-md {
  padding: var(--space-sm) var(--space-lg);
}

.search-box-lg {
  padding: var(--space-md) var(--space-xl);
}

/* ============================================
   SEARCH ICON
   ============================================ */

.search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ============================================
   SEARCH INPUT
   ============================================ */

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--typescale_body-large_size);
  font-family: var(--font-body);
  color: var(--color-text);
  padding: 0;
  min-width: 0;
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

/* Remove default search input styling */
.search-input::-webkit-search-cancel-button {
  display: none;
}

/* ============================================
   CLEAR BUTTON
   ============================================ */

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.search-clear:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */

.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  border: none;
  background: var(--color-primary);
  color: var(--neutral-0);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.search-submit:hover {
  background: var(--color-primary-hover);
}

.search-submit:active {
  background: var(--color-primary-active);
  transform: scale(0.95);
}

/* ========== components\menu.css ========== */
/**
 * FINDBORG UI - MENU / DROPDOWN STYLES
 * Global styles - works with Qwik components AND WordPress content
 * Beer CSS inspired - uses "active" class to toggle
 * 
 * File: src/styles/findborg-ui/components/menu.css
 */

/* ============================================
   BASE MENU STYLES
   ============================================ */

menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================
   DROPDOWN CONTAINER
   ============================================ */

.dropdown {
  position: relative;
  display: inline-block;
}

/* ============================================
   DROPDOWN TRIGGER (Button/Link)
   ============================================ */

.dropdown > button,
.dropdown > a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-headline);
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  text-decoration: none;
}

.dropdown > button:hover,
.dropdown > a:hover {
  background: var(--color-hover);
}

/* ============================================
   DROPDOWN MENU (Hidden by default)
   ============================================ */

.dropdown > menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-xs);
  min-width: 200px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-xs);
  z-index: var(--z-dropdown);
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-fast);
}

/* Show menu when active */
.dropdown.active > menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================
   DROPDOWN MENU ITEMS
   ============================================ */

.dropdown > menu > li {
  list-style: none;
}

.dropdown > menu > li > a,
.dropdown > menu > li > button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  text-decoration: none;
}

.dropdown > menu > li > a:hover,
.dropdown > menu > li > button:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

/* Divider */
.dropdown > menu > li.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) 0;
}

/* ============================================
   DROPDOWN ALIGNMENT VARIANTS
   ============================================ */

/* Right aligned dropdown */
.dropdown.right > menu {
  left: auto;
  right: 0;
}

/* Center aligned dropdown */
.dropdown.center > menu {
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
}

.dropdown.center.active > menu {
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   MEGA MENU (Optional - for complex navs)
   ============================================ */

.dropdown.mega > menu {
  min-width: 600px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg);
}

.dropdown.mega > menu > li {
  min-width: 0;
}

@media (max-width: 768px) {
  .dropdown.mega > menu {
    grid-template-columns: 1fr;
  }
}

/* ========== components\tabs.css ========== */
/**
 * FINDBORG UI - TABS COMPONENT
 * Navigation tabs with active indicators
 * 
 * File: src/styles/findborg-ui/components/tabs.css
 */

/* ============================================
   TABS CONTAINER
   ============================================ */

.fui-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

/* Scrollable tabs */
.fui-tabs.scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.fui-tabs.scrollable::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* No border variant */
.fui-tabs.borderless {
  border-bottom: none;
}

/* Centered tabs */
.fui-tabs.centered {
  justify-content: center;
}

/* Full width tabs */
.fui-tabs.full-width .fui-tab {
  flex: 1;
  justify-content: center;
}

/* ============================================
   INDIVIDUAL TAB
   ============================================ */

.fui-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--typescale_label-large_size);
  font-weight: 500;
  color: var(--color-text-subtle);
  text-decoration: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* Overlap container border */
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast);
  position: relative;
}

.fui-tab:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

/* Active state */
.fui-tab.active,
.fui-tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.fui-tab.active:hover,
.fui-tab[aria-selected="true"]:hover {
  background: transparent;
}

/* Focus state */
.fui-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Disabled state */
.fui-tab:disabled,
.fui-tab.disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   TAB WITH ICON
   ============================================ */

.fui-tab .icon {
  font-size: 1.25em;
}

/* Icon only tab */
.fui-tab.icon-only {
  padding: var(--space-sm);
}

/* ============================================
   TAB WITH BADGE/COUNT
   ============================================ */

.fui-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-size: var(--typescale_label-small_size);
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-left: var(--space-xs);
}

.fui-tab.active .fui-tab-badge {
  background: var(--color-primary);
  color: var(--neutral-0);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

/* Small tabs */
.fui-tabs.sm .fui-tab {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--typescale_label-medium_size);
}

/* Large tabs */
.fui-tabs.lg .fui-tab {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--typescale_title-small_size);
}

/* ============================================
   STYLE VARIANTS
   ============================================ */

/* Pill/Segment style */
.fui-tabs.pills {
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  border-bottom: 1px solid var(--color-border);
}

.fui-tabs.pills .fui-tab {
  border-bottom: none;
  border-radius: var(--radius-lg);
  margin-bottom: 0;
}

.fui-tabs.pills .fui-tab.active {
  background: var(--color-primary);
  color: var(--neutral-0);
}

.fui-tabs.pills .fui-tab.active:hover {
  background: var(--color-primary-hover);
}

/* Underline only (minimal) */
.fui-tabs.minimal {
  border-bottom: none;
  gap: var(--space-lg);
}

.fui-tabs.minimal .fui-tab {
  padding: var(--space-sm) 0;
}

/* Boxed/Card style */
.fui-tabs.boxed {
  border-bottom: none;
  gap: 0;
}

.fui-tabs.boxed .fui-tab {
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: 0;
  margin-bottom: 0;
  background: var(--color-surface);
}

.fui-tabs.boxed .fui-tab:first-child {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.fui-tabs.boxed .fui-tab:last-child {
  border-right: 1px solid var(--color-border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.fui-tabs.boxed .fui-tab.active {
  background: var(--color-primary);
  color: var(--neutral-0);
  border-color: var(--color-primary);
}

/* ============================================
   TAB PANELS
   ============================================ */

.fui-tab-panels {
  margin-top: var(--space-lg);
}

.fui-tab-panel {
  display: none;
}

.fui-tab-panel.active,
.fui-tab-panel[aria-hidden="false"] {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-tab-badge {
    background: var(--neutral-700);
  }
  
  .fui-tabs.pills {
    background: var(--color-surface);
  }
}

body.dark .fui-tab-badge {
  background: var(--neutral-700);
}

body.dark .fui-tabs.pills {
  background: var(--color-surface);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .fui-tabs {
    gap: 0;
  }
  
  .fui-tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--typescale_label-medium_size);
  }
  
  .fui-tabs.lg .fui-tab {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--typescale_label-large_size);
  }
}

@media (max-width: 480px) {
  .fui-tab {
    padding: var(--space-xs) var(--space-sm);
  }
  
  .fui-tab-badge {
    display: none;
  }
}

/* ========== components\icon-button.css ========== */
/**
 * FINDBORG UI - ICON BUTTON
 * 
 * File: src/styles/findborg-ui/components/icon-button.css
 */

.fui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.fui-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   SIZES
   ============================================ */

.fui-icon-btn--sm {
  width: 28px;
  height: 28px;
}

.fui-icon-btn--md {
  width: 36px;
  height: 36px;
}

.fui-icon-btn--lg {
  width: 44px;
  height: 44px;
}

/* ============================================
   VARIANTS
   ============================================ */

/* Default */
.fui-icon-btn--default {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.fui-icon-btn--default:hover:not(:disabled) {
  background: var(--color-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Primary */
.fui-icon-btn--primary {
  background: var(--color-primary);
  color: var(--neutral-0);
}

.fui-icon-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  transform: scale(1.05);
}

.fui-icon-btn--primary:active:not(:disabled) {
  transform: scale(0.95);
}

/* Ghost */
.fui-icon-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.fui-icon-btn--ghost:hover:not(:disabled) {
  background: var(--color-hover);
  color: var(--color-text);
}

/* Danger */
.fui-icon-btn--danger {
  background: transparent;
  color: var(--color-text-muted);
}

.fui-icon-btn--danger:hover:not(:disabled) {
  background: var(--color-error);
  color: var(--neutral-0);
}

/* ========== components\chip.css ========== */
/**
 * FINDBORG UI - CHIP
 * 
 * File: src/styles/findborg-ui/components/chip.css
 */

.fui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.fui-chip:hover {
  background: var(--color-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.fui-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--neutral-0);
}

.fui-chip--active:hover {
  background: var(--color-primary-hover);
  color: var(--neutral-0);
}

/* ============================================
   SIZES
   ============================================ */

.fui-chip--sm {
  font-size: var(--typescale_label-small_size);
  padding: var(--space-xs) var(--space-xs);
}

.fui-chip--md {
  font-size: var(--typescale_label-medium_size);
}

/* ============================================
   CONTEXTUAL (blue — dig deeper keywords)
   ============================================ */

.fui-chip--contextual {
  border-color: var(--brand-1-2, #c0d8f0);
  background: var(--brand-1-0, #eef4fb);
  color: var(--brand-1, #1a73e8);
}

.fui-chip--contextual:hover {
  border-color: var(--brand-1, #1a73e8);
  background: var(--brand-1-1, #d4e4f7);
  color: var(--brand-1, #1a73e8);
}

@media (prefers-color-scheme: dark) {
  .fui-chip--contextual {
    background: color-mix(in oklch, var(--brand-1) 12%, var(--color-surface));
    border-color: color-mix(in oklch, var(--brand-1) 30%, var(--color-border));
    color: var(--brand-1-3, #7ab3e8);
  }

  .fui-chip--contextual:hover {
    background: color-mix(in oklch, var(--brand-1) 20%, var(--color-surface));
    border-color: var(--brand-1-3, #7ab3e8);
  }
}

body.dark .fui-chip--contextual {
  background: color-mix(in oklch, var(--brand-1) 12%, var(--color-surface));
  border-color: color-mix(in oklch, var(--brand-1) 30%, var(--color-border));
  color: var(--brand-1-3, #7ab3e8);
}

body.dark .fui-chip--contextual:hover {
  background: color-mix(in oklch, var(--brand-1) 20%, var(--color-surface));
  border-color: var(--brand-1-3, #7ab3e8);
}

/* ============================================
   ANIMATED ENTRANCE (optional class)
   ============================================ */

.fui-chip--animated {
  animation: chipSlideIn 0.2s ease-out backwards;
}

@keyframes chipSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== components\bottom-sheet.css ========== */
/**
 * FINDBORG UI - BOTTOM SHEET
 * 
 * File: src/styles/findborg-ui/components/bottom-sheet.css
 */

/* ============================================
   BACKDROP
   ============================================ */

.fui-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-base);
  z-index: 999;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.fui-sheet-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   SHEET
   ============================================ */

.fui-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-background);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 1000;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fui-bottom-sheet.is-open {
  transform: translateY(0);
}

/* ============================================
   HANDLE
   ============================================ */

.fui-sheet-handle {
  display: flex;
  justify-content: center;
  padding: var(--space-md);
  cursor: pointer;
  flex-shrink: 0;
}

.fui-handle-bar {
  width: 40px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.fui-sheet-handle:hover .fui-handle-bar {
  background: var(--color-text-muted);
}

/* ============================================
   CONTENT
   ============================================ */

.fui-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-lg) var(--space-2xl);
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-bottom-sheet {
    background: var(--color-surface);
  }
}

body.dark .fui-bottom-sheet {
  background: var(--color-surface);
}

/* ========== components\smart-search.css ========== */
/**
 * FINDBORG UI - SMART SEARCH
 * 
 * File: src/styles/findborg-ui/components/smart-search.css
 */

/* ============================================
   CONTAINER
   ============================================ */

.fui-smart-search {
  width: 100%;
}

/* ============================================
   DESKTOP FORM
   ============================================ */

.smart-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 760px; /* Match main content column */
  margin: 0 auto;
}

.smart-search-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.smart-search-input-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md), 0 0 0 3px rgba(48, 106, 192, 0.1);
}

.smart-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.smart-search-input-row:focus-within .smart-search-icon {
  color: var(--color-primary);
}

.smart-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--typescale_body-large_size);
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  padding: var(--space-xs) 0;
}

.smart-search-input::placeholder {
  color: var(--color-text-muted);
}

.smart-search-input::-webkit-search-cancel-button {
  display: none;
}

/* ============================================
   TOOLBAR
   ============================================ */

.smart-search-toolbar {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-xs) 0;
}

.chip-label {
  display: none;
}

@media (min-width: 600px) {
  .chip-label {
    display: inline;
  }
}

/* ============================================
   MOBILE TRIGGER
   ============================================ */

.smart-search-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  box-shadow: var(--shadow-md);
}

.smart-search-trigger:hover {
  border-color: var(--color-primary);
}

.trigger-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.trigger-text {
  flex: 1;
  font-size: var(--typescale_body-large_size);
  font-family: var(--font-body);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   SHEET CONTENT
   ============================================ */

.sheet-search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.sheet-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.sheet-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.sheet-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.sheet-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--typescale_body-large_size);
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  padding: var(--space-xs) 0;
}

.sheet-input::placeholder {
  color: var(--color-text-muted);
}

.sheet-input::-webkit-search-cancel-button {
  display: none;
}

.sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .smart-search-input-row,
  .smart-search-trigger {
    background: var(--color-surface);
    border-color: var(--neutral-700);
  }
  
  .sheet-input-wrapper {
    background: var(--color-background);
    border-color: var(--neutral-700);
  }
}

body.dark .smart-search-input-row,
body.dark .smart-search-trigger {
  background: var(--color-surface);
  border-color: var(--neutral-700);
}

body.dark .sheet-input-wrapper {
  background: var(--color-background);
  border-color: var(--neutral-700);
}

/* ========== components\app-bar.css ========== */
/**
 * FINDBORG UI - APP BAR / HEADER
 * Top navigation bar styles
 * 
 * File: src/styles/findborg-ui/components/app-bar.css
 */

/* ============================================
   BASE APP BAR
   ============================================ */

.fui-app-bar {
  width: 100%;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-sticky);
}

.fui-app-bar__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-md);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  min-height: 56px;
}

@media (min-width: 768px) {
  .fui-app-bar__inner {
    padding: var(--space-sm) var(--space-lg);
    min-height: 64px;
  }
}

/* ============================================
   VARIANTS
   ============================================ */

/* Transparent - no background */
.fui-app-bar--transparent {
  background: transparent;
  border-bottom: none;
}

/* Elevated - shadow instead of border */
.fui-app-bar--elevated {
  border-bottom: none;
  box-shadow: var(--shadow-sm);
}

/* ============================================
   POSITION VARIANTS
   ============================================ */

.fui-app-bar--sticky {
  position: sticky;
  top: 0;
}

.fui-app-bar--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ============================================
   BRAND / LOGO
   ============================================ */

.fui-app-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-headline);
  font-size: var(--typescale_title-small_size); /* 18px — brand mark sits in a 56–64px bar; title-medium (22px) is too large */
  font-weight: 600;
  flex-shrink: 0;
}

.fui-app-bar__brand:hover {
  text-decoration: none;
  opacity: 0.9;
}

.fui-app-bar__brand i,
.fui-app-bar__brand img,
.fui-app-bar__brand svg {
  height: 28px;
  width: auto;
  display: inline-flex;
  font-size: 28px;
}

@media (min-width: 768px) {
  .fui-app-bar__brand img,
  .fui-app-bar__brand svg {
    height: 32px;
  }
}

/* ============================================
   NAVIGATION
   ============================================ */

.fui-app-bar__nav {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  background: transparent;
  padding: 0;
  border: none;
  border-bottom: none;
}

@media (min-width: 768px) {
  .fui-app-bar__nav {
    display: flex;
  }
}

.fui-app-bar__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--typescale_label-large_size);
  font-weight: 500;
  color: var(--color-text-subtle);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.fui-app-bar__link:hover {
  color: var(--color-primary);
  background: transparent;
  text-decoration: none;
}

.fui-app-bar__link.active {
  color: var(--color-primary);
}

/* ============================================
   ACTIONS (right side)
   ============================================ */

.fui-app-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================
   SPACER (flex grow)
   ============================================ */

.fui-app-bar__spacer {
  flex: 1 1 auto;
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-app-bar {
    background: var(--color-background);
    border-color: var(--color-border);
  }
  
  .fui-app-bar--elevated {
    box-shadow: var(--shadow-md);
  }
}

body.dark .fui-app-bar {
  background: var(--color-background);
  border-color: var(--color-border);
}

body.dark .fui-app-bar--elevated {
  box-shadow: var(--shadow-md);
}

/* ========== components\dialog.css ========== */
/**
 * FINDBORG UI - DIALOG / MODAL
 * Position variants: center, left, right, top, bottom, fullpage
 * 
 * File: src/styles/findborg-ui/components/dialog.css
 */

/* ============================================
   BASE DIALOG
   ============================================ */

.fui-dialog {
  position: fixed;
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.fui-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: all 0.3s ease;
}

.fui-dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.fui-dialog__container {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  max-height: 100%;
}

/* ============================================
   CENTER POSITION (Default Modal)
   ============================================ */

.fui-dialog--center {
  /* Only set layout properties, NOT display */
  align-items: center;
  justify-content: center;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* Apply display:flex only when open */
.fui-dialog--center[open] {
  display: flex;
}

.fui-dialog--center .fui-dialog__container {
  transform: scale(0.95) translateY(10px);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--center[open] .fui-dialog__container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Center size variants */
.fui-dialog--sm .fui-dialog__container {
  width: 340px;
  max-width: calc(100vw - var(--space-lg) * 2);
}

.fui-dialog--md .fui-dialog__container {
  width: 480px;
  max-width: calc(100vw - var(--space-lg) * 2);
}

.fui-dialog--lg .fui-dialog__container {
  width: 640px;
  max-width: calc(100vw - var(--space-lg) * 2);
}

.fui-dialog--xl .fui-dialog__container {
  width: 800px;
  max-width: calc(100vw - var(--space-lg) * 2);
}

.fui-dialog--full .fui-dialog__container {
  width: calc(100vw - var(--space-lg) * 2);
  height: calc(100vh - var(--space-lg) * 2);
}

/* ============================================
   FULLPAGE POSITION
   ============================================ */

.fui-dialog--fullpage {
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.fui-dialog--fullpage[open] {
  display: flex;
}

.fui-dialog--fullpage .fui-dialog__container {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transform: scale(0.98);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--fullpage[open] .fui-dialog__container {
  transform: scale(1);
  opacity: 1;
}

.fui-dialog--fullpage::backdrop {
  background: transparent;
  backdrop-filter: none;
}

/* ============================================
   LEFT POSITION (Drawer)
   ============================================ */

.fui-dialog--left {
  justify-content: flex-start;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.fui-dialog--left[open] {
  display: flex;
}

.fui-dialog--left .fui-dialog__container {
  width: 320px;
  max-width: 85vw;
  height: 100%;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--left[open] .fui-dialog__container {
  transform: translateX(0);
}

/* ============================================
   RIGHT POSITION (Drawer)
   ============================================ */

.fui-dialog--right {
  justify-content: flex-end;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.fui-dialog--right[open] {
  display: flex;
}

.fui-dialog--right .fui-dialog__container {
  width: 320px;
  max-width: 85vw;
  height: 100%;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--right[open] .fui-dialog__container {
  transform: translateX(0);
}

/* ============================================
   TOP POSITION (Dropdown Sheet)
   ============================================ */

.fui-dialog--top {
  align-items: flex-start;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.fui-dialog--top[open] {
  display: flex;
}

.fui-dialog--top .fui-dialog__container {
  width: 100%;
  max-height: 80vh;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--top[open] .fui-dialog__container {
  transform: translateY(0);
}

/* ============================================
   BOTTOM POSITION (Bottom Sheet)
   ============================================ */

.fui-dialog--bottom {
  align-items: flex-end;
  margin: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.fui-dialog--bottom[open] {
  display: flex;
}

.fui-dialog--bottom .fui-dialog__container {
  width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.fui-dialog--bottom[open] .fui-dialog__container {
  transform: translateY(0);
}

/* ============================================
   DIALOG HEADER
   ============================================ */

.fui-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.fui-dialog__header h1,
.fui-dialog__header h2,
.fui-dialog__header h3 {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  font-weight: 600;
  color: var(--color-text);
}

/* ============================================
   DIALOG CONTENT
   ============================================ */

.fui-dialog__content {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ============================================
   DIALOG FOOTER
   ============================================ */

.fui-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ============================================
   TRIGGER BUTTON
   ============================================ */

.fui-dialog-trigger {
  /* Inherits from context - no default styling */
  cursor: pointer;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */

.fui-dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.fui-dialog-close:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-dialog__container {
    background: var(--color-surface);
  }
  
  .fui-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0.7);
  }
}

body.dark .fui-dialog__container {
  background: var(--color-surface);
}

body.dark .fui-dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  /* Center dialogs become larger on mobile */
  .fui-dialog--center .fui-dialog__container {
    max-width: calc(100vw - var(--space-md) * 2);
    max-height: calc(100vh - var(--space-md) * 2);
  }
  
  .fui-dialog--sm .fui-dialog__container,
  .fui-dialog--md .fui-dialog__container {
    width: calc(100vw - var(--space-md) * 2);
  }
  
  /* Side drawers become wider on mobile */
  .fui-dialog--left .fui-dialog__container,
  .fui-dialog--right .fui-dialog__container {
    width: 280px;
  }
}

@media (max-width: 480px) {
  /* Side drawers become full width on small screens */
  .fui-dialog--left .fui-dialog__container,
  .fui-dialog--right .fui-dialog__container {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .fui-dialog__container,
  .fui-dialog::backdrop {
    transition: none;
  }
}

/* ========== components\Workspace.css ========== */
/**
 * FINDBORG UI - WORKSPACE COMPONENTS
 * Right-side panel for result details, previews, and actions
 * 
 * File: src/styles/findborg-ui/components/Workspace.css
 */

/* ============================================
   SHARED WORKSPACE STYLES
   ============================================ */
.workspace-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background);
  overflow: hidden;
}

.workspace-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.workspace-header__label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_label-small_size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.workspace-header__label--primary {
  color: var(--brand-1);
}

.workspace-header__title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.workspace-header__desc {
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.workspace-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.workspace-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: auto;
}

/* ============================================
   ANIMATE IN
   ============================================ */

.workspace-animate-in {
  animation: workspaceSlideIn 0.25s ease-out;
}

@keyframes workspaceSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   AI RIBBON WORKSPACE
   ============================================ */

.workspace-ai {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-background);
}

/* ============================================
   PREVIEW WORKSPACE
   ============================================ */

.workspace-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Source Info Deck */
.workspace-preview__deck {
  padding: var(--space-md);
  width: 100%;
}

.workspace-preview__description {
  font-size: var(--typescale_body-large_size);
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  border-left: 3px solid var(--brand-1);
  padding-left: var(--space-md);
}

.workspace-preview__url {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-surface);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
  max-width: 100%;
  overflow: hidden;
}

.workspace-preview__url span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-preview__thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-lg) 0;
}

.workspace-preview__thumbnail img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: contain;
}

.workspace-preview__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.workspace-preview__actions .button {
  flex: 1;
}

.workspace-preview__note {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--typescale_body-small_size);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Iframe View */
.workspace-preview__iframe-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.workspace-preview__iframe-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.workspace-preview__iframe-bar span {
  flex: 1;
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-preview__frame {
  width: 100%;
  flex: 1;
  border: none;
  background: var(--color-background);
}

/* ============================================
   VIDEO WORKSPACE
   ============================================ */

.workspace-video {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
}

.workspace-video__theater {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--neutral-900);
  flex-shrink: 0;
}

.workspace-video__frame {
  width: 100%;
  height: 100%;
  border: none;
}

.workspace-video__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  color: var(--neutral-400);
}

.workspace-video__placeholder i {
  font-size: 3rem;
}

.workspace-video__info {
  padding: var(--space-md);
  flex: 1;
  overflow-y: auto;
}

.workspace-video__title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}

.workspace-video__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.workspace-video__channel {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  color: var(--color-text-subtle);
}

.workspace-video__description {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.workspace-video__description-label {
  display: block;
  font-size: var(--typescale_label-small_size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.workspace-video__description-text {
  font-size: var(--typescale_body-medium_size);
  line-height: 1.6;
  color: var(--color-text-subtle);
  margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .workspace-header {
    padding: var(--space-lg);
  }
  
  .workspace-preview__deck {
    padding: var(--space-lg);
  }
  
  .workspace-video__info {
    padding: var(--space-lg);
  }
  
  .workspace-preview__actions {
    flex-direction: column;
  }
  
  .workspace-preview__actions .fui-icon-btn {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .workspace-video__theater {
    background: var(--neutral-900);
  }
}

body.dark .workspace-video__theater {
  background: var(--neutral-900);
}

/* ============================================
   WORKSPACE TOOLBAR
   ============================================ */

.workspace-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ============================================
   RESEARCH MODE (WorkspaceContent)
   ============================================ */

.workspace-research {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.workspace-research__header {
  flex-shrink: 0;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.workspace-research__header .workspace-toolbar {
  margin-top: 0;
}

.workspace-research__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

/* Iframe Container */
.workspace-research__iframe-container {
  height: 70vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-background);
}

.workspace-research__frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Summary View */
.workspace-research__summary {
  max-width: 100%;
}

.workspace-research__snippet {
  font-size: var(--typescale_body-large_size);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

/* AI Research Note */
.workspace-research__note {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.workspace-research__note > i,
.workspace-research__note > span:first-child {
  color: var(--brand-1);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.workspace-research__note-title {
  display: block;
  font-size: var(--typescale_label-medium_size);
  font-weight: 600;
  color: var(--color-text);
}

.workspace-research__note-text {
  display: block;
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ============================================
   WORKSPACE CONTENT (Main Component)
   Used inside .workspace-scroll-area
   NO height constraints - let parent scroll
   ============================================ */

/* Video Mode */
.workspace-video-root {
  /* No height - flows naturally in scroll area */
}

.workspace-video-theater {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  border-radius: var(--radius-lg);
  background: var(--neutral-900);
  overflow: hidden;
}

.workspace-video-theater iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.workspace-video-info {
  padding-top: var(--space-lg);
}

/* Research Mode */
.workspace-research-root {
  /* No height - flows naturally in scroll area */
}

.workspace-research-root .workspace-toolbar {
  margin-top: 0; /* No top margin when at root level */
}

.workspace-research-content {
  margin-top: var(--space-lg);
}

/* Iframe Container for Live Preview */
.workspace-iframe-container {
  height: 70vh;
  min-height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-background);
}

.workspace-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Summary View */
.workspace-summary {
  max-width: 100%;
}

.workspace-summary .body-large {
  line-height: 1.7;
}

/* Hero Image */
.workspace-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  margin-bottom: var(--space-lg);
}

.workspace-hero-image img {
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: contain;
}

/* Source Title */
.workspace-source-title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-sm) 0;
}

.workspace-source-title a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.workspace-source-title a:hover {
  text-decoration: underline;
}

/* Source Domain */
.workspace-source-domain {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Source Description */
.workspace-source-description {
  font-size: var(--typescale_body-large_size);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--space-lg) 0;
}

/* AI Research Note */
.workspace-ai-note {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.workspace-ai-note > i,
.workspace-ai-note > span:first-child {
  color: var(--brand-1);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.workspace-ai-note > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================
   RESPONSIVE - WorkspaceContent
   ============================================ */

@media (max-width: 768px) {
  .workspace-iframe-container {
    height: 50vh;
    min-height: 300px;
  }
  
  .workspace-toolbar {
    gap: var(--space-xs);
  }
  
  .workspace-hero-image {
    max-height: 200px;
  }
  
  .workspace-source-title {
    font-size: var(--typescale_title-medium_size);
  }
  
  .workspace-source-description {
    font-size: var(--typescale_body-medium_size);
  }
}

/* ============================================
   SHARE SHEET
   Modal for sharing to Hive
   ============================================ */

.share-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  animation: fadeIn 0.2s ease-out;
}

.share-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-background);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-lg);
  z-index: 1101;
  animation: slideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 80vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Desktop: Center modal instead of bottom sheet */
@media (min-width: 769px) {
  .share-sheet {
    bottom: auto;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: calc(100vw - var(--space-xl) * 2);
    border-radius: var(--radius-2xl);
    animation: scaleIn 0.2s ease-out;
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.share-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.share-sheet__title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-medium_size);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.share-sheet__preview {
  margin-bottom: var(--space-lg);
}

.share-preview-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.share-preview-card__label {
  display: block;
  font-size: var(--typescale_label-small_size);
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.share-preview-card__title {
  font-family: var(--font-headline);
  font-size: var(--typescale_body-large_size);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}

.share-preview-card__snippet {
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.share-preview-card__url {
  font-size: var(--typescale_label-small_size);
  color: var(--brand-1);
  word-break: break-all;
}

.share-sheet__actions {
  display: flex;
  gap: var(--space-sm);
}

.share-sheet__note {
  margin-top: var(--space-md);
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
  text-align: center;
}

/* Source Card in Share Sheet */
.share-sheet__source-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

.source-card-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.source-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.source-card-title {
  font-size: var(--typescale_body-medium_size);
  font-weight: 600;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.source-card-url {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
}

/* Form Textarea */
.share-sheet__form {
  margin-bottom: var(--space-md);
}

.share-textarea {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: 1.5;
  color: var(--color-text);
  resize: vertical;
  min-height: 120px;
  transition: var(--transition-fast);
}

.share-textarea:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(48, 106, 192, 0.1);
}

.share-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Error State */
.share-sheet__error {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(185, 20, 18, 0.1);
  border: 1px solid var(--brand-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  color: var(--brand-4);
  font-size: var(--typescale_body-small_size);
}

/* Success State */
.share-sheet__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
}

.success-icon {
  font-size: 3rem;
  color: var(--brand-2);
  margin-bottom: var(--space-md);
}

.share-sheet__success p {
  font-size: var(--typescale_body-large_size);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

/* Button Spinner */
.button-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   CHAT WORKSPACE
   Discussion thread attached to a source
   ============================================ */

/* Mode Switch - Back button when in chat */
.workspace-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.workspace-mode-switch {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.workspace-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Important for flex child scrolling */
}

/* Source Context Bar */
.workspace-chat__context {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.chat-context-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.chat-context-card > i,
.chat-context-card > span:first-child {
  color: var(--brand-1);
  flex-shrink: 0;
}

.chat-context-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-context-card__title {
  font-size: var(--typescale_label-medium_size);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-context-card__url {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Messages Container */
.workspace-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Individual Message */
.chat-message {
  display: flex;
  gap: var(--space-sm);
}

.chat-message--system {
  justify-content: center;
}

.chat-message__system {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
}

/* Avatar */
.chat-message__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.chat-message__avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.avatar-ai {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius: var(--radius-full);
  color: var(--neutral-0);
}

.avatar-placeholder {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--typescale_label-medium_size);
  font-weight: 600;
  color: var(--color-text-subtle);
}

/* Message Body */
.chat-message__body {
  flex: 1;
  min-width: 0;
}

.chat-message__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.chat-message__author {
  font-size: var(--typescale_label-medium_size);
  font-weight: 600;
  color: var(--color-text);
}

.chat-message--ai .chat-message__author {
  color: var(--brand-1);
}

.chat-message__time {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
}

.chat-message__content {
  font-size: var(--typescale_body-medium_size);
  line-height: 1.6;
  color: var(--color-text);
}

.chat-message__content p {
  margin: 0 0 var(--space-sm);
}

.chat-message__content p:last-child {
  margin-bottom: 0;
}

/* AI message styling */
.chat-message--ai .chat-message__content {
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

/* Input Area */
.workspace-chat__input {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-background);
  flex-shrink: 0;
}

.chat-input-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.chat-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-xs) var(--space-md);
  transition: var(--transition-fast);
}

.chat-input-wrapper:focus-within {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(48, 106, 192, 0.1);
}

.chat-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--typescale_body-medium_size);
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  padding: var(--space-xs) 0;
}

.chat-input-wrapper input::placeholder {
  color: var(--color-text-muted);
}

/* Quick Actions */
.chat-quick-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE - Chat & Share
   ============================================ */

@media (max-width: 768px) {
  .workspace-chat__messages {
    padding: var(--space-sm);
  }
  
  .chat-message__avatar {
    width: 32px;
    height: 32px;
  }
  
  .avatar-ai,
  .avatar-placeholder {
    width: 32px;
    height: 32px;
  }
  
  .chat-quick-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-xs);
  }
}

/* ============================================
   IMAGE WORKSPACE
   Dedicated view for image results
   ============================================ */

.workspace-image-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Image Container */
.workspace-image-container {
  position: relative;
  width: 100%;
  max-height: 50vh;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-fast);
  margin: 0 auto;
}

.workspace-image-container:hover {
  border-color: var(--color-primary);
}

.workspace-image-container:hover .workspace-image-zoom-hint {
  opacity: 1;
}

.workspace-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: block;
}

.workspace-image.is-loaded {
  opacity: 1;
}

/* Loading State */
.workspace-image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}

.workspace-image-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Zoom Hint Overlay */
.workspace-image-zoom-hint {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: rgba(0, 0, 0, 0.7);
  color: var(--neutral-0);
  border-radius: var(--radius-full);
  font-size: var(--typescale_label-small_size);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

/* Fallback State */
.workspace-image-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-3xl);
  color: var(--color-text-muted);
}

/* Image Info Section */
.workspace-image-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.workspace-image-title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-medium_size);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
  line-height: 1.3;
}

.workspace-image-description {
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text-subtle);
  line-height: 1.6;
  margin: 0;
}

/* Image Meta Info */
.workspace-image-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.workspace-image-meta .meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-muted);
}

/* Source Card */
.workspace-image-source-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: var(--transition-fast);
  margin-top: var(--space-sm);
}

.workspace-image-source-card:hover {
  border-color: var(--color-primary);
  background: var(--color-hover);
}

.workspace-image-source-card .source-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-image-source-card .source-card-label {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.workspace-image-source-card .source-card-domain {
  font-size: var(--typescale_body-medium_size);
  font-weight: 500;
  color: var(--color-primary);
}

/* ============================================
   IMAGE LIGHTBOX MODAL
   Full-screen image viewer
   ============================================ */

.image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.image-lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.image-lightbox {
  display: flex;
  flex-direction: column;
  width: calc(100vw - var(--space-xl) * 2);
  height: calc(100vh - var(--space-xl) * 2);
  max-width: 1200px;
  max-height: 900px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.image-lightbox-backdrop.is-open .image-lightbox {
  transform: scale(1);
}

/* Lightbox Header */
.image-lightbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.image-lightbox__title {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-medium_size);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin: 0;
}

.image-lightbox__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* Lightbox Content */
.image-lightbox__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-900);
  position: relative;
  overflow: hidden;
}

.image-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-lightbox__image.is-loaded {
  opacity: 1;
}

.image-lightbox__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  color: var(--neutral-400);
}

.image-lightbox__loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--neutral-700);
  border-top-color: var(--neutral-400);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Lightbox Footer */
.image-lightbox__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.image-lightbox__dimensions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-muted);
}

/* ============================================
   RESPONSIVE - Image Workspace & Lightbox
   ============================================ */

@media (max-width: 768px) {
  .workspace-image-container {
    max-height: 40vh;
    min-height: 180px;
  }
  
  .workspace-image {
    max-height: 40vh;
  }
  
  .workspace-image-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* Lightbox fullscreen on mobile */
  .image-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
  
  .image-lightbox__header {
    padding: var(--space-sm) var(--space-md);
  }
  
  .image-lightbox__title {
    font-size: var(--typescale_label-large_size);
  }
  
  .image-lightbox__footer {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
  
  .image-lightbox__footer .button {
    width: 100%;
  }
}

/* ============================================
   DARK MODE - Image Workspace & Lightbox
   ============================================ */

@media (prefers-color-scheme: dark) {
  .workspace-image-container {
    background: var(--neutral-800);
  }
  
  .image-lightbox {
    background: var(--color-surface);
  }
  
  .image-lightbox__content {
    background: var(--neutral-900);
  }
}

body.dark .workspace-image-container {
  background: var(--neutral-800);
}

body.dark .image-lightbox {
  background: var(--color-surface);
}

body.dark .image-lightbox__content {
  background: var(--neutral-900);
}

/* ========== components\trident.css ========== */
/**
 * FINDBORG UI - TRIDENT LOGO
 * Logo mark styles using BorgX design tokens
 * 
 * File: borgx/assets/css/borgx/trident.css
 * 
 * Brand colors from tokens.css:
 * --brand-1: #4285f4 (Blue - Find)
 * --brand-2: #ea8c34 (Orange - Hive/CTAs)
 * --brand-3: #34a853 (Green - Borg)
 * --brand-4: #d93025 (Red - Alerts/Errors)
 */

/* ============================================
   TRIDENT COLOR TOKENS
   ============================================ */

:root {
  --trident-color: var(--brand-1);
  --trident-color-hover: var(--color-primary-hover);
}

@media (prefers-color-scheme: dark) {
  :root {
    --trident-color: var(--brand-1);
    --trident-color-hover: var(--color-primary-hover);
  }
}

body.dark {
  --trident-color: var(--brand-1);
  --trident-color-hover: var(--color-primary-hover);
}

body.light {
  --trident-color: var(--brand-1);
  --trident-color-hover: var(--color-primary-hover);
}

/* ============================================
   TRIDENT BASE STYLES
   ============================================ */

.fui-trident {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--trident-color);
}

.fui-trident svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fui-trident path {
  fill: currentColor;
  transition: fill var(--transition-fast);
}

/* Hover state (interactive contexts) */
a .fui-trident,
button .fui-trident {
  transition: color var(--transition-fast);
}

a:hover .fui-trident,
button:hover .fui-trident {
  color: var(--trident-color-hover);
}

/* ============================================
   SIZE VARIANTS
   ============================================ */

.fui-trident--xs {
  width: 12px;
  height: 16px;
}

.fui-trident--sm {
  width: 18px;
  height: 24px;
}

.fui-trident--md {
  width: 24px;
  height: 32px;
}

.fui-trident--lg {
  width: 36px;
  height: 48px;
}

.fui-trident--xl {
  width: 48px;
  height: 64px;
}

.fui-trident--2xl {
  width: 60px;
  height: 80px;
}

/* ============================================
   COLOR VARIANTS
   Matches logo colors in layout.css
   ============================================ */

/* Find = Blue */
.fui-trident--find {
  color: var(--brand-1);
}

/* Borg = Green */
.fui-trident--borg {
  color: var(--brand-3);
}

/* Hive = Orange */
.fui-trident--hive {
  color: var(--brand-2);
}

/* Alert/Error = Red */
.fui-trident--alert {
  color: var(--brand-4);
}

/* Neutral gray */
.fui-trident--neutral {
  color: var(--neutral-500);
}

/* White/inverted */
.fui-trident--inverted {
  color: var(--neutral-0);
}

/* ========== components\helm.css ========== */
/**
 * FINDBORG UI - HELM
 * Floating glass navigation capsule
 * 
 * The Helm is a context-aware floating navigation bar that appears
 * on scroll to provide orientation and controls. It uses a slot-based
 * layout: anchor-start | content | anchor-end, where each slot can
 * hold any content appropriate to the current page context.
 * 
 * Always renders as a dark glass surface — it exists above the page
 * layer regardless of light/dark theme. Think iOS Dynamic Island:
 * one component, always dark, always floating.
 * 
 * File: src/styles/findborg-ui/components/helm.css
 * 
 * USAGE:
 *   <nav class="fui-helm fui-helm--top fui-helm--horizontal">
 *     <div class="fui-helm__anchor-start">...</div>
 *     <div class="fui-helm__divider"></div>
 *     <div class="fui-helm__content">...</div>
 *     <div class="fui-helm__divider"></div>
 *     <div class="fui-helm__anchor-end">...</div>
 *   </nav>
 * 
 * PROPS (via CSS classes):
 *   Position:    --top (default), --bottom, --left, --right
 *   Orientation: --horizontal (default), --vertical
 *   State:       .is-visible (show), .is-expanded (wider content)
 */


/* ============================================
   HELM DESIGN TOKENS
   Glass-specific values — separate from theme
   ============================================ */

:root {
  /* Glass surface */
  --helm-bg: rgba(10, 15, 26, 0.78);
  --helm-bg-hover: rgba(10, 15, 26, 0.88);
  --helm-blur: 28px;
  --helm-saturate: 1.6;
  
  /* Specular highlights */
  --helm-border: rgba(255, 255, 255, 0.12);
  --helm-shine-top: rgba(255, 255, 255, 0.15);
  --helm-shine-bottom: rgba(255, 255, 255, 0.05);
  --helm-shine-gradient-start: rgba(255, 255, 255, 0.08);
  --helm-shine-gradient-mid: rgba(255, 255, 255, 0.02);
  
  /* Depth shadows */
  --helm-shadow:
    0 8px 40px rgba(0, 0, 0, 0.32),
    0 2px 8px rgba(0, 0, 0, 0.2);
  
  /* Text on glass */
  --helm-text: rgba(255, 255, 255, 0.85);
  --helm-text-muted: rgba(255, 255, 255, 0.45);
  --helm-text-hover: rgba(255, 255, 255, 0.95);
  
  /* Interactive states on glass */
  --helm-item-hover: rgba(255, 255, 255, 0.08);
  --helm-item-active: rgba(255, 255, 255, 0.12);
  --helm-divider: rgba(255, 255, 255, 0.10);
  
  /* Dimensions */
  --helm-height: 48px;
  --helm-touch-target: 44px;
  --helm-inset: 12px;
  --helm-radius: var(--radius-full);
  --helm-item-radius: var(--radius-full);
  
  /* Motion */
  --helm-enter-duration: 0.5s;
  --helm-enter-curve: cubic-bezier(0.34, 1.56, 0.64, 1);
  --helm-fade-duration: 0.35s;
  
  /* Z-index — above page content, below modals */
  --helm-z: 900;
}


/* ============================================
   BASE HELM
   The glass container itself
   ============================================ */

.fui-helm {
  display: flex;
  align-items: center;
  
  /* Glass surface */
  background: var(--helm-bg);
  backdrop-filter: blur(var(--helm-blur)) saturate(var(--helm-saturate));
  -webkit-backdrop-filter: blur(var(--helm-blur)) saturate(var(--helm-saturate));
  
  /* Specular border & shadow */
  border: 1px solid var(--helm-border);
  box-shadow:
    var(--helm-shadow),
    inset 0 1px 0 0 var(--helm-shine-top),
    inset 0 -1px 0 0 var(--helm-shine-bottom);
  
  border-radius: var(--helm-radius);
  
  /* Contain children */
  overflow: visible;
}

/* ============================================
   DOCKED STATE
   Applied by any position variant (--top, --bottom, --left, --right)
   Adds fixed positioning, z-index, and scroll-triggered visibility
   ============================================ */

.fui-helm--top,
.fui-helm--bottom,
.fui-helm--left,
.fui-helm--right {
  position: fixed;
  z-index: var(--helm-z);
  max-width: calc(100vw - (var(--helm-inset) * 2));
  
  /* Hidden until .is-visible is added */
  opacity: 0;
  pointer-events: none;
}

.fui-helm--top.is-visible,
.fui-helm--bottom.is-visible,
.fui-helm--left.is-visible,
.fui-helm--right.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Specular shine overlay — top-edge gradient */
.fui-helm::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    var(--helm-shine-gradient-start) 0%,
    var(--helm-shine-gradient-mid) 40%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* All direct children sit above the shine layer */
.fui-helm > * {
  position: relative;
  z-index: 1;
}

/* Visible state */
.fui-helm.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================
   POSITION VARIANTS
   Where the Helm docks on screen
   ============================================ */

/* -- Top (default) -- */
.fui-helm--top {
  top: var(--helm-inset);
  left: 50%;
  transform: translateX(-50%) translateY(-130%);
  transition:
    transform var(--helm-enter-duration) var(--helm-enter-curve),
    opacity var(--helm-fade-duration) ease;
}

.fui-helm--top.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* -- Bottom -- */
.fui-helm--bottom {
  bottom: var(--helm-inset);
  left: 50%;
  transform: translateX(-50%) translateY(130%);
  transition:
    transform var(--helm-enter-duration) var(--helm-enter-curve),
    opacity var(--helm-fade-duration) ease;
}

.fui-helm--bottom.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* -- Left -- */
.fui-helm--left {
  left: var(--helm-inset);
  top: 50%;
  transform: translateY(-50%) translateX(-130%);
  transition:
    transform var(--helm-enter-duration) var(--helm-enter-curve),
    opacity var(--helm-fade-duration) ease;
}

.fui-helm--left.is-visible {
  transform: translateY(-50%) translateX(0);
}

/* -- Right -- */
.fui-helm--right {
  right: var(--helm-inset);
  top: 50%;
  transform: translateY(-50%) translateX(130%);
  transition:
    transform var(--helm-enter-duration) var(--helm-enter-curve),
    opacity var(--helm-fade-duration) ease;
}

.fui-helm--right.is-visible {
  transform: translateY(-50%) translateX(0);
}


/* ============================================
   ORIENTATION VARIANTS
   ============================================ */

/* -- Horizontal (default) -- */
.fui-helm--horizontal {
  flex-direction: row;
}

/* -- Vertical -- */
.fui-helm--vertical {
  flex-direction: column;
  border-radius: var(--radius-2xl);
  max-width: none;
  max-height: calc(100vh - (var(--helm-inset) * 2));
}

.fui-helm--vertical .fui-helm__divider {
  width: 20px;
  height: 1px;
  margin: var(--space-xs) auto;
}

.fui-helm--vertical .fui-helm__content {
  flex-direction: column;
}

.fui-helm--vertical .fui-helm__item {
  width: var(--helm-touch-target);
}


/* ============================================
   SLOT: ANCHOR START (left/top)
   Fixed element — typically Trident/logo
   ============================================ */

.fui-helm__anchor-start {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ============================================
   SLOT: CONTENT (center)
   Swappable context area — grows to fill
   ============================================ */

.fui-helm__content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
}


/* ============================================
   SLOT: ANCHOR END (right/bottom)
   Fixed elements — typically gmenu/user
   ============================================ */

.fui-helm__anchor-end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}


/* ============================================
   DIVIDER
   Visual separator between slots
   ============================================ */

.fui-helm__divider {
  width: 1px;
  height: 20px;
  background: var(--helm-divider);
  flex-shrink: 0;
}


/* ============================================
   ITEM — Interactive element inside Helm
   Guaranteed 44px touch target
   ============================================ */

.fui-helm__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--helm-touch-target);
  min-height: var(--helm-touch-target);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--helm-item-radius);
  color: var(--helm-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  font-family: var(--font-body);
  font-size: var(--typescale_label-small_size, 12px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.fui-helm__item:hover {
  color: var(--helm-text-hover);
  background: var(--helm-item-hover);
}

.fui-helm__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(48, 106, 192, 0.5);
}

/* Active/selected item */
.fui-helm__item--active {
  color: var(--neutral-0);
  background: var(--helm-item-active);
}

/* Item with padding for text */
.fui-helm__item--label {
  padding: 0 14px;
  gap: 4px;
}

/* Item with brand accent (e.g. active tab) */
.fui-helm__item--accent {
  color: var(--neutral-0);
  background: var(--color-primary);
  box-shadow: 0 2px 8px rgba(48, 106, 192, 0.3);
}

.fui-helm__item--accent:hover {
  background: var(--color-primary-hover);
}

/* Item with green accent (TalkTag context) */
.fui-helm__item--accent-green {
  color: var(--neutral-0);
  background: var(--brand-2);
  box-shadow: 0 2px 8px rgba(0, 145, 5, 0.3);
}

.fui-helm__item--accent-green:hover {
  background: var(--brand-2-light);
}

/* Item icon sizing */
.fui-helm__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Smaller icon variant */
.fui-helm__item--sm svg {
  width: 14px;
  height: 14px;
}


/* ============================================
   ITEM GROUP
   Row/column of related items
   ============================================ */

.fui-helm__group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fui-helm--vertical .fui-helm__group {
  flex-direction: column;
}


/* ============================================
   TRIDENT — Brand anchor item
   ============================================ */

.fui-helm__trident {
  color: var(--brand-1-light);
}

.fui-helm__trident:hover {
  color: var(--neutral-0);
}

.fui-helm__trident svg {
  width: 16px;
  height: 22px;
}


/* ============================================
   QUERY — Editorial serif query display
   ============================================ */

.fui-helm__query {
  font-family: var(--font-editorial, Georgia, serif);
  font-size: 0.938rem;
  font-style: italic;
  color: var(--helm-text);
  padding: 0 14px 0 6px;
  gap: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fui-helm__query:hover {
  color: var(--neutral-0);
}

.fui-helm__query svg {
  width: 12px;
  height: 12px;
  opacity: 0.4;
}

.fui-helm__query:hover svg {
  opacity: 0.8;
}


/* ============================================
   SEARCH INPUT — Inside floating capsule
   Editable search when tabs scroll off screen
   ============================================ */

.fui-helm__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--helm-text);
  background: transparent;
  padding: 0 8px;
  height: var(--helm-touch-target);
}

.fui-helm__search-input::placeholder {
  color: var(--helm-text-muted);
}

.fui-helm__search-input:focus {
  color: var(--neutral-0, #fff);
}


/* ============================================
   AVATAR — User indicator
   ============================================ */

.fui-helm__avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--brand-1-light), var(--brand-1));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--neutral-0);
  letter-spacing: -0.02em;
}

/* Online indicator dot */
.fui-helm__avatar--online::after {
  content: '';
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--brand-2-light);
  border: 2px solid rgba(10, 15, 26, 0.85);
}


/* ============================================
   BADGE — Pill-shaped status indicator
   ============================================ */

.fui-helm__badge {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.fui-helm__badge--verity {
  background: rgba(0, 193, 7, 0.15);
  color: var(--brand-2-light);
}

.fui-helm__badge--count {
  background: rgba(48, 106, 192, 0.2);
  color: var(--brand-1-light);
}


/* ============================================
   MARK — Small branded square (TalkTag icon)
   ============================================ */

.fui-helm__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-0);
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}

.fui-helm__mark--brand-1 {
  background: linear-gradient(135deg, var(--brand-1-light), var(--brand-1));
}

.fui-helm__mark--brand-2 {
  background: linear-gradient(135deg, var(--brand-2-light), var(--brand-2));
}

.fui-helm__mark--brand-3 {
  background: linear-gradient(135deg, var(--brand-3-light), var(--brand-3));
}


/* ============================================
   LABEL — Truncated text
   ============================================ */

.fui-helm__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.fui-helm__label--editorial {
  font-family: var(--font-editorial, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--helm-text);
}

.fui-helm__label--editorial:hover {
  color: var(--neutral-0);
  cursor: pointer;
}


/* ============================================
   DROPDOWN — Glass panel from Helm items
   ============================================ */

.fui-helm__dropdown {
  position: absolute;
  z-index: 1;
  background: rgba(10, 15, 26, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: var(--space-sm);
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.2s ease;
}

.fui-helm__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Position variants for dropdown */
.fui-helm--top .fui-helm__dropdown {
  top: calc(100% + var(--space-sm));
}

.fui-helm--bottom .fui-helm__dropdown {
  bottom: calc(100% + var(--space-sm));
  transform: translateY(6px);
}

.fui-helm--bottom .fui-helm__dropdown.is-open {
  transform: translateY(0);
}

/* Dropdown right-aligned (for end-anchor items) */
.fui-helm__dropdown--end {
  right: 0;
}

/* Dropdown wider variant */
.fui-helm__dropdown--wide {
  min-width: 280px;
}

/* Dropdown item */
.fui-helm__dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-md);
  font-size: 0.813rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  transition: all 0.1s ease;
  text-decoration: none;
}

.fui-helm__dropdown-item:hover {
  color: var(--neutral-0);
  background: rgba(255, 255, 255, 0.08);
}

.fui-helm__dropdown-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

/* Dropdown header */
.fui-helm__dropdown-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: var(--space-xs);
}

/* Dropdown grid (for gmenu-style grid) */
.fui-helm__dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.fui-helm__dropdown-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
  border-radius: var(--radius-lg);
  transition: all 0.12s ease;
  text-decoration: none;
  min-height: 72px;
}

.fui-helm__dropdown-grid-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.fui-helm__dropdown-grid-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-1-light), var(--brand-1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  font-size: 16px;
}

.fui-helm__dropdown-grid-item span {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.fui-helm__dropdown-grid-item:hover span {
  color: var(--neutral-0);
}


/* Mobile-only items — hidden on desktop where tab bar aside is visible */
.fui-helm__item--mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .fui-helm__item--mobile-only {
    display: inline-flex;
  }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
  :root {
    --helm-inset: 8px;
  }
  
  /* Hide text labels in items, show only icons */
  .fui-helm__item-label {
    display: none;
  }
  
  /* Tighten query display */
  .fui-helm__query {
    max-width: 100px;
    font-size: 0.813rem;
  }
  
  /* Truncate editorial labels */
  .fui-helm__label {
    max-width: 80px;
  }
  
  .fui-helm__label--editorial {
    max-width: 100px;
  }
  
  /* Hide secondary nav items in vertical groups */
  .fui-helm__group--collapse-mobile {
    display: none;
  }
}

@media (max-width: 480px) {
  .fui-helm__query {
    max-width: 70px;
  }
  
  .fui-helm__label {
    max-width: 60px;
  }
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fui-helm,
  .fui-helm__dropdown {
    transition: opacity 0.15s ease;
  }
  
  .fui-helm--top {
    transform: translateX(-50%) translateY(0);
  }
  
  .fui-helm--bottom {
    transform: translateX(-50%) translateY(0);
  }
  
  .fui-helm--left {
    transform: translateY(-50%) translateX(0);
  }
  
  .fui-helm--right {
    transform: translateY(-50%) translateX(0);
  }
}

/* Focus indicators */
.fui-helm:focus-within {
  box-shadow:
    var(--helm-shadow),
    inset 0 1px 0 0 var(--helm-shine-top),
    inset 0 -1px 0 0 var(--helm-shine-bottom),
    0 0 0 2px rgba(48, 106, 192, 0.3);
}


/* ============================================
   PRINT
   ============================================ */

@media print {
  .fui-helm {
    display: none;
  }
}


/* ================================================================
   ================================================================
   GLOBAL HELM — Structural Navigation System
   ================================================================
   ================================================================

   The GlobalHelm is the unified, structural navigation bar for all
   Findborg pages. Unlike the floating glass capsule above (fui-helm),
   this is always visible, always present, and adapts per page context.

   Three modes: --home, --serp, --app
   Three bands: top bar, tab bar (SERP only), bottom nav (mobile only)
   ================================================================ */


/* ============================================
   GLOBAL HELM TOKENS
   ============================================ */

:root {
  --helm-top-height-desktop: 72px;
  --helm-top-height-tablet: 64px;
  --helm-top-height-mobile: 56px;
  --helm-tabs-height: 48px;
  --helm-bottom-height: 64px;
  --helm-search-height: 48px;
  --helm-search-radius: var(--radius-full);
  --helm-search-bg: var(--color-surface-container);
  --helm-search-border: var(--color-border);
  --helm-search-focus-border: var(--color-primary);
  --helm-top-z: 1100;
  --helm-tabs-z: 1099;
  --helm-bottom-z: 1050;
  --helm-overlay-z: 1200;
}


/* ============================================
   TOP BAR — Base
   Sticky full-width header bar
   ============================================ */

.fui-helm-top {
  position: sticky;
  top: 0;
  z-index: var(--helm-top-z);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--helm-top-height-desktop);
  padding: 0 var(--space-xl);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.2s ease;
}

/* Scroll elevation shadow */
.fui-helm-top.is-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Logo zone ── */
.fui-helm-top__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.fui-helm-top__trident {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.fui-helm-top__trident svg {
  width: 100%;
  height: 100%;
}

.fui-helm-top__wordmark {
  font-family: var(--font-headline);
  font-size: var(--typescale_title-large_size, 25px);
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2), var(--brand-3), var(--brand-4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.fui-helm-top__page-title {
  font-family: var(--font-headline);
  font-size: var(--typescale_label-large_size, 16px);
  font-weight: 500;
  color: var(--color-text-muted);
}

.fui-helm-top__separator {
  color: var(--color-text-muted);
  font-size: var(--typescale_title-large_size, 25px);
  font-weight: 300;
  opacity: 0.4;
  user-select: none;
}

/* ── Action cluster (right side) ── */
.fui-helm-top__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Quick nav links (homepage desktop only) ── */
.fui-helm-top__nav-link {
  font-size: var(--typescale_label-medium_size, 14px);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  transition: all 0.15s ease;
}

.fui-helm-top__nav-link:hover {
  color: var(--color-primary);
  background: var(--color-hover);
}

/* ── Back button (mobile) ── */
.fui-helm-top__back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 20px;
  text-decoration: none;
}

.fui-helm-top__back:hover {
  background: var(--color-hover);
}


/* ============================================
   TOP BAR — SERP Search Input
   The #1 fix: query visible and editable
   ============================================ */

.fui-helm-top__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  max-width: 680px;
  height: var(--helm-search-height);
  padding: 0 var(--space-md);
  background: var(--helm-search-bg);
  border: 2px solid var(--helm-search-border);
  border-radius: var(--helm-search-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fui-helm-top__search:focus-within {
  border-color: var(--helm-search-focus-border);
  box-shadow: 0 0 0 3px rgba(48, 106, 192, 0.1);
}

.fui-helm-top__search-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.fui-helm-top__search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
  min-width: 0;
}

.fui-helm-top__search-input::placeholder {
  color: var(--color-text-muted);
}

.fui-helm-top__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.fui-helm-top__search:focus-within .fui-helm-top__search-clear,
.fui-helm-top__search-clear.has-value {
  opacity: 1;
}

.fui-helm-top__search-clear:hover {
  color: var(--color-text);
  background: var(--color-hover);
}

/* Connected border when suggestions are open */
.fui-helm-top__search--has-suggestions {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(48, 106, 192, 0.1);
}


/* ============================================
   TOP BAR — TalkTag Suggestion Dropdown
   Appears when typing a new query on SERP.
   Live autocomplete from TalkTag suggest API.
   ============================================ */

.fui-helm-top__suggestions {
  position: absolute;
  top: 100%;
  left: -2px;
  right: -2px;
  z-index: 100;
  background: var(--color-surface-raised, var(--color-surface));
  border: 2px solid var(--color-primary);
  border-top: 1px solid var(--color-border-subtle, var(--color-border));
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: helmSuggestReveal 0.15s ease-out;
}

@keyframes helmSuggestReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fui-helm-top__suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--typescale_body-small_size, 13px);
  color: var(--color-text);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.fui-helm-top__suggestion:first-child {
  padding-top: var(--space-sm);
}

.fui-helm-top__suggestion:last-child {
  padding-bottom: var(--space-sm);
}

.fui-helm-top__suggestion:hover,
.fui-helm-top__suggestion.is-selected {
  background: var(--color-hover);
}

.fui-helm-top__suggestion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.875rem;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.fui-helm-top__suggestion:hover .fui-helm-top__suggestion-icon,
.fui-helm-top__suggestion.is-selected .fui-helm-top__suggestion-icon {
  color: var(--color-primary);
}

.fui-helm-top__suggestion-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loading state */
.fui-helm-top__suggestion-loading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  font-size: var(--typescale_body-small_size, 13px);
  color: var(--color-text-muted);
}

.fui-helm-top__spinner {
  animation: helmSpinnerSpin 0.8s linear infinite;
}

@keyframes helmSpinnerSpin {
  to { transform: rotate(360deg); }
}


/* ============================================
   TOP BAR — Context Modifiers
   ============================================ */

/* Home: Logo + wordmark + spacer + nav + actions */
.fui-helm-top--home {
  /* Default layout works */
}

/* SERP: Align left edge to SERP content column */
.fui-helm-top--serp {
  padding-left: var(--center-abs-margin, var(--space-xl));
}

.fui-helm-top--serp .fui-helm-top__trident {
  width: 24px;
  height: 24px;
}

.fui-helm-top--serp .fui-helm-top__wordmark {
  display: none;
}

/* App: Logo + wordmark + separator + page title + actions */
.fui-helm-top--app {
  /* Default layout works */
}


/* ============================================
   SERP TAB BAR — Surface Tabs (Google-style)
   Scrolls with page, not sticky. Clean surface.
   ============================================ */

.fui-helm-tabs {
  /* NOT sticky — scrolls with the page */
  position: relative;
  z-index: 1;

  /* Clean surface — matches page background */
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));

  /* Layout — left edge aligns with SERP content */
  display: flex;
  align-items: center;
  height: var(--helm-tabs-height);
  padding: 0 var(--space-xl) 0 var(--center-abs-margin, var(--space-xl));
}

.fui-helm-tabs__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.fui-helm-tabs__inner::-webkit-scrollbar {
  display: none;
}

/* Tab items — surface-appropriate colors */
.fui-helm-tabs .fui-tab {
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  padding: 0 var(--space-md);
  height: var(--helm-tabs-height);
  display: flex;
  align-items: center;
  font-size: var(--typescale_label-medium_size, 14px);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
  border-radius: 0;
  flex-shrink: 0;
}

.fui-helm-tabs .fui-tab:hover {
  color: var(--color-text);
}

.fui-helm-tabs .fui-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Tab count badge */
.fui-helm-tabs .fui-tab__count {
  background: var(--color-primary);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
}


/* ============================================
   SERP TAB BAR — Right Controls
   Dig Deeper toggle + Tools dropdown
   ============================================ */

.fui-helm-tabs__controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
  flex-shrink: 0;
}

.fui-helm-tabs__tools {
  position: relative;
  flex-shrink: 0;
}

.fui-helm-tabs__tools-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--helm-tabs-height);
  padding: 0 var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--typescale_label-medium_size, 14px);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.fui-helm-tabs__tools-btn:hover {
  color: var(--color-text);
}

.fui-helm-tabs__tools-btn.active {
  color: var(--color-primary);
}

.fui-helm-tabs__tools-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
  min-width: 200px;
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.fui-helm-tabs__tools-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--typescale_body-small_size, 13px);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.1s ease;
}

.fui-helm-tabs__tools-item:hover {
  background: var(--color-hover);
}

.fui-helm-tabs__tools-item.active {
  color: var(--color-primary);
  font-weight: 600;
}

.fui-helm-tabs__tools-item i {
  font-size: 16px;
  color: var(--color-text-muted);
}

.fui-helm-tabs__tools-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) var(--space-md);
}


/* ============================================
   MOBILE BOTTOM NAV — REMOVED
   Per Fitz directive: each section provides its
   own section-specific bottom nav, not a universal
   app-wide one. GlobalHelm no longer renders this.
   ============================================ */


/* ============================================
   MOBILE SEARCH OVERLAY
   Full-screen search for mobile SERP
   ============================================ */

.fui-helm-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--helm-overlay-z);
  background: var(--color-background);
  display: flex;
  flex-direction: column;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.fui-helm-search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fui-helm-search-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: var(--helm-top-height-mobile);
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.fui-helm-search-overlay__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  font-size: 20px;
  flex-shrink: 0;
}

.fui-helm-search-overlay__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: transparent;
}

.fui-helm-search-overlay__input::placeholder {
  color: var(--color-text-muted);
}

.fui-helm-search-overlay__body {
  flex: 1;
  padding: var(--space-md);
  overflow-y: auto;
}

.fui-helm-search-overlay__section-title {
  font-size: var(--typescale_label-medium_size, 14px);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fui-helm-search-overlay__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: background 0.1s ease;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
}

.fui-helm-search-overlay__item:hover {
  background: var(--color-hover);
}

.fui-helm-search-overlay__item i {
  color: var(--color-text-muted);
  font-size: 18px;
  flex-shrink: 0;
}


/* ============================================
   RESPONSIVE — Tablet (768–1023px)
   ============================================ */

@media (max-width: 1023px) {
  .fui-helm-top {
    height: var(--helm-top-height-tablet);
    padding: 0 var(--space-lg);
  }

  .fui-helm-top--serp {
    padding-left: var(--center-abs-margin, var(--space-lg));
  }

  .fui-helm-tabs {
    padding: 0 var(--space-lg) 0 var(--center-abs-margin, var(--space-lg));
  }

  /* Hide quick nav links on tablet — they go into Gmenu */
  .fui-helm-top__nav-link {
    display: none;
  }

  .fui-helm-top__trident {
    width: 28px;
    height: 28px;
  }

  .fui-helm-top__wordmark {
    font-size: var(--typescale_title-medium_size, 22px);
  }
}


/* ============================================
   RESPONSIVE — Mobile (≤768px)
   ============================================ */

@media (max-width: 768px) {
  .fui-helm-top {
    height: var(--helm-top-height-mobile);
    padding: 0 var(--space-md);
    gap: var(--space-sm);
  }

  .fui-helm-top--serp {
    padding-left: var(--center-abs-margin, var(--space-md));
  }

  .fui-helm-tabs {
    padding: 0 var(--space-md) 0 var(--center-abs-margin, var(--space-md));
    height: 44px;
  }

  .fui-helm-top__trident {
    width: 24px;
    height: 24px;
  }

  /* SERP: Show back button on mobile */
  .fui-helm-top--serp .fui-helm-top__back,
  .fui-helm-top--app .fui-helm-top__back {
    display: flex;
  }

  /* SERP: Hide logo on mobile — back button replaces it */
  .fui-helm-top--serp .fui-helm-top__logo {
    display: none;
  }

  /* Home: Hide wordmark on small mobile, keep trident */
  .fui-helm-top--home .fui-helm-top__wordmark {
    font-size: var(--typescale_title-small_size, 18px);
  }

  /* App: Hide wordmark, show only page title */
  .fui-helm-top--app .fui-helm-top__wordmark,
  .fui-helm-top--app .fui-helm-top__separator {
    display: none;
  }

  /* Bottom nav padding removed — section-specific navs handle their own */
}

@media (max-width: 480px) {
  .fui-helm-top--home .fui-helm-top__wordmark {
    display: none;
  }
}


/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-helm-top {
    background: var(--color-surface);
    border-bottom-color: var(--color-border-subtle, var(--color-border));
  }

  .fui-helm-top.is-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  }

  .fui-helm-top__search {
    background: var(--helm-search-bg);
    border-color: var(--helm-search-border);
  }

}

body.dark .fui-helm-top {
  background: var(--color-surface);
  border-bottom-color: var(--color-border-subtle, var(--color-border));
}

body.dark .fui-helm-top.is-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Bottom nav removed — section-specific */


/* ============================================
   ACCESSIBILITY — Global Helm
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .fui-helm-top,
  .fui-helm-tabs,
  .fui-helm-search-overlay {
    transition: none;
  }
}

@media print {
  .fui-helm-top,
  .fui-helm-tabs,
  .fui-helm-search-overlay {
    display: none;
  }
}

/* ========== components\nav.css ========== */
/**
 * FINDBORG UI - NAVIGATION COMPONENT
 * Opt-in navigation styles (horizontal/vertical)
 * 
 * File: src/styles/findborg-ui/components/nav.css
 */

/* ============================================
   BASE NAV
   ============================================ */

.fui-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================
   HORIZONTAL NAV (default)
   ============================================ */

.fui-nav--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ============================================
   VERTICAL NAV (sidebar style)
   ============================================ */

.fui-nav--vertical {
  flex-direction: column;
  align-items: stretch;
}

/* ============================================
   NAV BAR (with background/border)
   ============================================ */

.fui-nav--bar {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.fui-nav--bar-transparent {
  background: transparent;
  border-bottom: none;
}

/* ============================================
   NAV ITEMS
   ============================================ */

.fui-nav__item {
  list-style: none;
}

.fui-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.fui-nav__link:hover {
  background: var(--color-hover);
  color: var(--color-primary);
  text-decoration: none;
}

.fui-nav__link.active,
.fui-nav__link[aria-current="page"] {
  color: var(--color-primary);
  background: rgba(48, 106, 192, 0.1);
}

/* ============================================
   NAV SPACER
   ============================================ */

.fui-nav__spacer {
  flex: 1 1 auto;
}

/* ============================================
   NAV DIVIDER
   ============================================ */

.fui-nav__divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 var(--space-xs);
}

.fui-nav--vertical .fui-nav__divider {
  width: 100%;
  height: 1px;
  margin: var(--space-xs) 0;
}

/* ============================================
   SCROLLABLE NAV
   ============================================ */

.fui-nav--scrollable {
  overflow-x: auto;
  flex-wrap: nowrap;
  
  /* Hide scrollbar by default */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.fui-nav--scrollable::-webkit-scrollbar {
  height: 6px;
  background: transparent;
}

.fui-nav--scrollable::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-full);
}

/* Show scrollbar on hover */
.fui-nav--scrollable:hover {
  scrollbar-width: thin;
}

.fui-nav--scrollable:hover::-webkit-scrollbar-thumb {
  background: var(--color-border);
}

/* ============================================
   COMPACT VARIANT
   ============================================ */

.fui-nav--compact .fui-nav__link {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--typescale_label-small_size);
}

/* ============================================
   PILL STYLE VARIANT
   ============================================ */

.fui-nav--pills {
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.fui-nav--pills .fui-nav__link {
  border-radius: var(--radius-lg);
}

.fui-nav--pills .fui-nav__link.active {
  background: var(--color-primary);
  color: var(--neutral-0);
}

/* ============================================
   MOBILE TOGGLE
   ============================================ */

.fui-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.fui-nav__toggle:hover {
  background: var(--color-hover);
}

/* ============================================
   RESPONSIVE - COLLAPSIBLE NAV
   ============================================ */

@media (max-width: 768px) {
  .fui-nav--collapsible {
    flex-direction: column;
    align-items: stretch;
  }
  
  .fui-nav--collapsible .fui-nav__toggle {
    display: flex;
    align-self: flex-end;
  }
  
  .fui-nav--collapsible .fui-nav__menu {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-top: var(--space-sm);
  }
  
  .fui-nav--collapsible.active .fui-nav__menu {
    display: flex;
  }
}

/* ============================================
   DARK MODE
   ============================================ */

@media (prefers-color-scheme: dark) {
  .fui-nav--bar {
    background: var(--color-surface);
  }
  
  .fui-nav--pills {
    background: var(--color-surface);
  }
}

body.dark .fui-nav--bar,
body.dark .fui-nav--pills {
  background: var(--color-surface);
}

/* ========== components\text-field.css ========== */
/**
 * FINDBORG UI - TEXT FIELD
 * Outlined and filled text inputs with floating labels
 *
 * Usage:
 *   <div class="fui-field">
 *     <input class="fui-field__input" type="text" placeholder=" " />
 *     <label class="fui-field__label">Label</label>
 *   </div>
 */

/* ============================================
   FIELD WRAPPER
   ============================================ */

.fui-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* ============================================
   INPUT - OUTLINED (default)
   ============================================ */

.fui-field__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--speed-2) ease, box-shadow var(--speed-2) ease;
  min-height: 2.75rem; /* 44px touch target */
}

.fui-field__input::placeholder {
  color: transparent;
}

.fui-field__input:hover:not(:disabled) {
  border-color: var(--color-text-subtle);
}

.fui-field__input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ============================================
   FLOATING LABEL
   ============================================ */

.fui-field__label {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  color: var(--color-text-subtle);
  pointer-events: none;
  transition: all var(--speed-2) ease;
  background: var(--color-background);
  padding: 0 var(--space-xs);
}

/* Float label up on focus or when input has content */
.fui-field__input:focus ~ .fui-field__label,
.fui-field__input:not(:placeholder-shown) ~ .fui-field__label {
  top: 0;
  font-size: var(--typescale_label-small_size);
  color: var(--color-primary);
}

.fui-field__input:not(:focus):not(:placeholder-shown) ~ .fui-field__label {
  color: var(--color-text-subtle);
}

/* ============================================
   FILLED VARIANT
   ============================================ */

.fui-field--filled .fui-field__input {
  background: var(--color-surface);
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.fui-field--filled .fui-field__input:hover:not(:disabled) {
  border-bottom-color: var(--color-text-subtle);
}

.fui-field--filled .fui-field__input:focus {
  border-bottom-color: var(--color-primary);
  box-shadow: none;
}

.fui-field--filled .fui-field__label {
  background: transparent;
}

/* ============================================
   HELPER / ERROR TEXT
   ============================================ */

.fui-field__helper {
  font-size: var(--typescale_label-small_size);
  line-height: var(--typescale_label-small_height);
  color: var(--color-text-subtle);
  padding-left: var(--space-md);
}

/* ============================================
   PREFIX / SUFFIX ICONS
   ============================================ */

.fui-field--has-prefix .fui-field__input {
  padding-left: var(--space-2xl);
}

.fui-field--has-suffix .fui-field__input {
  padding-right: var(--space-2xl);
}

.fui-field__prefix,
.fui-field__suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 1.25rem;
  pointer-events: none;
}

.fui-field__prefix {
  left: var(--space-sm);
}

.fui-field__suffix {
  right: var(--space-sm);
}

.fui-field--has-prefix .fui-field__label {
  left: var(--space-2xl);
}

.fui-field--has-prefix .fui-field__input:focus ~ .fui-field__label,
.fui-field--has-prefix .fui-field__input:not(:placeholder-shown) ~ .fui-field__label {
  left: var(--space-md);
}

/* ============================================
   SIZES
   ============================================ */

.fui-field--sm .fui-field__input {
  min-height: 2.25rem; /* 36px */
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--typescale_body-small_size);
}

.fui-field--sm .fui-field__label {
  font-size: var(--typescale_body-small_size);
  left: var(--space-sm);
}

.fui-field--lg .fui-field__input {
  min-height: 3.25rem; /* 52px */
  padding: var(--space-md) var(--space-lg);
  font-size: var(--typescale_body-large_size);
}

.fui-field--lg .fui-field__label {
  font-size: var(--typescale_body-large_size);
  left: var(--space-lg);
}

/* ============================================
   ERROR STATE
   ============================================ */

.fui-field--error .fui-field__input {
  border-color: var(--color-error);
}

.fui-field--error .fui-field__input:focus {
  box-shadow: var(--focus-ring-error);
}

.fui-field--error .fui-field__label {
  color: var(--color-error);
}

.fui-field--error .fui-field__helper {
  color: var(--color-error);
}

/* ============================================
   DISABLED STATE
   ============================================ */

.fui-field--disabled .fui-field__input,
.fui-field__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-surface);
}

/* ============================================
   TEXTAREA SUPPORT
   ============================================ */

.fui-field--textarea .fui-field__input {
  min-height: 6rem;
  resize: vertical;
}

.fui-field--textarea .fui-field__label {
  top: var(--space-md);
  transform: none;
}

.fui-field--textarea .fui-field__input:focus ~ .fui-field__label,
.fui-field--textarea .fui-field__input:not(:placeholder-shown) ~ .fui-field__label {
  top: -0.5rem;
  transform: none;
}

/* ========== components\select.css ========== */
/**
 * FINDBORG UI - SELECT
 * Styled dropdown select with floating label
 *
 * Usage:
 *   <div class="fui-select">
 *     <select class="fui-select__input">
 *       <option value="">Choose...</option>
 *       <option>Option 1</option>
 *     </select>
 *     <label class="fui-select__label">Category</label>
 *     <i class="fui-select__arrow ph ph-caret-down"></i>
 *   </div>
 */

.fui-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.fui-select__input {
  width: 100%;
  padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-height: 2.75rem;
  transition: border-color var(--speed-2) ease, box-shadow var(--speed-2) ease;
}

.fui-select__input:hover:not(:disabled) {
  border-color: var(--color-text-subtle);
}

.fui-select__input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* Arrow icon */
.fui-select__arrow {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
  transition: transform var(--speed-2) ease;
}

.fui-select__input:focus ~ .fui-select__arrow {
  color: var(--color-primary);
}

/* Label */
.fui-select__label {
  position: absolute;
  left: var(--space-md);
  top: 0;
  transform: translateY(-50%);
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-subtle);
  background: var(--color-background);
  padding: 0 var(--space-xs);
  pointer-events: none;
}

.fui-select__input:focus ~ .fui-select__label {
  color: var(--color-primary);
}

/* Helper text */
.fui-select__helper {
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-subtle);
  padding-left: var(--space-md);
}

/* Filled variant */
.fui-select--filled .fui-select__input {
  background: var(--color-surface);
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.fui-select--filled .fui-select__input:focus {
  border-bottom-color: var(--color-primary);
  box-shadow: none;
}

.fui-select--filled .fui-select__label {
  background: transparent;
}

/* Error state */
.fui-select--error .fui-select__input {
  border-color: var(--color-error);
}

.fui-select--error .fui-select__input:focus {
  box-shadow: var(--focus-ring-error);
}

.fui-select--error .fui-select__label,
.fui-select--error .fui-select__helper {
  color: var(--color-error);
}

/* Disabled */
.fui-select__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sizes */
.fui-select--sm .fui-select__input {
  min-height: 2.25rem;
  padding: var(--space-xs) var(--space-2xl) var(--space-xs) var(--space-sm);
  font-size: var(--typescale_body-small_size);
}

.fui-select--lg .fui-select__input {
  min-height: 3.25rem;
  padding: var(--space-md) var(--space-2xl) var(--space-md) var(--space-lg);
  font-size: var(--typescale_body-large_size);
}

/* ========== components\checkbox.css ========== */
/**
 * FINDBORG UI - CHECKBOX
 * Custom styled checkbox with label
 *
 * Usage:
 *   <label class="fui-checkbox">
 *     <input type="checkbox" class="fui-checkbox__input" />
 *     <span class="fui-checkbox__box"></span>
 *     <span class="fui-checkbox__label">Accept terms</span>
 *   </label>
 */

.fui-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}

/* Hide native checkbox */
.fui-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom box */
.fui-checkbox__box {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all var(--speed-2) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkmark (CSS-drawn) */
.fui-checkbox__box::after {
  content: '';
  width: 0.375rem;
  height: 0.625rem;
  border: solid var(--neutral-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--speed-1) ease;
}

/* Hover */
.fui-checkbox:hover .fui-checkbox__box {
  border-color: var(--color-primary);
}

/* Focus */
.fui-checkbox__input:focus-visible ~ .fui-checkbox__box {
  box-shadow: var(--focus-ring);
}

/* Checked */
.fui-checkbox__input:checked ~ .fui-checkbox__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fui-checkbox__input:checked ~ .fui-checkbox__box::after {
  transform: rotate(45deg) scale(1);
}

/* Indeterminate */
.fui-checkbox__input:indeterminate ~ .fui-checkbox__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fui-checkbox__input:indeterminate ~ .fui-checkbox__box::after {
  width: 0.625rem;
  height: 0;
  border-width: 0 0 2px 0;
  transform: rotate(0deg) scale(1);
}

/* Label */
.fui-checkbox__label {
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
}

/* Disabled */
.fui-checkbox__input:disabled ~ .fui-checkbox__box {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-checkbox__input:disabled ~ .fui-checkbox__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-checkbox:has(.fui-checkbox__input:disabled) {
  cursor: not-allowed;
}

/* Error */
.fui-checkbox--error .fui-checkbox__box {
  border-color: var(--color-error);
}

.fui-checkbox--error .fui-checkbox__input:checked ~ .fui-checkbox__box {
  background: var(--color-error);
  border-color: var(--color-error);
}

/* ========== components\radio.css ========== */
/**
 * FINDBORG UI - RADIO BUTTON
 * Custom styled radio with label
 *
 * Usage:
 *   <div class="fui-radio-group">
 *     <label class="fui-radio">
 *       <input type="radio" name="plan" class="fui-radio__input" />
 *       <span class="fui-radio__circle"></span>
 *       <span class="fui-radio__label">Option A</span>
 *     </label>
 *   </div>
 */

.fui-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fui-radio-group--horizontal {
  flex-direction: row;
  gap: var(--space-lg);
}

.fui-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}

/* Hide native radio */
.fui-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom circle */
.fui-radio__circle {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: all var(--speed-2) ease;
}

/* Inner dot */
.fui-radio__circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--neutral-0);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--speed-1) ease;
}

/* Hover */
.fui-radio:hover .fui-radio__circle {
  border-color: var(--color-primary);
}

/* Focus */
.fui-radio__input:focus-visible ~ .fui-radio__circle {
  box-shadow: var(--focus-ring);
}

/* Checked */
.fui-radio__input:checked ~ .fui-radio__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fui-radio__input:checked ~ .fui-radio__circle::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Label */
.fui-radio__label {
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
}

/* Disabled */
.fui-radio__input:disabled ~ .fui-radio__circle {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-radio__input:disabled ~ .fui-radio__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-radio:has(.fui-radio__input:disabled) {
  cursor: not-allowed;
}

/* ========== components\switch.css ========== */
/**
 * FINDBORG UI - SWITCH / TOGGLE
 * M3-style toggle switch
 *
 * Usage:
 *   <label class="fui-switch">
 *     <input type="checkbox" class="fui-switch__input" />
 *     <span class="fui-switch__track"></span>
 *     <span class="fui-switch__label">Dark mode</span>
 *   </label>
 */

.fui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}

/* Hide native checkbox */
.fui-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Track */
.fui-switch__track {
  position: relative;
  width: 3.25rem;
  height: 2rem;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: all var(--speed-2) ease;
}

/* Thumb */
.fui-switch__track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--color-text-subtle);
  border-radius: var(--radius-full);
  transform: translateY(-50%);
  transition: all var(--speed-2) ease;
}

/* Hover */
.fui-switch:hover .fui-switch__track::after {
  background: var(--color-text);
}

/* Focus */
.fui-switch__input:focus-visible ~ .fui-switch__track {
  box-shadow: var(--focus-ring);
}

/* Checked */
.fui-switch__input:checked ~ .fui-switch__track {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.fui-switch__input:checked ~ .fui-switch__track::after {
  left: calc(100% - 1.5rem);
  background: var(--neutral-0);
}

/* Label */
.fui-switch__label {
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
}

/* Disabled */
.fui-switch__input:disabled ~ .fui-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-switch__input:disabled ~ .fui-switch__label {
  opacity: 0.5;
  cursor: not-allowed;
}

.fui-switch:has(.fui-switch__input:disabled) {
  cursor: not-allowed;
}

/* Size: Small */
.fui-switch--sm .fui-switch__track {
  width: 2.5rem;
  height: 1.5rem;
}

.fui-switch--sm .fui-switch__track::after {
  width: 1rem;
  height: 1rem;
  left: 0.125rem;
}

.fui-switch--sm .fui-switch__input:checked ~ .fui-switch__track::after {
  left: calc(100% - 1.125rem);
}

/* ========== components\progress.css ========== */
/**
 * FINDBORG UI - PROGRESS INDICATORS
 * Linear progress bar and circular spinner
 *
 * Usage:
 *   <div class="fui-progress">
 *     <div class="fui-progress__bar" style="width: 60%"></div>
 *   </div>
 *
 *   <div class="fui-spinner"></div>
 */

/* ============================================
   LINEAR PROGRESS BAR
   ============================================ */

.fui-progress {
  width: 100%;
  height: 4px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.fui-progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--speed-3) ease;
}

/* Sizes */
.fui-progress--sm { height: 2px; }
.fui-progress--lg { height: 8px; }

/* Indeterminate animation */
.fui-progress--indeterminate .fui-progress__bar {
  width: 40%;
  animation: fui-progress-slide 1.5s ease-in-out infinite;
}

@keyframes fui-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Color variants */
.fui-progress--success .fui-progress__bar { background: var(--color-success); }
.fui-progress--error .fui-progress__bar { background: var(--color-error); }
.fui-progress--warning .fui-progress__bar { background: var(--color-warning); }

/* ============================================
   CIRCULAR SPINNER
   ============================================ */

.fui-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--color-surface);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: fui-spin 0.8s linear infinite;
}

.fui-spinner--sm {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

.fui-spinner--lg {
  width: 3.5rem;
  height: 3.5rem;
  border-width: 4px;
}

@keyframes fui-spin {
  to { transform: rotate(360deg); }
}

/* ========== components\snackbar.css ========== */
/**
 * FINDBORG UI - SNACKBAR / TOAST
 * Notification messages
 *
 * Usage:
 *   <div class="fui-snackbar is-visible">
 *     <span class="fui-snackbar__text">Changes saved</span>
 *     <button class="fui-snackbar__action">Undo</button>
 *   </div>
 */

.fui-snackbar {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--space-lg)));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  min-width: 20rem;
  max-width: 40rem;
  background: var(--neutral-900);
  color: var(--neutral-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform var(--speed-3) ease;
}

/* Visible state */
.fui-snackbar.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Top position */
.fui-snackbar--top {
  bottom: auto;
  top: var(--space-lg);
  transform: translateX(-50%) translateY(calc(-100% - var(--space-lg)));
}

.fui-snackbar--top.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Text */
.fui-snackbar__text {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
}

/* Icon */
.fui-snackbar__icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Action button */
.fui-snackbar__action {
  font-family: var(--font-headline);
  font-size: var(--typescale_label-medium_size);
  font-weight: 500;
  color: var(--brand-5-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.fui-snackbar__action:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Close button */
.fui-snackbar__close {
  background: none;
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  flex-shrink: 0;
}

.fui-snackbar__close:hover {
  color: var(--neutral-100);
}

/* Color variants */
.fui-snackbar--success { background: var(--brand-2-8, #2e7d32); }
.fui-snackbar--error { background: var(--brand-4-8, #c62828); }
.fui-snackbar--warning { background: var(--brand-3-8, #e65100); }
.fui-snackbar--info { background: var(--brand-5-8, #00838f); }

/* ========== components\callout.css ========== */
/**
 * FINDBORG UI - CALLOUT
 * Inline alert/status banner for form feedback, auth prompts, success states
 *
 * Usage:
 *   <div class="fui-callout fui-callout--success">
 *     <span class="fui-callout__icon"><i class="ph ph-check-circle icon-lg"></i></span>
 *     <div class="fui-callout__body">
 *       <div class="fui-callout__title">Success!</div>
 *       <p>Your submission has been received.</p>
 *     </div>
 *   </div>
 *
 * Variants: --info, --success, --warning, --error, --primary
 *
 * File: src/styles/findborg-ui/components/callout.css
 */

.fui-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-xl);
  border: 1px solid;
  color: var(--color-text);
}

.fui-callout__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  margin-top: 1px;
}

.fui-callout__body {
  flex: 1;
}

.fui-callout__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--typescale_title-small_size);
  margin-bottom: var(--space-xs);
}

.fui-callout__body p {
  font-size: var(--typescale_body-medium_size);
  margin: 0;
  line-height: 1.5;
}

/* ── Color Variants ── */

.fui-callout--info {
  background: color-mix(in oklch, var(--brand-5) 10%, transparent);
  border-color: var(--brand-5);
}

.fui-callout--info .fui-callout__icon {
  color: var(--brand-5);
}

.fui-callout--success {
  background: color-mix(in oklch, var(--brand-2) 10%, transparent);
  border-color: var(--brand-2);
}

.fui-callout--success .fui-callout__icon {
  color: var(--brand-2);
}

.fui-callout--warning {
  background: color-mix(in oklch, var(--brand-3) 10%, transparent);
  border-color: var(--brand-3);
}

.fui-callout--warning .fui-callout__icon {
  color: var(--brand-3);
}

.fui-callout--error {
  background: color-mix(in oklch, var(--brand-4) 10%, transparent);
  border-color: var(--color-error);
}

.fui-callout--error .fui-callout__icon {
  color: var(--color-error);
}

.fui-callout--primary {
  background: color-mix(in oklch, var(--brand-1) 8%, transparent);
  border-color: var(--brand-1);
}

.fui-callout--primary .fui-callout__icon {
  color: var(--brand-1);
}

/* ── Centered variant (for auth prompts, hero callouts) ── */

.fui-callout--centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fui-callout--centered .fui-callout__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========== components\badge.css ========== */
/**
 * FINDBORG UI - BADGE
 * Notification dots and counts
 *
 * Usage:
 *   <div class="fui-badge">
 *     <i class="ph ph-bell icon-md"></i>
 *     <span class="fui-badge__dot"></span>
 *   </div>
 *
 *   <div class="fui-badge">
 *     <i class="ph ph-bell icon-md"></i>
 *     <span class="fui-badge__count">3</span>
 *   </div>
 */

.fui-badge {
  position: relative;
  display: inline-flex;
}

/* Dot badge */
.fui-badge__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--color-error);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
}

/* Count badge */
.fui-badge__count {
  position: absolute;
  top: -0.25rem;
  right: -0.375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.3rem;
  background: var(--color-error);
  color: var(--neutral-0);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
  font-family: var(--font-headline);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: calc(1.125rem - 4px);
  text-align: center;
  white-space: nowrap;
}

/* Color variants */
.fui-badge--primary .fui-badge__dot,
.fui-badge--primary .fui-badge__count {
  background: var(--color-primary);
}

.fui-badge--success .fui-badge__dot,
.fui-badge--success .fui-badge__count {
  background: var(--color-success);
}

/* ========== components\icon-badge.css ========== */
/**
 * FINDBORG UI - ICON BADGE
 * Colored icon container with brand-tinted background
 *
 * Usage:
 *   <div class="fui-icon-badge fui-icon-badge--brand-1">
 *     <i class="ph ph-tag icon-lg"></i>
 *   </div>
 *
 * Variants: --brand-1 through --brand-5
 * Sizes: default (48px), --sm (36px), --lg (56px)
 *
 * File: src/styles/findborg-ui/components/icon-badge.css
 */

.fui-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Size variants */
.fui-icon-badge--sm {
  width: 36px;
  height: 36px;
  font-size: 1.125rem;
  border-radius: var(--radius-md);
}

.fui-icon-badge--lg {
  width: 56px;
  height: 56px;
  font-size: 1.75rem;
}

/* Brand color variants */
.fui-icon-badge--brand-1 {
  background: color-mix(in oklch, var(--brand-1) 15%, transparent);
  color: var(--brand-1);
}

.fui-icon-badge--brand-2 {
  background: color-mix(in oklch, var(--brand-2) 15%, transparent);
  color: var(--brand-2);
}

.fui-icon-badge--brand-3 {
  background: color-mix(in oklch, var(--brand-3) 15%, transparent);
  color: var(--brand-3);
}

.fui-icon-badge--brand-4 {
  background: color-mix(in oklch, var(--brand-4) 15%, transparent);
  color: var(--brand-4);
}

.fui-icon-badge--brand-5 {
  background: color-mix(in oklch, var(--brand-5) 15%, transparent);
  color: var(--brand-5);
}

/* Dark mode — increase tint opacity */
@media (prefers-color-scheme: dark) {
  .fui-icon-badge--brand-1 { background: color-mix(in oklch, var(--brand-1) 25%, transparent); }
  .fui-icon-badge--brand-2 { background: color-mix(in oklch, var(--brand-2) 25%, transparent); }
  .fui-icon-badge--brand-3 { background: color-mix(in oklch, var(--brand-3) 25%, transparent); }
  .fui-icon-badge--brand-4 { background: color-mix(in oklch, var(--brand-4) 25%, transparent); }
  .fui-icon-badge--brand-5 { background: color-mix(in oklch, var(--brand-5) 25%, transparent); }
}

body.dark .fui-icon-badge--brand-1 { background: color-mix(in oklch, var(--brand-1) 25%, transparent); }
body.dark .fui-icon-badge--brand-2 { background: color-mix(in oklch, var(--brand-2) 25%, transparent); }
body.dark .fui-icon-badge--brand-3 { background: color-mix(in oklch, var(--brand-3) 25%, transparent); }
body.dark .fui-icon-badge--brand-4 { background: color-mix(in oklch, var(--brand-4) 25%, transparent); }
body.dark .fui-icon-badge--brand-5 { background: color-mix(in oklch, var(--brand-5) 25%, transparent); }

/* ========== components\tooltip.css ========== */
/**
 * FINDBORG UI - TOOLTIP
 * Hover/focus information popover via data attribute
 *
 * Usage:
 *   <button class="fui-tooltip" data-tooltip="Save changes">
 *     <i class="ph ph-floppy-disk"></i>
 *   </button>
 */

.fui-tooltip {
  position: relative;
}

.fui-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-sm);
  background: var(--neutral-900);
  color: var(--neutral-100);
  font-family: var(--font-body);
  font-size: var(--typescale_label-small_size);
  line-height: var(--typescale_label-small_height);
  white-space: nowrap;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--speed-2) ease;
}

/* Show on hover and focus */
.fui-tooltip:hover::after,
.fui-tooltip:focus-visible::after {
  opacity: 1;
}

/* Position: Bottom */
.fui-tooltip--bottom::after {
  bottom: auto;
  top: calc(100% + var(--space-xs));
}

/* Position: Left */
.fui-tooltip--left::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + var(--space-xs));
  transform: translateY(-50%);
}

/* Position: Right */
.fui-tooltip--right::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + var(--space-xs));
  transform: translateY(-50%);
}

/* ========== components\divider.css ========== */
/**
 * FINDBORG UI - DIVIDER
 * Horizontal and vertical separators
 *
 * Usage:
 *   <hr class="fui-divider" />
 *   <hr class="fui-divider fui-divider--vertical" />
 */

.fui-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-md) 0;
}

/* No margin */
.fui-divider--flush {
  margin: 0;
}

/* Inset (indented) */
.fui-divider--inset {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

/* Vertical (for flex row layouts) */
.fui-divider--vertical {
  border-top: none;
  border-left: 1px solid var(--color-border);
  margin: 0 var(--space-md);
  align-self: stretch;
  width: 0;
  height: auto;
}

/* With text */
.fui-divider--text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border: none;
  margin: var(--space-md) 0;
  font-family: var(--font-body);
  font-size: var(--typescale_label-small_size);
  color: var(--color-text-subtle);
}

.fui-divider--text::before,
.fui-divider--text::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* ========== components\avatar.css ========== */
/**
 * FINDBORG UI - AVATAR
 * User images and initials
 *
 * Usage:
 *   <div class="fui-avatar fui-avatar--md">
 *     <img src="user.jpg" alt="User" />
 *   </div>
 *
 *   <div class="fui-avatar fui-avatar--md fui-avatar--primary">
 *     <span>JD</span>
 *   </div>
 */

.fui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-headline);
  font-weight: 500;
  flex-shrink: 0;
}

.fui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sizes */
.fui-avatar--xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.fui-avatar--sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.fui-avatar--md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.fui-avatar--lg { width: 3rem; height: 3rem; font-size: 1rem; }
.fui-avatar--xl { width: 4rem; height: 4rem; font-size: 1.25rem; }

/* Color variants (for initials) */
.fui-avatar--primary { background: var(--color-primary); color: var(--neutral-0); }
.fui-avatar--brand-1 { background: var(--brand-1-2); color: var(--brand-1-8); }
.fui-avatar--brand-2 { background: var(--brand-2-2); color: var(--brand-2-8); }
.fui-avatar--brand-3 { background: var(--brand-3-2); color: var(--brand-3-8); }
.fui-avatar--brand-4 { background: var(--brand-4-2); color: var(--brand-4-8); }
.fui-avatar--brand-5 { background: var(--brand-5-2); color: var(--brand-5-8); }

/* Avatar group (overlapping) */
.fui-avatar-group {
  display: flex;
  flex-direction: row-reverse;
}

.fui-avatar-group .fui-avatar {
  border: 2px solid var(--color-background);
  margin-left: -0.5rem;
}

.fui-avatar-group .fui-avatar:last-child {
  margin-left: 0;
}

/* ========== components\list.css ========== */
/**
 * FINDBORG UI - LIST
 * Styled list items with icon, text, and action slots
 *
 * Usage:
 *   <ul class="fui-list">
 *     <li class="fui-list__item">
 *       <i class="fui-list__icon ph ph-envelope"></i>
 *       <div class="fui-list__content">
 *         <div class="fui-list__primary">Messages</div>
 *         <div class="fui-list__secondary">3 unread</div>
 *       </div>
 *       <span class="fui-list__action"><i class="ph ph-caret-right"></i></span>
 *     </li>
 *   </ul>
 */

.fui-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fui-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--speed-1) ease;
}

.fui-list__item:last-child {
  border-bottom: none;
}

/* Interactive items */
.fui-list--interactive .fui-list__item {
  cursor: pointer;
}

.fui-list--interactive .fui-list__item:hover {
  background: var(--color-hover);
}

.fui-list--interactive .fui-list__item:active {
  background: var(--color-active);
}

/* Icon */
.fui-list__icon {
  font-size: 1.5rem;
  color: var(--color-text-subtle);
  flex-shrink: 0;
}

/* Content */
.fui-list__content {
  flex: 1;
  min-width: 0;
}

.fui-list__primary {
  font-family: var(--font-body);
  font-size: var(--typescale_body-medium_size);
  line-height: var(--typescale_body-medium_height);
  color: var(--color-text);
}

.fui-list__secondary {
  font-size: var(--typescale_body-small_size);
  line-height: var(--typescale_body-small_height);
  color: var(--color-text-subtle);
}

/* Trailing action */
.fui-list__action {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Dense variant */
.fui-list--dense .fui-list__item {
  padding: var(--space-xs) var(--space-md);
}

.fui-list--dense .fui-list__icon {
  font-size: 1.25rem;
}

.fui-list--dense .fui-list__primary {
  font-size: var(--typescale_body-small_size);
}

/* Borderless variant */
.fui-list--borderless .fui-list__item {
  border-bottom: none;
}

/* ========== components\feature-list.css ========== */
/**
 * FINDBORG UI - FEATURE LIST
 * Checkmark/icon + text list for feature highlights, tier comparisons
 *
 * Usage:
 *   <ul class="fui-feature-list">
 *     <li><i class="ph ph-check icon-sm"></i> Feature description</li>
 *     <li><i class="ph ph-check icon-sm"></i> Another feature</li>
 *   </ul>
 *
 * File: src/styles/findborg-ui/components/feature-list.css
 */

.fui-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fui-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-subtle);
  padding: var(--space-xs) 0;
  line-height: 1.5;
}

.fui-feature-list li i,
.fui-feature-list li svg {
  color: var(--brand-2);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Size variant — medium text */
.fui-feature-list--md li {
  font-size: var(--typescale_body-medium_size);
}

/* Color variants for the icon */
.fui-feature-list--brand-1 li i,
.fui-feature-list--brand-1 li svg {
  color: var(--brand-1);
}

.fui-feature-list--brand-3 li i,
.fui-feature-list--brand-3 li svg {
  color: var(--brand-3);
}

.fui-feature-list--muted li i,
.fui-feature-list--muted li svg {
  color: var(--color-text-muted);
}

/* ========== components\fui-lightbox.css ========== */
/**
 * FINDBORG UI — LIGHTBOX COMPONENT
 * Reusable fullscreen image/media detail overlay.
 * Used by: Image Search, Video Mini-App (future), News (future)
 *
 * File: src/styles/findborg-ui/components/fui-lightbox.css
 */

/* ============================================
   BACKDROP & OVERLAY
   ============================================ */

.fui-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, visibility 150ms ease-out;
}

.fui-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.fui-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ============================================
   LAYOUT — Two-pane (image + detail)
   ============================================ */

.fui-lightbox__container {
  position: relative;
  z-index: 1;
  display: flex;
  width: 92vw;
  max-width: 1400px;
  max-height: 90dvh;
  gap: var(--space-lg);
}

.fui-lightbox__image-pane {
  flex: 1 1 65%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.fui-lightbox__image {
  max-width: 100%;
  max-height: 80dvh;
  object-fit: contain;
  border-radius: var(--radius-md);
  transform: scale(0.95);
  transition: transform 200ms ease-out;
}

.fui-lightbox.is-open .fui-lightbox__image {
  transform: scale(1);
}

.fui-lightbox__detail-pane {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow-y: auto;
  max-height: 80dvh;
}

/* ============================================
   CONTROLS — Close, Prev, Next
   ============================================ */

.fui-lightbox__close {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.fui-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fui-lightbox__nav-prev,
.fui-lightbox__nav-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.fui-lightbox__nav-prev { left: var(--space-md); }
.fui-lightbox__nav-next { right: var(--space-md); }

.fui-lightbox__nav-prev:hover,
.fui-lightbox__nav-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   DETAIL PANE CONTENT
   ============================================ */

.fui-lightbox__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.fui-lightbox__attribution-name {
  font-size: var(--typescale_title-medium_size);
  font-weight: 600;
  color: var(--color-text);
}

.fui-lightbox__attribution-handle {
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
}

.fui-lightbox__attribution-handle a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.fui-lightbox__attribution-handle a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.fui-lightbox__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

.fui-lightbox__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fui-lightbox__actions .button {
  justify-content: flex-start;
  gap: var(--space-sm);
}

.fui-lightbox__description {
  font-size: var(--typescale_body-small_size);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.fui-lightbox__description-label {
  font-size: var(--typescale_label-medium_size);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

/* ============================================
   MOBILE — Stack vertically
   ============================================ */

@media (max-width: 767px) {
  .fui-lightbox__container {
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    gap: 0;
  }

  .fui-lightbox__image-pane {
    flex: 0 0 auto;
    max-height: 55dvh;
  }

  .fui-lightbox__image {
    max-height: 55dvh;
    border-radius: 0;
  }

  .fui-lightbox__detail-pane {
    flex: 1 1 auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 45dvh;
    padding: var(--space-lg) var(--space-md);
  }

  .fui-lightbox__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fui-lightbox__actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .fui-lightbox__nav-prev,
  .fui-lightbox__nav-next {
    display: none;
  }
}

/* Tablet — side-by-side but more compact */
@media (min-width: 768px) and (max-width: 1023px) {
  .fui-lightbox__image-pane { flex: 1 1 60%; }
  .fui-lightbox__detail-pane { flex: 0 0 280px; }
}

/* Wide desktop */
@media (min-width: 1440px) {
  .fui-lightbox__image-pane { flex: 1 1 70%; }
  .fui-lightbox__detail-pane { flex: 0 0 360px; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .fui-lightbox,
  .fui-lightbox__image {
    transition: none;
  }
}

/* ========== Typography Utilities ========== */
/**
 * FINDBORG UI - MAIN ENTRY POINT
 * Import all design tokens, base styles, and component styles
 * 
 * File: src/styles/findborg-ui/index.css
 */

/* Vendor (fonts/icons) */
/* ============================================
   DESIGN TOKENS
   ============================================ */

/* ============================================
   BASE STYLES
   ============================================ */

/* ============================================
   UI COMPONENT STYLES
   ============================================ */
/* Form Components */
/* Feedback Components */
/* Structure Components */
/* Overlay Components */